Styles 5.0 (#381)

* Styles 5.0 * rename to the more expected @protomaps/basemaps * rename Theme object to Flavor * unify styles API on a single function * viewer app uses styles 5.0 API * more renamings, rename IIFE script name * update CHANGELOG and version checker for styles 5.0 * rename generate_styles -> generate_style
protomaps · Feb 18, 2025 · 7caa0f5 · 7caa0f5
1 parent cd18b22
commit 7caa0f5
Show file tree

Hide file tree

Showing 13 changed files with 110 additions and 283 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,35 @@
+Styles v5.0.0
+------
+- This is a breaking major version.
+- NPM package renamed from `protomaps-themes-base` to `@protomaps/basemaps`
+- script-includes script name renamed from `protomaps-themes-base.js` to `basemaps.js`
+- `Theme` type renamed to `Flavor`
+- migrate `CONTRAST` flavor to external repo
+- Precomputed style JSON is no longer published to NPM
+- All layer generation functions unified into a single `layers` method. To migrate:
+
+Before:
+
+```js
+default("example","light","en")
+labels("example","light","en")
+layersWithCustomTheme("example",theme,"en")
+layersWithPartialCustomTheme("example",theme,"en")
+noLabelsWithCustomTheme("example",theme)
+labelsWithPartialCustomTheme("example",theme,"en")
+```
+
+After:
+
+```js
+layers("example",namedFlavor("light"),{lang:"en"})
+layers("example",namedFlavor("light"),{lang:"en",labelsOnly:true})
+layers("example",flavor,{lang:"en"})
+layers("example",{...flavor,buildings:"red"},{lang:"en"})
+layers("example",flavor)
+layers("example",{...flavor,buildings:"red"},{lang:"en",labelsOnly:true})
+```
+
 Tiles v4.3.0, Styles v4.5.0
 ------
 - Add housenumbers via @SiarheiFedartsou [#380]

diff --git a/app/src/MapView.tsx b/app/src/MapView.tsx
@@ -33,7 +33,7 @@ import {
   createSignal,
   onMount,
 } from "solid-js";
-import { type Theme, layers, namedTheme } from "../../styles/src/index.ts";
+import { type Flavor, layers, namedFlavor } from "../../styles/src/index.ts";
 import { language_script_pairs } from "../../styles/src/language.ts";
 import Nav from "./Nav";
 import {
@@ -43,12 +43,12 @@ import {
   parseHash,
 } from "./utils";
 
-const STYLE_MAJOR_VERSION = 4;
+const STYLE_MAJOR_VERSION = 5;
 
 const DEFAULT_TILES = "https://demo-bucket.protomaps.com/v4.pmtiles";
 
 const VERSION_COMPATIBILITY: Record<number, number[]> = {
-  4: [4],
+  4: [4, 5],
   3: [3],
   2: [2],
   1: [1],
@@ -133,7 +133,7 @@ function getMaplibreStyle(
   lang: string,
   localSprites: boolean,
   flavorName?: string,
-  flavor?: Theme,
+  flavor?: Flavor,
   tiles?: string,
   npmLayers?: LayerSpecification[],
   droppedArchive?: PMTiles,
@@ -184,7 +184,7 @@ function getMaplibreStyle(
 
 function StyleJsonPane(props: {
   flavorName: string;
-  flavor?: Theme;
+  flavor?: Flavor;
   lang: string;
   tiles: string;
 }) {
@@ -227,7 +227,7 @@ type MapLibreViewRef = { fit: () => void };
 
 function MapLibreView(props: {
   flavorName?: string;
-  flavor?: Theme;
+  flavor?: Flavor;
   lang: string;
   localSprites: boolean;
   showBoxes: boolean;
@@ -541,8 +541,8 @@ function MapView() {
     location.hash = createHash(location.hash, record);
   });
 
-  const flavor = (): Theme => {
-    return namedTheme(flavorName());
+  const flavor = (): Flavor => {
+    return namedFlavor(flavorName());
   };
 
   const drop: JSX.EventHandler<HTMLDivElement, DragEvent> = (event) => {

diff --git a/app/src/VisualTests.tsx b/app/src/VisualTests.tsx
@@ -5,7 +5,7 @@ import type { LayerSpecification } from "@maplibre/maplibre-gl-style-spec";
 import maplibregl from "maplibre-gl";
 import * as pmtiles from "pmtiles";
 import { For, createEffect, createSignal, onMount } from "solid-js";
-import layers from "../../styles/src/index.ts";
+import { layers, namedFlavor } from "../../styles/src/index.ts";
 import Nav from "./Nav";
 import rawExamples from "./examples.json";
 import { layersForVersion } from "./utils";
@@ -271,7 +271,7 @@ function VisualTests() {
       const leftLayers = await layersForVersion(leftLayersStr);
       const rightLayers = rightLayersStr
         ? await layersForVersion(rightLayersStr)
-        : layers("protomaps", "light", "en", "Latin");
+        : layers("protomaps", namedFlavor("light"), { lang: "en" });
 
       setDisplayInfo({
         leftTiles,

diff --git a/examples/basic.html b/examples/basic.html
@@ -5,7 +5,7 @@
         <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/maplibre-gl.css" crossorigin="anonymous">
         <script src="https://unpkg.com/[email protected]/dist/maplibre-gl.js" crossorigin="anonymous"></script>
         <script src="https://unpkg.com/[email protected]/dist/pmtiles.js"></script>
-        <script src="https://unpkg.com/protomaps-themes-base@4.5.0/dist/protomaps-themes-base.js"></script>
+        <script src="https://unpkg.com/@protomaps/basemaps@5.0.0/dist/basemaps.js"></script>
         <style>
             body {
                 margin: 0;
@@ -36,7 +36,7 @@
                     attribution: "<a href='https://openstreetmap.org/copyright'>© OpenStreetMap Contributors</a>"
                   },
                 },
-                layers: protomaps_themes_base.default("example_source", "light", "en")
+                layers: basemaps.layers("example_source", basemaps.namedFlavor("light"), {lang:"en"})
               },
             });
 

diff --git a/examples/data_sandwich.html b/examples/data_sandwich.html
@@ -5,7 +5,7 @@
         <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/maplibre-gl.css" crossorigin="anonymous">
         <script src="https://unpkg.com/[email protected]/dist/maplibre-gl.js" crossorigin="anonymous"></script>
         <script src="https://unpkg.com/[email protected]/dist/pmtiles.js"></script>
-        <script src="https://unpkg.com/protomaps-themes-base@4.5.0/dist/protomaps-themes-base.js"></script>
+        <script src="https://unpkg.com/@protomaps/basemaps@5.0.0/dist/basemaps.js"></script>
         <style>
             body {
                 margin: 0;
@@ -42,7 +42,7 @@
                   }
                 },
                 layers: [
-                  ...protomaps_themes_base.noLabels("example_source", "grayscale"),
+                  ...basemaps.layers("example_source", basemaps.namedFlavor("grayscale")),
                   {
                     "id": "overture_places",
                     "source": "overture_places",
@@ -62,7 +62,7 @@
                       ]
                     }
                   },
-                  ...protomaps_themes_base.labels("example_source", "grayscale", "en")
+                  ...basemaps.layers("example_source", basemaps.namedFlavor("grayscale"), {lang:"en", labelsOnly: true})
                 ]
               },
             });

diff --git a/examples/theme_language.html b/examples/theme_language.html
@@ -5,7 +5,7 @@
         <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/maplibre-gl.css" crossorigin="anonymous">
         <script src="https://unpkg.com/[email protected]/dist/maplibre-gl.js" crossorigin="anonymous"></script>
         <script src="https://unpkg.com/[email protected]/dist/pmtiles.js"></script>
-        <script src="https://unpkg.com/protomaps-themes-base@4.5.0/dist/protomaps-themes-base.js"></script>
+        <script src="https://unpkg.com/@protomaps/basemaps@5.0.0/dist/basemaps.js"></script>
         <style>
             body {
                 margin: 0;
@@ -36,7 +36,7 @@
                     attribution: "<a href='https://openstreetmap.org/copyright'>© OpenStreetMap Contributors</a>"
                   },
                 },
-                layers: protomaps_themes_base.default("example_source", "black", "zh-Hant")
+                layers: basemaps.layers("example_source", basemaps.namedFlavor("black"), {lang:"zh-Hant"})
               },
             });
         </script>

diff --git a/styles/package.json b/styles/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "protomaps-themes-base",
-  "version": "4.5.0",
+  "name": "@protomaps/basemaps",
+  "version": "5.0.0",
   "description": "Protomaps basemap themes for MapLibre GL JS",
   "type": "module",
   "main": "dist/cjs/index.cjs",
@@ -24,8 +24,8 @@
     "src"
   ],
   "scripts": {
-    "generate-styles": "tsx src/generate_styles.ts",
-    "build": "tsup && npm run generate-styles https://example.com/tiles.json",
+    "build": "tsup",
+    "generate-style": "tsx src/generate_style.ts",
     "test": "tsx test/index.test.ts",
     "tsc-watch": "tsc --noEmit --watch",
     "tsc": "tsc --noEmit",

diff --git a/styles/src/base_layers.ts b/styles/src/base_layers.ts
@@ -3,12 +3,12 @@ import {
   ExpressionSpecification,
   LayerSpecification,
 } from "@maplibre/maplibre-gl-style-spec";
+import { Flavor } from "./flavors";
 import { get_country_name, get_multiline_name } from "./language";
-import { Theme } from "./themes";
 
 export function nolabels_layers(
   source: string,
-  t: Theme,
+  t: Flavor,
 ): LayerSpecification[] {
   return [
     {
@@ -1381,7 +1381,7 @@ export function nolabels_layers(
 
 export function labels_layers(
   source: string,
-  t: Theme,
+  t: Flavor,
   lang: string,
   script?: string,
 ): LayerSpecification[] {