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} /> - - - {/if} + + + {#if carNoticeShown}