dsfr-data-map-inset - Composants

Encart territorial d'une carte dsfr-data-map : une mini-carte verrouillée centrée sur un territoire — le pattern « France métropolitaine + vignettes DROM » des cartes nationales.

Enfant de dsfr-data-map : l'encart rend une mini dsfr-data-map verrouillée (locked, no-controls, zoom fixe, mêmes tuiles que l'hôte) qui clone les couches directes de la carte hôte (clone superficiel, sans id) — aucune duplication de configuration. Les clics dans l'encart délèguent aux popups de la carte principale : un seul template, un seul volet.

Attributs

Attribut	Type	Défaut	Description
`territory`	String	`""`	Territoire predefini (guadeloupe, martinique, guyane, la-reunion, mayotte, saint-pierre-et-miquelon, saint-martin, saint-barthelemy, nouvelle-caledonie, polynesie-française, wallis-et-futuna, corse) — fournit center/zoom/label
`center`	String	`""`	Centre "lat,lon" de l'encart (requis sans territory ; prioritaire sur le preset)
`zoom`	Number	`0`	Zoom fixe de l'encart (prioritaire sur le preset)
`label`	String	`""`	Libellé affiché au-dessus de l'encart (et nom accessible de la mini-carte)
`width`	String	`""`	Largeur de l'encart (px, rem, %). Un `%` est relatif a la largeur de la carte hote : `width="20%"` repartit cinq encarts sur une ligne. Sans attribut, la feuille injectee par la carte pose `10rem` — une regle de page `dsfr-data-map-inset { width: … }` prime toujours dessus (#643). Echelle mobile-first (#818), comme `per-row` et `span` (#789) : `width="50% md:20%"` — le premier terme sous le premier point de rupture, puis un palier par point de rupture DSFR (sm 576, md 768, lg 992, xl 1248 px) ; un palier absent reprend le precedent. En echelle, une regle de page prime aussi, a toutes les largeurs. Un point de rupture inconnu ou une longueur illisible est une erreur de configuration.
`height`	String	`160px`	Hauteur de la mini-carte (px, rem, vh). Un `%` est un ratio de la LARGEUR de l'encart, comme sur `dsfr-data-map`.

Aucun événement, aucun slot, aucune méthode publique.

Raccourci `insets` côté carte

L'attribut insets de dsfr-data-map génère les encarts automatiquement : une liste de territoires et/ou de groupes séparés par des virgules. Le groupe drom développe les 5 DROM : guadeloupe, martinique, guyane, la-reunion, mayotte.

<dsfr-data-map insets="drom">...</dsfr-data-map>          <!-- les 5 DROM -->
<dsfr-data-map insets="drom,corse">...</dsfr-data-map>    <!-- DROM + Corse -->
<dsfr-data-map insets="guyane,mayotte">...</dsfr-data-map> <!-- à la carte -->

Un encart posé explicitement en HTML pour le même territoire prime sur celui du raccourci (pas de doublon) — pratique pour surcharger le zoom ou le cadrage d'un seul territoire.

Fonctionnement

Clonage superficiel des couches : les dsfr-data-map-layer directs de la carte hôte sont clonés dans la mini-carte (mêmes attributs, sans id). Les données arrivent par le data-bridge : une seule source alimente la carte principale et tous ses encarts.
Délégation des clics : un clic sur un élément de l'encart ouvre le popup/volet/modale de la carte principale (cf. résolution du compagnon).
Verrouillage : ni pan, ni zoom, ni clavier dans l'encart — c'est une vignette de situation, pas une carte de navigation.

Pattern ADR-094 : carte nationale + encarts DROM + volet délégué

Le pattern complet combine fit-bounds clippé par max-bounds (la métropole cadre bien même si les données contiennent les DROM), les encarts DROM et un volet unique délégué. C'est le montage de la carte « Territoires d'électrification » (ELF v2) du guide :

<dsfr-data-map id="carte" center="46.5,2.6" zoom="6" min-zoom="3" height="620px"
  tiles="carto-positron" fit-bounds max-bounds="38.5,-13,54,15"
  name="Territoires engagés dans l'électrification">

  <!-- Couches (clonées dans chaque encart) -->
  <dsfr-data-map-layer source="contours-regions" type="geoshape"
    geo-field="geojson" no-interactive color="#7b7b7b" fill-opacity="0">
  </dsfr-data-map-layer>
  <dsfr-data-map-layer source="territoires" type="geoshape"
    geo-field="geojson" fill-field="habitants"
    selected-palette="sequentialAscending" tooltip-field="nom">
  </dsfr-data-map-layer>

  <!-- Volet unique : sert la carte principale ET les encarts -->
  <dsfr-data-map-popup mode="panel-right" title-field="nom" width="400px">
    <template><p>{{habitants:number}} habitants</p></template>
  </dsfr-data-map-popup>

  <!-- Encarts DROM explicites (équivalent raccourci : insets="drom") -->
  <dsfr-data-map-inset territory="guadeloupe" zoom="8"></dsfr-data-map-inset>
  <dsfr-data-map-inset territory="martinique" zoom="8"></dsfr-data-map-inset>
  <dsfr-data-map-inset territory="guyane"></dsfr-data-map-inset>
  <dsfr-data-map-inset territory="la-reunion" zoom="8"></dsfr-data-map-inset>
  <dsfr-data-map-inset territory="mayotte" zoom="9"></dsfr-data-map-inset>
</dsfr-data-map>

La mise en page des encarts (bandeau sous la carte, grille...) est laissée au CSS de la page hôte — cf. l'exemple complet carte-territoires-electrification-v2 du guide.

Exemples

1. Encart sur mesure (sans preset)

<dsfr-data-map center="48.85,2.35" zoom="9">
  <dsfr-data-map-layer source="sites" type="marker" geo-field="geo_point_2d">
  </dsfr-data-map-layer>

  <!-- Zoom local sur la petite couronne -->
  <dsfr-data-map-inset center="48.86,2.35" zoom="11"
    label="Paris et petite couronne" height="200px">
  </dsfr-data-map-inset>
</dsfr-data-map>

2. Surcharge d'un territoire du groupe

<!-- insets="drom" génère les 5 DROM, mais l'encart explicite guyane prime :
     cadrage resserré sur l'île de Cayenne -->
<dsfr-data-map center="46.5,2.6" zoom="6" insets="drom">
  <dsfr-data-map-layer source="stations" type="marker" geo-field="geo_point_2d">
  </dsfr-data-map-layer>
  <dsfr-data-map-inset territory="guyane" center="4.93,-52.33" zoom="10">
  </dsfr-data-map-inset>
</dsfr-data-map>

Voir aussi

dsfr-data-map — le conteneur, le raccourci insets et le clip max-bounds
dsfr-data-map-popup — la délégation des clics vers le volet de la carte principale