Carte interactive multi-couches basee sur Leaflet avec fonds de carte souverains (IGN Geoplateforme). Affiche des POI (markers), zones geographiques (geoshape), cercles proportionnels et heatmaps.

dsfr-data-map — Conteneur carte

Fonds de carte predefinis

Tuiles souveraines, accessibles sans cle API :

dsfr-data-map-layer — Couche de donnees

Source et geolocalisation

Affichage

Heatmap

Clustering

Zoom et viewport

Performance

Animation temporelle

Quand time-field est defini, les donnees sont pre-indexees par pas de temps. Le composant compagnon dsfr-data-map-timeline pilote la lecture frame par frame.

dsfr-data-map-timeline — Animation temporelle

Composant compagnon place comme enfant de dsfr-data-map. Decouvre automatiquement les layers ayant time-field et pilote leur affichage frame par frame avec des controles de lecture.

Controles

• Boutons : lecture/pause, stop (retour au debut), pas precedent/suivant
• Slider : navigation directe vers un pas de temps
• Selecteur de vitesse : 0.5x, 1x, 2x, 4x
• Label du pas courant avec region aria-live

Accessibilite

• Pas d'auto-play — l'animation demarre uniquement sur action utilisateur
• Clavier : Espace (play/pause), fleches (pas-a-pas), Home/End (debut/fin)
• ARIA : labels sur tous les controles, aria-live sur le label courant, aria-valuetext sur le slider
• prefers-reduced-motion : desactive le bouton play (navigation manuelle uniquement)

dsfr-data-map-popup — Affichage au clic

Composant compagnon qui definit un template HTML et un mode d'affichage pour le clic sur un element de carte. Remplace les attributs popup-template et popup-fields du layer par un composant declaratif.

Template

Le contenu est defini via un element <template> enfant avec interpolation {{champ}}. Sans template, un tableau cle/valeur est genere automatiquement.

Modes

• popup : infobulle Leaflet classique au-dessus du marker
• modal : modale centree avec overlay, fermable par Escape ou clic exterieur
• panel-right / panel-left : panneau lateral glissant, mis a jour a chaque clic

Resolution des coordonnees

Le layer resout les coordonnees dans cet ordre de priorite :

1. lat-field + lon-field — Coordonnees separees (CSV, API)
2. geo-field vers GeoJSON Point — Extrait lat/lon du Point
3. geo-field vers Polygon/MultiPolygon — Rendu via L.geoJSON()
4. Auto-detection — Cherche geo_point_2d, geo_shape, geometry

Exemples

<dsfr-data-source id="bornes" api-type="opendatasoft"
  base-url="https://odre.opendatasoft.com" dataset-id="bornes-irve"
  select="geo_point_2d,nom_station,puissance_nominale,adresse"
  limit="5000">
</dsfr-data-source>

<dsfr-data-map center="46.6,2.3" zoom="6" tiles="ign-plan" fit-bounds>
  <dsfr-data-map-layer source="bornes" type="marker"
    geo-field="geo_point_2d"
    popup-fields="nom_station,puissance_nominale,adresse"
    tooltip-field="nom_station"
    cluster cluster-radius="60">
  </dsfr-data-map-layer>
</dsfr-data-map>

<dsfr-data-source id="regions" api-type="opendatasoft"
  base-url="https://public.opendatasoft.com" dataset-id="georef-france-region"
  select="geo_shape,reg_name,population" limit="20">
</dsfr-data-source>

<dsfr-data-source id="communes" api-type="opendatasoft"
  base-url="https://public.opendatasoft.com" dataset-id="georef-france-commune"
  select="geo_shape,com_name,population" limit="500" server-side page-size="500">
</dsfr-data-source>

<dsfr-data-map center="46.6,2.3" zoom="6" tiles="ign-plan" height="600px">

  <!-- Zoom 1-9 : regions -->
  <dsfr-data-map-layer source="regions" type="geoshape"
    geo-field="geo_shape" fill-field="population"
    selected-palette="sequentialAscending"
    popup-template="<b>{reg_name}</b><br>{population} hab."
    min-zoom="1" max-zoom="9">
  </dsfr-data-map-layer>

  <!-- Zoom 10+ : communes dans le viewport -->
  <dsfr-data-map-layer source="communes" type="geoshape"
    geo-field="geo_shape" fill-field="population"
    selected-palette="sequentialAscending"
    popup-template="<b>{com_name}</b><br>{population} hab."
    min-zoom="10" bbox bbox-debounce="500">
  </dsfr-data-map-layer>

</dsfr-data-map>

<dsfr-data-map center="46.6,2.3" zoom="6">
  <dsfr-data-map-layer source="villes" type="circle"
    lat-field="latitude" lon-field="longitude"
    radius-field="population" radius-unit="px"
    color="#000091" fill-opacity="0.4"
    popup-fields="nom,population"
    tooltip-field="nom">
  </dsfr-data-map-layer>
</dsfr-data-map>

<dsfr-data-source id="bornes-trim" data='[
  {"region":"Paris","lat":48.85,"lon":2.35,"bornes":120,"date":"2025-T1"},
  {"region":"Lyon","lat":45.76,"lon":4.83,"bornes":85,"date":"2025-T1"},
  {"region":"Marseille","lat":43.30,"lon":5.37,"bornes":60,"date":"2025-T1"},
  {"region":"Paris","lat":48.85,"lon":2.35,"bornes":250,"date":"2025-T2"},
  {"region":"Lyon","lat":45.76,"lon":4.83,"bornes":160,"date":"2025-T2"},
  {"region":"Marseille","lat":43.30,"lon":5.37,"bornes":130,"date":"2025-T2"}
]'></dsfr-data-source>

<dsfr-data-map center="46.6,2.3" zoom="6" height="550px">
  <dsfr-data-map-layer source="bornes-trim" type="circle"
    lat-field="lat" lon-field="lon"
    radius-field="bornes" radius-min="6" radius-max="35"
    color="#000091" fill-opacity="0.5"
    tooltip-field="region"
    time-field="date" time-mode="snapshot">
  </dsfr-data-map-layer>
  <dsfr-data-map-timeline speed="1" interval="1500">
  </dsfr-data-map-timeline>
</dsfr-data-map>

<dsfr-data-map center="46.6,2.3" zoom="6" tiles="ign-plan">
  <dsfr-data-map-layer source="departements" type="geoshape"
    geo-field="geo_shape" fill-field="population"
    selected-palette="sequentialAscending" fill-opacity="0.5"
    popup-template="<b>{nom}</b><br>Population : {population}">
  </dsfr-data-map-layer>
  <dsfr-data-map-layer source="prefectures" type="marker"
    geo-field="geo_point_2d"
    tooltip-field="nom" color="#C9191E">
  </dsfr-data-map-layer>
</dsfr-data-map>

Fonctionnement

Viewport-driven fetch (bbox)

Quand bbox est actif sur un layer, chaque deplacement de carte declenche une commande dsfr-data-source-command avec un filtre in_bbox() (ODS) ou un filtrage client-side pour les autres adapters. Le whereKey: "map-bbox" permet le merge propre avec d'autres filtres (facettes, recherche).

Zoom ranges

Les attributs min-zoom / max-zoom sur les layers permettent d'afficher differentes couches selon le niveau de zoom. Par exemple : regions a zoom 1-9, communes a zoom 10+.

Clustering

Le clustering est charge conditionnellement via import dynamique de leaflet.markercluster. Les styles des clusters suivent les tokens DSFR.

Pipeline de donnees

dsfr-data-source (A) ──┐
                       ├──► dsfr-data-map
dsfr-data-source (B) ──┘     ├── dsfr-data-map-layer (source="A", type="geoshape")
                              └── dsfr-data-map-layer (source="B", type="marker")

Bundle

Le composant est disponible dans un bundle separe dsfr-data.map.esm.js (ou inclus dans le bundle complet dsfr-data.esm.js). Leaflet est charge dynamiquement via import() et n'est pas inclus dans le bundle.