Add a hillshade layer

package.json

@@ -42,7 +42,6 @@
     "color-rgba": "^2.4.0",
     "events": "^3.3.0",
     "fonteditor-core": "^2.1.11",
-    "maplibre-gl": "^2.4.0",
     "openmapsamples": "github:adamfranco/OpenMapSamples",
     "openmapsamples-maplibre": "github:adamfranco/OpenMapSamples-MapLibre",
     "tokenfield": "^1.5.2"
@@ -64,7 +63,7 @@
     "esbuild": "^0.17.4",
     "glob": "^10.3.10",
     "google-font-installer": "^1.2.0",
-    "maplibre-gl": "^2.4.0",
+    "maplibre-gl": "^4.7.1",
     "mocha": "^10.1.0",
     "npm-run-all": "^4.1.5",
     "open": "^8.4.2",

src/americana.js

@@ -11,6 +11,7 @@ import "maplibre-gl/dist/maplibre-gl.css";
 import * as search from "./search.js";
 
 import LegendControl from "./js/legend_control.js";
+import { HillshadeControl } from "./js/hillshade_control.js";
 import * as LegendConfig from "./js/legend_config.js";
 import SampleControl from "openmapsamples-maplibre/OpenMapSamplesControl.js";
 import { default as OpenMapTilesSamples } from "openmapsamples/samples/OpenMapTiles/index.js";
@@ -68,6 +69,7 @@ function shieldDefLoad(shields) {
 
   map.addControl(new search.PhotonSearchControl(), "top-left");
   map.addControl(new maplibregl.NavigationControl(), "top-left");
+  map.addControl(new HillshadeControl({ layerId: "hillshading" }), "top-left");
 
   window.addEventListener("languagechange", (event) => {
     console.log(`Changed to ${navigator.languages}`);

src/constants/color.js

@@ -1,6 +1,9 @@
 export const backgroundFill = `hsl(30, 44%, 96%)`;
 export const backgroundFillTranslucent = `hsla(30, 44%, 96%, 0.8)`;
 
+export const hillshadeShadow = "hsla(30, 14%, 63%, 1)";
+export const hillshadeHighlight = "hsla(30, 44%, 99%, 1)";
+
 export const waterFill = "hsl(211, 50%, 85%)";
 export const waterFillTranslucent = "hsla(211, 50%, 85%, 0.5)";
 export const waterIntermittentFill = "hsla(211, 60%, 85%, 0.3)";

src/js/hillshade_control.js

@@ -0,0 +1,49 @@
+export class HillshadeControl {
+  constructor({ layerId }) {
+    this._layerId = layerId;
+  }
+
+  _updateButton() {
+    if (this._map.getLayoutProperty(this._layerId, "visibility") == "none") {
+      this._button.classList.remove("maplibregl-ctrl-terrain-enabled");
+      this._button.title = "Enable terrain";
+    } else {
+      this._button.classList.add("maplibregl-ctrl-terrain-enabled");
+      this._button.title = "Disable terrain";
+    }
+  }
+
+  _onClick = () => {
+    const newValue =
+      this._map.getLayoutProperty(this._layerId, "visibility") == "none"
+        ? "visible"
+        : "none";
+    this._map.setLayoutProperty(this._layerId, "visibility", newValue);
+    this._updateButton();
+  };
+
+  onAdd(map) {
+    this._map = map;
+
+    this._container = document.createElement("div");
+    this._container.className = "maplibregl-ctrl maplibregl-ctrl-group";
+
+    this._button = document.createElement("button");
+    this._button.className = "maplibregl-ctrl-terrain";
+    this._updateButton();
+    this._button.addEventListener("click", this._onClick);
+    this._container.append(this._button);
+
+    const span = document.createElement("span");
+    span.className = "maplibregl-ctrl-icon";
+    span.setAttribute("aria-hidden", "true");
+    this._button.append(span);
+
+    return this._container;
+  }
+
+  onRemove() {
+    this._container.remove();
+    this._map = undefined;
+  }
+}

src/js/style.js

@@ -11,6 +11,18 @@ export function build(tileURL, spriteURL, glyphURL, locales) {
         url: tileURL,
         type: "vector",
       },
+      dem: {
+        attribution:
+          '<a target="_blank" rel="noopener" href="https://registry.opendata.aws/terrain-tiles/">Terrain Tiles</a>',
+        type: "raster-dem",
+        tiles: [
+          "https://s3.amazonaws.com/elevation-tiles-prod/terrarium/{z}/{x}/{y}.png",
+        ],
+        encoding: "terrarium",
+        tileSize: 256,
+        // The actual maxzoom is 15
+        maxzoom: 13,
+      },
     },
     sprite: spriteURL,
     light: {

src/layer/hillshade.js

@@ -0,0 +1,23 @@
+import * as Color from "../constants/color.js";
+
+export const hillshading = {
+  id: "hillshading",
+  type: "hillshade",
+  source: "dem",
+  layout: {
+    visibility: "none",
+  },
+  paint: {
+    "hillshade-exaggeration": [
+      "interpolate",
+      ["linear"],
+      ["zoom"],
+      12,
+      0.5,
+      17,
+      0.3,
+    ],
+    "hillshade-shadow-color": Color.hillshadeShadow,
+    "hillshade-highlight-color": Color.hillshadeHighlight,
+  },
+};

src/layer/index.js

@@ -8,6 +8,7 @@ import * as lyrBackground from "./background.js";
 import * as lyrBoundary from "./boundary.js";
 import * as lyrConstruction from "./construction.js";
 import * as lyrHighwayShield from "./highway_shield.js";
+import * as lyrHillshade from "./hillshade.js";
 import * as lyrLanduse from "./landuse.js";
 import * as lyrOneway from "./oneway.js";
 import * as lyrPark from "./park.js";
@@ -41,6 +42,8 @@ export function build(locales) {
     lyrBoundary.stateCasing,
     lyrBoundary.countryCasing,
 
+    lyrHillshade.hillshading,
+
     lyrWater.waterLine,
     lyrWater.waterLineIntermittent,
     lyrWater.waterway,