From 12b7a079c18fbc7523bfb426e1a13a2cdf6091ec Mon Sep 17 00:00:00 2001
From: Daniel Dietzler <36593685+danieldietzler@users.noreply.github.com>
Date: Tue, 20 May 2025 19:52:23 +0200
Subject: [PATCH] fix: map (#18399)

---
 .../components/album-page/album-map.svelte    | 56 +++++++++----------
 .../shared-components/map/map.svelte          | 10 ++--
 2 files changed, 31 insertions(+), 35 deletions(-)

diff --git a/web/src/lib/components/album-page/album-map.svelte b/web/src/lib/components/album-page/album-map.svelte
index fd96cf8b64..d668f65d0e 100644
--- a/web/src/lib/components/album-page/album-map.svelte
+++ b/web/src/lib/components/album-page/album-map.svelte
@@ -1,7 +1,5 @@
 <script lang="ts">
-  import { clickOutside } from '$lib/actions/click-outside';
   import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
-  import type Map from '$lib/components/shared-components/map/map.svelte';
   import Portal from '$lib/components/shared-components/portal/portal.svelte';
   import { timeToLoadTheMap } from '$lib/constants';
   import { albumMapViewManager } from '$lib/managers/album-view-map.manager.svelte';
@@ -25,8 +23,6 @@
   let viewingAssets: string[] = $state([]);
   let viewingAssetCursor = 0;
 
-  let mapElement = $state<ReturnType<typeof Map>>();
-
   let zoom = $derived(1);
   let mapMarkers: MapMarkerResponseDto[] = $state([]);
 
@@ -77,6 +73,7 @@
   async function onViewAssets(assetIds: string[]) {
     viewingAssets = assetIds;
     viewingAssetCursor = 0;
+    closeMap();
 
     await setAssetId(assetIds[0]);
   }
@@ -110,35 +107,32 @@
 <CircleIconButton title={$t('map')} onclick={openMap} icon={mdiMapOutline} />
 
 {#if albumMapViewManager.isInMapView}
-  <div use:clickOutside={{ onOutclick: closeMap }}>
-    <Modal title={$t('map')} size="medium" onClose={closeMap}>
-      <ModalBody>
-        <div class="flex flex-col w-full h-full gap-2 border border-gray-300 dark:border-light rounded-2xl">
-          <div class="h-[500px] min-h-[300px] w-full">
-            {#await import('../shared-components/map/map.svelte')}
-              {#await delay(timeToLoadTheMap) then}
-                <!-- show the loading spinner only if loading the map takes too much time -->
-                <div class="flex items-center justify-center h-full w-full">
-                  <LoadingSpinner />
-                </div>
-              {/await}
-            {:then { default: Map }}
-              <Map
-                bind:this={mapElement}
-                center={undefined}
-                {zoom}
-                clickable={false}
-                bind:mapMarkers
-                onSelect={onViewAssets}
-                showSettings={false}
-                rounded
-              />
+  <Modal title={$t('map')} size="medium" onClose={closeMap}>
+    <ModalBody>
+      <div class="flex flex-col w-full h-full gap-2 border border-gray-300 dark:border-light rounded-2xl">
+        <div class="h-[500px] min-h-[300px] w-full">
+          {#await import('../shared-components/map/map.svelte')}
+            {#await delay(timeToLoadTheMap) then}
+              <!-- show the loading spinner only if loading the map takes too much time -->
+              <div class="flex items-center justify-center h-full w-full">
+                <LoadingSpinner />
+              </div>
             {/await}
-          </div>
+          {:then { default: Map }}
+            <Map
+              center={undefined}
+              {zoom}
+              clickable={false}
+              bind:mapMarkers
+              onSelect={onViewAssets}
+              showSettings={false}
+              rounded
+            />
+          {/await}
         </div>
-      </ModalBody>
-    </Modal>
-  </div>
+      </div>
+    </ModalBody>
+  </Modal>
 
   <Portal target="body">
     {#if $showAssetViewer}
diff --git a/web/src/lib/components/shared-components/map/map.svelte b/web/src/lib/components/shared-components/map/map.svelte
index ef4b7b5b8e..6e1e10049d 100644
--- a/web/src/lib/components/shared-components/map/map.svelte
+++ b/web/src/lib/components/shared-components/map/map.svelte
@@ -57,7 +57,7 @@
   }
 
   let {
-    mapMarkers = $bindable([]),
+    mapMarkers = $bindable(),
     showSettings = true,
     zoom = undefined,
     center = $bindable(undefined),
@@ -210,11 +210,13 @@
   };
 
   onMount(async () => {
-    mapMarkers = await loadMapMarkers();
+    if (!mapMarkers) {
+      mapMarkers = await loadMapMarkers();
+    }
   });
 
   onDestroy(() => {
-    abortController.abort();
+    abortController?.abort();
   });
 
   $effect(() => {
@@ -296,7 +298,7 @@
     <GeoJSON
       data={{
         type: 'FeatureCollection',
-        features: mapMarkers.map((marker) => asFeature(marker)),
+        features: mapMarkers?.map((marker) => asFeature(marker)) ?? [],
       }}
       id="geojson"
       cluster={{ radius: 35, maxZoom: 17 }}