feat: album map markers endpoint (#27830)

web/src/lib/components/album-page/album-map.svelte

@@ -2,8 +2,9 @@
   import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
   import { authManager } from '$lib/managers/auth-manager.svelte';
   import MapModal from '$lib/modals/MapModal.svelte';
+  import { handleError } from '$lib/utils/handle-error';
   import { navigate } from '$lib/utils/navigation';
-  import { getAlbumInfo, type AlbumResponseDto, type MapMarkerResponseDto } from '@immich/sdk';
+  import { getAlbumMapMarkers, type AlbumResponseDto, type MapMarkerResponseDto } from '@immich/sdk';
   import { IconButton, modalManager } from '@immich/ui';
   import { mdiMapOutline } from '@mdi/js';
   import { onDestroy, onMount } from 'svelte';
@@ -14,7 +15,7 @@
   }
 
   let { album }: Props = $props();
-  let abortController: AbortController;
+  let cancelable: AbortController;
 
   let returnToMap = $state(false);
   let mapMarkers: MapMarkerResponseDto[] = $state([]);
@@ -24,7 +25,7 @@
   });
 
   onDestroy(() => {
-    abortController?.abort();
+    cancelable?.abort();
     assetViewerManager.showAssetViewer(false);
   });
 
@@ -35,30 +36,17 @@
     }
   });
 
-  async function loadMapMarkers() {
-    if (abortController) {
-      abortController.abort();
+  const loadMapMarkers = async () => {
+    cancelable?.abort();
+    cancelable = new AbortController();
+
+    try {
+      return await getAlbumMapMarkers({ ...authManager.params, id: album.id }, { signal: cancelable.signal });
+    } catch (error) {
+      handleError(error, $t('errors.something_went_wrong'));
+      return [];
     }
-    abortController = new AbortController();
-
-    let albumInfo: AlbumResponseDto = await getAlbumInfo({ id: album.id, withoutAssets: false, ...authManager.params });
-
-    let markers: MapMarkerResponseDto[] = [];
-    for (const asset of albumInfo.assets) {
-      if (asset.exifInfo?.latitude && asset.exifInfo?.longitude) {
-        markers.push({
-          id: asset.id,
-          lat: asset.exifInfo.latitude,
-          lon: asset.exifInfo.longitude,
-          city: asset.exifInfo?.city ?? null,
-          country: asset.exifInfo?.country ?? null,
-          state: asset.exifInfo?.state ?? null,
-        });
-      }
-    }
-
-    return markers;
-  }
+  };
 
   const onClick = async () => {
     const assetIds = await modalManager.show(MapModal, { mapMarkers });