diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 805755b..c21198e 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,29 +1,26 @@
 <script lang="ts">
+	import type { PageData } from "./$types";
 	import { page } from "$app/stores";
-	import { onMount } from "svelte";
-	import type { GeoJSONOptions } from "leaflet";
+	import L from "leaflet";
 
 	import "leaflet/dist/leaflet.css";
 
-	const linesUrl =
-		"https://data.grandlyon.com/geoserver/sytral/ows?SERVICE=WFS&VERSION=2.0.0&request=GetFeature&typename=sytral:tcl_sytral.tcllignemf_2_0_0&outputFormat=application/json&SRSNAME=EPSG:4171&sortBy=gid";
+	export let data: PageData;
+	const lignes = data.lines;
+	const params = $page.url.searchParams;
 
-	let distance = +Infinity;
+	const center = L.latLng(45.75388713, 4.84715287);
+
+	let latlng = L.latLng(0, 0);
+	$: distance = Math.max(0, latlng.distanceTo(center) - 20);
 	$: points = 5000 * Math.exp(-distance / 750);
 
-	onMount(async () => {
-		const L = (await import("leaflet")).default;
-
-		const res = await fetch(linesUrl);
-		const lignes: GeoJSON.FeatureCollection = await res.json();
-
+	function createMap(node: HTMLElement) {
 		const bbox = lignes.bbox || [0, 0, 0, 0];
 		const centerLat = (bbox[1] + bbox[3]) / 2;
 		const centerLon = (bbox[0] + bbox[2]) / 2;
 
-		const map = L.map("map").setView([centerLat, centerLon], 13);
-
-		const params = $page.url.searchParams;
+		const map = L.map(node).setView([centerLat, centerLon], 13);
 		const mapSuffix = params.has("labels") ? "all" : "nolabels";
 
 		L.tileLayer(`https://basemaps.cartocdn.com/light_${mapSuffix}/{z}/{x}/{y}{r}.png`, {
@@ -34,32 +31,29 @@
 
 		if (params.has("lines")) {
 			lignes.features.forEach((feature) => {
-				const options: GeoJSONOptions = {};
+				let color = "black";
 
 				if (feature.properties && feature.properties.couleur) {
-					options.style = {
-						color: "rgb(" + feature.properties.couleur.replaceAll(" ", ",") + ")",
-					};
+					color = "rgb(" + feature.properties.couleur.replaceAll(" ", ",") + ")";
 				}
 
-				L.geoJSON(feature, options).addTo(map);
+				L.geoJSON(feature, { style: { color } }).addTo(map);
 			});
 		}
 
 		const marker = L.marker([0, 0]);
 		map.on("click", (e) => {
 			marker.setLatLng(e.latlng).addTo(map);
-			// allow 20m of error
-			distance = Math.max(0, e.latlng.distanceTo([45.75388713, 4.84715287]) - 20);
+			latlng = e.latlng;
 		});
-	});
+	}
 </script>
 
 <div id="info">
 	<span>distance: {distance}, points: {points}</span>
 </div>
 
-<div id="map"></div>
+<div id="map" use:createMap></div>
 
 <style>
 	#info {
diff --git a/src/routes/+page.ts b/src/routes/+page.ts
new file mode 100644
index 0000000..c145b88
--- /dev/null
+++ b/src/routes/+page.ts
@@ -0,0 +1,13 @@
+import type { PageLoad } from "./$types";
+
+const linesUrl =
+	"https://data.grandlyon.com/geoserver/sytral/ows?SERVICE=WFS&VERSION=2.0.0&request=GetFeature&typename=sytral:tcl_sytral.tcllignemf_2_0_0&outputFormat=application/json&SRSNAME=EPSG:4171&sortBy=gid";
+
+export const load: PageLoad = async () => {
+	const res = await fetch(linesUrl);
+	const lines: GeoJSON.FeatureCollection = await res.json();
+
+	return { lines };
+};
+
+export const ssr = false;