add landcover styling [#154] (#331)

* add landcover styling [#154] collapse multiple landuse layers into single layer to fade in after landcover zooms * styles 4.3.0
protomaps · Nov 5, 2024 · a5d7f63 · a5d7f63
1 parent 1de7755
commit a5d7f63
Show file tree

Hide file tree

Showing 4 changed files with 105 additions and 76 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,8 @@
+Styles v4.3.0
+------
+* Add landcover styling [#154]
+* Adjust appearance of landuse layers to fade in after landcover
+
 Styles v4.2.0
 ------
 * add icons for a few lapis and slategray POIs [#238, #163]

diff --git a/styles/package.json b/styles/package.json
@@ -1,6 +1,6 @@
 {
   "name": "protomaps-themes-base",
-  "version": "4.2.0",
+  "version": "4.3.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
@@ -28,6 +28,36 @@ export function nolabels_layers(
         "fill-color": t.earth,
       },
     },
+    ...((t.landcover
+      ? [
+          {
+            id: "landcover",
+            type: "fill",
+            source: source,
+            "source-layer": "landcover",
+            paint: {
+              "fill-color": [
+                "match",
+                ["get", "kind"],
+                "grassland",
+                t.landcover.grassland,
+                "barren",
+                t.landcover.barren,
+                "urban_area",
+                t.landcover.urban_area,
+                "farmland",
+                t.landcover.farmland,
+                "glacier",
+                t.landcover.glacier,
+                "scrub",
+                t.landcover.scrub,
+                t.landcover.forest,
+              ],
+              "fill-opacity": ["interpolate", ["linear"], ["zoom"], 5, 1, 7, 0],
+            },
+          },
+        ]
+      : []) as LayerSpecification[]),
     {
       id: "landuse_park",
       type: "fill",
@@ -43,16 +73,56 @@ export function nolabels_layers(
         "nature_reserve",
         "forest",
         "golf_course",
+        "wood",
+        "nature_reserve",
+        "forest",
+        "scrub",
+        "grassland",
+        "grass",
+        "military",
+        "naval_base",
+        "airfield",
       ],
       paint: {
+        "fill-opacity": ["interpolate", ["linear"], ["zoom"], 6, 0, 11, 1],
         "fill-color": [
-          "interpolate",
-          ["linear"],
-          ["zoom"],
-          0,
-          t.park_a,
-          12,
+          "case",
+          [
+            "in",
+            ["get", "kind"],
+            [
+              "literal",
+              [
+                "national_park",
+                "park",
+                "cemetery",
+                "protected_area",
+                "nature_reserve",
+                "forest",
+                "golf_course",
+              ],
+            ],
+          ],
           t.park_b,
+          [
+            "in",
+            ["get", "kind"],
+            ["literal", ["wood", "nature_reserve", "forest"]],
+          ],
+          t.wood_b,
+          ["in", ["get", "kind"], ["literal", ["scrub", "grassland", "grass"]]],
+          t.scrub_b,
+          ["in", ["get", "kind"], ["literal", ["glacier"]]],
+          t.glacier,
+          ["in", ["get", "kind"], ["literal", ["sand"]]],
+          t.sand,
+          [
+            "in",
+            ["get", "kind"],
+            ["literal", ["military", "naval_base", "airfield"]],
+          ],
+          t.zoo,
+          t.earth,
         ],
       },
     },
@@ -117,72 +187,6 @@ export function nolabels_layers(
         "fill-color": t.zoo,
       },
     },
-    {
-      id: "landuse_military",
-      type: "fill",
-      source: source,
-      "source-layer": "landuse",
-      filter: ["in", "kind", "military", "naval_base", "airfield"],
-      paint: {
-        "fill-color": t.zoo,
-      },
-    },
-    {
-      id: "landuse_wood",
-      type: "fill",
-      source: source,
-      "source-layer": "landuse",
-      filter: ["in", "kind", "wood", "nature_reserve", "forest"],
-      paint: {
-        "fill-color": [
-          "interpolate",
-          ["linear"],
-          ["zoom"],
-          0,
-          t.wood_a,
-          12,
-          t.wood_b,
-        ],
-      },
-    },
-    {
-      id: "landuse_scrub",
-      type: "fill",
-      source: source,
-      "source-layer": "landuse",
-      filter: ["in", "kind", "scrub", "grassland", "grass"],
-      paint: {
-        "fill-color": [
-          "interpolate",
-          ["linear"],
-          ["zoom"],
-          0,
-          t.scrub_a,
-          12,
-          t.scrub_b,
-        ],
-      },
-    },
-    {
-      id: "landuse_glacier",
-      type: "fill",
-      source: source,
-      "source-layer": "landuse",
-      filter: ["==", "kind", "glacier"],
-      paint: {
-        "fill-color": t.glacier,
-      },
-    },
-    {
-      id: "landuse_sand",
-      type: "fill",
-      source: source,
-      "source-layer": "landuse",
-      filter: ["==", "kind", "sand"],
-      paint: {
-        "fill-color": t.sand,
-      },
-    },
     {
       id: "landuse_aerodrome",
       type: "fill",

diff --git a/styles/src/themes.ts b/styles/src/themes.ts
@@ -280,13 +280,23 @@ export const LIGHT: Theme = {
     tangerine: "#CB6704",
     turquoise: "#00C3D4",
   },
+
+  landcover: {
+    grassland: "rgba(210, 239, 207, 1)",
+    barren: "rgba(255, 243, 215, 1)",
+    urban_area: "rgba(230, 230, 230, 1)",
+    farmland: "rgba(216, 239, 210, 1)",
+    glacier: "rgba(255, 255, 255, 1)",
+    scrub: "rgba(234, 239, 210, 1)",
+    forest: "rgba(196, 231, 210, 1)",
+  },
 };
 
 export const DARK: Theme = {
   background: "#34373d",
   earth: "#1f1f1f",
-  park_a: "#232325",
-  park_b: "#232325",
+  park_a: "#1c2421",
+  park_b: "#192a24",
   hospital: "#252424",
   industrial: "#222222",
   school: "#262323",
@@ -300,7 +310,7 @@ export const DARK: Theme = {
   beach: "#28282a",
   aerodrome: "#1e1e1e",
   runway: "#333333",
-  water: "#34373d",
+  water: "#31353f",
   zoo: "#222323",
   military: "#242323",
 
@@ -372,6 +382,16 @@ export const DARK: Theme = {
     tangerine: "#F19B6E",
     turquoise: "#00C3D4",
   },
+
+  landcover: {
+    grassland: "rgba(30, 41, 31, 1)",
+    barren: "rgba(38, 38, 36, 1)",
+    urban_area: "rgba(28, 28, 28, 1)",
+    farmland: "rgba(31, 36, 32, 1)",
+    glacier: "rgba(43, 43, 43, 1)",
+    scrub: "rgba(34, 36, 30, 1)",
+    forest: "rgba(28, 41, 37, 1)",
+  },
 };
 
 export const WHITE: Theme = {