Add a hillshade layer

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,19 @@
+export const hillshading = {
+  id: "hillshading",
+  type: "hillshade",
+  source: "dem",
+  paint: {
+    "hillshade-exaggeration": [
+      "interpolate",
+      ["linear"],
+      ["zoom"],
+      3,
+      0.2,
+      12,
+      0.5,
+    ],
+    "hillshade-shadow-color": "rgba(102,85,51,1)",
+    "hillshade-highlight-color": "rgba(255,255,204,1)",
+    "hillshade-accent-color": "rgba(0,0,0,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";
@@ -83,6 +84,8 @@ export function build(locales) {
 
     lyrFerry.ferry,
 
+    lyrHillshade.hillshading,
+
     lyrAeroway.runway,
     lyrAeroway.runwayArea,
     lyrAeroway.taxiway,