Use single DOM element for all markers

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

@@ -1,53 +0,0 @@
-<script lang="ts">
-	import { onDestroy, onMount } from 'svelte';
-	import { Marker, Icon, type LatLngExpression, type Content } from 'leaflet';
-	import { getClusterContext } from './marker-cluster.svelte';
-	import { AssetResponseDto } from '@api';
-
-	export let asset: AssetResponseDto;
-	let marker: Marker;
-
-	const defaultIcon = new Icon({
-		iconUrl: `/api/asset/thumbnail/${asset.id}?format=WEBP`,
-		iconRetinaUrl: `/api/asset/thumbnail/${asset.id}?format=WEBP`,
-
-		// Default values from Leaflet
-		iconSize: [40, 40],
-		iconAnchor: [12, 41],
-		popupAnchor: [1, -34],
-		tooltipAnchor: [16, -28],
-		shadowSize: [41, 41]
-	});
-	const cluster = getClusterContext();
-
-	onMount(() => {
-		if (asset.exifInfo) {
-			const lat = asset.exifInfo.latitude;
-			const lon = asset.exifInfo.longitude;
-
-			if (lat && lon) {
-				marker = new Marker([lat, lon], {
-					icon: defaultIcon,
-					alt: ''
-				});
-
-				cluster.addLayer(marker);
-			}
-		}
-	});
-
-	onDestroy(() => {
-		if (marker) marker.remove();
-	});
-
-	$: if (marker) {
-		if (asset.exifInfo) {
-			const lat = asset.exifInfo.latitude;
-			const lon = asset.exifInfo.longitude;
-
-			if (lat && lon) {
-				marker.setLatLng([lat, lon]);
-			}
-		}
-	}
-</script>

web/src/lib/components/shared-components/leaflet/marker-cluster.svelte → web/src/lib/components/shared-components/leaflet/asset-marker-cluster.svelte

@@ -12,6 +12,10 @@
 	import { onDestroy, onMount } from 'svelte';
 	import 'leaflet.markercluster';
 	import { getMapContext } from './map.svelte';
+	import { AssetResponseDto } from '@api';
+	import { Marker, Icon } from 'leaflet';
+
+	export let assets: AssetResponseDto[];
 
 	const map = getMapContext();
 	let cluster: L.MarkerClusterGroup;
@@ -26,6 +30,33 @@
 			maxClusterRadius: 30,
 			spiderLegPolylineOptions: { opacity: 0 }
 		});
+
+		for (let asset of assets) {
+			if (asset.exifInfo) {
+				const lat = asset.exifInfo.latitude;
+				const lon = asset.exifInfo.longitude;
+
+				if (lat && lon) {
+					const icon = new Icon({
+						iconUrl: `/api/asset/thumbnail/${asset.id}?format=WEBP`,
+						iconRetinaUrl: `/api/asset/thumbnail/${asset.id}?format=WEBP`,
+						iconSize: [40, 40],
+						iconAnchor: [12, 41],
+						popupAnchor: [1, -34],
+						tooltipAnchor: [16, -28],
+						shadowSize: [41, 41]
+					});
+
+					const marker = new Marker([lat, lon], {
+						icon,
+						alt: ''
+					});
+
+					cluster.addLayer(marker);
+				}
+			}
+		}
+
 		map.addLayer(cluster);
 	});
 

web/src/lib/components/shared-components/leaflet/index.ts

@@ -1,5 +1,4 @@
 export { default as Map } from './map.svelte';
 export { default as Marker } from './marker.svelte';
 export { default as TileLayer } from './tile-layer.svelte';
-export { default as MarkerCluster } from './marker-cluster.svelte';
-export { default as AssetClusterMarker } from './asset-cluster-marker.svelte';
+export { default as AssetMarkerCluster } from './asset-marker-cluster.svelte';

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { PageData } from '../map/$types';
 	import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
-	import { Map, TileLayer, MarkerCluster, AssetClusterMarker } from '$lib/components/shared-components/leaflet';
+	import { Map, TileLayer, AssetMarkerCluster } from '$lib/components/shared-components/leaflet';
 
 	export let data: PageData;
 </script>
@@ -20,14 +20,9 @@
 						'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
 				}}
 			/>
-			<MarkerCluster>
-				{#each data.assets as asset}
-					<AssetClusterMarker asset={asset} />
-				{/each}
-			</MarkerCluster>
+			<AssetMarkerCluster assets={data.assets} />
 		</Map>
 	</div>
 
-
 </UserPageLayout>