GeoChart

Choropleth

Regions coloured by value using a three-colour scale (red → amber → green).

import { GeoChart } from '@eekodigital/raster';
import world from 'world-atlas/countries-110m.json';

<GeoChart
topology={world}
data={[
  { id: '826', value: 95, label: 'United Kingdom' },
  { id: '840', value: 65, label: 'United States' },
  { id: '392', value: 85, label: 'Japan' },
]}
colorScale={['var(--color-danger)', 'var(--color-warning)', 'var(--color-success)']}
aria-label="Compliance by country"
/>

With markers

Bubble markers at lat/lon coordinates overlaid on the choropleth.

<GeoChart
topology={world}
data={data}
markers={[
  { lat: 51.5, lon: -0.1, size: 8, label: 'London' },
  { lat: 48.9, lon: 2.3, size: 6, label: 'Paris' },
  { lat: 40.7, lon: -74.0, size: 7, label: 'New York' },
]}
aria-label="Compliance with office markers"
/>

GeoChart does not bundle any map data. Install world-atlas for world country boundaries, or provide your own TopoJSON data.

Projections

"mercator" (default) — most recognisable, distorts area at poles.

"equirectangular" — honest area representation, flat appearance.

Custom function: (lon, lat) => [x, y] where x/y are 0-1 normalised.

Filtering regions

Pass a filter array of feature IDs to show only specific regions:

<GeoChart topology={world} filter={["GBR", "IRL"]} data={ukData} />

Props

Prop	Type	Default	Description
topology	Topology	—	TopoJSON data (e.g. from world-atlas)
data	GeoRegionDatum[]	[]	{ id, value, label? } per region
colorScale	string[]	Interactive scale	Colours from low to high value
markers	GeoMarker[]	[]	{ lat, lon, size?, label, color? }
projection	"mercator" | "equirectangular" | fn	"mercator"	Map projection
filter	string[]	—	Feature IDs to include (show only these)
onRegionClick	(datum, id) => void	—	Click handler per region
onMarkerClick	(marker, index) => void	—	Click handler per marker
aria-label	string	—	Required.