Map of communes

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<title>Communes of Senegal</title>
	<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
	<style>
		#map { height: 60vh; }
	</style>
</head>
<body>
	<h1>Communes of Senegal</h1>
	<div id="map" role="region" aria-label="Map of communes"></div>
	<p>Sources: ANSD, RGPH-5 2023, via 221 (CC-BY 4.0). Centroids: OCHA COD-AB via HDX, non-official source (CC BY-IGO).</p>
	<h2>List</h2>
	<ul id="list"></ul>
	<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
	<script type="module">
		import { prepare } from './prepare.js';

		const places = await (await fetch('./lieux.json')).json();
		const points = prepare(places);
		const fmt = new Intl.NumberFormat('en-GB');

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

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

		// The list stays the reference view: usable by keyboard and screen reader.
		const list = document.querySelector('#list');
		points
			.flatMap((p) => p.communes.map((c) => ({ ...c, area: p.name })))
			.sort((a, b) => a.name.localeCompare(b.name, 'fr'))
			.forEach((c) => {
				const li = document.createElement('li');
				li.textContent = `${c.name}, ${c.area}, ${fmt.format(c.population ?? 0)} inhabitants`;
				list.append(li);
			});
	</script>
</body>
</html>