diff --git a/src/lib/components/Map/Map.svelte b/src/lib/components/Map/Map.svelte
index d902285e..02bf7ef6 100644
--- a/src/lib/components/Map/Map.svelte
+++ b/src/lib/components/Map/Map.svelte
@@ -32,7 +32,7 @@
// Recenter when the lat & long params change
export let recenterOnUpdate = false;
export let enableGeolocation = true;
- export let isShowingGarden = false;
+ export let hasGardenInURL = false;
// Was used to prevent an automatic jump to the GPS location after the initial map load.
// TODO: reuse for IP-based geolocation
@@ -79,7 +79,7 @@
// We can reuse this code when showing the location indicator after initializing
// on an IP-based location. We also don't want it to jump then.
// --
- if (isAutoloadingLocation && isShowingGarden) {
+ if (isAutoloadingLocation && hasGardenInURL) {
console.log('Ignored geolocation camera update');
return;
}
@@ -196,14 +196,14 @@
geolocationPermission !== 'denied'
) {
const canPromptForLocationPermissionOnLoad =
- (!isOnIDevicePWA() || hasEnabledNotificationsOnCurrentDevice()) && !isShowingGarden;
+ (!isOnIDevicePWA() || hasEnabledNotificationsOnCurrentDevice()) && !hasGardenInURL;
let shouldTriggerGeolocation =
// It won't prompt if granted
(geolocationPermission === 'granted' ||
(geolocationPermission === 'prompt' && canPromptForLocationPermissionOnLoad)) &&
// Only trigger geolocation for non-members when a garden isn't being shown specifically
- (!!$user?.superfan || !isShowingGarden);
+ (!!$user?.superfan || !hasGardenInURL);
if (geolocationPermission === 'granted' && shouldTriggerGeolocation) {
// Mark the map as autoloading if we have permission and should trigger geolocation
@@ -283,7 +283,7 @@
$: if (recenterOnUpdate && map) {
const zoomLevel = applyZoom ? zoom : map.getZoom();
const params = { center: [lon, lat], zoom: zoomLevel };
- if (!isShowingGarden) {
+ if (!hasGardenInURL) {
map.flyTo({
...params,
bearing: 0,
diff --git a/src/routes/explore/+layout.svelte b/src/routes/explore/+layout.svelte
index 3aa812f3..1ed71e1b 100644
--- a/src/routes/explore/+layout.svelte
+++ b/src/routes/explore/+layout.svelte
@@ -44,7 +44,7 @@
let showStations = false;
let showRails = false;
let showTransport = false;
- let filteredGardens: { [id: string]: Garden };
+ let filteredGardens: Garden[];
let savedGardens = [] as string[];
let carNoticeShown = !isOnIDevicePWA() && !getCookie('car-notice-dismissed');
@@ -81,11 +81,11 @@
// true when visiting the link to a garden directly, used to increase zoom level
// TODO check this: It looks like there is no need for a subscribe on page
- let isShowingGarden = !!$page.params.gardenId;
+ let hasGardenInURL = !!$page.params.gardenId;
- let zoom = isShowingGarden ? ZOOM_LEVELS.ROAD : ZOOM_LEVELS.WESTERN_EUROPE;
+ let zoom = hasGardenInURL ? ZOOM_LEVELS.ROAD : ZOOM_LEVELS.WESTERN_EUROPE;
- $: applyZoom = isShowingGarden ? true : false;
+ $: applyZoom = hasGardenInURL ? true : false;
// Garden to preload when we are loading the app on its permalink URL
let preloadedGarden: Garden | null = null;
@@ -143,7 +143,7 @@
};
const closeDrawer = () => {
- isShowingGarden = false;
+ hasGardenInURL = false;
goto(routes.MAP);
};
@@ -158,12 +158,26 @@
// LIFECYCLE HOOKS
onMount(async () => {
+ // Called every time the page opens, but not when the selected garden changes (client-side navigation within this layout)
+
const gardensAreEmpty = $allGardens.length === 0;
- if (gardensAreEmpty && !$isFetchingGardens && isShowingGarden) {
- // If we're loading the page of a garden, load that one immediately *before* all other gardens
+
+ // If we open the map with a garden in the URL, and gardens aren't loaded yet (or loading),
+ // load that one immediately *before* all other gardens.
+ //
+ // Note that all gardens are fetched at the end of this function on a fresh/hard navigation, but it may also be possible that
+ // onMount() is called in a soft client-side navigation, after gardens have already been loaded.
+ if (gardensAreEmpty && !$isFetchingGardens && hasGardenInURL) {
preloadedGarden = await getGarden($page.params.gardenId);
- if (preloadedGarden) {
- setMapToGardenLocation(preloadedGarden);
+ }
+
+ // In any case where we open the map with a garden in the URL, move the map view to that garden
+ if (hasGardenInURL && (!gardensAreEmpty || preloadedGarden)) {
+ // In one case, all gardens are already loaded before the page mount. In another, we've preloaded the target here above.
+ const targetGarden =
+ $allGardens.find((g) => g.id === $page.params.gardenId) || preloadedGarden;
+ if (targetGarden) {
+ setMapToGardenLocation(targetGarden);
}
}
@@ -195,7 +209,7 @@
lon={centerLocation.longitude}
lat={centerLocation.latitude}
recenterOnUpdate
- {isShowingGarden}
+ {hasGardenInURL}
{zoom}
{applyZoom}
>
@@ -209,10 +223,10 @@
allGardens={filteredGardens || $allGardens}
{savedGardens}
/>
-