Styles 4 1 (#317)

* cleanup base layers; add landuse kind=runway * make halos more consistent * change light waterway labels to blue * remove dedicated peaks layer * add poi object to themes [#238] * add main sprites layer [#238] limit to 4 kinds of green icons for now * point sprites at v4 [#238] * add beach and zoo [#238] * styles 4.1.0; CHANGELOG
protomaps · Oct 10, 2024 · 8ec42aa · 8ec42aa
1 parent 6a009d0
commit 8ec42aa
Show file tree

Hide file tree

Showing 9 changed files with 116 additions and 89 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,11 @@
+Styles v4.1.0
+------
+- add icon sprites for six green kinds [#238]
+- point v4 styles at v4 sprites assets URL
+- change light theme water color to blue instead of white for contrast
+- consistent halo size across layers
+- add landuse `kind=runway`
+
 Tiles v4.0.1
 ------
 - fix `roads` `kind=ferry`, remove ferry `kind_detail` [#312]

diff --git a/app/src/MapViewComponent.tsx b/app/src/MapViewComponent.tsx
@@ -96,7 +96,7 @@ function getMaplibreStyle(
   if (localSprites) {
     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/v4/${theme}`;
   }
 
   style.glyphs =

diff --git a/app/src/VisualTestsComponent.tsx b/app/src/VisualTestsComponent.tsx
@@ -55,7 +55,7 @@ const createMap = (
       zoom: zoom,
       glyphs:
         "https://protomaps.github.io/basemaps-assets/fonts/{fontstack}/{range}.pbf",
-      sprite: "https://protomaps.github.io/basemaps-assets/sprites/v3/light",
+      sprite: "https://protomaps.github.io/basemaps-assets/sprites/v4/light",
       sources: {
         protomaps: {
           type: "vector",

diff --git a/app/src/examples.json b/app/src/examples.json
@@ -75,5 +75,12 @@
     "tags": ["roads"],
     "center": [-122.440512, 37.807891],
     "zoom": 16
+  },
+  {
+    "name": "edwards-afb",
+    "description": "edwards air force base runways",
+    "tags": ["landuse"],
+    "center": [-118.0726, 34.8328],
+    "zoom": 10
   }
 ]
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": "4.0.1",
+  "version": "4.1.0",
   "description": "Protomaps basemap themes for MapLibre GL JS",
   "type": "module",
   "main": "dist/cjs/index.cjs",

diff --git a/styles/src/base_layers.ts b/styles/src/base_layers.ts
@@ -236,20 +236,16 @@ export function nolabels_layers(
         ],
       },
     },
-    // {
-    //   id: "landuse_runway",
-    //   type: "fill",
-    //   source: source,
-    //   "source-layer": "landuse",
-    //   minzoom: 14,
-    //   filter: [
-    //     "any",
-    //     ["in", "kind_detail", "runway", "taxiway"],
-    //   ],
-    //   paint: {
-    //     "fill-color": t.runway,
-    //   },
-    // },
+    {
+      id: "landuse_runway",
+      type: "fill",
+      source: source,
+      "source-layer": "landuse",
+      filter: ["any", ["in", "kind", "runway", "taxiway"]],
+      paint: {
+        "fill-color": t.runway,
+      },
+    },
     {
       id: "water",
       type: "fill",
@@ -1204,40 +1200,6 @@ export function nolabels_layers(
         ],
       },
     },
-    // {
-    //   id: "roads_bridges_highway_casing",
-    //   type: "line",
-    //   source: source,
-    //   "source-layer": "roads",
-    //   minzoom: 12,
-    //   filter: ["all", [">", "level", 0], ["==", "kind", "highway"], ["!=", "link", 1]],
-    //   paint: {
-    //     "line-color": t.bridges_highway_casing,
-    //     "line-gap-width": [
-    //       "interpolate",
-    //       ["exponential", 1.6],
-    //       ["zoom"],
-    //       3,
-    //       0,
-    //       3.5,
-    //       0.5,
-    //       18,
-    //       32,
-    //     ],
-    //     "line-width": [
-    //       "interpolate",
-    //       ["exponential", 1.6],
-    //       ["zoom"],
-    //       7,
-    //       0,
-    //       7.5,
-    //       1,
-    //     ],
-    //   },
-    //   layout: {
-    //     visibility: casingVisibility,
-    //   },
-    // },
     {
       id: "roads_bridges_other",
       type: "line",
@@ -1416,37 +1378,16 @@ export function labels_layers(
       filter: ["in", "kind", "river", "stream"],
       layout: {
         "symbol-placement": "line",
-        "text-font": ["Noto Sans Regular"],
-        "text-field": get_multiline_name(
-          lang,
-          script,
-        ) as DataDrivenPropertyValueSpecification<string>,
-        "text-size": 12,
-        "text-letter-spacing": 0.3,
-      },
-      paint: {
-        "text-color": t.waterway_label,
-      },
-    },
-    {
-      id: "pois_peak",
-      type: "symbol",
-      source: source,
-      "source-layer": "pois",
-      filter: ["==", "kind", "peak"],
-      layout: {
         "text-font": ["Noto Sans Italic"],
         "text-field": get_multiline_name(
           lang,
           script,
         ) as DataDrivenPropertyValueSpecification<string>,
-        "text-size": ["interpolate", ["linear"], ["zoom"], 10, 8, 16, 12],
-        "text-letter-spacing": 0.1,
-        "text-max-width": 9,
+        "text-size": 12,
+        "text-letter-spacing": 0.2,
       },
       paint: {
-        "text-color": t.peak_label,
-        "text-halo-width": 1.5,
+        "text-color": t.ocean_label,
       },
     },
     {
@@ -1469,7 +1410,8 @@ export function labels_layers(
       paint: {
         "text-color": t.roads_label_minor,
         "text-halo-color": t.roads_label_minor_halo,
-        "text-halo-width": 2,
+        "text-halo-width": 1,
+        "text-halo-blur": 1,
       },
     },
     {
@@ -1489,7 +1431,7 @@ export function labels_layers(
         "fjord",
       ],
       layout: {
-        "text-font": ["Noto Sans Medium"],
+        "text-font": ["Noto Sans Italic"],
         "text-field": get_multiline_name(
           lang,
           script,
@@ -1510,7 +1452,7 @@ export function labels_layers(
       "source-layer": "water",
       filter: ["in", "kind", "lake", "water"],
       layout: {
-        "text-font": ["Noto Sans Medium"],
+        "text-font": ["Noto Sans Italic"],
         "text-field": get_multiline_name(
           lang,
           script,
@@ -1543,9 +1485,60 @@ export function labels_layers(
       paint: {
         "text-color": t.roads_label_major,
         "text-halo-color": t.roads_label_major_halo,
-        "text-halo-width": 2,
-      },
-    },
+        "text-halo-width": 1,
+        "text-halo-blur": 1,
+      },
+    },
+    ...((t.pois
+      ? [
+          {
+            id: "pois",
+            type: "symbol",
+            source: source,
+            "source-layer": "pois",
+            filter: [
+              "all",
+              [
+                "in",
+                ["get", "kind"],
+                [
+                  "literal",
+                  ["beach", "forest", "marina", "park", "peak", "zoo"],
+                ],
+              ],
+              [">=", ["zoom"], ["get", "min_zoom"]],
+            ],
+            layout: {
+              "icon-image": ["get", "kind"],
+              "text-font": ["Noto Sans Regular"],
+              "text-justify": "auto",
+              "text-field": get_multiline_name(
+                lang,
+                script,
+              ) as DataDrivenPropertyValueSpecification<string>,
+              "text-size": 10,
+              "text-max-width": 8,
+              "text-offset": [1, 0],
+              "text-variable-anchor": ["left", "right"],
+            },
+            paint: {
+              "text-color": [
+                "case",
+                [
+                  "in",
+                  ["get", "kind"],
+                  [
+                    "literal",
+                    ["beach", "forest", "marina", "park", "peak", "zoo"],
+                  ],
+                ],
+                t.pois.green,
+                t.earth,
+              ],
+            },
+          },
+        ]
+      : []) as LayerSpecification[]),
     {
       id: "places_subplace",
       type: "symbol",
@@ -1590,7 +1583,8 @@ export function labels_layers(
       paint: {
         "text-color": t.subplace_label,
         "text-halo-color": t.subplace_label_halo,
-        "text-halo-width": 1.5,
+        "text-halo-width": 1,
+        "text-halo-blur": 1,
       },
     },
     {
@@ -1705,6 +1699,7 @@ export function labels_layers(
         "text-color": t.city_label,
         "text-halo-color": t.city_label_halo,
         "text-halo-width": 1,
+        "text-halo-blur": 1,
       },
     },
     {
@@ -1731,7 +1726,8 @@ export function labels_layers(
       paint: {
         "text-color": t.state_label,
         "text-halo-color": t.state_label_halo,
-        "text-halo-width": 2,
+        "text-halo-width": 1,
+        "text-halo-blur": 1,
       },
     },
     {

diff --git a/styles/src/generate_styles.ts b/styles/src/generate_styles.ts
@@ -30,7 +30,7 @@ for (const theme of ["light", "dark", "white", "grayscale", "black"]) {
         },
       },
       layers: layers,
-      sprite: `https://protomaps.github.io/basemaps-assets/sprites/v3/${theme}`,
+      sprite: `https://protomaps.github.io/basemaps-assets/sprites/v4/${theme}`,
       glyphs:
         "https://protomaps.github.io/basemaps-assets/fonts/{fontstack}/{range}.pbf",
     };

diff --git a/styles/src/themes.ts b/styles/src/themes.ts
@@ -51,7 +51,6 @@ export interface Theme {
 
   railway: string;
   boundaries: string;
-  waterway_label: string;
 
   bridges_other_casing: string;
   bridges_minor_casing: string;
@@ -69,14 +68,23 @@ export interface Theme {
   roads_label_major: string;
   roads_label_major_halo: string;
   ocean_label: string;
-  peak_label: string;
   subplace_label: string;
   subplace_label_halo: string;
   city_label: string;
   city_label_halo: string;
   state_label: string;
   state_label_halo: string;
   country_label: string;
+
+  pois?: Pois;
+
+  // deprecated
+  peak_label: string;
+  waterway_label: string;
+}
+
+export interface Pois {
+  green: string;
 }
 
 export const CONTRAST: Theme = {
@@ -230,7 +238,7 @@ export const LIGHT: Theme = {
   roads_label_minor_halo: "#ffffff",
   roads_label_major: "#938a8d",
   roads_label_major_halo: "#ffffff",
-  ocean_label: "#ffffff",
+  ocean_label: "#728dd4",
   peak_label: "#7e9aa0",
   subplace_label: "#8f8f8f",
   subplace_label_halo: "#e0e0e0",
@@ -239,6 +247,10 @@ export const LIGHT: Theme = {
   state_label: "#b3b3b3",
   state_label_halo: "#e0e0e0",
   country_label: "#a3a3a3",
+
+  pois: {
+    green: "#20834D",
+  },
 };
 
 export const DARK: Theme = {
@@ -320,6 +332,10 @@ export const DARK: Theme = {
   state_label: "#3d3d3d",
   state_label_halo: "#1f1f1f",
   country_label: "#5c5c5c",
+
+  pois: {
+    green: "#30C573",
+  },
 };
 
 export const WHITE: Theme = {