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 prédéfini (guadeloupe, martinique, guyane, la-reunion, mayotte, saint-pierre-et-miquelon, saint-martin, saint-barthelemy, nouvelle-caledonie, polynesie-francaise, wallis-et-futuna, corse) — fournit center/zoom/label. Le cadrage montre le territoire ENTIER dans l'encart par défaut (10rem de large, 160px de haut) : aucun `zoom` à poser pour le voir en entier ; un encart plus petit en demande un plus faible. Seule exception, voulue : `polynesie-francaise` cadre Tahiti et Moorea — l'essentiel de la population, des îles lisibles dans 160 px ; le territoire entier demanderait le zoom 3, où plus rien ne se lit. Il est au zoom 7, le plus grand que le fond par défaut (Plan IGN) sert sur la Polynésie. Pour un autre archipel, poser `center` et `zoom`.
`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 préréglage, qui cadre déjà le territoire entier)
`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.

Cadrage des préréglages

Un préréglage territory montre le territoire entier dans l'encart par défaut (10rem de large, 160px de haut) : son centre est le milieu de l'emprise des communes, son zoom le plus grand où elle tient. Aucun zoom n'est à poser pour voir tout le territoire ; un zoom posé sur l'encart prime toujours, pour un cadrage resserré ou pour un encart plus petit que le défaut.

Exception voulue : polynesie-francaise cadre Tahiti et Moorea, pas le territoire. La Polynésie française s'étend sur vingt degrés de latitude et de longitude : entière, elle demande le zoom 3, où aucune île n'est lisible dans 160 px. Tahiti et Moorea portent l'essentiel de la population. Pour un autre archipel (Marquises, Tuamotu, Australes…), poser center et zoom sur l'encart.

Ce préréglage est au zoom 7, centré sur le milieu des deux îles (-17.68,-149.52). Ce n'est pas le plus grand zoom qui les cadre — le 8 les tient encore — mais le plus grand que sert le fond par défaut : le Plan IGN (tiles="ign-plan") ne répond plus au-delà du zoom 7 sur la Polynésie française, la Nouvelle-Calédonie et Wallis-et-Futuna, et l'encart y sortirait gris. Les préréglages nouvelle-caledonie (zoom 5) et wallis-et-futuna (zoom 6) restent sous cette limite. Avec tiles="ign-ortho" ou tiles="osm" sur la carte, qui servent ces territoires aux zooms supérieurs, zoom="8" sur l'encart resserre le cadrage sur Tahiti et Moorea.

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 — aucune requête de plus, quel que soit le nombre d'encarts.
Tracé borné à l'emprise : la couche d'un encart reçoit les mêmes lignes que celle de la carte principale, mais ne trace que les entités de son cadre (élargi de la taille des symboles, pour qu'un cercle à cheval sur le bord reste dessiné). Dix encarts sur 7 000 points ne tracent pas 70 000 cercles. Les classes de couleur, les rayons proportionnels et les intensités de chaleur restent calculés sur le jeu entier : un même enregistrement a la même apparence dans l'encart et sur la carte principale, et la légende vaut pour les deux. Le plafond max-items s'applique avant l'emprise : l'encart montre ce que la couche montre, restreint à son cadre.
À jour à chaque nouvelle donnée : un filtre amont, une facette ou un pas de dsfr-data-map-timeline (y compris désignée par for) remplacent les entités de l'encart. Un encart redimensionné (palier de width, plein écran) retrace sa nouvelle emprise.
Limite — couche en bbox : la source ne charge alors que la zone visible de la carte principale. Les encarts ne commandent jamais la source ; ils ne montrent donc que ce qui s'y trouve déjà. Pour des encarts renseignés, charger le jeu entier (sans bbox).
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"></dsfr-data-map-inset>
  <dsfr-data-map-inset territory="martinique"></dsfr-data-map-inset>
  <dsfr-data-map-inset territory="guyane"></dsfr-data-map-inset>
  <dsfr-data-map-inset territory="la-reunion"></dsfr-data-map-inset>
  <dsfr-data-map-inset territory="mayotte"></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