self-hosted/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2024-12-25 10:43:13 +02:00
Code Issues Releases Activity

fix(web): loading leaflet in production builds (#2526)

Browse Source
This commit is contained in:
Michel Heusschen 2023-05-23 11:14:00 +02:00 committed by GitHub
parent 6aa2800275
commit 99b018cd49
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 52 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
web/src/lib/components/shared-components/leaflet/asset-marker-cluster.svelte
View File

@ -17,9 +17,7 @@
import { getMapContext } from './map.svelte'; import { getMapContext } from './map.svelte';
class AssetMarker extends Marker { class AssetMarker extends Marker {
marker: MapMarkerResponseDto; constructor(private marker: MapMarkerResponseDto) {
constructor(marker: MapMarkerResponseDto) {
super([marker.lat, marker.lon], { super([marker.lat, marker.lon], {
icon: new Icon({ icon: new Icon({
iconUrl: api.getAssetThumbnailUrl(marker.id), iconUrl: api.getAssetThumbnailUrl(marker.id),
@ -33,7 +31,11 @@
}) })
}); });
this.marker = marker; this.on('click', this.onClick);
}
onClick() {
dispatch('view', { assets: [this.marker.id] });
} }
getAssetId(): string { getAssetId(): string {
@ -77,20 +79,16 @@
cluster.on('clustermouseout', (event: LeafletEvent) => { cluster.on('clustermouseout', (event: LeafletEvent) => {
event.sourceTarget.unspiderfy(); event.sourceTarget.unspiderfy();
}); });
for (let marker of markers) {
const leafletMarker = new AssetMarker(marker);
leafletMarker.on('click', () => {
dispatch('view', { assets: [marker.id] });
});
cluster.addLayer(leafletMarker);
}
map.addLayer(cluster); map.addLayer(cluster);
}); });
$: if (cluster) {
const leafletMarkers = markers.map((marker) => new AssetMarker(marker));
cluster.clearLayers();
cluster.addLayers(leafletMarkers);
}
onDestroy(() => { onDestroy(() => {
if (cluster) cluster.remove(); if (cluster) cluster.remove();
}); });

16
web/src/routes/(user)/map/+page.svelte
View File

@ -16,14 +16,16 @@
export let data: PageData; export let data: PageData;
let mapMarkersPromise: Promise<MapMarkerResponseDto[]>; let leaflet: typeof import('$lib/components/shared-components/leaflet');
let mapMarkers: MapMarkerResponseDto[];
let abortController = new AbortController(); let abortController = new AbortController();
let viewingAssets: string[] = []; let viewingAssets: string[] = [];
let viewingAssetCursor = 0; let viewingAssetCursor = 0;
let showSettingsModal = false; let showSettingsModal = false;
onMount(() => { onMount(() => {
mapMarkersPromise = loadMapMarkers(); loadMapMarkers().then((data) => (mapMarkers = data));
import('$lib/components/shared-components/leaflet').then((data) => (leaflet = data));
}); });
onDestroy(() => { onDestroy(() => {
@ -69,8 +71,8 @@
<UserPageLayout user={data.user} title={data.meta.title}> <UserPageLayout user={data.user} title={data.meta.title}>
<div class="h-full w-full isolate"> <div class="h-full w-full isolate">
{#await import('$lib/components/shared-components/leaflet') then { Map, TileLayer, AssetMarkerCluster, Control }} {#if leaflet && mapMarkers}
{#await mapMarkersPromise then mapMarkers} {@const { Map, TileLayer, AssetMarkerCluster, Control } = leaflet}
<Map <Map
center={getMapCenter(mapMarkers)} center={getMapCenter(mapMarkers)}
zoom={7} zoom={7}
@ -104,8 +106,7 @@
</button> </button>
</Control> </Control>
</Map> </Map>
{/await} {/if}
{/await}
</div> </div>
</UserPageLayout> </UserPageLayout>
@ -133,8 +134,7 @@
$mapSettings = detail; $mapSettings = detail;
if (shouldUpdate) { if (shouldUpdate) {
const markers = await loadMapMarkers(); mapMarkers = await loadMapMarkers();
mapMarkersPromise = Promise.resolve(markers);
} }
}} }}
/> />