feat: load map data on the page directly

src/routes/api/map/+server.ts

@@ -1,8 +1,8 @@
 import { getMergedStops, getMetro, getTram, parseOptions } from "$lib";
-import type { PageServerLoad } from "./$types";
 import type { MapData } from "$lib/types";
+import type { RequestHandler } from "./$types";
 
-export const load: PageServerLoad = async ({ fetch, url }) => {
+export const GET: RequestHandler = async ({ fetch, url }) => {
 	const options = parseOptions(url);
 	const mapData: MapData = { lines: [], stops: [] };
 
@@ -27,5 +27,5 @@ export const load: PageServerLoad = async ({ fetch, url }) => {
 		}
 	}
 
-	return { mapData };
+	return Response.json(mapData);
 };

src/routes/game/+page.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
-	import type { CheckData, CheckResponse, GameData } from "$lib/types";
-	import type { PageData } from "./$types";
+	import type { CheckData, CheckResponse, GameData, MapData } from "$lib/types";
 	import { page } from "$app/stores";
 	import L from "leaflet";
 
@@ -8,15 +7,10 @@
 	import "leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css";
 	import "leaflet-defaulticon-compatibility";
 
-	interface Props {
-		data: PageData;
-	}
-
-	let { data }: Props = $props();
-
 	const zoom = 13;
 	const center = L.latLng(45.742858495, 4.86163814);
 
+	let mapPromise = $state(fetchMap());
 	let gamePromise = $state(fetchGame());
 	let results: CheckResponse | null = $state(null);
 
@@ -25,12 +19,16 @@
 	let solutionMarker: L.Marker | null = $state(null);
 	let solutionLine: L.Polyline | null = $state(null);
 
+	async function fetchMap(): Promise<MapData> {
+		return fetch("/api/map?" + $page.url.searchParams).then((r) => r.json());
+	}
+
 	async function fetchGame(): Promise<GameData> {
 		return fetch("/api/game?" + $page.url.searchParams).then((r) => r.json());
 	}
 
-	function createMap(node: HTMLElement) {
-		map = L.map(node).setView(center, zoom);
+	mapPromise.then((mapData) => {
+		map = L.map("map").setView(center, zoom);
 
 		L.tileLayer(`https://basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}{r}.png`, {
 			attribution:
@@ -39,10 +37,10 @@
 		}).addTo(map);
 
 		// we know map isn't null
-		data.mapData.lines.forEach(([feature, color]) => {
+		mapData.lines.forEach(([feature, color]) => {
 			L.geoJSON(feature, { style: { color } }).addTo(map!);
 		});
-		data.mapData.stops.forEach((coords) => {
+		mapData.stops.forEach((coords) => {
 			const marker = L.marker(coords).addTo(map!);
 			marker.on("click", (e) => setMarker(e.latlng));
 		});
@@ -53,7 +51,7 @@
 				checkLocation();
 			}
 		});
-	}
+	});
 
 	function setMarker(pos: L.LatLng) {
 		if (map && !results) {
@@ -116,8 +114,10 @@
 	}
 </script>
 
-{#await gamePromise then gameData}
-	<div class="container">
+<div class="container">
+	{#await mapPromise.then(() => gamePromise)}
+		<h1>Loading...</h1>
+	{:then gameData}
 		<h1>{gameData.stopName}</h1>
 
 		<div>
@@ -127,14 +127,14 @@
 				<button onclick={restartGame}>RESTART</button>
 			{/if}
 		</div>
+	{/await}
 
-		<span class="results" hidden={!results}>
-			{Math.floor(results?.score ?? 0)} points! Vous etiez à {Math.floor(results?.distance ?? 0)}m.
-		</span>
+	<span class="results" hidden={!results}>
+		{Math.floor(results?.score ?? 0)} points! Vous etiez à {Math.floor(results?.distance ?? 0)}m.
+	</span>
 
-		<div id="map" use:createMap></div>
-	</div>
-{/await}
+	<div id="map"></div>
+</div>
 
 <style>
 	.container {