Completed ground elevation provider and added to mouse info panel

client/public/stylesheets/panels/mouseinfo.css

@@ -106,4 +106,14 @@
 	text-overflow: ellipsis;
 	white-space: nowrap;
 	color: var(--background-offwhite);
+}
+
+.elevation::after {
+    content: attr(data-value);
+	font-weight: bold;
+	font-size: 13px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	color: var(--background-offwhite);
 }

client/routes/api/elevation.js

@@ -1,13 +1,23 @@
 const express = require('express');
+var fs = require('fs');
 const router = express.Router();
 const TileSet = require('srtm-elevation').TileSet;
+const SRTMElevationDownloader = require('srtm-elevation').SRTMElevationDownloader;
 
-const tileset = new TileSet('./data/');
+let rawdata = fs.readFileSync('../olympus.json');
+let config = JSON.parse(rawdata);
+var tileset = null;
+
+if (config["client"] === undefined || config["client"]["elevationProvider"] === undefined)
+    tileset = new TileSet('./hgt');
+else
+    tileset = new TileSet('./hgt', {downloader: new SRTMElevationDownloader('./hgt', config["client"]["elevationProvider"])});
 
 router.get( "/:lat/:lng", ( req, res ) => {
     tileset.getElevation([req.params.lat, req.params.lng], function(err, elevation) {
         if (err) {
             console.log('getElevation failed: ' + err.message);
+            res.send("n/a");
         } else {
             res.send(String(elevation));
         }

client/src/map/map.ts

@@ -631,18 +631,6 @@ export class Map extends L.Map {
             /* Update the polygon being drawn with the current position of the mouse cursor */
             this.getSelectedCoalitionArea()?.moveActiveVertex(e.latlng);
         }
-
-        var xhr = new XMLHttpRequest();
-        xhr.open('GET', `api/elevation/${this.getMouseCoordinates().lat}/${this.getMouseCoordinates().lng}`, true);
-        xhr.responseType = 'json';
-        xhr.onload = () => {
-            var status = xhr.status;
-            if (status === 200) 
-                console.log(xhr.response);
-            else 
-                console.error(`Error retrieving country codes`) 
-        };
-        xhr.send();
     }
 
     #onKeyDown(e: any) {

client/src/panels/mouseinfopanel.ts

@@ -1,6 +1,6 @@
 import { Icon, LatLng, Marker, Polyline } from "leaflet";
 import { getApp } from "..";
-import { distance, bearing, zeroAppend, mToNm, nmToFt } from "../other/utils";
+import { distance, bearing, zeroAppend, mToNm, nmToFt, mToFt } from "../other/utils";
 import { Unit } from "../unit/unit";
 import { Panel } from "./panel";
 import formatcoords from "formatcoords";
@@ -11,6 +11,7 @@ export class MouseInfoPanel extends Panel {
     #measureIcon: Icon;
     #measureLine: Polyline = new Polyline([], { color: '#2d3e50', weight: 3, opacity: 0.5, smoothFactor: 1, interactive: false });
     #measureBox: HTMLElement;
+    #elevationRequest: XMLHttpRequest | null = null;
 
     constructor(ID: string) {
         super( ID );
@@ -53,6 +54,30 @@ export class MouseInfoPanel extends Panel {
         var coordString = coords.format('XDDMMss', {decimalPlaces: 4});
         this.#drawCoordinates("ref-mouse-position-latitude", "mouse-position-latitude", coordString.split(" ")[0]);
         this.#drawCoordinates("ref-mouse-position-longitude", "mouse-position-longitude", coordString.split(" ")[1]);
+
+        /* Get the ground elevation from the server endpoint */
+        if (this.#elevationRequest == null) {
+            this.#elevationRequest = new XMLHttpRequest();
+            this.#elevationRequest.open('GET', `api/elevation/${mousePosition.lat}/${mousePosition.lng}`, true);
+            this.#elevationRequest.timeout = 500; // ms
+            this.#elevationRequest.responseType = 'json';
+            this.#elevationRequest.onload = () => {
+                var status = this.#elevationRequest?.status;
+                if (status === 200) {
+                    const el = this.getElement().querySelector(`#mouse-position-elevation`) as HTMLElement;
+                    try {
+                        el.dataset.value = `${Math.floor(mToFt(parseFloat(this.#elevationRequest?.response)))} ft`;
+                    } catch {
+                        el.dataset.value = `N/A`;
+                    }
+                }
+                this.#elevationRequest = null;
+            };
+            this.#elevationRequest.ontimeout = () => {this.#elevationRequest = null;}
+            this.#elevationRequest.onerror = () => {this.#elevationRequest = null;}
+            this.#elevationRequest.onabort = () => {this.#elevationRequest = null;}
+            this.#elevationRequest.send();
+        }
     }
 
     #onMapClick(e: any) {
@@ -115,7 +140,6 @@ export class MouseInfoPanel extends Panel {
     }
 
     #onMouseMove(e: any) {
-
         this.#update();
         this.#drawMeasureLine();
     }

client/views/panels/mouseinfo.ejs

@@ -25,9 +25,11 @@
     <div id="coordinates-tool">
         <dl class="ol-data-grid">
             <dt id="ref-mouse-position-latitude" data-label="?"></dt>
-            <dd id="mouse-position-latitude" class="coordinates" data-dd="---" data-mm="---" data-ss="--" data-sss="--"></dd>
+            <dd id="mouse-position-latitude" class="coordinates"></dd>
             <dt id="ref-mouse-position-longitude" data-label="?"></dt>
-            <dd id="mouse-position-longitude" class="coordinates" data-dd="---" data-mm="---" data-ss="--" data-sss="--"></dd>
+            <dd id="mouse-position-longitude" class="coordinates"></dd>
+            <dt id="ref-mouse-position-elevation" data-label="H"></dt>
+            <dd id="mouse-position-elevation" class="elevation" data-value="---"></dd>
         </dl>
     </div>
 

olympus.json

@@ -7,5 +7,12 @@
 		"gameMasterPassword": "password",
 		"blueCommanderPassword": "bluepassword",
 		"redCommanderPassword": "redpassword"
+	}, 
+	"client": {
+		"elevationProvider": {
+			"provider": "https://srtm.fasma.org/{lat}{lng}.SRTMGL3S.hgt.zip",
+			"username": null,
+			"password": null
+		}
 	}
 }