Introduce spritesheets [#238, #167] (#246)

* remove unused city_circle and city_circle_stroke theme variables. [#238] * styles v3.0.0: 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. * update changelog copy
protomaps · May 10, 2024 · 5d30ba0 · 5d30ba0
1 parent c4c2211
commit 5d30ba0
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 93 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`
+		- Style deployments need to depend on the spritesheet assets in addition to fonts.
+- Migrate town labels to single "symbol" style layer to specify linked "icon" and "text", using the new spritesheet to source the icon's image. This resolves a bug where townspot icons in the old places_locality_circle "circle" style layer were often orphaned (still displayed) even if the related text in the places_locality "symbol" style layer couldn't be placed. The circle style layer has been removed and consolidated into the symbol style layer.
+
+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,

diff --git a/styles/src/themes.ts b/styles/src/themes.ts
@@ -79,8 +79,6 @@ export interface Theme {
   peak_label: string;
   subplace_label: string;
   subplace_label_halo: string;
-  city_circle: string;
-  city_circle_stroke: string;
   city_label: string;
   city_label_halo: string;
   state_label: string;
@@ -169,8 +167,6 @@ export const CONTRAST: Theme = {
   peak_label: "#61bb5b",
   subplace_label: "#757d91",
   subplace_label_halo: "#ffffff",
-  city_circle: "#666666",
-  city_circle_stroke: "#ffffff",
   city_label: "#3c3c3c",
   city_label_halo: "#ffffff",
   state_label: "#777777",
@@ -259,8 +255,6 @@ export const LIGHT: Theme = {
   peak_label: "#7e9aa0",
   subplace_label: "#8f8f8f",
   subplace_label_halo: "#e0e0e0",
-  city_circle: "#ffffff",
-  city_circle_stroke: "#a3a3a3",
   city_label: "#5c5c5c",
   city_label_halo: "#e0e0e0",
   state_label: "#b3b3b3",
@@ -349,8 +343,6 @@ export const DARK: Theme = {
   peak_label: "#898080",
   subplace_label: "#525252",
   subplace_label_halo: "#1f1f1f",
-  city_circle: "#000000",
-  city_circle_stroke: "#7a7a7a",
   city_label: "#7a7a7a",
   city_label_halo: "#212121",
   state_label: "#3d3d3d",
@@ -439,8 +431,6 @@ export const WHITE: Theme = {
   peak_label: "#adadad",
   subplace_label: "#8f8f8f",
   subplace_label_halo: "#ffffff",
-  city_circle: "#ffffff",
-  city_circle_stroke: "#adadad",
   city_label: "#5c5c5c",
   city_label_halo: "#ffffff",
   state_label: "#b3b3b3",
@@ -529,8 +519,6 @@ export const GRAYSCALE: Theme = {
   peak_label: "#5c5c5c",
   subplace_label: "#7a7a7a",
   subplace_label_halo: "#cccccc",
-  city_circle: "#c2c2c2",
-  city_circle_stroke: "#7a7a7a",
   city_label: "#474747",
   city_label_halo: "#cccccc",
   state_label: "#999999",
@@ -619,8 +607,6 @@ export const BLACK: Theme = {
   peak_label: "#707070",
   subplace_label: "#5c5c5c",
   subplace_label_halo: "#141414",
-  city_circle: "#000000",
-  city_circle_stroke: "#666666",
   city_label: "#999999",
   city_label_halo: "#141414",
   state_label: "#3d3d3d",