WIP: Add contour line endpoint for terrain

package.json

@@ -37,6 +37,7 @@
     "express": "5.0.1",
     "handlebars": "4.7.8",
     "http-shutdown": "1.2.2",
+    "maplibre-contour": "^0.1.0",
     "morgan": "1.10.0",
     "pbf": "4.0.1",
     "pmtiles": "3.0.7",

public/resources/contour-control.js

@@ -0,0 +1,65 @@
+class MaplibreContourControl {
+  constructor(options) {
+    this.source = options["source"];
+    this.confLayers = options["layers"];
+    this.visibility = options["visibility"];
+  }
+
+  getDefaultPosition() {
+    const defaultPosition = "top-right";
+    return defaultPosition;
+  }
+
+  onAdd(map) {
+    this.map = map;
+    this.controlContainer = document.createElement("div");
+    this.controlContainer.classList.add("maplibregl-ctrl");
+    this.controlContainer.classList.add("maplibregl-ctrl-group");
+    this.contourButton = document.createElement("button");
+    this.contourButton.type = "button";
+    this.contourButton.textContent = "C";
+
+    this.map.on("style.load", () => {
+      this.confLayers.forEach(layer => {
+        this.map.setLayoutProperty(layer, "visibility", this.visibility ? "visible" : "none");
+        if (this.visibility) {
+          this.controlContainer.classList.add("maplibre-ctrl-contour-active");
+          this.contourButton.title = "Disable Contours";
+        } else {
+          this.contourButton.title = "Enable Contours";
+        }
+      });
+    });
+
+    this.contourButton.addEventListener("click", () => {
+      this.confLayers.forEach(layer => {
+        var visibility = this.map.getLayoutProperty(layer, "visibility");
+        if (visibility === "visible") {
+          this.map.setLayoutProperty(layer, "visibility", "none");
+          this.controlContainer.classList.remove("maplibre-ctrl-contour-active");
+          this.contourButton.title = "Disable Contours";
+        } else {
+          this.controlContainer.classList.add("maplibre-ctrl-contour-active");
+          this.map.setLayoutProperty(layer, "visibility", "visible");
+          this.contourButton.title = "Enable Contours";
+        }
+      });
+    });
+    this.controlContainer.appendChild(this.contourButton);
+    return this.controlContainer;
+  }
+
+  onRemove() {
+    if (
+      !this.controlContainer ||
+      !this.controlContainer.parentNode ||
+      !this.map ||
+      !this.contourButton
+    ) {
+      return;
+    }
+    this.contourButton.removeEventListener("click");
+    this.controlContainer.parentNode.removeChild(this.controlContainer);
+    this.map = undefined;
+  }
+};

public/templates/data.tmpl

@@ -9,6 +9,7 @@
   <link rel="stylesheet" type="text/css" href="{{public_url}}maplibre-gl-inspect.css{{&key_query}}" />
   <script src="{{public_url}}maplibre-gl.js{{&key_query}}"></script>
   <script src="{{public_url}}maplibre-gl-inspect.js{{&key_query}}"></script>
+  <script src="{{public_url}}contour-control.js{{&key_query}}"></script>
   {{^is_light}}
   <script src="{{public_url}}elevation-control.js{{&key_query}}"></script>
   {{/is_light}}
@@ -23,6 +24,7 @@
     h1 {position:absolute;top:5px;right:0;width:240px;margin:0;line-height:20px;font-size:20px;}
     #layerList {position:absolute;top:35px;right:0;bottom:0;width:240px;overflow:auto;}
     #layerList div div {width:15px;height:15px;display:inline-block;}
+    .maplibre-ctrl-contour-active button { color: #33b5e5; font-weight: bold; }
     {{^is_light}}
     .maplibre-ctrl-elevation { padding-left: 5px; padding-right: 5px; }
     {{/is_light}}
@@ -76,6 +78,8 @@
     {{/is_terrain}}
     {{#is_terrain}}
 
+    let baseUrl = window.location.origin;
+
     var style = {
       version: 8,
       sources: {
@@ -88,8 +92,13 @@
           "type": "raster-dem",
           "url": "{{public_url}}data/{{id}}.json",
           "encoding": "{{terrain_encoding}}"
+        },
+        "contour": {
+          "type": "vector",
+          "tiles": [ baseUrl + "/data/{{id}}/contour/{z}/{x}/{y}" ],
         }
       },
+      "glyphs": "/fonts/{fontstack}/{range}.pbf",
       "terrain": {
         "source": "terrain"
       },
@@ -114,6 +123,33 @@
             "hillshade-illumination-direction": 315,
             "hillshade-exaggeration": 0.8
           }
+        },
+        {
+          "id": "contours",
+          "type": "line",
+          "source": "contour",
+          "source-layer": "contours",
+          "paint": {
+            "line-opacity": 1,
+            "line-width": ["match", ["get", "level"], 1, 1, 0.5]
+          }
+        },
+        {
+          "id": "contour-label",
+          "type": "symbol",
+          "source": "contour",
+          "source-layer": "contours",
+          "filter": [">", ["get", "ele"], 0 ],
+          "paint": {
+            "text-halo-color": "white",
+            "text-halo-width": 1
+          },
+          "layout": {
+            "symbol-placement": "line",
+            "text-size": 10,
+            "text-field": "{ele}",
+            "text-font": ["Noto Sans Bold"]
+          }
         }
       ]
     };
@@ -139,6 +175,14 @@
       })
     );
 
+    map.addControl(
+      new MaplibreContourControl({
+        source: "contour",
+        visibility: false,
+        layers: [ "contours", "contour-label" ]
+      })
+    );
+
     {{^is_light}}
     map.addControl(
       new ElevationInfoControl({