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

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

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