dsfr-data-map-timeline - Composants

Contrôles de lecture temporelle pour la carte : découvre les couches ayant un time-field et pilote leur affichage pas de temps par pas de temps (lecture, pause, pas à pas, vitesse).

Enfant de dsfr-data-map : le composant écoute l'événement dsfr-data-map-layer-time-ready des couches ciblées, construit l'union de leurs pas de temps (tri chronologique) et appelle leur méthode setTimelineFrame(index) à chaque frame.

Attributs

Attribut	Type	Défaut	Description
`for`	String	`""`	Ids des couches pilotées, séparés par des virgules. Vide : toutes les couches à `time-field`. Les clones de ces couches dans les encarts (`dsfr-data-map-inset`) suivent le même pas.
`speed`	Number	`1`	Playback speed multiplier
`label`	String	`auto`	Label format for display. 'auto' uses the raw step value.
`interval`	Number	`1000`	Base interval in ms between frames

Contrôles

Boutons : lecture/pause, stop (retour au début), pas précédent/suivant
Slider : navigation directe vers un pas de temps
Sélecteur de vitesse : 0.5x, 1x, 2x, 4x
Libellé du pas courant avec région aria-live

Accessibilité

Pas d'auto-play — l'animation démarre uniquement sur action utilisateur
Clavier : Espace (lecture/pause), flèches ←/→ (pas à pas), Home/End (début/fin)
ARIA : labels sur tous les contrôles, aria-live sur le libellé courant, aria-valuetext sur le slider
prefers-reduced-motion : la lecture automatique est désactivée (navigation manuelle uniquement)

Le composant n'émet aucun événement custom et n'a pas de slot.

Exemples

1. Timeline sur toutes les couches temporelles

<dsfr-data-source id="mesures" data='[
  {"ville":"Paris","lat":48.85,"lon":2.35,"valeur":120,"date":"2025-01"},
  {"ville":"Lyon","lat":45.76,"lon":4.83,"valeur":85,"date":"2025-01"},
  {"ville":"Paris","lat":48.85,"lon":2.35,"valeur":250,"date":"2025-02"},
  {"ville":"Lyon","lat":45.76,"lon":4.83,"valeur":160,"date":"2025-02"}
]'></dsfr-data-source>

<dsfr-data-map center="46.6,2.3" zoom="6" height="550px">
  <dsfr-data-map-layer source="mesures" type="circle"
    lat-field="lat" lon-field="lon"
    radius-field="valeur" tooltip-field="ville"
    time-field="date" time-mode="snapshot">
  </dsfr-data-map-layer>

  <!-- Sans "for" : pilote tous les layers à time-field -->
  <dsfr-data-map-timeline speed="1" interval="1500"></dsfr-data-map-timeline>
</dsfr-data-map>

2. Ciblage explicite + mode cumulatif

Le déploiement s'accumule au fil des ans (time-mode="cumulative"), avec des dates regroupées par année (time-bucket="year"). La couche de contours, sans time-field, reste affichée en permanence.

<dsfr-data-map center="46.6,2.3" zoom="6">
  <dsfr-data-map-layer source="regions" type="geoshape"
    geo-field="geo_shape" no-interactive color="#7b7b7b" fill-opacity="0">
  </dsfr-data-map-layer>

  <dsfr-data-map-layer id="deploiement" source="installations" type="marker"
    geo-field="geo_point_2d" tooltip-field="nom"
    time-field="date_mise_en_service" time-bucket="year" time-mode="cumulative">
  </dsfr-data-map-layer>

  <dsfr-data-map-timeline for="deploiement" interval="800" speed="2">
  </dsfr-data-map-timeline>
</dsfr-data-map>

Voir aussi

dsfr-data-map-layer — time-field, time-bucket, time-mode et l'API setTimelineFrame() / resetTimeline() / getTimeSteps()
dsfr-data-map — le conteneur et la vue d'ensemble de la famille