Spaces:
Sleeping
Sleeping
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Carte des Incidents à Paris</title> | |
| <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"> | |
| <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}"> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <!-- Titre --> | |
| <header> | |
| <h1>Carte des Incidents à Paris</h1> | |
| <p class="generated-time">Cette page a été générée à : <span id="pageLoadTime"></span></p> | |
| </header> | |
| <!-- Contenu principal --> | |
| <main> | |
| <!-- Section avec Trafic + MAP alignés horizontalement --> | |
| <section class="traffic-map-container"> | |
| <!-- Section Gauche : Trafic --> | |
| <section class="traffic-info"> | |
| <h2>Un oeil sur le trafic</h2> | |
| <div class="traffic-items"> | |
| <div class="icon-item"> | |
| <div class="transport-icon"> | |
| <img src="{{ url_for('static', filename='icons/RER.svg') }}" alt="RER" class="icon-img"> RER | |
| </div> | |
| <div class="impacted-lines" data-category="RER"></div> | |
| </div> | |
| <div class="icon-item"> | |
| <div class="transport-icon"> | |
| <img src="{{ url_for('static', filename='icons/Metro.png') }}" alt="Métro" class="icon-img"> Métro | |
| </div> | |
| <div class="impacted-lines" data-category="Métro"></div> | |
| </div> | |
| <div class="icon-item"> | |
| <div class="transport-icon"> | |
| <img src="{{ url_for('static', filename='icons/Bus.svg') }}" alt="Bus" class="icon-img"> Bus | |
| </div> | |
| <div class="impacted-lines" data-category="Bus"></div> | |
| </div> | |
| <div class="icon-item"> | |
| <div class="transport-icon"> | |
| <img src="{{ url_for('static', filename='icons/Transilien.png') }}" alt="Transilien" class="icon-img"> Transilien | |
| </div> | |
| <div class="impacted-lines" data-category="Transilien"></div> | |
| </div> | |
| <div class="icon-item"> | |
| <div class="transport-icon"> | |
| <img src="{{ url_for('static', filename='icons/Tram.png') }}" alt="Tramway" class="icon-img"> Tramway | |
| </div> | |
| <div class="impacted-lines" data-category="Tram"></div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Section Droite : Carte --> | |
| <section class="map-section"> | |
| <div id="map"></div> | |
| </section> | |
| </section> | |
| <!-- Section Filtres et Tableau --> | |
| <section class="filter-table"> | |
| <div class="filter"> | |
| <h3>Filtre</h3> | |
| <ul> | |
| <li data-category="all">Tous</li> | |
| <li data-category="RER">RER</li> | |
| <li data-category="Métro">Métro</li> | |
| <li data-category="Bus">Bus</li> | |
| <li data-category="Transilien">Transilien</li> | |
| <li data-category="Tram">Tramway</li> | |
| </ul> | |
| </div> | |
| <div class="incident-table"> | |
| <table> | |
| <thead> | |
| <tr> | |
| <th>Ligne</th> | |
| <th>Cause</th> | |
| <th>Gravité</th> | |
| <th>Message</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <!-- Les perturbations sont insérées ici dynamiquement --> | |
| </tbody> | |
| </table> | |
| </div> | |
| </section> | |
| </main> | |
| </div> | |
| <!-- JavaScript --> | |
| <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script> | |
| <script src="{{ url_for('static', filename='js/traffic.js') }}"></script> | |
| <script> | |
| // Initialiser la carte | |
| const map = L.map('map').setView([48.8566, 2.3522], 12); | |
| // Ajouter une couche de tuiles | |
| L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { | |
| attribution: '© Contributeurs OpenStreetMap' | |
| }).addTo(map); | |
| // Récupérer les incidents depuis l'API TomTom | |
| fetch('/api/incidents') | |
| .then(response => response.json()) | |
| .then(data => { | |
| if (data.status === "success") { | |
| const incidents = data.data; | |
| incidents.forEach(incident => { | |
| const coordinates = incident.geometry.coordinates; | |
| const type = incident.geometry.type; | |
| if (type === "LineString") { | |
| // Ajouter une polyligne rouge pour les incidents de type LineString | |
| const latlngs = coordinates.map(coord => [coord[1], coord[0]]); | |
| L.polyline(latlngs, { | |
| color: 'red', | |
| weight: 4, | |
| opacity: 0.8 | |
| }).addTo(map); | |
| } else if (type === "Point") { | |
| const [lon, lat] = coordinates; | |
| const iconCategory = incident.properties.iconCategory; | |
| const customIcon = L.icon({ | |
| iconUrl: `/static/icons/${iconCategory}.svg`, | |
| iconSize: [72, 72] | |
| }); | |
| const categoryDescriptions = { | |
| 1: "Accident", | |
| 6: "Embouteillage", | |
| 9: "Travaux routiers", | |
| 14: "Véhicule en panne" | |
| }; | |
| const description = categoryDescriptions[iconCategory] || "Incident inconnu"; | |
| L.marker([lat, lon], { icon: customIcon }) | |
| .addTo(map) | |
| .bindPopup(`<b>Incident</b><br>${description}`); | |
| } | |
| }); | |
| } | |
| }); | |
| // Mettre à jour l'heure de génération | |
| document.getElementById('pageLoadTime').textContent = new Date().toLocaleString(); | |
| </script> | |
| </body> | |
| </html> | |