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. |