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

Fix framing locations on the map display

Browse source
This commit is contained in:
Eli Ribble 2026-04-16 03:46:56 +00:00
parent 5f68eb453f
commit a9077b6c36
No known key found for this signature in database
3 changed files with 35 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

27
ts/components/MapLocator.vue
View file

@ -424,19 +424,32 @@ function frameMarkers() {
}
} else {
// Multiple markers: fit bounds
console.log("framing multiple markers", props.markers);
const bounds = new maplibregl.LngLatBounds();
props.markers.forEach((marker) => {
bounds.extend([marker.location.longitude, marker.location.latitude]);
});
if (map.value) {
console.log("framing multiple markers", isLoaded.value, props.markers);
if (isLoaded.value) {
panToMarkers(props.markers);
} else {
map.value.on("load", () => {
panToMarkers(props.markers);
});
}
} else {
console.error("Can't frame multiple markers before the map is created");
}
}
}
function panToMarkers(markers: Marker[]) {
setTimeout(() => {
if (!map.value) return;
const bounds = boundsMarkers(markers);
map.value.fitBounds(
bounds,
{ padding: 10, duration: 1000 },
{ isInternalUpdate: true },
);
}
console.log("fitting map to bounds", bounds);
}, 1);
}
function panToLocation(location: Location, zoom: number) {
if (!map.value) return;
map.value.panTo(

25
ts/map-utils.ts
View file

@ -1,8 +1,8 @@
import { LngLat, LngLatBounds } from "maplibre-gl";
import maplibregl from "maplibre-gl";
import type { Marker } from "@/types";
import type { Location } from "@/type/api";
export function boundsMarkers(markers: Marker[]): LngLatBounds {
export function boundsMarkers(markers: Marker[]): maplibregl.LngLatBounds {
let min_lat = 90;
let min_lng = 180;
let max_lat = -90;
@ -10,16 +10,19 @@ export function boundsMarkers(markers: Marker[]): LngLatBounds {
markers.forEach((marker: Marker) => {
min_lat = Math.min(marker.location.latitude, min_lat);
min_lng = Math.min(marker.location.longitude, min_lng);
max_lat = Math.min(marker.location.latitude, max_lat);
max_lng = Math.min(marker.location.longitude, max_lng);
max_lat = Math.max(marker.location.latitude, max_lat);
max_lng = Math.max(marker.location.longitude, max_lng);
});
return new LngLatBounds(
new LngLat(min_lng, min_lat),
new LngLat(max_lng, max_lat),
return new maplibregl.LngLatBounds(
new maplibregl.LngLat(min_lng, min_lat),
new maplibregl.LngLat(max_lng, max_lat),
);
}
export function boundsDefault(): LngLatBounds {
return new LngLatBounds(new LngLat(-125, 50), new LngLat(-70, 25));
export function boundsDefault(): maplibregl.LngLatBounds {
return new maplibregl.LngLatBounds(
new maplibregl.LngLat(-125, 50),
new maplibregl.LngLat(-70, 25),
);
}
// Helper functions (outside component)
@ -28,10 +31,10 @@ const getBoundingBox = (points: Location[]) => {
return null;
}
let minLat = points[0].latitude;
let maxLat = points[0].latitude;
let minLng = points[0].longitude;
let maxLng = points[0].longitude;
let minLat = points[0].latitude;
let minLng = points[0].longitude;
for (const point of points) {
if (point.latitude < minLat) minLat = point.latitude;

2
ts/view/configuration/UploadDetail.vue
View file

@ -472,7 +472,7 @@ const markers = computed((): Marker[] => {
markers.push({
color: "#FF0000",
draggable: true,
id: "x",
id: p.address.gid,
location: p.address.location,
});
}