Conteneur de carte interactive basé sur Leaflet, avec fonds de carte souverains (IGN Géoplateforme). Il gère l'initialisation, le fond de tuiles, le viewport et l'accessibilité — les données sont projetées par des composants compagnons.

Vue d'ensemble de la famille cartographique

Pipeline

dsfr-data-source (A) ──┐
                       ├──> dsfr-data-map                      (conteneur : Leaflet, tuiles, viewport, a11y)
dsfr-data-source (B) ──┘     ├── dsfr-data-map-layer source="A"  (geoshape choroplèthe)
                             ├── dsfr-data-map-layer source="B"  (markers, cercles, heatmap...)
                             ├── dsfr-data-map-popup             (popup / modale / volet au clic)
                             ├── dsfr-data-map-inset             (encarts DROM, Corse...)
                             └── dsfr-data-map-timeline          (lecture temporelle des couches à time-field)

Chaque couche est connectée à sa propre source : le multi-source est naturel (ex. contours de régions + POI pharmacies sur la même carte). Les couches participent au data-bridge comme n'importe quel composant d'affichage (abonnement par source, commandes dsfr-data-source-command pour le bbox).

Bundle et chargement

• La famille complète est packagée dans le bundle dédié dsfr-data.map.esm.js (également incluse dans le bundle complet dsfr-data.esm.js).
• Leaflet n'est pas inclus : il est chargé dynamiquement via import() au moment où la carte s'initialise, et exposé sur window.L. Les plugins (leaflet.markercluster, leaflet.heat) suivent le même chemin, à la demande.
• Initialisation différée à la visibilité : la carte ne s'initialise que lorsqu'elle approche du viewport (IntersectionObserver, marge 200 px). Une page avec dix cartes sous la ligne de flottaison ne charge rien tant qu'on ne défile pas.

Accessibilité intégrée

• Skip link « Passer la carte » avec ancre après la carte ;
• Description sr-only du contenu (mise à jour par les couches via updateDescription()) ;
• role="application" + tabindex sur le conteneur Leaflet (navigation clavier) ;
• Live region assertive pour les annonces (announceToScreenReader()) ;
• L'attribut name fournit le nom accessible (aria-label) de la carte.

Le compagnon dsfr-data-a11y détecte les cartes et adapte ses libellés (« Données de la carte »).

Attributs

Fonds de carte prédéfinis

Tuiles accessibles sans clé API. Les presets ign-* sont servis par la Géoplateforme nationale IGN (infrastructure cartographique de l'État, hébergée en France). Le preset osm-fr est servi par l'association OpenStreetMap France (association loi 1901, infra hébergée en France, distincte de l'OSM Foundation).

Les fonds non-IGN sont fournis en best effort par des associations : aucune garantie de disponibilité, et des conditions d'usage propres à chaque fournisseur. En particulier, la politique d'usage d'OSM France exige un site public, sans login ni intranet, sans but lucratif et à trafic modéré — ce qui exclut osm-fr d'un déploiement derrière authentification. Détail dans docs/THIRD-PARTY-LICENSES.md.

Alias et dépréciation : tiles="osm" reste accepté et pointe vers le preset osm-fr. Trois presets sont dépréciés et résolvent vers ign-plan avec un console.warn : ign-topo (#429 — couche BDUNI quasi vide, couches SCAN topo soumises à clé API), carto-positron et carto-dark (#576 — CARTO exige désormais une clé API et filigrane les tuiles anonymes, en HTTP 200 donc sans erreur détectable ; la clé est nominative et le service raster est en cours de retrait). Toute autre valeur est traitée comme une URL template custom {z}/{x}/{y}, qui exige alors tiles-attribution.

Mode sovereign-only : pour les DSI qui imposent une politique « zéro tiers externe non souverain », l'attribut booléen sovereign-only restreint les presets disponibles aux seules tuiles IGN. Tout autre preset ou URL custom est refusé avec un avertissement console et remplacé par ign-plan.

Laisser le lecteur choisir son fond

tiles décide du fond une fois pour toutes. Sur une carte de terrain, le lecteur a souvent besoin des deux : le plan pour se repérer, l'orthophoto pour reconnaître les lieux. tiles-switcher énumère les fonds qu'on lui propose et rend un menu déroulant étiqueté « Fond de carte » en haut à droite, utilisable au clavier.

<dsfr-data-map
  center="48.85,2.35" zoom="12"
  tiles="ign-plan"
  tiles-switcher="ign-plan,ign-ortho,ign-cadastre">
  <dsfr-data-map-layer source="poi"></dsfr-data-map-layer>
</dsfr-data-map>

Les entrées hors presets connus sont écartées avec un avertissement, et il en faut au moins deux pour que le sélecteur apparaisse. Changer de fond met à jour la carte et ses encarts. Sans effet avec locked ou no-controls, qui retirent précisément l'interaction (#744). sovereign-only continue de s'appliquer : un fond non souverain proposé au lecteur est écarté comme il le serait sur tiles.

Plein écran

Une carte dense se lit mal dans une colonne de page. fullscreen ajoute, à droite des boutons de zoom, un bouton « Plein écran » : la carte, avec ses couches, sa légende, ses encarts et son sélecteur de fond, occupe tout l'écran, et en revient par le même bouton ou la touche Échap.

<dsfr-data-map center="46.6,2.5" zoom="6" fullscreen name="Bornes de recharge">
  <dsfr-data-map-layer source="bornes" type="marker" cluster></dsfr-data-map-layer>
</dsfr-data-map>

C'est un vrai bouton, atteint au clavier avant la carte. Son état passe par aria-pressed et par son libellé (« Plein écran », « Quitter le plein écran »), et chaque bascule est annoncée aux lecteurs d'écran. La page est notifiée par l'événement dsfr-data-map-fullscreen-change (detail.fullscreen). Le bouton n'apparaît pas quand le navigateur ne sait pas mettre un élément en plein écran (Safari sur iPhone), ni avec locked ou no-controls. La capture d'image de la carte reste hors périmètre : tuiles d'origines croisées et légende hors du canevas.

Événements

Le conteneur n'émet pas d'événement custom. Les couches enfantes participent au data-bridge (abonnement à leur source, commandes bbox) et dsfr-data-map-layer émet dsfr-data-map-layer-time-ready quand un découpage temporel est prêt.

API JavaScript

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 name="Bornes de recharge en France" 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"
    tooltip-field="nom_station"
    cluster>
  </dsfr-data-map-layer>
</dsfr-data-map>

<!-- height="60%" = hauteur à 60 % de la largeur courante (aspect-ratio responsive) -->
<dsfr-data-map center="48.85,2.35" zoom="11" height="60%"
  locked no-controls tiles="ign-plan" name="Vignette Paris">
  <dsfr-data-map-layer source="arrondissements" type="geoshape"
    geo-field="geo_shape" no-interactive color="#000091" fill-opacity="0.1">
  </dsfr-data-map-layer>
</dsfr-data-map>

<dsfr-data-map center="46.5,2.6" zoom="6" min-zoom="3" height="620px"
  tiles="ign-plan" fit-bounds max-bounds="38.5,-13,54,15"
  insets="drom" name="Territoires engagés">
  <dsfr-data-map-layer source="territoires" type="geoshape"
    geo-field="geojson" fill-field="habitants"
    selected-palette="sequentialAscending" tooltip-field="nom">
  </dsfr-data-map-layer>
  <dsfr-data-map-popup mode="panel-right" title-field="nom">
    <template><p>{{habitants:number}} habitants</p></template>
  </dsfr-data-map-popup>
</dsfr-data-map>

Légende — dsfr-data-map-legend

Compagnon déclaratif placé dans la carte : il rend la légende des couches (classes d'une choroplèthe, paires de color-map, ou entrée unique d'une couche monochrome) et se met à jour avec elles.

Composants compagnons

• dsfr-data-map-layer — couche de données : markers, geoshape, cercles proportionnels, heatmap, clustering, bbox, animation temporelle
• dsfr-data-map-popup — affichage au clic : popup, modale ou volet latéral avec template
• dsfr-data-map-inset — encarts territoriaux (DROM, Corse, zoom local)
• dsfr-data-map-legend — légende des couches (classes de choroplèthe, color-map, couche monochrome)
• dsfr-data-map-timeline — contrôles de lecture temporelle