Carte des communes

<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<title>Communes du Sénégal</title>
	<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
	<style>
		#carte { height: 60vh; }
	</style>
</head>
<body>
	<h1>Communes du Sénégal</h1>
	<div id="carte" role="region" aria-label="Carte des communes"></div>
	<p>Sources : ANSD, RGPH-5 2023, via 221 (CC-BY 4.0). Centroïdes : OCHA COD-AB via HDX, source non officielle (CC BY-IGO).</p>
	<h2>Liste</h2>
	<ul id="liste"></ul>
	<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
	<script type="module">
		import { preparer } from './preparer.js';

		const lieux = await (await fetch('./lieux.json')).json();
		const points = preparer(lieux);
		const fmt = new Intl.NumberFormat('fr-FR');

		const carte = L.map('carte').setView([14.5, -14.5], 7);
		L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap' }).addTo(carte);

		for (const p of points) {
			const total = p.communes.reduce((s, c) => s + (c.population ?? 0), 0);
			const bulle = document.createElement('p');
			bulle.textContent = `${p.nom} (${p.niveau}) : ${p.communes.length} commune(s), ${fmt.format(total)} hab.`;
			L.circleMarker([p.lat, p.lon], { radius: 4 + Math.sqrt(total) / 60 }).bindPopup(bulle).addTo(carte);
		}

		// La liste reste la vue de référence : lisible au clavier et au lecteur d'écran.
		const liste = document.querySelector('#liste');
		points
			.flatMap((p) => p.communes.map((c) => ({ ...c, zone: p.nom })))
			.sort((a, b) => a.nom.localeCompare(b.nom, 'fr'))
			.forEach((c) => {
				const li = document.createElement('li');
				li.textContent = `${c.nom}, ${c.zone}, ${fmt.format(c.population ?? 0)} hab.`;
				liste.append(li);
			});
	</script>
</body>
</html>