From 07e48aa071ee86af48d061e1deb8fb04d46673ea Mon Sep 17 00:00:00 2001
From: Eli Ribble <eli@gleipnir.technology>
Date: Fri, 3 Apr 2026 20:29:30 +0000
Subject: [PATCH] Zoom when an address is provided or the map is clicked

---
 ts/components/MapLocator.vue | 16 ++++++----------
 ts/rmo/content/Nuisance.vue  | 28 ++++++++++++++++++++++++++--
 2 files changed, 32 insertions(+), 12 deletions(-)

diff --git a/ts/components/MapLocator.vue b/ts/components/MapLocator.vue
index 97b4a0e7..85dcfc7e 100644
--- a/ts/components/MapLocator.vue
+++ b/ts/components/MapLocator.vue
@@ -53,18 +53,14 @@ const markerInstances: Ref<maplibregl.Marker[]> = shallowRef<
 	maplibregl.Marker[]
 >([]);
 
-function _bounds(): LngLatBoundsLike {
-	if (props.markers.length > 0) {
-		return boundsMarkers(props.markers);
-	} else {
-		return boundsDefault();
-	}
-}
 // Initialize map
 const initializeMap = () => {
 	if (!mapContainer.value) return;
 
-	const bounds = _bounds();
+	let bounds = boundsDefault();
+	if (props.markers.length > 0) {
+		bounds = boundsMarkers(props.markers);
+	}
 	map.value = new maplibregl.Map({
 		bounds: bounds,
 		container: mapContainer.value,
@@ -132,14 +128,14 @@ const frameMarkers = () => {
 
 	if (props.markers.length === 1) {
 		// Single marker: pan to it
-		map.value.panTo(props.markers[0].location, { duration: 1000 });
+		map.value.panTo(props.markers[0].location, { duration: 1000, zoom: 15 });
 	} else {
 		// Multiple markers: fit bounds
 		const bounds = new maplibregl.LngLatBounds();
 		props.markers.forEach((marker) => {
 			bounds.extend([marker.location.lng, marker.location.lat]);
 		});
-		map.value.fitBounds(bounds, { padding: 50, duration: 1000 });
+		map.value.fitBounds(bounds, { padding: 10, duration: 1000 });
 	}
 };
 
diff --git a/ts/rmo/content/Nuisance.vue b/ts/rmo/content/Nuisance.vue
index 03eb84e4..ea195c2f 100644
--- a/ts/rmo/content/Nuisance.vue
+++ b/ts/rmo/content/Nuisance.vue
@@ -533,11 +533,35 @@ const markers = computed((): Marker[] => {
 });
 function doAddressSelected(address: Address) {
 	console.log("Address selected", address);
+	const geom = address.geometry;
+	if (!geom) {
+		console.error("No geometry on address", address);
+		return;
+	}
+	marker.value = {
+		color: "#FF0000",
+		draggable: true,
+		id: "x",
+		location: {
+			lat: geom.coordinates[1],
+			lng: geom.coordinates[0],
+		},
+	};
 }
 function doMapClick(location: Location) {
-	console.log("Map clicked", location);
+	marker.value = {
+		color: "#FF0000",
+		draggable: true,
+		id: "x",
+		location: location,
+	};
 }
 function doMapMarkerDragEnd(location: Location) {
-	console.log("marker drag end", location);
+	marker.value = {
+		color: "#FF0000",
+		draggable: true,
+		id: "x",
+		location: location,
+	};
 }
 </script>