fix: move the map view to the garden in the URL, also on a client-sid…

…e navigation to the map

Fixes "Go to garden" not opening the map on the garden.

Also renames `isShowingGarden` to `hasGardenInURL` to make its meaning more explicit, and avoid confusion with the `selectedGarden` property.

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,

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}
       />
-      <Drawer on:close={closeDrawer} garden={selectedGarden} />
-      <WaymarkedTrails {showHiking} {showCycling} />
-      <slot />
     {/if}
+    <Drawer on:close={closeDrawer} garden={selectedGarden} />
+    <WaymarkedTrails {showHiking} {showCycling} />
+    <slot />
     {#if carNoticeShown}
       <div class="vehicle-notice-wrapper">
         <button on:click={closeCarNotice} aria-label="Close notice" class="button-container close">