fix: map (#18399)

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,7 +107,6 @@
 <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">
@@ -124,7 +120,6 @@
             {/await}
           {:then { default: Map }}
             <Map
-                bind:this={mapElement}
               center={undefined}
               {zoom}
               clickable={false}
@@ -138,7 +133,6 @@
       </div>
     </ModalBody>
   </Modal>
-  </div>
 
   <Portal target="body">
     {#if $showAssetViewer}

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 () => {
+    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 }}