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

Track camera changes during map load

Browse source 
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.
This commit is contained in:
Eli Ribble 2026-04-27 19:39:22 +00:00
parent 937953f2a2
commit 3867737fcc
No known key found for this signature in database
1 changed files with 36 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

47
ts/components/MapLocator.vue
View file

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