diff --git a/frontend/server/public/stylesheets/panels/mouseinfo.css b/frontend/server/public/stylesheets/panels/mouseinfo.css
index c82b25e4..384933cc 100644
--- a/frontend/server/public/stylesheets/panels/mouseinfo.css
+++ b/frontend/server/public/stylesheets/panels/mouseinfo.css
@@ -107,4 +107,23 @@
#coordinates-tool[data-location-system="MGRS"] [data-location-system="MGRS"],
#coordinates-tool[data-location-system="UTM"] [data-location-system="UTM"] {
display:flex;
+}
+
+/* Unit Coordinates */
+#unit-coordinates .elevation::after {
+ content: attr(data-value)
+}
+
+#unit-coordinates[data-location-system] [data-location-system] {
+ display:none;
+}
+
+#unit-coordinates[data-location-system="LatLng"] [data-location-system="LatLng"],
+#unit-coordinates[data-location-system="MGRS"] [data-location-system="MGRS"],
+#unit-coordinates[data-location-system="UTM"] [data-location-system="UTM"] {
+ display:flex;
+}
+
+#unit-coordinates-title {
+ font-size: 10px;
}
\ No newline at end of file
diff --git a/frontend/server/views/panels/mouseinfo.ejs b/frontend/server/views/panels/mouseinfo.ejs
index 990258e7..a9ac7410 100644
--- a/frontend/server/views/panels/mouseinfo.ejs
+++ b/frontend/server/views/panels/mouseinfo.ejs
@@ -60,4 +60,41 @@
+ Selected Unit Coordinates:
+
+
+
\ No newline at end of file
diff --git a/frontend/website/src/panels/mouseinfopanel.ts b/frontend/website/src/panels/mouseinfopanel.ts
index 82dba41e..0f8bfd48 100644
--- a/frontend/website/src/panels/mouseinfopanel.ts
+++ b/frontend/website/src/panels/mouseinfopanel.ts
@@ -5,9 +5,11 @@ import { Unit } from "../unit/unit";
import { Panel } from "./panel";
import formatcoords from "formatcoords";
import { MGRS_PRECISION_100M, MGRS_PRECISION_10KM, MGRS_PRECISION_10M, MGRS_PRECISION_1KM, MGRS_PRECISION_1M } from "../constants/constants";
+import { log } from "console";
export class MouseInfoPanel extends Panel {
#coordinatesElement:HTMLElement;
+ #unitCoordinatesElement:HTMLElement;
#locationSystems = [ "LatLng", "MGRS", "UTM" ];
#measureMarker: Marker;
#measurePoint: LatLng | null = null;
@@ -18,6 +20,9 @@ export class MouseInfoPanel extends Panel {
#selectedMGRSPrecisionIndex = 3;
#selectedLocationSystemIndex = 0;
#elevationRequest: XMLHttpRequest | null = null;
+ #unitElevationRequest: XMLHttpRequest | null = null;
+ #unitElevation: any = null;
+
constructor(ID: string) {
super( ID );
@@ -38,6 +43,7 @@ export class MouseInfoPanel extends Panel {
document.addEventListener('clearSelection', () => this.#update());
this.#coordinatesElement = this.getElement().querySelector( '#coordinates-tool' );
+ this.#unitCoordinatesElement = this.getElement().querySelector( '#unit-coordinates' );
this.#coordinatesElement.addEventListener( "click", ( ev:MouseEvent ) => {
this.#changeLocationSystem();
@@ -79,9 +85,18 @@ export class MouseInfoPanel extends Panel {
const mousePosition = getApp().getMap().getMouseCoordinates();
var selectedUnitPosition = null;
+
var selectedUnits = getApp().getUnitsManager().getSelectedUnits();
- if (selectedUnits && selectedUnits.length == 1)
+ if (selectedUnits && selectedUnits.length == 1) {
+ this.getElement().querySelector(`#unit-coordinates`)?.classList.remove('hide');
+ this.getElement().querySelector(`#unit-coordinates-title`)?.classList.remove('hide');
selectedUnitPosition = new LatLng(selectedUnits[0].getPosition().lat, selectedUnits[0].getPosition().lng);
+ } else {
+ selectedUnitPosition = null;
+ this.#unitElevation = null;
+ this.getElement().querySelector(`#unit-coordinates`)?.classList.add('hide');
+ this.getElement().querySelector(`#unit-coordinates-title`)?.classList.add('hide');
+ }
/* Draw measures from selected unit, from pin location, and from bullseyes */
this.#drawMeasure("ref-measure-position", "measure-position", this.#measurePoint, mousePosition);
@@ -110,6 +125,24 @@ export class MouseInfoPanel extends Panel {
this.#drawCoordinates("ref-mouse-position-longitude", "mouse-position-longitude", coordString.split(" ")[1]);
}
+ /* Draw selected unit coordinates */
+ if (selectedUnitPosition) {
+ var unitCoords = formatcoords(selectedUnitPosition.lat, selectedUnitPosition.lng);
+ var unitCoordString = unitCoords.format('XDDMMss', {decimalPlaces: 4});
+
+ if ( this.#getLocationSystem() === "MGRS" ) {
+ const mgrs = latLngToMGRS( selectedUnitPosition.lat, selectedUnitPosition.lng, this.#MGRSPrecisions[ this.#selectedMGRSPrecisionIndex ] );
+ this.#drawCoordinates("ref-unit-position-mgrs", "unit-position-mgrs", "M"+mgrs.groups.join(" ") );
+ } else if ( this.#getLocationSystem() === "UTM" ) {
+ const utm = latLngToUTM( selectedUnitPosition.lat, selectedUnitPosition.lng );
+ this.#drawCoordinates("ref-unit-position-utm-northing", "unit-position-utm-northing", "N"+utm.northing);
+ this.#drawCoordinates("ref-unit-position-utm-easting", "unit-position-utm-easting", "E"+utm.easting);
+ } else {
+ this.#drawCoordinates("ref-unit-position-latitude", "unit-position-latitude", unitCoordString.split(" ")[0]);
+ this.#drawCoordinates("ref-unit-position-longitude", "unit-position-longitude", unitCoordString.split(" ")[1]);
+ }
+ }
+
/* Get the ground elevation from the server endpoint */
if (this.#elevationRequest == null) {
this.#elevationRequest = new XMLHttpRequest();
@@ -133,6 +166,35 @@ export class MouseInfoPanel extends Panel {
this.#elevationRequest.onabort = () => {this.#elevationRequest = null;}
this.#elevationRequest.send();
}
+
+ /* Get the ground elevation from the server endpoint for the unit */
+ if (this.#unitElevationRequest == null && this.#unitElevation == null && selectedUnitPosition !== null) {
+
+ this.#unitElevationRequest = new XMLHttpRequest();
+ this.#unitElevationRequest.open('GET', `api/elevation/${selectedUnitPosition.lat}/${selectedUnitPosition.lng}`, true);
+ this.#unitElevationRequest.timeout = 500; // ms
+ this.#unitElevationRequest.responseType = 'json';
+ this.#unitElevationRequest.onload = () => {
+ var status = this.#unitElevationRequest?.status;
+ if (status === 200) {
+ this.#unitElevation = this.#unitElevationRequest?.response;
+
+ const el = this.getElement().querySelector(`#unit-position-elevation`) as HTMLElement;
+ try {
+ el.dataset.value = `${Math.floor(mToFt(parseFloat(this.#unitElevation)))} ft`;
+ } catch {
+ el.dataset.value = `N/A`;
+ }
+ } else {
+ this.#unitElevation = null;
+ }
+ this.#unitElevationRequest = null;
+ };
+ this.#unitElevationRequest.ontimeout = () => {this.#unitElevationRequest = null;}
+ this.#unitElevationRequest.onerror = () => {this.#unitElevationRequest = null;}
+ this.#unitElevationRequest.onabort = () => {this.#unitElevationRequest = null;}
+ this.#unitElevationRequest.send();
+ }
}
#onMapClick(e: any) {
@@ -273,10 +335,10 @@ export class MouseInfoPanel extends Panel {
}
this.#coordinatesElement.setAttribute( "data-location-system", this.#getLocationSystem() );
+ this.#unitCoordinatesElement.setAttribute( "data-location-system", this.#getLocationSystem() );
this.#update();
}
-
#getLocationSystem() {
const x = this.#locationSystems;
const y = this.#selectedLocationSystemIndex;