...

src/lib/components/MapPoint.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+	import { onDestroy, onMount } from 'svelte';
+	import 'leaflet/dist/leaflet.css';
+	import { env } from '$env/dynamic/public';
+	import { twMerge } from 'tailwind-merge';
+
+	interface MarkerPoint {
+		latitude: number;
+		longitude: number;
+		tooltip?: string;
+	}
+
+	export let coordinates: MarkerPoint[];
+
+	let mapElement: HTMLDivElement;
+	let map: L.Map | null = null;
+	let markers: L.Marker<any>[] = [];
+	var icon: L.Icon;
+	let L: typeof import('leaflet/index');
+
+	onMount(async () => {
+		L = await import('leaflet');
+		icon = L.icon({
+			iconUrl: '/map_marker.png',
+
+			iconSize: [32, 32],
+			iconAnchor: [16, 32],
+			popupAnchor: [-3, -76]
+		});
+
+		map = L.map(mapElement);
+
+		if (coordinates.length >= 1) {
+			map.setView([coordinates[0].latitude, coordinates[0].longitude], 15);
+		}
+
+		L.tileLayer(env.PUBLIC_TILE_SERVER_URL, {
+			maxZoom: 18,
+			attribution:
+				'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
+			id: 'base'
+		}).addTo(map);
+
+		updateMarkers();
+	});
+
+	onDestroy(async () => {
+		map?.remove();
+	});
+
+	function addMarker(point: MarkerPoint) {
+		let marker = L.marker([point.latitude, point.longitude], { icon: icon });
+
+		if (point.tooltip)
+			marker.bindTooltip(point.tooltip, {
+				direction: 'bottom'
+			});
+
+		markers.push(marker);
+		map?.addLayer(marker);
+	}
+
+	function updateMarkers() {
+		if (L && map) {
+			markers.forEach((point) => map?.removeLayer(point));
+			markers = [];
+
+			coordinates.forEach(addMarker);
+
+			map?.flyToBounds(L.featureGroup(markers).getBounds(), {
+				duration: 1
+			});
+		}
+	}
+
+	$: coordinates && updateMarkers();
+</script>
+
+<div bind:this={mapElement} class={twMerge('z-0 h-full w-full', $$restProps['class'])} />