feat(web): bundle and 'sveltify' leaflet (#1998)

* feat(web): bundle and 'sveltify' leaflet

* lazy load leaflet components

* add correct icon sizes

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

@@ -0,0 +1,3 @@
+export { default as Map } from './map.svelte';
+export { default as Marker } from './marker.svelte';
+export { default as TileLayer } from './tile-layer.svelte';

web/src/lib/components/shared-components/leaflet/map.svelte

@@ -0,0 +1,42 @@
+<script lang="ts" context="module">
+	import { createContext } from '$lib/utils/context';
+
+	const { get: getContext, set: setMapContext } = createContext<() => Map>();
+
+	export const getMapContext = () => {
+		const getMap = getContext();
+		return getMap();
+	};
+</script>
+
+<script lang="ts">
+	import { onMount, onDestroy } from 'svelte';
+	import { browser } from '$app/environment';
+	import { Map, type LatLngExpression } from 'leaflet';
+	import 'leaflet/dist/leaflet.css';
+
+	export let latlng: LatLngExpression;
+	export let zoom: number;
+	let container: HTMLDivElement;
+	let map: Map;
+
+	setMapContext(() => map);
+
+	onMount(() => {
+		if (browser) {
+			map = new Map(container);
+		}
+	});
+
+	onDestroy(() => {
+		if (map) map.remove();
+	});
+
+	$: if (map) map.setView(latlng, zoom);
+</script>
+
+<div bind:this={container} class="w-full h-full">
+	{#if map}
+		<slot />
+	{/if}
+</div>

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

@@ -0,0 +1,46 @@
+<script lang="ts">
+	import { onDestroy, onMount } from 'svelte';
+	import { Marker, Icon, type LatLngExpression, type Content } from 'leaflet';
+	import { getMapContext } from './map.svelte';
+	import iconUrl from 'leaflet/dist/images/marker-icon.png';
+	import iconRetinaUrl from 'leaflet/dist/images/marker-icon-2x.png';
+	import shadowUrl from 'leaflet/dist/images/marker-shadow.png';
+
+	export let latlng: LatLngExpression;
+	export let popupContent: Content | undefined = undefined;
+	let marker: Marker;
+
+	const defaultIcon = new Icon({
+		iconUrl,
+		iconRetinaUrl,
+		shadowUrl,
+
+		// Default values from Leaflet
+		iconSize: [25, 41],
+		iconAnchor: [12, 41],
+		popupAnchor: [1, -34],
+		tooltipAnchor: [16, -28],
+		shadowSize: [41, 41]
+	});
+	const map = getMapContext();
+
+	onMount(() => {
+		marker = new Marker(latlng, {
+			icon: defaultIcon
+		}).addTo(map);
+	});
+
+	onDestroy(() => {
+		if (marker) marker.remove();
+	});
+
+	$: if (marker) {
+		marker.setLatLng(latlng);
+
+		if (popupContent) {
+			marker.bindPopup(popupContent);
+		} else {
+			marker.unbindPopup();
+		}
+	}
+</script>

web/src/lib/components/shared-components/leaflet/tile-layer.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { onDestroy, onMount } from 'svelte';
+	import { TileLayer, type TileLayerOptions } from 'leaflet';
+	import { getMapContext } from './map.svelte';
+
+	export let urlTemplate: string;
+	export let options: TileLayerOptions | undefined = undefined;
+	let tileLayer: TileLayer;
+
+	const map = getMapContext();
+
+	onMount(() => {
+		tileLayer = new TileLayer(urlTemplate, options).addTo(map);
+	});
+
+	onDestroy(() => {
+		if (tileLayer) tileLayer.remove();
+	});
+</script>