Composant · Données

GeoChart

Documenté

Carte 2D générique à couches (SVG, présentationnel pur) : couches GeoJSON, choroplèthe, points/épingles, densité, flux (arcs), hexbin et clusters, empilables sur une même projection (équirectangulaire par défaut, Mercator en option). L'emprise s'ajuste automatiquement sur les données de toutes les couches (avec marge) sauf si bounds est fourni. Les tons utilisent la palette data-vis (intensités via color-mix) et chaque couche est résumée dans la liste de valeurs accessible hors SVG. Cette surface couvre fonctionnellement les surcouches Highcharts Maps mapline, mappoint, mapbubble, flowmap et geoheatmap. Le cas tiledwebmap reste hors scope : pas de provider ni de fond tuilé/raster embarqué.

Exemple : couches choroplèthe, hexbin + clusters, densité

Cartes démo

Population: 3 régions
Région A: 24
Région B: 67
Région C: 41

Signalements: 3 alvéoles
1:13: 3
0:14: 2
1:12: 1
Agences: 3
cluster:0: 2
cluster:1: 1
cluster:2: 1

Activité: 4 points
(48.85, 2.35): 9
(48.8, 2.3): 4
(45.76, 4.84): 6
(43.3, 5.37): 2

Voir le code (Svelte)

<div class="docs-geomap-box">
  <GeoChart
    label="Choroplèthe démo"
    layers={[{"type":"choropleth","label":"Population","features":[{"id":"a","label":"Région A","geometry":{"type":"Polygon","coordinates":[[[-10,40],[-2,40],[-2,50],[-10,50],[-10,40]]]}},{"id":"b","label":"Région B","geometry":{"type":"Polygon","coordinates":[[[0,40],[8,40],[8,50],[0,50],[0,40]]]}},{"id":"c","label":"Région C","geometry":{"type":"Polygon","coordinates":[[[10,40],[18,40],[18,50],[10,50],[10,40]]]}}],"values":{"a":24,"b":67,"c":41},"tone":"category1"}]}
    height={240}
  />
  <GeoChart
    label="Hexbin et clusters démo"
    layers={[{"type":"hexbin","label":"Signalements","cellSize":4,"points":[{"latitude":45.2,"longitude":5.4},{"latitude":45.8,"longitude":5.9},{"latitude":46.1,"longitude":6.2},{"latitude":48.8,"longitude":2.3},{"latitude":48.9,"longitude":2.5},{"latitude":43.3,"longitude":5.4}]},{"type":"cluster","label":"Agences","radius":2,"points":[{"latitude":48.85,"longitude":2.35},{"latitude":48.95,"longitude":2.45},{"latitude":43.3,"longitude":5.37},{"latitude":45.76,"longitude":4.84}]}]}
    height={240}
  />
  <GeoChart
    label="Densité démo"
    layers={[{"type":"density","label":"Activité","points":[{"latitude":48.85,"longitude":2.35,"value":9},{"latitude":48.8,"longitude":2.3,"value":4},{"latitude":45.76,"longitude":4.84,"value":6},{"latitude":43.3,"longitude":5.37,"value":2}]}]}
    height={240}
  />
</div>

Correspondance avec Highcharts Maps

Type Highcharts	Couche GeoChart	Notes
`mapline`	`geojson`	Utiliser des géométries `LineString` ou `MultiLineString`.
`mappoint`	`points` ou `geojson`	`points` pour des marqueurs pilotés par données ; `geojson` si la source est déjà en `Point`/`MultiPoint`.
`mapbubble`	`points`	Rayon drivé par `value` via `minRadius`/`maxRadius`, ou fixé par `r`.
`flowmap`	`flow`	Arcs source → cible avec épaisseur proportionnelle à `value`.
`geoheatmap`	`density` ou `hexbin`	`density` pour une nappe continue par poids ; `hexbin` pour une agrégation par cellules.
`tiledwebmap`	non couvert	`GeoChart` reste un rendu SVG pur : aucun provider, aucune URL de tuiles, aucun fond raster.

API du composant

Prop	Type	Par défaut
`layers`	`GeoChartLayer[]`	requis
`label`	`string`	requis (a11y)
`width` / `height`	`number`	`520` / `320`
`projection`	`"equirectangular" \| "mercator"`	`"equirectangular"`
`bounds`	`{ south, west, north, east }`	auto-fit + marge

Couches (`GeoChartLayer`, union discriminée par `type`)

`type`	Données	Rendu
`geojson`	`features: { id, label?, value?, geometry }[]`	Polygones/lignes/points, remplissage translucide + contour au ton (cycle de palette ou `tone` de couche).
`choropleth`	`features` + `values: Record<id, number>`	Intensité `color-mix` ∝ valeur sur le ton de la couche ; région sans valeur neutre.
`points`	`points: { latitude, longitude, label?, value?, tone?, r? }[]`	Rayon ∝ `value` (5–14 px par défaut), `r` explicite prioritaire, tons cyclés.
`density`	`points` (poids dans `value`)	Cercles translucides superposés, rayon et intensité ∝ poids (ton `category3` par défaut).
`flow`	`flows: { source, target, value?, label? }[]`	Arcs quadratiques, épaisseur ∝ `value` (2–9 px), ton `category1` par défaut.
`hexbin`	`points` + `cellSize?` (degrés, défaut 1)	Binning hexagonal (même binning que dataviz-core), taille et intensité ∝ valeur agrégée.
`cluster`	`points` + `radius?` (degrés, défaut 1)	Regroupement glouton (même algo que dataviz-core), centroïdes distinctifs disque + anneau ∝ effectif.

Les coordonnées sont des couples { latitude, longitude } (mêmes formes que les modèles géo de dataviz-core) ; les coordonnées et valeurs non finies sont ignorées (Number.isFinite). Le composant est purement présentationnel : pas d'interactivité, role="img" + liste de valeurs accessible (résumé « Couche: N » puis une entrée par élément).