From 3867737fcc24f659ed9500e4bc966404908d6b1e Mon Sep 17 00:00:00 2001
From: Eli Ribble <eli@gleipnir.technology>
Date: Mon, 27 Apr 2026 19:39:22 +0000
Subject: [PATCH] Track camera changes during map load

This is necessary so that we can frame the map at any time in client
code, like with the user's location data, and still end up with the
correct location.
---
 ts/components/MapLocator.vue | 47 +++++++++++++++++++++++++++---------
 1 file changed, 36 insertions(+), 11 deletions(-)

diff --git a/ts/components/MapLocator.vue b/ts/components/MapLocator.vue
index cba5c678..0a0aa37e 100644
--- a/ts/components/MapLocator.vue
+++ b/ts/components/MapLocator.vue
@@ -319,8 +319,16 @@ function initializeMap() {
 	});
 
 	_map.on("load", () => {
+		// It's possible at this point that the client changed the camera while the map
+		// was loading. If that's the case we need to handle that change now.
+		console.log("map load complete");
 		isLoaded.value = true;
-		updateModel(_map);
+		// Delay this by a tick so that other load handlers fire first
+		// This allows updates to the camera model that happened during the load to fire
+		// and jump the camera to a new location before doing this update.
+		setTimeout(() => {
+			updateModel(_map);
+		}, 1);
 	});
 
 	_map.on("moveend", (evt: MoveEndEventInternal) => {
@@ -487,16 +495,33 @@ function panToLocation(location: Location, zoom: number) {
 watch(
 	() => props.modelValue,
 	(newCamera) => {
-		if (map.value && isLoaded.value && newCamera) {
-			console.log("panning based on model change", newCamera);
-			map.value.panTo(
-				{
-					lat: newCamera.location.latitude,
-					lng: newCamera.location.longitude,
-				},
-				{ duration: 1000, zoom: newCamera.zoom },
-				{ isInternalUpdate: true },
-			);
+		if (map.value) {
+			if (isLoaded.value) {
+				console.log("panning based on model change", newCamera);
+				map.value.panTo(
+					{
+						lat: newCamera.location.latitude,
+						lng: newCamera.location.longitude,
+					},
+					{ duration: 1000, zoom: newCamera.zoom },
+					{ isInternalUpdate: true },
+				);
+			} else {
+				console.log("delaying jump until loaded", newCamera);
+				map.value.once("load", () => {
+					if (!map.value) return;
+					map.value.jumpTo(
+						{
+							center: {
+								lat: newCamera.location.latitude,
+								lng: newCamera.location.longitude,
+							},
+							zoom: newCamera.zoom,
+						},
+						{ isInternalUpdate: true },
+					);
+				});
+			}
 		}
 	},
 	{ deep: true },