diff --git a/src/routes/game/+page.svelte b/src/routes/game/+page.svelte index 4657ecd..0a415a4 100644 --- a/src/routes/game/+page.svelte +++ b/src/routes/game/+page.svelte @@ -11,6 +11,9 @@ const zoom = 13; const center: [number, number] = [45.742858495, 4.86163814]; + const metroIcon = new L.Icon({ iconUrl: "/metro.svg", iconSize: [29, 15] }); + const tramIcon = new L.Icon({ iconUrl: "/tram.svg", iconSize: [29, 15] }); + let mapPromise = $state(fetchMap()); let gamePromise = $state(fetchGame()); let isChecking = $state(false); @@ -53,8 +56,10 @@ mapData.lines.forEach(([feature, color]) => { L.geoJSON(feature, { style: { color } }).addTo(map!); }); + + const icon = $page.url.searchParams.get("stops_type") === "tram" ? tramIcon : metroIcon; mapData.stops.forEach((coords) => { - const marker = L.marker(coords).addTo(map!); + const marker = L.marker(coords, { icon }).addTo(map!); marker.on("click", (e) => setMarker(e.latlng)); }); diff --git a/static/metro.svg b/static/metro.svg new file mode 100644 index 0000000..bf20a34 --- /dev/null +++ b/static/metro.svg @@ -0,0 +1,21 @@ + + + + + + + + + image/svg+xml + + + + + + + + + + + + \ No newline at end of file diff --git a/static/tram.svg b/static/tram.svg new file mode 100644 index 0000000..bd8affd --- /dev/null +++ b/static/tram.svg @@ -0,0 +1,21 @@ + + + + + + + + + image/svg+xml + + + + + + + + + + + + \ No newline at end of file