From 8d96055ba12df5962f765f2b6ed7c0372691840e Mon Sep 17 00:00:00 2001
From: Eli Ribble <eli@gleipnir.technology>
Date: Tue, 3 Feb 2026 17:25:14 +0000
Subject: [PATCH] Update water page to allow direct clicks

---
 rmo/template/water.html | 26 ++++++++++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/rmo/template/water.html b/rmo/template/water.html
index 8e2b91e6..ff92a4a7 100644
--- a/rmo/template/water.html
+++ b/rmo/template/water.html
@@ -10,6 +10,20 @@
 <script src="/static/js/photo-upload.js"></script>
 <script>
 const MAPBOX_ACCESS_TOKEN = '{{.MapboxToken}}';
+async function handleMapClick(mapLocator, lngLat) {
+	mapLocator.SetMarker(lngLat);
+	mapLocator.PanTo(lngLat, {duration: 2000});
+	const response = await geocodeReverse(MAPBOX_ACCESS_TOKEN, {
+		lat: lngLat.lat,
+		lng: lngLat.lng,
+	});
+	console.log("click reverse geocode", response);
+	if (response !== undefined && response.features.length > 0) {
+		const addressInput = document.querySelector("address-input");
+		addressInput.SetValue(response.features[0]);
+		setLocationInputs(response.features[0]);
+	}
+}
 async function handleMarkerDrag(lngLat) {
 	const response = await geocodeReverse(MAPBOX_ACCESS_TOKEN, {
 		lat: lngLat.lat,
@@ -100,10 +114,12 @@ document.addEventListener('DOMContentLoaded', function() {
 				},
 				zoom: 14,
 			});
-			mapLocator.SetMarker([
+			const coords = [
 				position.coords.longitude,
 				position.coords.latitude,
-			]);
+			];
+			mapLocator.SetMarker(coords);
+			mapLocator.JumpTo({center: coords, zoom: 14});
 			handleMarkerDrag({
 				lat: position.coords.latitude,
 				lng: position.coords.longitude,
@@ -116,6 +132,12 @@ document.addEventListener('DOMContentLoaded', function() {
 	mapLocator.addEventListener("zoomend", function(e) {
 		mapZoom.value = e.target.GetZoom();
 	});
+	mapLocator.addEventListener("click", (e) => {
+		// We get some events without the lngLat
+		if (e.detail !== undefined && e.detail.lngLat !== undefined) {
+			handleMapClick(mapLocator, e.detail.lngLat);
+		}
+	});
 	mapLocator.addEventListener("markerdragend", (e) => {
 		const marker = event.detail.marker;
 		const lngLat = marker.getLngLat();