Zoom when an address is provided or the map is clicked

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 });
 	}
 };
 

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>