1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-01-27 22:22:45 +01:00

feat(web): open in map view ()

This commit is contained in:
Jason Rasmussen 2024-08-05 11:25:53 -04:00 committed by GitHub
parent 54d2c12fff
commit 94da5942bd
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 25 additions and 7 deletions
web/src
lib
components
asset-viewer
shared-components/map
i18n
routes/(user)/map/[[photos=photos]]/[[assetId=id]]

View file

@ -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}

View file

@ -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 }}

View file

@ -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",

View file

@ -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 }}