Cutlery/immich
1
0
Fork 1
mirror of https://github.com/immich-app/immich.git synced 2025-05-24 01:12:58 -04:00
Code Issues Packages Projects Releases Wiki Activity

fix: map (#18399)

Browse Source
This commit is contained in:
Daniel Dietzler 2025-05-20 19:52:23 +02:00 committed by GitHub
parent 53420b7c02
commit 12b7a079c1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 31 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
web/src/lib/components/album-page/album-map.svelte
View File

@ -1,7 +1,5 @@
<script lang="ts"> <script lang="ts">
import { clickOutside } from '$lib/actions/click-outside';
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte'; import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
import type Map from '$lib/components/shared-components/map/map.svelte';
import Portal from '$lib/components/shared-components/portal/portal.svelte'; import Portal from '$lib/components/shared-components/portal/portal.svelte';
import { timeToLoadTheMap } from '$lib/constants'; import { timeToLoadTheMap } from '$lib/constants';
import { albumMapViewManager } from '$lib/managers/album-view-map.manager.svelte'; import { albumMapViewManager } from '$lib/managers/album-view-map.manager.svelte';
@ -25,8 +23,6 @@
let viewingAssets: string[] = $state([]); let viewingAssets: string[] = $state([]);
let viewingAssetCursor = 0; let viewingAssetCursor = 0;
let mapElement = $state<ReturnType<typeof Map>>();
let zoom = $derived(1); let zoom = $derived(1);
let mapMarkers: MapMarkerResponseDto[] = $state([]); let mapMarkers: MapMarkerResponseDto[] = $state([]);
@ -77,6 +73,7 @@
async function onViewAssets(assetIds: string[]) { async function onViewAssets(assetIds: string[]) {
viewingAssets = assetIds; viewingAssets = assetIds;
viewingAssetCursor = 0; viewingAssetCursor = 0;
closeMap();
await setAssetId(assetIds[0]); await setAssetId(assetIds[0]);
} }
@ -110,35 +107,32 @@
<CircleIconButton title={$t('map')} onclick={openMap} icon={mdiMapOutline} /> <CircleIconButton title={$t('map')} onclick={openMap} icon={mdiMapOutline} />
{#if albumMapViewManager.isInMapView} {#if albumMapViewManager.isInMapView}
<div use:clickOutside={{ onOutclick: closeMap }}> <Modal title={$t('map')} size="medium" onClose={closeMap}>
<Modal title={$t('map')} size="medium" onClose={closeMap}> <ModalBody>
<ModalBody> <div class="flex flex-col w-full h-full gap-2 border border-gray-300 dark:border-light rounded-2xl">
<div class="flex flex-col w-full h-full gap-2 border border-gray-300 dark:border-light rounded-2xl"> <div class="h-[500px] min-h-[300px] w-full">
<div class="h-[500px] min-h-[300px] w-full"> {#await import('../shared-components/map/map.svelte')}
{#await import('../shared-components/map/map.svelte')} {#await delay(timeToLoadTheMap) then}
{#await delay(timeToLoadTheMap) then} <!-- show the loading spinner only if loading the map takes too much time -->
<!-- show the loading spinner only if loading the map takes too much time --> <div class="flex items-center justify-center h-full w-full">
<div class="flex items-center justify-center h-full w-full"> <LoadingSpinner />
<LoadingSpinner /> </div>
</div>
{/await}
{:then { default: Map }}
<Map
bind:this={mapElement}
center={undefined}
{zoom}
clickable={false}
bind:mapMarkers
onSelect={onViewAssets}
showSettings={false}
rounded
/>
{/await} {/await}
</div> {:then { default: Map }}
<Map
center={undefined}
{zoom}
clickable={false}
bind:mapMarkers
onSelect={onViewAssets}
showSettings={false}
rounded
/>
{/await}
</div> </div>
</ModalBody> </div>
</Modal> </ModalBody>
</div> </Modal>
<Portal target="body"> <Portal target="body">
{#if $showAssetViewer} {#if $showAssetViewer}

10
web/src/lib/components/shared-components/map/map.svelte
View File

@ -57,7 +57,7 @@
} }
let { let {
mapMarkers = $bindable([]), mapMarkers = $bindable(),
showSettings = true, showSettings = true,
zoom = undefined, zoom = undefined,
center = $bindable(undefined), center = $bindable(undefined),
@ -210,11 +210,13 @@
}; };
onMount(async () => { onMount(async () => {
mapMarkers = await loadMapMarkers(); if (!mapMarkers) {
mapMarkers = await loadMapMarkers();
}
}); });
onDestroy(() => { onDestroy(() => {
abortController.abort(); abortController?.abort();
}); });
$effect(() => { $effect(() => {
@ -296,7 +298,7 @@
<GeoJSON <GeoJSON
data={{ data={{
type: 'FeatureCollection', type: 'FeatureCollection',
features: mapMarkers.map((marker) => asFeature(marker)), features: mapMarkers?.map((marker) => asFeature(marker)) ?? [],
}} }}
id="geojson" id="geojson"
cluster={{ radius: 35, maxZoom: 17 }} cluster={{ radius: 35, maxZoom: 17 }}