feat(web): open in map view (#11592)

web/src/lib/components/asset-viewer/detail-panel.svelte

@@ -42,6 +42,7 @@
   import AlbumListItemDetails from './album-list-item-details.svelte';
   import DetailPanelDescription from '$lib/components/asset-viewer/detail-panel-description.svelte';
   import { t } from 'svelte-i18n';
+  import { goto } from '$app/navigation';
 
   export let asset: AssetResponseDto;
   export let albums: AlbumResponseDto[] = [];
@@ -441,6 +442,7 @@
         zoom={15}
         simplified
         useLocationPin
+        onOpenInMapView={() => goto(`${AppRoute.MAP}#15/${latlng.lat}/${latlng.lng}`)}
       >
         <svelte:fragment slot="popup" let:marker>
           {@const { lat, lon } = marker}

web/src/lib/components/shared-components/map/map.svelte

@@ -4,7 +4,7 @@
   import { colorTheme, mapSettings } from '$lib/stores/preferences.store';
   import { getAssetThumbnailUrl, getKey, handlePromiseError } from '$lib/utils';
   import { getMapStyle, MapTheme, type MapMarkerResponseDto } from '@immich/sdk';
-  import { mdiCog, mdiMapMarker } from '@mdi/js';
+  import { mdiCog, mdiMap, mdiMapMarker } from '@mdi/js';
   import type { Feature, GeoJsonProperties, Geometry, Point } from 'geojson';
   import type { GeoJSONSource, LngLatLike, StyleSpecification } from 'maplibre-gl';
   import maplibregl from 'maplibre-gl';
@@ -30,6 +30,7 @@
   export let showSettingsModal: boolean | undefined = undefined;
   export let zoom: number | undefined = undefined;
   export let center: LngLatLike | undefined = undefined;
+  export let hash = false;
   export let simplified = false;
   export let clickable = false;
   export let useLocationPin = false;
@@ -45,6 +46,8 @@
     }
   }
 
+  export let onOpenInMapView: (() => Promise<void> | void) | undefined = undefined;
+
   let map: maplibregl.Map;
   let marker: maplibregl.Marker | null = null;
 
@@ -121,6 +124,7 @@
 
 {#await style then style}
   <MapLibre
+    {hash}
     {style}
     class="h-full"
     {center}
@@ -133,12 +137,14 @@
     bind:map
   >
     <NavigationControl position="top-left" showCompass={!simplified} />
+
     {#if !simplified}
       <GeolocateControl position="top-left" />
       <FullscreenControl position="top-left" />
       <ScaleControl />
       <AttributionControl compact={false} />
     {/if}
+
     {#if showSettingsModal !== undefined}
       <Control>
         <ControlGroup>
@@ -146,12 +152,21 @@
         </ControlGroup>
       </Control>
     {/if}
+
+    {#if onOpenInMapView}
+      <Control position="top-right">
+        <ControlGroup>
+          <ControlButton on:click={() => onOpenInMapView()}>
+            <Icon title={$t('open_in_map_view')} path={mdiMap} size="100%" />
+          </ControlButton>
+        </ControlGroup>
+      </Control>
+    {/if}
+
     <GeoJSON
       data={{
         type: 'FeatureCollection',
-        features: mapMarkers.map((marker) => {
-          return asFeature(marker);
-        }),
+        features: mapMarkers.map((marker) => asFeature(marker)),
       }}
       id="geojson"
       cluster={{ radius: 500, maxZoom: 24 }}

web/src/lib/i18n/en.json

@@ -857,6 +857,7 @@
   "online": "Online",
   "only_favorites": "Only favorites",
   "only_refreshes_modified_files": "Only refreshes modified files",
+  "open_in_map_view": "Open in map view",
   "open_in_openstreetmap": "Open in OpenStreetMap",
   "open_the_search_filters": "Open the search filters",
   "options": "Options",

web/src/routes/(user)/map/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -111,9 +111,9 @@
 {#if $featureFlags.loaded && $featureFlags.map}
   <UserPageLayout title={data.meta.title}>
     <div class="isolate h-full w-full">
-      <Map bind:mapMarkers bind:showSettingsModal on:selected={(event) => onViewAssets(event.detail)} />
-    </div></UserPageLayout
-  >
+      <Map hash bind:mapMarkers bind:showSettingsModal on:selected={(event) => onViewAssets(event.detail)} />
+    </div>
+  </UserPageLayout>
   <Portal target="body">
     {#if $showAssetViewer}
       {#await import('../../../../../lib/components/asset-viewer/asset-viewer.svelte') then { default: AssetViewer }}