Compagnon d'affichage au clic pour la carte : définit un template HTML et un mode de présentation (popup Leaflet, modale DSFR ou volet latéral) pour les éléments cliqués d'une couche. Remplace les attributs legacy popup-template / popup-fields du layer par un composant déclaratif.

Attributs

AttributTypeDéfautDescription
modePopupModepopupMode d'affichage : popup (bulle sur la carte), modal, panel-right, panel-left.
title-fieldString""Champ utilise comme titre du panneau ou de la modale.
widthString350pxLargeur du panneau lateral (modes panel-*). Bornée à la largeur de la carte : sur un écran étroit le panneau l'occupe entièrement au lieu de déborder.
forString""Id du layer cible. Vide = tous les layers de la carte.

Modes

Template

Le contenu est défini par un élément <template> enfant (lookup différé — compatible avec un script chargé dans le <head> sans defer). Les expressions sont celles de dsfr-data-display (#426) :

SyntaxeDescription
{{champ}}Valeur échappée (HTML-safe)
{{champ.sous.clé}}Accès aux propriétés imbriquées
{{champ:number}}Formatage fr-FR avec séparateurs de milliers
{{champ|défaut}}Repli si null/undefined

Asymétrie volontaire avec display : contrairement à dsfr-data-display, il n'y a pas de syntaxe {{{champ}}} (valeur brute) ici — les expressions d'un popup de carte sont toujours échappées. Le contenu vient souvent de données open data non maîtrisées et s'affiche dans un overlay au clic : pas d'injection HTML possible.

Sans template, un tableau clé/valeur est généré automatiquement (les champs géométriques — geo*, latitude, longitude — et les objets sont exclus).

Résolution du compagnon

Quand un élément d'une couche est cliqué, le popup applicable est cherché dans cet ordre :

  1. Popup enfant du layer — un <dsfr-data-map-popup> placé directement dans le <dsfr-data-map-layer> ;
  2. Popup au niveau carte avec for qui matche — for comparé à l'id puis au source du layer ; un popup sans for matche toutes les couches (#296) ;
  3. Popups de la carte hôte — pour les encarts (dsfr-data-map-inset) : les clics dans une vignette délèguent aux popups de la carte principale (template unique, pas de duplication).

API JavaScript

MéthodeDescription
matchesLayer(layerId)Teste si ce popup s'applique à une couche
showForRecord(record)Ouvre le panneau/la modale pour un enregistrement
getPopupHtml(record)Rend le HTML du template (ou du tableau auto) pour un enregistrement
hasTemplate()Indique si un <template> est défini
close()Ferme le panneau/la modale

Le composant n'émet aucun événement custom.

Exemples

1. Volet latéral avec template

<dsfr-data-map center="46.5,2.6" zoom="6" tiles="ign-plan">
  <dsfr-data-map-layer source="territoires" type="geoshape"
    geo-field="geojson" tooltip-field="nom">
  </dsfr-data-map-layer>

  <dsfr-data-map-popup mode="panel-right" title-field="nom" width="400px">
    <template>
      <p class="fr-badge fr-badge--info">{{statut|En cours}}</p>
      <p><strong>{{habitants:number}}</strong> habitants</p>
      <p>Contact : {{contact.email|non renseigné}}</p>
    </template>
  </dsfr-data-map-popup>
</dsfr-data-map>

2. Modale sans template (tableau auto)

<dsfr-data-map center="46.6,2.3" zoom="6">
  <dsfr-data-map-layer source="bornes" type="marker"
    geo-field="geo_point_2d" tooltip-field="nom_station" cluster>
  </dsfr-data-map-layer>

  <!-- Sans template : tableau clé/valeur généré automatiquement -->
  <dsfr-data-map-popup mode="modal" title-field="nom_station"></dsfr-data-map-popup>
</dsfr-data-map>

3. Un popup par couche avec for

<dsfr-data-map center="46.6,2.3" zoom="6">
  <dsfr-data-map-layer id="couche-regions" source="regions" type="geoshape"
    geo-field="geo_shape"></dsfr-data-map-layer>
  <dsfr-data-map-layer source="prefectures" type="marker"
    geo-field="geo_point_2d"></dsfr-data-map-layer>

  <!-- Cible le layer par id -->
  <dsfr-data-map-popup for="couche-regions" mode="panel-right" title-field="reg_name">
    <template><p>{{population:number}} habitants</p></template>
  </dsfr-data-map-popup>

  <!-- Cible le layer par source -->
  <dsfr-data-map-popup for="prefectures" mode="popup">
    <template><strong>{{nom}}</strong> — préfecture</template>
  </dsfr-data-map-popup>
</dsfr-data-map>

Voir aussi