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();
}); });

78
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,43 +71,42 @@
<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}
allowDarkMode={$mapSettings.allowDarkMode} allowDarkMode={$mapSettings.allowDarkMode}
options={{
maxBounds: [
[-90, -180],
[90, 180]
],
minZoom: 3
}}
>
<TileLayer
urlTemplate={'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'}
options={{ options={{
maxBounds: [ attribution:
[-90, -180], '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
[90, 180]
],
minZoom: 3
}} }}
> />
<TileLayer <AssetMarkerCluster
urlTemplate={'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'} markers={mapMarkers}
options={{ on:view={(event) => onViewAssets(event.detail.assets)}
attribution: />
'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>' <Control>
}} <button
/> class="flex justify-center items-center bg-white text-black/70 w-8 h-8 font-bold rounded-sm border-2 border-black/20 hover:bg-gray-50 focus:bg-gray-50"
<AssetMarkerCluster title="Open map settings"
markers={mapMarkers} on:click={() => (showSettingsModal = true)}
on:view={(event) => onViewAssets(event.detail.assets)} >
/> <Cog size="100%" class="p-1" />
<Control> </button>
<button </Control>
class="flex justify-center items-center bg-white text-black/70 w-8 h-8 font-bold rounded-sm border-2 border-black/20 hover:bg-gray-50 focus:bg-gray-50" </Map>
title="Open map settings" {/if}
on:click={() => (showSettingsModal = true)}
>
<Cog size="100%" class="p-1" />
</button>
</Control>
</Map>
{/await}
{/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);
} }
}} }}
/> />