get map clicks and show the lat lng

html/static/js/map-arcgis-tile.js

@@ -37,7 +37,7 @@ class MapArcgisTile extends HTMLElement {
 			center: [longitude, latitude],
 			container: mapElement,
 			style: "https://tiles.stadiamaps.com/styles/osm_bright.json",
-			zoom: 22,
+			zoom: 20,
 		});
 		console.log("ArcGIS token", arcgis_access_token);
 		const basemap_style = maplibreArcGIS.BasemapStyle.applyStyle(this._map, {
@@ -79,13 +79,29 @@ class MapArcgisTile extends HTMLElement {
 				});
 				console.log("added arcgis tile layer");
 			}
-			this.dispatchEvent(new CustomEvent("load"), {
+			this.dispatchEvent(
+				new CustomEvent("load", {
 					bubbles: true,
 					composed: true, // Allows event to cross shadow DOM boundary
 					detail: {
 						map: this,
 					},
+				}),
+			);
 		});
+		this._map.on("click", (e) => {
+			this.dispatchEvent(
+				new CustomEvent("map-click", {
+					bubbles: true,
+					composed: true,
+					detail: {
+						lng: e.lngLat.lng,
+						lat: e.lngLat.lat,
+						map: this._map,
+						point: e.point,
+					},
+				}),
+			);
 		});
 	}
 

html/template/sync/intelligence-root.html

@@ -15,6 +15,9 @@
 	<script src="https://unpkg.com/@esri/maplibre-arcgis@1.1.0/dist/umd/maplibre-arcgis.min.js"></script>
 
 	<script>
+		function updateSignalLocation(event) {
+			console.log("map click", event.detail);
+		}
 		// Return two points defining a bounding box for the given points
 		function getBoundingBox(points) {
 			// Handle empty or invalid input
@@ -524,6 +527,7 @@
 													arcgis-access-token="{{ .C.ArcgisAccessToken }}"
 													organization-id="{{ .Organization.ID }}"
 													tegola="{{ .URL.Tegola }}"
+													@map-click="updateSignalLocation($event)"
 													:latitude="signal.location.latitude"
 													:longitude="signal.location.longitude"
 												>