From a3836ce5783689e4fa5b6ff763be8388cf8645ca Mon Sep 17 00:00:00 2001
From: rickytrevor <rick@rickyscloud.com>
Date: Sun, 3 May 2026 22:34:17 +0200
Subject: [PATCH] feat(web): view assets in map viewport

---
 i18n/en.json                                  |  2 +
 .../shared-components/map/Map.svelte          | 61 ++++++++++++++++++-
 web/src/lib/modals/MapSettingsModal.svelte    |  3 +
 web/src/lib/stores/preferences.store.ts       |  2 +
 .../[[assetId=id]]/+page.svelte               | 22 ++++++-
 5 files changed, 87 insertions(+), 3 deletions(-)

diff --git a/i18n/en.json b/i18n/en.json
index cc30d9e350..a1073e3095 100644
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -1665,6 +1665,8 @@
   "open_in_browser": "Open in browser",
   "open_in_map_view": "Open in map view",
   "open_in_openstreetmap": "Open in OpenStreetMap",
+  "show_asset_panel_on_map": "Show asset panel by default",
+  "show_photos_in_area": "Show photos in this area",
   "open_the_search_filters": "Open the search filters",
   "options": "Options",
   "or": "or",
diff --git a/web/src/lib/components/shared-components/map/Map.svelte b/web/src/lib/components/shared-components/map/Map.svelte
index 52686bdd41..b8a3ad371c 100644
--- a/web/src/lib/components/shared-components/map/Map.svelte
+++ b/web/src/lib/components/shared-components/map/Map.svelte
@@ -11,13 +11,14 @@
 <script lang="ts">
   import { afterNavigate } from '$app/navigation';
   import OnEvents from '$lib/components/OnEvents.svelte';
+  import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
   import { serverConfigManager } from '$lib/managers/server-config-manager.svelte';
   import MapSettingsModal from '$lib/modals/MapSettingsModal.svelte';
   import { mapSettings } from '$lib/stores/preferences.store';
   import { getAssetMediaUrl, handlePromiseError } from '$lib/utils';
   import { getMapMarkers, type MapMarkerResponseDto } from '@immich/sdk';
   import { Icon, modalManager, Theme, themeManager } from '@immich/ui';
-  import { mdiCog, mdiMap, mdiMapMarker } from '@mdi/js';
+  import { mdiCog, mdiImageMultiple, mdiMap, mdiMapMarker } from '@mdi/js';
   import type { Feature, GeoJsonProperties, Geometry, Point } from 'geojson';
   import { isEqual, omit } from 'lodash-es';
   import { DateTime, Duration } from 'luxon';
@@ -31,7 +32,7 @@
     type Map,
     type MapMouseEvent,
   } from 'maplibre-gl';
-  import { onDestroy, onMount, untrack } from 'svelte';
+  import { onDestroy, onMount, tick, untrack } from 'svelte';
   import { t } from 'svelte-i18n';
   import {
     AttributionControl,
@@ -61,6 +62,10 @@
     onOpenInMapView?: (() => Promise<void> | void) | undefined;
     onSelect?: (assetIds: string[]) => void;
     onClusterSelect?: (assetIds: string[], bbox: SelectionBBox) => void;
+    onViewportSelect?: (assetIds: string[], bbox: SelectionBBox) => void;
+    onViewportClose?: () => void;
+    viewportGridActive?: boolean;
+    autoOpenPanel?: boolean;
     onClickPoint?: ({ lat, lng }: { lat: number; lng: number }) => void;
     popup?: import('svelte').Snippet<[{ marker: MapMarkerResponseDto }]>;
     rounded?: boolean;
@@ -80,6 +85,10 @@
     onOpenInMapView = undefined,
     onSelect = () => {},
     onClusterSelect,
+    onViewportSelect,
+    onViewportClose,
+    viewportGridActive = false,
+    autoOpenPanel = false,
     onClickPoint = () => {},
     popup,
     rounded = false,
@@ -275,6 +284,15 @@
     if (!mapMarkers) {
       mapMarkers = await loadMapMarkers();
     }
+    if (autoOpenPanel) {
+      // Wait for the map to finish rendering before opening the panel
+      await tick();
+      if (map) {
+        map.resize();
+        await map.once('idle');
+        handleViewportSelect();
+      }
+    }
   });
 
   onDestroy(() => {
@@ -316,6 +334,35 @@
     untrack(() => map?.jumpTo({ center, zoom }));
   });
 
+  const handleViewportSelect = () => {
+    if (!map || !onViewportSelect || !mapMarkers) {
+      return;
+    }
+    const bounds = map.getBounds();
+    const west = bounds.getWest();
+    const east = bounds.getEast();
+
+    // When zoomed out enough to see the whole world, show all markers
+    const showAll = east - west >= 360;
+    const visibleIds = showAll
+      ? mapMarkers.map(({ id }) => id)
+      : mapMarkers.filter(({ lon, lat }) => bounds.contains([lon, lat])).map(({ id }) => id);
+
+    const bbox: SelectionBBox = {
+      west: showAll ? -180 : west,
+      south: showAll ? -90 : bounds.getSouth(),
+      east: showAll ? 180 : east,
+      north: showAll ? 90 : bounds.getNorth(),
+    };
+    onViewportSelect(visibleIds, bbox);
+  };
+
+  const handleMoveEnd = () => {
+    if (viewportGridActive && !assetViewerManager.isViewing) {
+      handleViewportSelect();
+    }
+  };
+
   const onAssetsDelete = async () => {
     mapMarkers = await loadMapMarkers();
   };
@@ -337,6 +384,7 @@
   onload={(event: Map) => {
     event.setMaxZoom(18);
     event.on('click', handleMapClick);
+    event.on('moveend', handleMoveEnd);
     if (!simplified) {
       event.addControl(new GlobeControl(), 'top-left');
     }
@@ -350,6 +398,15 @@
       {#if !simplified}
         <GeolocateControl position="top-left" />
         <FullscreenControl position="top-left" />
+        {#if onViewportSelect}
+          <Control position="top-left">
+            <ControlGroup>
+              <ControlButton onclick={() => (viewportGridActive ? onViewportClose?.() : handleViewportSelect())}>
+                <Icon title={$t('show_photos_in_area')} icon={mdiImageMultiple} size="100%" class="text-black/80" />
+              </ControlButton>
+            </ControlGroup>
+          </Control>
+        {/if}
         <ScaleControl />
         <AttributionControl compact={false} />
       {/if}
diff --git a/web/src/lib/modals/MapSettingsModal.svelte b/web/src/lib/modals/MapSettingsModal.svelte
index 4b45def861..74ad9841d9 100644
--- a/web/src/lib/modals/MapSettingsModal.svelte
+++ b/web/src/lib/modals/MapSettingsModal.svelte
@@ -38,6 +38,9 @@
     <Field label={$t('include_shared_albums')}>
       <Switch bind:checked={settings.withSharedAlbums} />
     </Field>
+    <Field label={$t('show_asset_panel_on_map')}>
+      <Switch bind:checked={settings.showAssetPanel} />
+    </Field>
 
     {#if customDateRange}
       <div in:fly={{ y: 10, duration: 200 }} class="flex flex-col gap-4">
diff --git a/web/src/lib/stores/preferences.store.ts b/web/src/lib/stores/preferences.store.ts
index 3c31bef856..4ca5865ac5 100644
--- a/web/src/lib/stores/preferences.store.ts
+++ b/web/src/lib/stores/preferences.store.ts
@@ -25,6 +25,7 @@ export interface MapSettings {
   onlyFavorites: boolean;
   withPartners: boolean;
   withSharedAlbums: boolean;
+  showAssetPanel: boolean;
   relativeDate: string;
   dateAfter: string;
   dateBefore: string;
@@ -36,6 +37,7 @@ const defaultMapSettings = {
   onlyFavorites: false,
   withPartners: false,
   withSharedAlbums: false,
+  showAssetPanel: false,
   relativeDate: '',
   dateAfter: '',
   dateBefore: '',
diff --git a/web/src/routes/(user)/map/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/map/[[photos=photos]]/[[assetId=id]]/+page.svelte
index 0519398da1..a4a9fff8c8 100644
--- a/web/src/routes/(user)/map/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/map/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -11,6 +11,7 @@
   import { handlePromiseError } from '$lib/utils';
   import { delay } from '$lib/utils/asset-utils';
   import { navigate } from '$lib/utils/navigation';
+  import { mapSettings } from '$lib/stores/preferences.store';
   import { LoadingSpinner } from '@immich/ui';
   import { onDestroy } from 'svelte';
   import type { PageData } from './$types';
@@ -23,9 +24,11 @@
   let selectedClusterIds = $state.raw(new Set<string>());
   let selectedClusterBBox = $state.raw<SelectionBBox>();
   let isTimelinePanelVisible = $state(false);
+  let isViewportMode = $state(false);
 
   function closeTimelinePanel() {
     isTimelinePanelVisible = false;
+    isViewportMode = false;
     selectedClusterBBox = undefined;
     selectedClusterIds = new Set();
   }
@@ -47,9 +50,18 @@
     selectedClusterIds = new Set(assetIds);
     selectedClusterBBox = bbox;
     isTimelinePanelVisible = true;
+    isViewportMode = false;
     assetViewerManager.showAssetViewer(false);
     handlePromiseError(navigate({ targetRoute: 'current', assetId: null }));
   }
+
+  function onViewportSelect(assetIds: string[], bbox: SelectionBBox) {
+    selectedClusterIds = new Set(assetIds);
+    selectedClusterBBox = bbox;
+    isTimelinePanelVisible = true;
+    isViewportMode = true;
+    assetViewerManager.showAssetViewer(false);
+  }
 </script>
 
 {#if featureFlagsManager.value.map}
@@ -69,7 +81,15 @@
             </div>
           {/await}
         {:then { default: Map }}
-          <Map hash onSelect={onViewAssets} {onClusterSelect} />
+          <Map
+            hash
+            onSelect={onViewAssets}
+            {onClusterSelect}
+            {onViewportSelect}
+            onViewportClose={closeTimelinePanel}
+            viewportGridActive={isViewportMode && isTimelinePanelVisible}
+            autoOpenPanel={$mapSettings.showAssetPanel}
+          />
         {/await}
       </div>