From 99b018cd493d86f7069b0e48b7e822b3a6096ea2 Mon Sep 17 00:00:00 2001
From: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com>
Date: Tue, 23 May 2023 11:14:00 +0200
Subject: [PATCH] fix(web): loading leaflet in production builds (#2526)

---
 .../leaflet/asset-marker-cluster.svelte       | 28 ++++---
 web/src/routes/(user)/map/+page.svelte        | 78 +++++++++----------
 2 files changed, 52 insertions(+), 54 deletions(-)

diff --git a/web/src/lib/components/shared-components/leaflet/asset-marker-cluster.svelte b/web/src/lib/components/shared-components/leaflet/asset-marker-cluster.svelte
index 8b53ecd2fd..54c12af10f 100644
--- a/web/src/lib/components/shared-components/leaflet/asset-marker-cluster.svelte
+++ b/web/src/lib/components/shared-components/leaflet/asset-marker-cluster.svelte
@@ -17,9 +17,7 @@
 	import { getMapContext } from './map.svelte';
 
 	class AssetMarker extends Marker {
-		marker: MapMarkerResponseDto;
-
-		constructor(marker: MapMarkerResponseDto) {
+		constructor(private marker: MapMarkerResponseDto) {
 			super([marker.lat, marker.lon], {
 				icon: new Icon({
 					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 {
@@ -77,20 +79,16 @@
 		cluster.on('clustermouseout', (event: LeafletEvent) => {
 			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);
 	});
 
+	$: if (cluster) {
+		const leafletMarkers = markers.map((marker) => new AssetMarker(marker));
+
+		cluster.clearLayers();
+		cluster.addLayers(leafletMarkers);
+	}
+
 	onDestroy(() => {
 		if (cluster) cluster.remove();
 	});
diff --git a/web/src/routes/(user)/map/+page.svelte b/web/src/routes/(user)/map/+page.svelte
index e0a369e6a4..94ba41d994 100644
--- a/web/src/routes/(user)/map/+page.svelte
+++ b/web/src/routes/(user)/map/+page.svelte
@@ -16,14 +16,16 @@
 
 	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 viewingAssets: string[] = [];
 	let viewingAssetCursor = 0;
 	let showSettingsModal = false;
 
 	onMount(() => {
-		mapMarkersPromise = loadMapMarkers();
+		loadMapMarkers().then((data) => (mapMarkers = data));
+		import('$lib/components/shared-components/leaflet').then((data) => (leaflet = data));
 	});
 
 	onDestroy(() => {
@@ -69,43 +71,42 @@
 
 <UserPageLayout user={data.user} title={data.meta.title}>
 	<div class="h-full w-full isolate">
-		{#await import('$lib/components/shared-components/leaflet') then { Map, TileLayer, AssetMarkerCluster, Control }}
-			{#await mapMarkersPromise then mapMarkers}
-				<Map
-					center={getMapCenter(mapMarkers)}
-					zoom={7}
-					allowDarkMode={$mapSettings.allowDarkMode}
+		{#if leaflet && mapMarkers}
+			{@const { Map, TileLayer, AssetMarkerCluster, Control } = leaflet}
+			<Map
+				center={getMapCenter(mapMarkers)}
+				zoom={7}
+				allowDarkMode={$mapSettings.allowDarkMode}
+				options={{
+					maxBounds: [
+						[-90, -180],
+						[90, 180]
+					],
+					minZoom: 3
+				}}
+			>
+				<TileLayer
+					urlTemplate={'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'}
 					options={{
-						maxBounds: [
-							[-90, -180],
-							[90, 180]
-						],
-						minZoom: 3
+						attribution:
+							'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
 					}}
-				>
-					<TileLayer
-						urlTemplate={'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'}
-						options={{
-							attribution:
-								'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
-						}}
-					/>
-					<AssetMarkerCluster
-						markers={mapMarkers}
-						on:view={(event) => onViewAssets(event.detail.assets)}
-					/>
-					<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"
-							title="Open map settings"
-							on:click={() => (showSettingsModal = true)}
-						>
-							<Cog size="100%" class="p-1" />
-						</button>
-					</Control>
-				</Map>
-			{/await}
-		{/await}
+				/>
+				<AssetMarkerCluster
+					markers={mapMarkers}
+					on:view={(event) => onViewAssets(event.detail.assets)}
+				/>
+				<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"
+						title="Open map settings"
+						on:click={() => (showSettingsModal = true)}
+					>
+						<Cog size="100%" class="p-1" />
+					</button>
+				</Control>
+			</Map>
+		{/if}
 	</div>
 </UserPageLayout>
 
@@ -133,8 +134,7 @@
 			$mapSettings = detail;
 
 			if (shouldUpdate) {
-				const markers = await loadMapMarkers();
-				mapMarkersPromise = Promise.resolve(markers);
+				mapMarkers = await loadMapMarkers();
 			}
 		}}
 	/>