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 = 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, + }; }