feat: add initial map with lines

package.json

@@ -11,11 +11,15 @@
 		"lint": "prettier --check . && eslint .",
 		"format": "prettier --write ."
 	},
+	"dependencies": {
+		"leaflet": "^1.9.4"
+	},
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "^3.2.5",
 		"@sveltejs/kit": "^2.7.1",
 		"@sveltejs/vite-plugin-svelte": "^3.1.2",
 		"@types/eslint": "^9.6.1",
+		"@types/leaflet": "^1.9.12",
 		"eslint": "^9.12.0",
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-svelte": "^2.45.1",

src/routes/+page.svelte

@@ -1,2 +1,31 @@
-<h1>Welcome to SvelteKit</h1>
+<script lang="ts">
-<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
+	import 'leaflet/dist/leaflet.css';
+	import lignes from './lignes.json';
+
+	import L from 'leaflet';
+
+	function createMap(node: HTMLElement) {
+		const map = L.map(node).setView([45.76, 4.832], 13);
+
+		L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+			maxZoom: 19,
+			attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+		}).addTo(map);
+
+		lignes.features.forEach((feature) => {
+			const color = 'rgb(' + feature.properties.couleur.replaceAll(' ', ',') + ')';
+
+			// @ts-ignore
+			L.geoJSON(feature, { style: { color } }).addTo(map);
+		});
+	}
+</script>
+
+<div class="map" use:createMap></div>
+
+<style>
+	.map {
+		height: 800px;
+		width: 100%;
+	}
+</style>

src/routes/+page.ts

@@ -0,0 +1 @@
+export const ssr = false;