add elevation info in preview

public/resources/elevation-control.js

@@ -0,0 +1,51 @@
+class ElevationInfoControl {
+    constructor(options) {
+      this.url = options["url"];
+    }
+
+    getDefaultPosition() {
+      const defaultPosition = "bottom-left";
+      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.controlContainer.classList.add("maplibre-ctrl-elevation");
+      this.controlContainer.textContent = "Elevation: Click on Map";
+
+      map.on('click', (e) => {
+        var url = this.url;
+        var coord = {"z": Math.floor(map.getZoom()), "x": e.lngLat["lng"], "y": e.lngLat["lat"]};
+        for(var key in coord) {
+          url = url.replace(new RegExp('{'+ key +'}','g'), coord[key]);
+        }
+
+        let request = new XMLHttpRequest();
+        request.open("GET", url, true);
+        request.onload = () => {
+          if (request.status !== 200) {
+            this.controlContainer.textContent = "Elevation: No value";
+          } else {
+            this.controlContainer.textContent = `Elevation: ${JSON.parse(request.responseText).elevation} (${JSON.stringify(coord)})`;
+          }
+        }
+        request.send();
+      });
+      return this.controlContainer;
+    }
+
+    onRemove() {
+      if (
+        !this.controlContainer ||
+        !this.controlContainer.parentNode ||
+        !this.map
+      ) {
+        return;
+      }
+      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}}elevation-control.js{{&key_query}}"></script>
   <style>
     body {background:#fff;color:#333;font-family:Arial, sans-serif;}
     {{^is_terrain}}
@@ -20,6 +21,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-elevation { padding-left: 5px; padding-right: 5px; }
   </style>
   {{/use_maplibre}}
   {{^use_maplibre}}
@@ -69,6 +71,9 @@
     };
     {{/is_terrain}}
     {{#is_terrain}}
+
+    let baseUrl = window.location.origin;
+
     var style = {
       version: 8,
       sources: {
@@ -86,11 +91,11 @@
       "terrain": {
         "source": "terrain"
       },
-      layers: [
+      "layers": [
         {
           "id": "background",
           "paint": {
-            {{^if is_terrainrgb}}
+            {{#if is_terrainrgb}}
             "background-color": "hsl(190, 99%, 63%)"
             {{else}}
             "background-color": "hsl(0, 100%, 25%)"
@@ -118,24 +123,34 @@
       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 ElevationInfoControl({
+        url: baseUrl + "/data/{{id}}/elevation/{z}/{x}/{y}"
+      })
+    );
     {{/is_terrain}}
     {{^is_terrain}}
+
     var inspect = new MaplibreInspect({
       showInspectMap: true,
       showInspectButton: false
     });
     map.addControl(inspect);
+
     map.on('styledata', function() {
       var layerList = document.getElementById('layerList');
       layerList.innerHTML = '';