trafic-rennes

Carte du trafic en temps réel à Rennes (Leaflet + GeoJSON) - créé le 28/03/2025

<trafic-rennes></trafic-rennes>

Nom du composant : Gestion avancée des attributs :

HTML : CSS : JavaScript (connectedCallback) :

const initTrafficMap = (geojson) => {
  const container = this.shadowRoot.querySelector('#traficMap');
  const map = L.map(container).setView([48.111, -1.68], 12);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap contributors'
  }).addTo(map);

const styleByStatus = {
    'heavy': '#F8A151',
    'congested': '#e30613',
    'freeFlow': '#2EA26E',
    'impossible': 'black'
  };

const layerGroup = L.layerGroup().addTo(map);

const fetchData = () => {
    fetch("https://data.rennesmetropole.fr/api/explore/v2.1/catalog/datasets/etat-du-trafic-en-temps-reel/exports/geojson?lang=fr&timezone=Europe%2FBerlin")
      .then(res => res.json())
      .then(draw)
      .catch(err => console.error("Erreur chargement trafic:", err));
  };

fetchData();
  this.refreshInterval = setInterval(fetchData, 300000); // toutes les 5 minutes
};

const fetchLeafletAndInit = () => {
  const leafletScript = document.createElement('script');
  leafletScript.src = "https://unpkg.com/leaflet@1.9.3/dist/leaflet.js";
  leafletScript.onload = () => {
    initTrafficMap.call(this);
  };
  document.head.appendChild(leafletScript);
};

if (!window.L) {
  fetchLeafletAndInit.call(this);
} else {
  initTrafficMap.call(this);
}

JavaScript (render) : Fonctions JavaScript (méthodes supplémentaires) :

🌟 Prévisualisation interactive :

Code HTML généré : Code JS généré : 📦 Export multi-framework : Description :