add control for contour lines

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 = "Ensable 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

@@ -10,6 +10,7 @@
   <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}}elevation-control.js{{&key_query}}"></script>
+  <script src="{{public_url}}contour-control.js{{&key_query}}"></script>
   <style>
     body {background:#fff;color:#333;font-family:Arial, sans-serif;}
     {{^is_terrain}}
@@ -22,6 +23,7 @@
     #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-elevation { padding-left: 5px; padding-right: 5px; }
+    .maplibre-ctrl-contour-active button { color: #33b5e5; font-weight: bold; }
   </style>
   {{/use_maplibre}}
   {{^use_maplibre}}
@@ -71,10 +73,9 @@
     };
     {{/is_terrain}}
     {{#is_terrain}}
+    
     let baseUrl = window.location.origin;
-	console.log(baseUrl);
+    
-	baseUrl = baseUrl + "/data/{{id}}/contour/{z}/{x}/{y}"
-	console.log(baseUrl);
     var style = {
       version: 8,
       sources: {
@@ -90,9 +91,10 @@
         },
         "contour": {
           "type": "vector",
-		  "tiles":  [ baseUrl ],
+          "tiles": [ baseUrl + "/data/{{id}}/contour/{z}/{x}/{y}" ],
         }
       },
+      "glyphs": "local://fonts/{fontstack}/{range}.pbf",
       "terrain": {
         "source": "terrain"
       },
@@ -123,6 +125,27 @@
             "line-opacity": 0.5,
             "line-width": ["match", ["get", "level"], 1, 1, 0.5]
           }
+        },
+        {
+          "id": 'contour-label',
+          "type": 'symbol',
+          "source": 'contour',
+          "source-layer": 'contours',
+          "filter": ['>', ['get', 'level'], 0],
+          "paint": {
+            'text-halo-color': 'white',
+            'text-halo-width': 1
+          },
+          "layout": {
+            'symbol-placement': 'line',
+            'text-size': 10,
+            'text-field': [
+              'concat',
+              ['number-format', ['get', 'ele'], {}],
+              '\''
+            ],
+            'text-font': ['Noto Sans Bold']
+          }
         }
       ]
     };
@@ -134,17 +157,33 @@
       maxPitch: 85,
       style: style
     });
+
     map.addControl(new maplibregl.NavigationControl({
       visualizePitch: true,
       showZoom: true,
       showCompass: true
     }));
     {{#is_terrain}}
+
     map.addControl(
       new maplibregl.TerrainControl({
         source: "terrain",
       })
     );
+
+    map.addControl(
+      new MaplibreContourControl({
+        source: "contour",
+        visibility: false,
+        layers: [ "contours", "contour-label" ]
+      })
+    );
+
+    //map.addControl(
+    //  new ElevationInfo({
+    //    url: baseUrl + "/data/{{id}}/elvation/{z}/{x}/{y}"
+    //  })
+    //);
     {{/is_terrain}}
     {{^is_terrain}}
 
@@ -153,6 +192,7 @@
       showInspectButton: false
     });
     map.addControl(inspect);
+
     map.on('styledata', function() {
       var layerList = document.getElementById('layerList');
       layerList.innerHTML = '';