'; } // **LA CORRECTION EST ICI** // On échappe les apostrophes dans le JSON pour éviter les erreurs de syntaxe HTML. const featureString = JSON.stringify(props).replace(/'/g, "'"); // Structure HTML de la carte card.innerHTML = `

${name}

${address}, ${city} ${postalCode}

Plus d'informations ${actionsHTML} `; card.addEventListener('click', () => { focusOnEstablishment(feature); }); card.querySelectorAll('.action-btn, .more-info').forEach(button => { button.addEventListener('click', (event) => { event.stopPropagation(); }); }); sidebar.appendChild(card); }); attachModalListeners(); } function attachModalListeners() { document.querySelectorAll('#establishments-view .more-info').forEach(button => { button.addEventListener('click', function(event) { event.preventDefault(); // La propagation est déjà stoppée par un autre listener, mais on le laisse par sécurité event.stopPropagation(); const modal = document.getElementById('modal'); const modalInfo = document.getElementById('modal-info'); try { const props = JSON.parse(this.dataset.feature); const name=decodeHTMLEntities(props.UP||'N/A'); const address=decodeHTMLEntities(props.Adresse||'N/A'); const city=decodeHTMLEntities(props.Ville||''); const postalCode=props["Code postal"]||''; const phone=props.Phone&&props.Phone!=="null"?props.Phone:null; const email=props.Email&&props.Email!=="null"?props.Email:null; const activity=props.activity?props.activity.charAt(0).toUpperCase()+props.activity.slice(1):'N/A'; modalInfo.innerHTML = `

${name}

Adresse: ${address}
${city} ${postalCode}

Téléphone: ${phone?`${phone}`:'Non disponible'}

Email: ${email?`${email}`:'Non disponible'}

Activité: ${activity}

`; } catch (e) { console.error("Erreur lors de l'analyse des données de la carte : ", e); modalInfo.innerHTML = "

Impossible d'afficher les informations.

"; } modal.style.display = 'block'; }); }); } function drawSearchRadiusCircle(center, radiusKm) { removeSearchRadiusCircle(); if (!turf) return; try { const circleGeoJSON = turf.circle(center, radiusKm, { steps: 64, units: 'kilometers' }); if (map.getSource('radius-circle-source')) { map.getSource('radius-circle-source').setData(circleGeoJSON); } else { map.addSource('radius-circle-source', { type: 'geojson', data: circleGeoJSON }); map.addLayer({ id: 'radius-circle-layer', type: 'line', source: 'radius-circle-source', layout: {}, paint: { 'line-color': '#007cbf', 'line-width': 2, 'line-dasharray': [2, 2] } }); } } catch (e) { console.error("Erreur lors de la création du cercle:", e); } } function removeSearchRadiusCircle() { if (map.getLayer('radius-circle-layer')) map.removeLayer('radius-circle-layer'); if (map.getSource('radius-circle-source')) map.removeSource('radius-circle-source'); } function addMarkers(features) { currentMapboxMarkers.forEach(marker=>marker.remove()); currentMapboxMarkers.length = 0; activePopups.forEach(popup=>popup.remove()); activePopups.length = 0; features.forEach(feature=>{ if(!feature.geometry||!feature.geometry.coordinates)return; const el=createMarkerElement(feature.properties.activity); const popup=createPopupContent(feature.properties); const marker=new mapboxgl.Marker(el).setLngLat(feature.geometry.coordinates).setPopup(popup).addTo(map); currentMapboxMarkers.push(marker); el.addEventListener('dblclick',event=>{event.stopPropagation();focusOnEstablishment(feature);}); popup.on('open',()=>{ activePopups.forEach(p=>{if(p!==popup)p.remove();}); activePopups.length=0; activePopups.push(popup); }); }); } function initializeLayout(){ const viewSwitcherButton=document.getElementById('view-switcher'); viewSwitcherButton.addEventListener('click',()=>{ if(currentLayoutMode==='sidebarFull'){ switchToMapFullScreen(); } else if(currentLayoutMode==='mapFull'){ switchToSidebarFullScreen(); } }); checkAndSetLayout(); } function checkAndSetLayout(){ const isBelowThreshold=window.innerHeight{if(map)map.resize();},550); } function switchToSidebarFullScreen(){ const mapContainer=document.getElementById('map-container'); const viewSwitcherButton=document.getElementById('view-switcher'); mapContainer.className='layout-sidebar-full'; viewSwitcherButton.textContent='Afficher Carte'; currentLayoutMode='sidebarFull'; setTimeout(()=>{if(map){map.resize();updateSidebarBasedOnMapViewport();}},550); } function switchToMapFullScreen(){ const mapContainer=document.getElementById('map-container'); const viewSwitcherButton=document.getElementById('view-switcher'); mapContainer.className='layout-map-full'; viewSwitcherButton.textContent='Afficher Liste'; currentLayoutMode='mapFull'; setTimeout(()=>{if(map){map.resize();updateSidebarBasedOnMapViewport();}},550); } function switchToDualView(){ const mapContainer=document.getElementById('map-container'); mapContainer.className='layout-dual'; currentLayoutMode='dual'; setTimeout(()=>{if(map){map.resize();updateSidebarBasedOnMapViewport();}},550); } // Démarrage de l'application document.addEventListener('DOMContentLoaded', function() { initializeMap(); });