Gleipnir/nidus-sync
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Zoom when an address is provided or the map is clicked

Browse source
This commit is contained in:
Eli Ribble 2026-04-03 20:29:30 +00:00
parent c5c78a2b84
commit 07e48aa071
No known key found for this signature in database
2 changed files with 32 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

16
ts/components/MapLocator.vue
View file

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

28
ts/rmo/content/Nuisance.vue
View file

@ -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>