1<!DOCTYPE html> 2<html lang="fr"> 3<head> 4 <meta charset="UTF-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 6 <title>Carte interactive - Morges</title> 7 8
8<script type="module" crossorigin src="/assets/index-aDmitFg3.js"></script>
8 9 <link rel="stylesheet" crossorigin href="/assets/index-Ct1yWHhA.css"> 10</head> 11<body> 12 <!-- Bandeau principal : titre et toggles Diagnostic/Projet --> 13 <header> 14 <div class="header-top"> 15 <h1>Groupe 3 - Vielle ville de Morges</h1> 16 <div class="scenario-switch" role="group" aria-label="Affichage des sections"> 17 <button class="scenario-button active" data-section-toggle="diagnostic" aria-pressed="true">Diagnostic</button> 18 <button class="scenario-button active" data-section-toggle="projet" aria-pressed="true">Projet</button> 19 </div> 20 </div> 21 </header> 22 <!-- Bloc carte + overlays (slider, légende, panneau latéral) --> 23 <div class="map-wrapper"> 24 <div id="map" role="application" aria-label="Carte interactive centrée sur Morges"></div> 25 <div class="coord-display" id="coord-display" aria-live="polite"> 26 Lat 46.50900 · Lng 6.49600 27 </div> 28 <div class="noise-legend" id="noise-legend" aria-hidden="true"> 29 <button type="button" class="noise-legend__close" id="noise-legend-close" aria-label="Fermer la légende">×</button> 30 <div class="legend-title" id="noise-legend-title"></div> 31 <div class="legend-body" id="noise-legend-body"></div> 32 </div> 33 <div class="map-source" id="map-source" aria-live="polite"></div> 34 <div class="layer-slider" id="heat-slider" aria-hidden="true"> 35 <div class="layer-slider__header"> 36 <span id="heat-slider-title">Comparer le scénario 2060</span> 37 <span id="heat-slider-value">2060 + projet</span> 38 </div> 39 <input type="range" min="0" max="100" value="100" id="heat-slider-input" aria-label="Comparer deux scénarios" /> 40 <div class="layer-slider__labels"> 41 <span id="heat-slider-min-label">Scénario 2060</span> 42 <span id="heat-slider-max-label">2060 + projet</span> 43 </div> 44 </div> 45 <button 46 type="button" 47 id="legend-toggle" 48 class="legend-toggle-button" 49 aria-controls="noise-legend" 50 aria-expanded="false" 51 hidden 52 > 53 Légende active 54 </button> 55 <div class="mobile-legend-overlay" id="mobile-legend-overlay" hidden></div> 56 <button 57 type="button" 58 id="mobile-panel-toggle" 59 class="mobile-panel-toggle" 60 aria-controls="layer-panel" 61 aria-expanded="false" 62 aria-label="Ouvrir le panneau de filtres" 63 > 64 <span class="mobile-panel-toggle__icon" aria-hidden="true"></span> 65 <span>Filtres & couches</span> 66 </button> 67 <div class="mobile-panel-overlay" id="mobile-panel-overlay" hidden></div> 68 <!-- Panneau latéral avec toutes les couches activables --> 69 <div class="layer-toggle" id="layer-panel" role="region" aria-label="Affichage des couches"> 70 <button type="button" class="layer-panel-close" aria-label="Fermer les filtres et couches" data-layer-panel-close> 71 × 72 </button> 73 <h2>Affichage</h2> 74 <!-- Section avec les données communes aux deux scénarios --> 75 <section class="panel-section"> 76 <h3>Données de base</h3> 77 <label class="toggle-item"> 78 <span> 79 <span class="legend-icon square"></span> 80 Périmètre du projet 81 </span> 82 <input type="checkbox" data-layer="perimeter" /> 83 </label> 84 </section> 85 <!-- Section Diagnostic : couches + filtres environnementaux --> 86 <section class="panel-section" data-section="diagnostic"> 87 <h3>Données du diagnostic</h3> 88 <div class="panel-subtitle">1. Un centre-ville enclavé par les infrastructures de transport</div> 89 <label class="toggle-item"> 90 <span> 91 <span class="legend-icon line"></span> 92 Axes routiers principaux 93 </span> 94 <input type="checkbox" data-layer="diagnostic-axes" /> 95 </label> 96 <label class="toggle-item"> 97 <span> 98 <span class="legend-icon parking"></span> 99 Espaces dédiés au stationnement 100 </span> 101 <input type="checkbox" data-layer="diagnostic-parking" /> 102 </label> 103 104 <div class="panel-subtitle">2. Des espaces libres mais inaccessibles</div> 105 <label class="toggle-item">
106 <span> 107 <span class="legend-icon green"></span> 108 Espaces privés dâintérêt 109 </span> 110 <input type="checkbox" data-layer="diagnostic-private" /> 111 </label> 112 113 <div class="panel-subtitle">3. Une relation au lac restreinte</div> 114 <label class="toggle-item"> 115 <span> 116 <span class="legend-icon blue"></span> 117 Ãléments saillants de la relation inégale avec le lac 118 </span> 119 <input type="checkbox" data-layer="diagnostic-lake" /> 120 </label> 121 122 <div class="panel-subtitle panel-subtitle-consequence">En conséquence</div> 123 <button type="button" class="filter-panel-mobile-open" data-filter-panel-open="diagnostic"> 124 Sélectionner un filtre diagnostic 125 </button> 126 <div class="filter-panel" aria-label="Filtres disponibles pour le diagnostic" data-filter-panel="diagnostic"> 127 <div class="filter-panel-header"> 128 <div class="filter-panel-title">Filtres disponibles</div> 129 <button type="button" class="filter-panel-close" aria-label="Fermer la sélection" data-filter-panel-close> 130 <span aria-hidden="true">×</span> 131 </button> 132 <p>Sélectionne lâindicateur environnemental à afficher : un seul à la fois pour plus de clarté.</p> 133 </div> 134 <div class="filter-button-grid"> 135 <button type="button" class="filter-button" data-filter="diagnostic-noise" aria-pressed="false"> 136 <span class="filter-swatch" aria-hidden="true"></span> 137 <span class="filter-label"> 138 <strong>Pollution sonore (jour)</strong> 139 </span> 140 </button> 141 <button type="button" class="filter-button" data-filter="diagnostic-air" aria-pressed="false"> 142 <span class="filter-swatch" aria-hidden="true"></span> 143 <span class="filter-label"> 144 <strong>Pollution de lâair (NOâ)</strong> 145 </span> 146 </button> 147 <button type="button" class="filter-button" data-filter="diagnostic-heat" aria-pressed="false"> 148 <span class="filter-swatch" aria-hidden="true"></span> 149 <span class="filter-label"> 150 <strong>Un centre-ville vulnérable à la chaleur</strong> 151 </span> 152 </button> 153 </div> 154 </div> 155 </section> 156 <!-- Section Projet : mêmes contrôles mais pour les interventions --> 157 <section class="panel-section" data-section="projet"> 158 <h3>Données du projet</h3> 159 <div class="panel-subtitle">1. Un centre-ville libéré des flux de transit</div> 160 <label class="toggle-item"> 161 <span> 162 <span class="legend-icon line"></span> 163 Axes routiers principaux retravaillés 164 </span> 165 <input type="checkbox" data-layer="project-axes" /> 166 </label> 167 <label class="toggle-item"> 168 <span> 169 <span class="legend-icon parking project"></span> 170 Espaces dédiés au stationnement conservés et optimisés en surface 171 </span> 172 <input type="checkbox" data-layer="project-parking" /> 173 </label> 174 175 <div class="panel-subtitle">2. Des espaces libres mis en valeur</div> 176 <label class="toggle-item"> 177 <span> 178 <span class="legend-icon project-spaces"></span> 179 Espaces requalifiés ou libérés au potentiel urbain 180 </span> 181 <input type="checkbox" data-layer="project-spaces" /> 182 </label> 183 184 <div class="panel-subtitle">3. Une relation au lac réinventée</div> 185 <label class="toggle-item"> 186 <span> 187 <span class="legend-icon lake-open"></span> 188 Littoral désormais ouvert aux usagers 189 </span> 190 <input type="checkbox" data-layer="project-lake-open" /> 191 </label> 192 <label class="toggle-item"> 193 <span> 194 <span class="legend-icon lake-renature"></span> 195 Littoral renaturé 196 </span> 197 <input type="checkbox" data-layer="project-lake-renature" /> 198 </label> 199 200 <div class="panel-subtitle">4. Ãléments supplémentaires</div> 201 <label class="toggle-item">
202 <span> 203 <span class="legend-icon density"></span> 204 Zones de densification identifiées 205 </span> 206 <input type="checkbox" data-layer="project-density" /> 207 </label> 208 <label class="toggle-item"> 209 <span> 210 <span class="legend-icon roofs"></span> 211 Toitures végétalisables 212 </span> 213 <input type="checkbox" data-layer="project-roofs" /> 214 </label> 215 216 <div class="panel-subtitle">Intentions du projet</div> 217 <div class="intentions-carousel" aria-label="Intentions du projet"> 218 <button type="button" class="intentions-card" data-intention="parking"> 219 <div class="intentions-card__media"> 220 <img 221 src="https://vl7zgyqezaiej8w4.public.blob.vercel-storage.com/Screenshot%202026-01-22%20at%206.39.33%E2%80%AFPM.png" 222 alt="" 223 /> 224 </div> 225 <div class="intentions-card__body"> 226 <div class="intentions-card__title">Nouvelle organisation du stationnement</div> 227 <div class="intentions-card__tag">Démonstration des reports</div> 228 <div class="intentions-card__meta">Voir le projet</div> 229 </div> 230 </button> 231 <button type="button" class="intentions-card" data-intention="density"> 232 <div class="intentions-card__media"> 233 <img src="https://vl7zgyqezaiej8w4.public.blob.vercel-storage.com/Compost%204.png" alt="" /> 234 </div> 235 <div class="intentions-card__body"> 236 <div class="intentions-card__title">Espace public â Composte</div> 237 <div class="intentions-card__tag">Densification douce</div> 238 <div class="intentions-card__meta">Voir le projet</div> 239 </div> 240 </button> 241 <button type="button" class="intentions-card" data-intention="renewal"> 242 <div class="intentions-card__media"> 243 <img 244 src="https://vl7zgyqezaiej8w4.public.blob.vercel-storage.com/Screenshot%202026-01-23%20at%205.33.51%E2%80%AFPM.png" 245 alt="" 246 /> 247 </div> 248 <div class="intentions-card__body"> 249 <div class="intentions-card__title">Requalification et adaptation</div> 250 <div class="intentions-card__tag">GrandâRue & Rue de Savoie</div> 251 <div class="intentions-card__meta">Voir le projet</div> 252 </div> 253 </button> 254 <button type="button" class="intentions-card" data-intention="safety"> 255 <div class="intentions-card__media"> 256 <img 257 class="intentions-card__media--anchor-bottom" 258 src="https://vl7zgyqezaiej8w4.public.blob.vercel-storage.com/Screenshot%202026-01-24%20at%2011.52.06%E2%80%AFAM.png" 259 alt="" 260 /> 261 </div> 262 <div class="intentions-card__body"> 263 <div class="intentions-card__title">Sécurité & patrimoine</div> 264 <div class="intentions-card__tag">Place (e)au vert</div> 265 <div class="intentions-card__meta">Voir le projet</div> 266 </div> 267 </button> 268 </div> 269 270 <div class="panel-subtitle panel-subtitle-consequence">En conséquence</div> 271 <button type="button" class="filter-panel-mobile-open" data-filter-panel-open="project"> 272 Sélectionner un filtre projet 273 </button> 274 <div class="filter-panel" aria-label="Filtres disponibles pour le projet" data-filter-panel="project"> 275 <div class="filter-panel-header"> 276 <div class="filter-panel-title">Filtres disponibles</div> 277 <button type="button" class="filter-panel-close" aria-label="Fermer la sélection" data-filter-panel-close> 278 <span aria-hidden="true">×</span> 279 </button> 280 <p>Visualise lâeffet du projet sur les nuisances ou les gains attendus.</p> 281 </div> 282 <div class="filter-button-grid"> 283 <button type="button" class="filter-button" data-filter="project-noise" aria-pressed="false">
284 <span class="filter-swatch" aria-hidden="true"></span> 285 <span class="filter-label"> 286 <strong>Pollution sonore (jour)</strong> 287 </span> 288 </button> 289 <button type="button" class="filter-button" data-filter="project-air" aria-pressed="false"> 290 <span class="filter-swatch" aria-hidden="true"></span> 291 <span class="filter-label"> 292 <strong>Pollution de lâair (NOâ)</strong> 293 </span> 294 </button> 295 <button type="button" class="filter-button" data-filter="project-heat" aria-pressed="false"> 296 <span class="filter-swatch" aria-hidden="true"></span> 297 <span class="filter-label"> 298 <strong>Un centre-ville plus résilient</strong> 299 </span> 300 </button> 301 </div> 302 </div> 303 </section> 304 </div> 305 </div> 306 307 <!-- Panneau latéral pour afficher les fiches projet --> 308 <div class="details-panel" id="details-panel" aria-hidden="true"> 309 <div class="details-content" role="dialog" aria-modal="true" aria-label="Informations détaillées"> 310 <button class="details-close" id="details-close" aria-label="Fermer">×</button> 311 <div id="details-body"></div> 312 </div> 313 </div> 314 315 <!-- Lightbox plein écran pour zoomer une image ou montrer un PDF --> 316 <div class="lightbox" id="media-lightbox" aria-hidden="true"> 317 <div class="lightbox-content" role="dialog" aria-modal="true" aria-label="Média en plein écran"> 318 <button class="lightbox-close" id="lightbox-close" aria-label="Fermer l'aperçu">×</button> 319 <img id="lightbox-image" alt="" /> 320 <iframe id="lightbox-frame" title="Document"></iframe> 321 </div> 322 </div> 323 324</body> 325</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.