feat: make map reactive

src/app.html

@@ -11,8 +11,10 @@
 	</body>
 
 	<style>
+		html,
 		body {
 			margin: 0;
+			height: 100%;
 		}
 	</style>
 </html>

src/routes/+page.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import type { PageData } from "./$types";
-	import { page } from "$app/stores";
 	import L from "leaflet";
 
 	import "leaflet/dist/leaflet.css";
@@ -12,60 +11,76 @@
 	let { data }: Props = $props();
 
 	const lignes = data.lines;
-	const params = $page.url.searchParams;
+	const point = L.latLng(45.75388713, 4.84715287);
-	const center = L.latLng(45.75388713, 4.84715287);
+
+	const bbox = lignes.bbox || [0, 0, 0, 0];
+	const center = L.latLng((bbox[1] + bbox[3]) / 2, (bbox[0] + bbox[2]) / 2);
+
+	const linesJson = lignes.features.map((feature) => {
+		let color = "rgb(" + feature.properties?.couleur?.replaceAll(" ", ",") + ")";
+		return L.geoJSON(feature, { style: { color } });
+	});
 
 	let latlng = $state(L.latLng(0, 0));
-	let distance = $derived(Math.max(0, latlng.distanceTo(center) - 20));
+	let distance = $derived(Math.max(0, latlng.distanceTo(point) - 20));
 	let points = $derived(5000 * Math.exp(-distance / 750));
 
-	function createMap(node: HTMLElement) {
+	let lines = $state(true);
-		const bbox = lignes.bbox || [0, 0, 0, 0];
+	let labels = $state(false);
-		const centerLat = (bbox[1] + bbox[3]) / 2;
-		const centerLon = (bbox[0] + bbox[2]) / 2;
 
-		const map = L.map(node).setView([centerLat, centerLon], 13);
+	let map: L.Map | null = $state(null);
-		const mapSuffix = params.has("labels") ? "all" : "nolabels";
+	let tileLayer = $derived(
-
+		L.tileLayer(
-		L.tileLayer(`https://basemaps.cartocdn.com/light_${mapSuffix}/{z}/{x}/{y}{r}.png`, {
+			`https://basemaps.cartocdn.com/light_${labels ? "all" : "nolabels"}/{z}/{x}/{y}{r}.png`,
+			{
 				attribution:
 					'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>',
 				maxZoom: 20,
-		}).addTo(map);
+			},
+		),
+	);
 
-		if (params.has("lines")) {
+	$effect(() => {
-			lignes.features.forEach((feature) => {
+		if (!map) return;
-				let color = "black";
+		tileLayer.addTo(map);
 
-				if (feature.properties && feature.properties.couleur) {
+		if (lines) {
-					color = "rgb(" + feature.properties.couleur.replaceAll(" ", ",") + ")";
+			linesJson.forEach((line) => map && line.addTo(map));
+		} else {
+			linesJson.forEach((line) => map && line.removeFrom(map));
 		}
-
-				L.geoJSON(feature, { style: { color } }).addTo(map);
 	});
-		}
+
+	function createMap(node: HTMLElement) {
+		map = L.map(node).setView(center, 13);
 
 		const marker = L.marker([0, 0]);
 		map.on("click", (e) => {
-			marker.setLatLng(e.latlng).addTo(map);
+			if (map) marker.setLatLng(e.latlng).addTo(map);
 			latlng = e.latlng;
 		});
 	}
 </script>
 
-<div id="info">
+<div class="banner">
 	<span>distance: {distance}, points: {points}</span>
 </div>
 
+<div class="banner">
+	<label>lines: <input type="checkbox" bind:checked={lines} /></label>
+	<label>labels: <input type="checkbox" bind:checked={labels} /></label>
+</div>
+
 <div id="map" use:createMap></div>
 
 <style>
-	#info {
+	.banner {
-		height: 5vh;
+		padding: 4px;
+		text-align: center;
 	}
 
 	#map {
-		height: 95vh;
+		height: 100%;
 		width: 100%;
 	}
 </style>