viewof mapIso = { const container = html`

` yield container const parisCentre = [2.34, 48.86] const map = new maplibregl.Map({ container: container, style: 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json', center: parisCentre, zoom: 11, bearing: 0, locale: { 'GeolocateControl.FindMyLocation': 'Localisez-moi', 'GeolocateControl.LocationNotAvailable': 'Localisation non disponible', 'NavigationControl.ZoomIn': 'Zoom +', 'NavigationControl.ZoomOut': 'Zoom -' } }) map.dragRotate.disable() map.touchZoomRotate.disableRotation() // 1 CONFIGURATION DE LA CARTE map.on("load", () => { map.addControl(new maplibregl.NavigationControl({ showCompass: false, showZoom: true })) map.addSource("isochrone-source", { type: "geojson", data: { type: "FeatureCollection", features: [] } }) map.addSource("paris", { type: "geojson", data: paris }) map.addLayer({ id: "isochrone-layer", type: "fill", source: "isochrone-source", paint: { "fill-color": "#007cbf", "fill-opacity": 0.3, "fill-outline-color": "#004a73" } }) map.addLayer({ id: "paris", type: "line", source: "paris", paint: { "line-color": "#666666", "line-width": 2 } }) map.getCanvas().style.cursor = "pointer" // ICONES ET COULEURS const couleurs = { 'Centre de vaccination': '#e63946', 'Centre de santé sexuelle': '#2a9d8f' } const icones = { 'Centre de vaccination': ``, 'Centre de santé sexuelle': `` } // STRUCTURES FIXES structuresFixes.forEach(d => { const couleur = couleurs[d.type_établissement] || '#888' const icone = icones[d.type_établissement] || '' const el = document.createElement('div') el.style.cssText = ` width: 20px; height: 20px; border-radius: 50%; background: ${couleur}; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,0.3); cursor: pointer; border: 2px solid white; ` el.innerHTML = icone const popup = new maplibregl.Popup({ offset: 25, closeButton: false }) .setHTML(`

${d.type_établissement}
${d.libelle_centre}
${d.libelle_territoire}
${d.adresse} ${d.ARRONDISSEMENT_CENTRE}
${d.geoloc_4326_lat} ${d.geoloc_4326_lat}

`) const m = new maplibregl.Marker({ element: el }) .setLngLat([d.geoloc_4326_long, d.geoloc_4326_lat]) .setPopup(popup) .addTo(map) el.addEventListener('mouseenter', () => m.togglePopup()) el.addEventListener('mouseleave', () => m.togglePopup()) }) // LÉGENDE const legendEl = document.createElement('div') legendEl.style.cssText = ` background: white; padding: 10px 14px; border-radius: 8px; font-family: sans-serif; font-size: 12px; box-shadow: 0 2px 6px rgba(0,0,0,0.2); line-height: 2; ` legendEl.innerHTML = `

Centre de vaccination

Centre de santé sexuelle

` class LegendControl { onAdd(map) { this._container = document.createElement('div') this._container.className = 'maplibregl-ctrl' this._container.appendChild(legendEl) return this._container } onRemove() { this._container.parentNode.removeChild(this._container) } } map.addControl(new LegendControl(), 'bottom-left') }) const marker = new maplibregl.Marker({ color: "#1a1a1a" }) // BOUTON DE GÉOLOCALISATION addGeolocButton(map, marker) // BOUTON RECENTRER SUR PARIS map.addControl(new CenterParisControl({ zoom: 11, coords: parisCentre }), 'top-right') // 2 GESTION DU CLIC map.on('click', (e) => { locationHub.dispatchEvent(new CustomEvent('locationSelected', { detail: { lng: e.lngLat.lng, lat: e.lngLat.lat, label: 'Point cliqué', source: 'map' } })) marker.setLngLat(e.lngLat).addTo(map) container.value = { lng: e.lngLat.lng, lat: e.lngLat.lat } container.dispatchEvent(new CustomEvent("input")) }) // 3 GESTION DU RETOUR DE L'ISOCHRONE let radioMarkers = [] container.update = (isochroneData, isochroneBounds, radioData) => { if (isochroneData && isochroneData.features && isochroneData.features.length > 0) { map.fitBounds(isochroneBounds, { padding: 70, maxZoom: 15, duration: 800, essential: true }) } map.once('moveend', () => { if (map.getSource("isochrone-source")) { map.getSource("isochrone-source").setData(isochroneData) } if (radioData) { radioData.forEach(d => { const popup = new maplibregl.Popup({ offset: 25, closeButton: false }) .setHTML(`

Pharmacie
${d.nom}
${d.adresse}
${d.tel}

`) const m = new maplibregl.Marker({ color: "#00b4d8", scale: 0.8 }) .setLngLat([d.longitude, d.latitude]) .setPopup(popup) .addTo(map) const el = m.getElement() el.addEventListener('mouseenter', () => m.togglePopup()) el.addEventListener('mouseleave', () => m.togglePopup()) radioMarkers.push(m) }) } }) } container.updateCenter = (lng, lat) => { marker.setLngLat([lng, lat]).addTo(map) container.value = { lng, lat } container.dispatchEvent(new CustomEvent("input")) } container.clearMap = function(removeMarker = false) { if (map.getSource("isochrone-source")) { map.getSource("isochrone-source").setData({ type: "FeatureCollection", features: [] }) } radioMarkers.forEach(m => m.remove()) if (removeMarker) marker.remove() radioMarkers = [] container.value = null } locationHub.addEventListener('locationSelected', (e) => { if (e.detail.lng !== null) container.updateCenter(e.detail.lng, e.detail.lat) else { container.value = { lng: null, lat: null } container.dispatchEvent(new CustomEvent("input")) } }) invalidation.then(() => map.remove()) }