Add a hillshade layer

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/icon_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/js/icon_control.js

@@ -0,0 +1,43 @@
+export class HillshadeControl {
+  constructor({ layerId }) {
+    this._layerId = layerId;
+  }
+
+  _onClick = () => {
+    if (this._map.getLayoutProperty(this._layerId, "visibility") == "none") {
+      this._map.setLayoutProperty(this._layerId, "visibility", "visible");
+      this._button.classList.add("maplibregl-ctrl-terrain-enabled");
+      this._button.title = "Disable terrain";
+    } else {
+      this._map.setLayoutProperty(this._layerId, "visibility", "none");
+      this._button.classList.remove("maplibregl-ctrl-terrain-enabled");
+      this._button.title = "Enable terrain";
+    }
+  };
+
+  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._button.classList.add("maplibregl-ctrl-terrain-enabled");
+    this._button.title = "Disable terrain";
+    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: 12,
+      },
     },
     sprite: spriteURL,
     light: {

src/layer/hillshade.js

@@ -0,0 +1,23 @@
+export const hillshading = {
+  id: "hillshading",
+  type: "hillshade",
+  source: "dem",
+  maxzoom: 17,
+  paint: {
+    "hillshade-exaggeration": [
+      "interpolate",
+      ["linear"],
+      ["zoom"],
+      6,
+      1,
+      12,
+      0.7,
+      16,
+      0.1,
+      17,
+      0,
+    ],
+    "hillshade-shadow-color": "hsla(30, 14%, 76%, 1)",
+    "hillshade-highlight-color": "hsla(30, 44%, 99%, 1)",
+  },
+};

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,