mirror of
https://github.com/immich-app/immich.git
synced 2025-01-27 22:22:45 +01:00
feat(web): open in map view (#11592)
This commit is contained in:
parent
54d2c12fff
commit
94da5942bd
4 changed files with 25 additions and 7 deletions
web/src
lib
routes/(user)/map/[[photos=photos]]/[[assetId=id]]
|
@ -42,6 +42,7 @@
|
||||||
import AlbumListItemDetails from './album-list-item-details.svelte';
|
import AlbumListItemDetails from './album-list-item-details.svelte';
|
||||||
import DetailPanelDescription from '$lib/components/asset-viewer/detail-panel-description.svelte';
|
import DetailPanelDescription from '$lib/components/asset-viewer/detail-panel-description.svelte';
|
||||||
import { t } from 'svelte-i18n';
|
import { t } from 'svelte-i18n';
|
||||||
|
import { goto } from '$app/navigation';
|
||||||
|
|
||||||
export let asset: AssetResponseDto;
|
export let asset: AssetResponseDto;
|
||||||
export let albums: AlbumResponseDto[] = [];
|
export let albums: AlbumResponseDto[] = [];
|
||||||
|
@ -441,6 +442,7 @@
|
||||||
zoom={15}
|
zoom={15}
|
||||||
simplified
|
simplified
|
||||||
useLocationPin
|
useLocationPin
|
||||||
|
onOpenInMapView={() => goto(`${AppRoute.MAP}#15/${latlng.lat}/${latlng.lng}`)}
|
||||||
>
|
>
|
||||||
<svelte:fragment slot="popup" let:marker>
|
<svelte:fragment slot="popup" let:marker>
|
||||||
{@const { lat, lon } = marker}
|
{@const { lat, lon } = marker}
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
import { colorTheme, mapSettings } from '$lib/stores/preferences.store';
|
import { colorTheme, mapSettings } from '$lib/stores/preferences.store';
|
||||||
import { getAssetThumbnailUrl, getKey, handlePromiseError } from '$lib/utils';
|
import { getAssetThumbnailUrl, getKey, handlePromiseError } from '$lib/utils';
|
||||||
import { getMapStyle, MapTheme, type MapMarkerResponseDto } from '@immich/sdk';
|
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 { Feature, GeoJsonProperties, Geometry, Point } from 'geojson';
|
||||||
import type { GeoJSONSource, LngLatLike, StyleSpecification } from 'maplibre-gl';
|
import type { GeoJSONSource, LngLatLike, StyleSpecification } from 'maplibre-gl';
|
||||||
import maplibregl from 'maplibre-gl';
|
import maplibregl from 'maplibre-gl';
|
||||||
|
@ -30,6 +30,7 @@
|
||||||
export let showSettingsModal: boolean | undefined = undefined;
|
export let showSettingsModal: boolean | undefined = undefined;
|
||||||
export let zoom: number | undefined = undefined;
|
export let zoom: number | undefined = undefined;
|
||||||
export let center: LngLatLike | undefined = undefined;
|
export let center: LngLatLike | undefined = undefined;
|
||||||
|
export let hash = false;
|
||||||
export let simplified = false;
|
export let simplified = false;
|
||||||
export let clickable = false;
|
export let clickable = false;
|
||||||
export let useLocationPin = false;
|
export let useLocationPin = false;
|
||||||
|
@ -45,6 +46,8 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export let onOpenInMapView: (() => Promise<void> | void) | undefined = undefined;
|
||||||
|
|
||||||
let map: maplibregl.Map;
|
let map: maplibregl.Map;
|
||||||
let marker: maplibregl.Marker | null = null;
|
let marker: maplibregl.Marker | null = null;
|
||||||
|
|
||||||
|
@ -121,6 +124,7 @@
|
||||||
|
|
||||||
{#await style then style}
|
{#await style then style}
|
||||||
<MapLibre
|
<MapLibre
|
||||||
|
{hash}
|
||||||
{style}
|
{style}
|
||||||
class="h-full"
|
class="h-full"
|
||||||
{center}
|
{center}
|
||||||
|
@ -133,12 +137,14 @@
|
||||||
bind:map
|
bind:map
|
||||||
>
|
>
|
||||||
<NavigationControl position="top-left" showCompass={!simplified} />
|
<NavigationControl position="top-left" showCompass={!simplified} />
|
||||||
|
|
||||||
{#if !simplified}
|
{#if !simplified}
|
||||||
<GeolocateControl position="top-left" />
|
<GeolocateControl position="top-left" />
|
||||||
<FullscreenControl position="top-left" />
|
<FullscreenControl position="top-left" />
|
||||||
<ScaleControl />
|
<ScaleControl />
|
||||||
<AttributionControl compact={false} />
|
<AttributionControl compact={false} />
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
{#if showSettingsModal !== undefined}
|
{#if showSettingsModal !== undefined}
|
||||||
<Control>
|
<Control>
|
||||||
<ControlGroup>
|
<ControlGroup>
|
||||||
|
@ -146,12 +152,21 @@
|
||||||
</ControlGroup>
|
</ControlGroup>
|
||||||
</Control>
|
</Control>
|
||||||
{/if}
|
{/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
|
<GeoJSON
|
||||||
data={{
|
data={{
|
||||||
type: 'FeatureCollection',
|
type: 'FeatureCollection',
|
||||||
features: mapMarkers.map((marker) => {
|
features: mapMarkers.map((marker) => asFeature(marker)),
|
||||||
return asFeature(marker);
|
|
||||||
}),
|
|
||||||
}}
|
}}
|
||||||
id="geojson"
|
id="geojson"
|
||||||
cluster={{ radius: 500, maxZoom: 24 }}
|
cluster={{ radius: 500, maxZoom: 24 }}
|
||||||
|
|
|
@ -857,6 +857,7 @@
|
||||||
"online": "Online",
|
"online": "Online",
|
||||||
"only_favorites": "Only favorites",
|
"only_favorites": "Only favorites",
|
||||||
"only_refreshes_modified_files": "Only refreshes modified files",
|
"only_refreshes_modified_files": "Only refreshes modified files",
|
||||||
|
"open_in_map_view": "Open in map view",
|
||||||
"open_in_openstreetmap": "Open in OpenStreetMap",
|
"open_in_openstreetmap": "Open in OpenStreetMap",
|
||||||
"open_the_search_filters": "Open the search filters",
|
"open_the_search_filters": "Open the search filters",
|
||||||
"options": "Options",
|
"options": "Options",
|
||||||
|
|
|
@ -111,9 +111,9 @@
|
||||||
{#if $featureFlags.loaded && $featureFlags.map}
|
{#if $featureFlags.loaded && $featureFlags.map}
|
||||||
<UserPageLayout title={data.meta.title}>
|
<UserPageLayout title={data.meta.title}>
|
||||||
<div class="isolate h-full w-full">
|
<div class="isolate h-full w-full">
|
||||||
<Map bind:mapMarkers bind:showSettingsModal on:selected={(event) => onViewAssets(event.detail)} />
|
<Map hash bind:mapMarkers bind:showSettingsModal on:selected={(event) => onViewAssets(event.detail)} />
|
||||||
</div></UserPageLayout
|
</div>
|
||||||
>
|
</UserPageLayout>
|
||||||
<Portal target="body">
|
<Portal target="body">
|
||||||
{#if $showAssetViewer}
|
{#if $showAssetViewer}
|
||||||
{#await import('../../../../../lib/components/asset-viewer/asset-viewer.svelte') then { default: AssetViewer }}
|
{#await import('../../../../../lib/components/asset-viewer/asset-viewer.svelte') then { default: AssetViewer }}
|
||||||
|
|
Loading…
Reference in a new issue