Introduce spritesheets [#238, #167]

* Townspots are rendered as part of the symbol layer and require a theme-specific spritesheet. * Deployments of basemaps style v3.0.0 requires specifying a sprite MapLibre style property just like fontstacks.
protomaps · May 9, 2024 · 5b7bf21 · 5b7bf21
1 parent ab20125
commit 5b7bf21
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 79 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,14 @@
+Styles v3.0.0
+------
+- introduce dependency on a spritesheet:
+		- example for `light` theme https://protomaps.github.io/basemaps-assets/sprites/v3/light`
+- Change townspots from separate symbol layer to sprite layer
+- Style deployments need to depend on the spritesheet assets in addition to fonts.
+
+Styles v2.0.0
+------
+- Standardize JS package.json on ES6 modules
+
 Tiles v3.5.1
 ------
 - Order landcover by kind consistently [#154]

diff --git a/app/src/MapViewComponent.tsx b/app/src/MapViewComponent.tsx
@@ -90,9 +90,9 @@ function getMaplibreStyle(
   style.layers = [];
 
   if (localSprites) {
-    // style.sprite = `${location.protocol}//${location.host}/${theme}`;
+    style.sprite = `${location.protocol}//${location.host}/${theme}`;
   } else {
-    // style.sprite = `https://protomaps.github.io/basemaps-assets/sprites/v3/${theme}`;
+    style.sprite = `https://protomaps.github.io/basemaps-assets/sprites/v3/${theme}`;
   }
 
   style.glyphs =

diff --git a/styles/package-lock.json b/styles/package-lock.json
diff --git a/styles/package.json b/styles/package.json
@@ -1,6 +1,6 @@
 {
   "name": "protomaps-themes-base",
-  "version": "2.0.0",
+  "version": "3.0.0",
   "description": "Protomaps basemap themes for MapLibre GL JS",
   "type": "module",
   "exports": "./dist/index.js",

diff --git a/styles/src/base_layers.ts b/styles/src/base_layers.ts
@@ -1692,29 +1692,6 @@ export function labels_layers(source: string, t: Theme): LayerSpecification[] {
         "text-halo-width": 2,
       },
     },
-    // {
-    //   id: "pois_high_zooms",
-    //   type: "symbol",
-    //   source: source,
-    //   minzoom: 15,
-    //   "source-layer": "pois",
-    //   "filter": ["any", [">=", ["get", "pmap:min_zoom"], 13]],
-    //   layout: {
-    //     "symbol-sort-key": ["get", "pmap:min_zoom"],
-    //     "text-font": ["Noto Sans Regular"],
-    //     "text-field": ["get", "name"],
-    //     "text-size": 11,
-    //     "text-max-width": 9,
-    //     "icon-padding": ["interpolate", ["linear"],
-    //       ["zoom"], 0, 2, 14, 2, 16, 20, 17, 2, 22, 2
-    //     ],
-    //   },
-    //   paint: {
-    //     "text-color": t.subplace_label,
-    //     "text-halo-color": t.subplace_label_halo,
-    //     "text-halo-width": 1.5,
-    //   },
-    // },
     {
       id: "physical_point_ocean",
       type: "symbol",
@@ -1824,68 +1801,21 @@ export function labels_layers(source: string, t: Theme): LayerSpecification[] {
         ],
         "text-transform": "uppercase",
       },
-      paint: {
-        "text-color": t.subplace_label,
-        "text-halo-color": t.subplace_label_halo,
-        "text-halo-width": 2.0,
-      },
-    },
-    {
-      id: "pois_important",
-      type: "symbol",
-      source: source,
-      "source-layer": "pois",
-      filter: ["any", ["<", ["get", "pmap:min_zoom"], 13]],
-      layout: {
-        "symbol-sort-key": ["get", "pmap:min_zoom"],
-        "text-font": ["Noto Sans Regular"],
-        "text-field": ["get", "name"],
-        "text-size": 11,
-        "text-max-width": 9,
-        "icon-padding": [
-          "interpolate",
-          ["linear"],
-          ["zoom"],
-          0,
-          2,
-          14,
-          2,
-          16,
-          20,
-          17,
-          2,
-          22,
-          2,
-        ],
-      },
       paint: {
         "text-color": t.subplace_label,
         "text-halo-color": t.subplace_label_halo,
         "text-halo-width": 1.5,
       },
     },
-    {
-      id: "places_locality_circle",
-      type: "circle",
-      source: source,
-      "source-layer": "places",
-      filter: ["==", "pmap:kind", "locality"],
-      paint: {
-        "circle-radius": 2,
-        "circle-stroke-width": 1.5,
-        "circle-stroke-color": t.city_circle_stroke,
-        "circle-color": t.city_circle,
-        "circle-translate": [-6, 0],
-      },
-      maxzoom: 8,
-    },
     {
       id: "places_locality",
       type: "symbol",
       source: source,
       "source-layer": "places",
       filter: ["==", "pmap:kind", "locality"],
       layout: {
+        "icon-image": ["step", ["zoom"], "townspot", 8, ""],
+        "icon-size": 0.7,
         "text-field": "{name}",
         "text-font": [
           "case",
@@ -1968,7 +1898,7 @@ export function labels_layers(source: string, t: Theme): LayerSpecification[] {
           ["linear"],
           ["zoom"],
           0,
-          2,
+          0,
           8,
           4,
           10,
@@ -1979,7 +1909,7 @@ export function labels_layers(source: string, t: Theme): LayerSpecification[] {
           2,
         ],
         "text-anchor": ["step", ["zoom"], "left", 8, "center"],
-        "text-radial-offset": 0.2,
+        "text-radial-offset": 0.4,
       },
       paint: {
         "text-color": t.city_label,