Merge pull request #78 from jake-low/hillshades-contours

Add hillshading and contour lines
osmus · Sep 10, 2024 · e92d900 · e92d900
2 parents 17e077f + 2c388f2
commit e92d900
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 17 deletions.
diff --git a/js/mapController.js b/js/mapController.js
@@ -1381,8 +1381,8 @@ function updateTrailLayers() {
   ]);
   map.setPaintProperty('park-fill', "fill-color", [
     "case",
-    ["==", ["id"], focusedId], "#D8E8B7",
-    "#EFF5DC"
+    ["==", ["id"], focusedId], "#B1D06F",
+    "#DFEAB8"
   ]);
   map.setPaintProperty('park-outline', "line-color", [
     "case",
@@ -1778,4 +1778,4 @@ function getSublabelExpressions(items) {
     filters.push({"text-font": ['literal', [item.font ? item.font : "Americana-Regular"]]});
   }
   return filters;
-}
+}
diff --git a/styles/basemap.json b/styles/basemap.json
@@ -17,14 +17,22 @@
     "trails": {
       "type": "vector",
       "url": "https://dwuxtsziek7cf.cloudfront.net/trails.json"
+    },
+    "hillshade": {
+      "type": "raster",
+      "url": "https://dwuxtsziek7cf.cloudfront.net/hillshade.json"
+    },
+    "contours": {
+      "type": "vector",
+      "url": "https://dwuxtsziek7cf.cloudfront.net/contours-feet.json"
     }
   },
   "glyphs": "https://font.americanamap.org/{fontstack}/{range}.pbf",
   "layers": [
     {
       "id": "background",
       "type": "background",
-      "paint": {"background-color": "#f9f5ed"}
+      "paint": {"background-color": "#F2EADA"}
     },
     {
       "id": "park-fill",
@@ -35,6 +43,65 @@
         "fill-color": "hsla(0, 0%, 100%, 0)"
       }
     },
+    {
+      "id": "landuse-exclusion",
+      "type": "fill",
+      "source": "openmaptiles",
+      "source-layer": "landuse",
+      "filter": [
+        "all",
+        ["==", "$type", "Polygon"],
+        ["in", "class", "military"]
+      ],
+      "layout": {"visibility": "visible"},
+      "paint": {"fill-color": "hsl(0, 55%, 88%)", "fill-opacity": 1}
+    },
+    {
+      "id": "hillshade-background",
+      "type": "background",
+      "paint": {
+        "background-color": "#fff",
+        "background-opacity": ["interpolate", ["linear"], ["zoom"], 12, 0.0, 18, 0.3]
+      }
+    },
+    {
+      "id": "hillshade",
+      "type": "raster",
+      "source": "hillshade",
+      "paint": {"raster-opacity": ["interpolate", ["linear"], ["zoom"], 12, 0.5, 18, 0.1]}
+    },
+    {
+      "id": "contours",
+      "type": "line",
+      "source": "contours",
+      "source-layer": "contours",
+      "paint": {
+        "line-color": "#000000",
+        "line-opacity": ["case", ["get", "idx"], 0.2, 0.1],
+        "line-width": 0.5
+      }
+    },
+    {
+      "id": "contours-labels",
+      "type": "symbol",
+      "source": "contours",
+      "source-layer": "contours",
+      "minzoom": 12,
+      "filter": ["==", ["get", "idx"], true],
+      "layout": {
+        "text-field": "{ele} ft",
+        "text-font": ["Americana-Regular"],
+        "text-size": 8,
+        "symbol-placement": "line",
+        "symbol-spacing": ["interpolate", ["linear"], ["zoom"], 12, 150, 16, 600]
+      },
+      "paint": {
+        "text-color": "#666",
+        "text-halo-color": "hsla(0, 0%, 100%, 0.5)",
+        "text-halo-width": 1.5,
+        "text-halo-blur": 1
+      }
+    },
     {
       "id": "water",
       "type": "fill",
@@ -123,19 +190,6 @@
         ]
       }
     },
-    {
-      "id": "landuse-exclusion",
-      "type": "fill",
-      "source": "openmaptiles",
-      "source-layer": "landuse",
-      "filter": [
-        "all",
-        ["==", "$type", "Polygon"],
-        ["in", "class", "military"]
-      ],
-      "layout": {"visibility": "visible"},
-      "paint": {"fill-color": "hsl(0, 20%, 88%)", "fill-opacity": 1}
-    },
     {
       "id": "waterway-tunnel",
       "type": "line",
@@ -610,6 +664,7 @@
       "type": "line",
       "source": "openmaptiles",
       "source-layer": "boundary",
+      "minzoom": 3,
       "filter": ["in", "admin_level", 4, 6, 8],
       "layout": {"visibility": "visible"},
       "paint": {"line-color": "hsla(0, 0%, 60%, 0.5)", "line-dasharray": [2, 1]}