diff --git a/client/public/stylesheets/panels/mouseinfo.css b/client/public/stylesheets/panels/mouseinfo.css index df33c28b..905c26ba 100644 --- a/client/public/stylesheets/panels/mouseinfo.css +++ b/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); } \ No newline at end of file diff --git a/client/routes/api/elevation.js b/client/routes/api/elevation.js index 84818cbf..33c2e926 100644 --- a/client/routes/api/elevation.js +++ b/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)); } diff --git a/client/src/map/map.ts b/client/src/map/map.ts index c50db693..da0da642 100644 --- a/client/src/map/map.ts +++ b/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) { diff --git a/client/src/panels/mouseinfopanel.ts b/client/src/panels/mouseinfopanel.ts index 90ba077c..bec57566 100644 --- a/client/src/panels/mouseinfopanel.ts +++ b/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(); } diff --git a/client/views/panels/mouseinfo.ejs b/client/views/panels/mouseinfo.ejs index c4434cc6..79557502 100644 --- a/client/views/panels/mouseinfo.ejs +++ b/client/views/panels/mouseinfo.ejs @@ -25,9 +25,11 @@