<script lang="ts">
	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: 100vh;
		width: 100%;
	}
</style>
