viewof map = { const container = htl.html`

`; const map = L.map(container).setView([46.6033, 1.8883], 6); // Ajouter un fond de carte OpenStreetMap L.tileLayer("https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png", { attribution: "© OpenStreetMap contributors" }).addTo(map); // Fonction pour mettre à jour la carte avec les musées filtrés par département et villes sélectionnées function updateMap(selectedDepartement, selectedVilles) { // Supprimer les marqueurs existants avant d'ajouter de nouveaux map.eachLayer(layer => { if (layer instanceof L.CircleMarker) { map.removeLayer(layer); } }); // Ajouter les points des musées filtrés sur la carte en fonction du département et des villes sélectionnées listeMusees .filter(musee => (selectedDepartement === "Tous" || musee.departement === selectedDepartement) && (selectedVilles.length === 0 || selectedVilles.includes(musee.ville)) // Affiche toutes les villes si aucune case cochée ) .forEach(et => { const markerColor = et.url ? "blue" : "red"; // Bleu si présence en ligne, rouge sinon const markerRadius = 4; // Taille standard du cercle const marker = L.circleMarker([et.lat, et.lon], { color: markerColor, radius: markerRadius, fillColor: markerColor, fillOpacity: 0.7 }).addTo(map); const popupContent = et.url ? `${et.name}
Visiter le site` : et.name; marker.bindPopup(popupContent); // Ajoute le nom du musée (et le lien si présent) dans un pop-up }); } // Récupérer tous les départements uniques des musées const uniqueDepartements = ["Tous", ...new Set(listeMusees.map(musee => musee.departement))]; // Créer un menu déroulant pour choisir le département const dropdownDepartement = html``; // Affichage réactif de la liste des villes en fonction du département sélectionné function createVilleCheckboxes(selectedDepartement) { const villesDansDepartement = [...new Set(listeMusees .filter(musee => musee.departement === selectedDepartement) .map(musee => musee.ville) )]; const museeParVille = villesDansDepartement.map(ville => { const count = listeMusees.filter(musee => musee.ville === ville && musee.departement === selectedDepartement).length; return { ville, count }; }); const checkboxes = html`

${museeParVille.map(({ ville, count }) => html` ${ville} (${count} musée${count > 1 ? 's' : ''})
`)}

`; checkboxes.querySelectorAll('input[type="checkbox"]').forEach(checkbox => { checkbox.addEventListener('change', () => { const selectedVilles = Array.from(checkboxes.querySelectorAll('input:checked')).map(cb => cb.value); updateMap(dropdownDepartement.value, selectedVilles); }); }); return checkboxes; } // Conteneur pour les cases à cocher des villes let villeCheckboxContainer = createVilleCheckboxes("Tous"); // Mise à jour des villes lors du changement de département dropdownDepartement.addEventListener('change', () => { const selectedDepartement = dropdownDepartement.value; villeCheckboxContainer.replaceWith(villeCheckboxContainer = createVilleCheckboxes(selectedDepartement)); updateMap(selectedDepartement, []); // Affiche toutes les villes au départ }); // Initialisation de la carte avec tous les départements et villes updateMap("Tous", []); // Ajout de la légende pour les couleurs des points const legend = htl.html`

Légende des points :

Musée avec présence en ligne
Musée sans présence en ligne

`; // Ajout du titre const title = htl.html`

Carte des musées par ville & leur présence en ligne

`; return html`${title}${dropdownDepartement}${villeCheckboxContainer}${container}${legend}`; }