Charts

GeoMapNew in 0.8.0

Choropleth map with bubble markers, zoom and pan. No map data is bundled — pass SVG paths directly or convert GeoJSON with geoJsonToRegions.

GeoMapgeoJsonToRegions

Preview

MarkersLabelsZoom & panLegend

45 orders300 orders

Click a region to select it. Drag to pan, scroll to zoom.

Usage

tsx

import { GeoMap, geoJsonToRegions } from "@vesture/react";

const { regions, project } = geoJsonToRegions(geojson, { width: 800, height: 500, keyProp: "iso", labelProp: "name" });
const [x, y] = project(2.35, 48.85);

<GeoMap
  mapWidth={800}
  mapHeight={500}
  width={640}
  regions={regions.map((r) => ({ ...r, value: sales[r.key] }))}
  markers={[{ key: "hq", x, y, value: 900 }]}
/>

Behavior

geoJsonToRegions(geojson, { width, height }) returns { regions, project }. Use project(lon, lat) to place markers in the same coordinate space.
Drag to pan, scroll or use the buttons to zoom. With the map focused: arrows pan, +/− zoom, 0 resets.

Props

Prop	Type	Default	Description
regions	{ key; label; path; value? }[]	—	Required. path is an SVG path in map coordinates.
mapWidth / mapHeight	number	—	Required. The coordinate space the paths were built for.
width / height	number	—	Rendered size. Height defaults to the map's aspect ratio.
markers	{ key; x; y; value?; label?; color? }[]	—	Bubbles sized by value.
colors / domain / noDataColor	string[] / [number, number] / string	—	Choropleth scale.
markerRadius	[number, number]	[4, 18]	Bubble radius range.
selectedKey	string	—	Highlight one region.
zoomable / minZoom / maxZoom	boolean / number	true / 1 / 8	Pan and zoom.
showLegend / showLabels	boolean	—	Legend bar and region names.
onRegionClick / onMarkerClick	function	—	Interaction.