From a9077b6c36f7a63cce47d63deaad25e9c7ab7cf8 Mon Sep 17 00:00:00 2001
From: Eli Ribble <eli@gleipnir.technology>
Date: Thu, 16 Apr 2026 03:46:56 +0000
Subject: [PATCH] Fix framing locations on the map display

---
 ts/components/MapLocator.vue           | 27 +++++++++++++++++++-------
 ts/map-utils.ts                        | 25 +++++++++++++-----------
 ts/view/configuration/UploadDetail.vue |  2 +-
 3 files changed, 35 insertions(+), 19 deletions(-)

diff --git a/ts/components/MapLocator.vue b/ts/components/MapLocator.vue
index a1de3400..718f4247 100644
--- a/ts/components/MapLocator.vue
+++ b/ts/components/MapLocator.vue
@@ -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(
diff --git a/ts/map-utils.ts b/ts/map-utils.ts
index ce314728..85599876 100644
--- a/ts/map-utils.ts
+++ b/ts/map-utils.ts
@@ -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;
diff --git a/ts/view/configuration/UploadDetail.vue b/ts/view/configuration/UploadDetail.vue
index 4a1965cf..96924d0d 100644
--- a/ts/view/configuration/UploadDetail.vue
+++ b/ts/view/configuration/UploadDetail.vue
@@ -472,7 +472,7 @@ const markers = computed((): Marker[] => {
 			markers.push({
 				color: "#FF0000",
 				draggable: true,
-				id: "x",
+				id: p.address.gid,
 				location: p.address.location,
 			});
 		}