From 1d266c88c1829074dacaa08d922fd572ba38ae73 Mon Sep 17 00:00:00 2001
From: Eli Ribble <eli@gleipnir.technology>
Date: Wed, 22 Apr 2026 22:43:16 +0000
Subject: [PATCH] Fix initial view of markers on map load

The issue here was that "fitBounds" doesn't work before the map is
loaded, we have to use the map constructor to set the location.
Therefore it makes no sense to even attempt these operations internally
before loading.
---
 ts/components/MapLocator.vue | 64 +++++++++++++++++++++++-------------
 1 file changed, 41 insertions(+), 23 deletions(-)

diff --git a/ts/components/MapLocator.vue b/ts/components/MapLocator.vue
index 0505862d..52641da5 100644
--- a/ts/components/MapLocator.vue
+++ b/ts/components/MapLocator.vue
@@ -233,7 +233,7 @@ function initializeMap() {
 	if (props.useSatellite) {
 		style = "https://tiles.stadiamaps.com/styles/alidade_satellite.json";
 	}
-	const _map = new maplibregl.Map({
+	let map_options: maplibregl.MapOptions = {
 		container: mapContainer.value,
 		style: style,
 		// Disable interactions by default
@@ -241,40 +241,57 @@ function initializeMap() {
 		dragPan: false,
 		scrollZoom: false,
 		touchZoomRotate: false,
-	});
+	};
 	if (props.markers.length > 0) {
-		console.log("initial map fitting initial markers", props.markers);
-		_map.fitBounds(boundsMarkers(props.markers));
+		if (props.markers.length == 1) {
+			const m = props.markers[0];
+			map_options.center = [m.location.longitude, m.location.latitude];
+			map_options.zoom = 15;
+			console.log(
+				"initial map fitting single marker:",
+				m,
+				"location:",
+				m.location,
+				"zoom:",
+				15,
+			);
+		} else {
+			const bounds = boundsMarkers(props.markers);
+			console.log(
+				"initial map fitting initial markers:",
+				props.markers,
+				"bounds:",
+				bounds,
+			);
+			map_options.bounds = bounds;
+		}
 	} else if (
 		props.initialCamera &&
 		(props.initialCamera.location.latitude ||
 			props.initialCamera.location.longitude)
 	) {
 		console.log("initial map jump to initial camera", props.initialCamera);
-		_map.jumpTo({
-			center: [
-				props.initialCamera.location.longitude,
-				props.initialCamera.location.latitude,
-			],
-			zoom: props.initialCamera.zoom,
-		});
+		map_options.center = [
+			props.initialCamera.location.longitude,
+			props.initialCamera.location.latitude,
+		];
+		map_options.zoom = props.initialCamera.zoom;
 	} else if (
 		props.modelValue.location.latitude != 0 ||
 		props.modelValue.location.longitude != 0
 	) {
 		console.log("initial map jump to initial model", props.modelValue);
-		_map.jumpTo({
-			center: [
-				props.modelValue.location.longitude,
-				props.modelValue.location.latitude,
-			],
-			zoom: props.modelValue.zoom,
-		});
+		map_options.center = [
+			props.modelValue.location.longitude,
+			props.modelValue.location.latitude,
+		];
+		map_options.zoom = props.modelValue.zoom;
 	} else {
 		const bounds = boundsDefault();
 		console.log("initial map fitting default bounds", bounds);
-		_map.fitBounds(bounds);
+		map_options.bounds = bounds;
 	}
+	const _map = new maplibregl.Map(map_options);
 	_map.addControl(new maplibregl.NavigationControl(), "top-left");
 	map.value = _map;
 	_map.on("click", (e: maplibregl.MapLayerMouseEvent) => {
@@ -398,7 +415,7 @@ const updateMarkers = () => {
 
 // Frame all markers in view
 function frameMarkers() {
-	if (!map.value || props.markers.length === 0) return;
+	if (!map.value || props.markers.length === 0 || !isLoaded.value) return;
 
 	if (props.markers.length === 1) {
 		// Single marker: pan to it
@@ -406,10 +423,11 @@ function frameMarkers() {
 		// for the framing.
 		const zoom = props.modelValue.zoom > 1 ? props.modelValue.zoom : 15;
 		console.log(
-			"framing single marker",
-			isLoaded.value,
+			"framing single marker. location:",
 			props.markers[0].location,
+			"model zoom: ",
 			props.modelValue.zoom,
+			"calculated zoom: ",
 			zoom,
 		);
 
@@ -469,7 +487,7 @@ function panToLocation(location: Location, zoom: number) {
 watch(
 	() => props.modelValue,
 	(newCamera) => {
-		if (map.value && newCamera) {
+		if (map.value && isLoaded.value && newCamera) {
 			console.log("panning based on model change", newCamera);
 			map.value.panTo(
 				{