Maps

A wrapper component for every mapchart built with react-simple-maps. It determines the map context, which is passed to all react-simple-maps components. The context contains information about the projection and path generator, as well as the dimensions of the mapchart.

Basic Annotation

Basic Marker

Basic World Map

Custom Marker

Europe Map With Graticule

Graticule

Map Chart With Tooltip

Choropleth map chart of the US (quantile)

Choropleth map chart of the US (quantize)

USA states map with labels

API

ComposableMap
PropDescriptionTypeDefault
width-number800
height-number600
projection-string | () => void'geoEqualEarth'
projectionConfig-object{}
ZoomableGroup
PropDescriptionTypeDefault
center-array[0, 0]
zoom-number1
minZoom-number1
maxZoom-number8
translateExtent-array[-∞, -∞, ∞, ∞]
onMoveStart-(position: { coordinates: [number, number], zoom: number }, event: D3ZoomEvent< SVGElement, any>) => void-
onMove-(position: {x: number, y: number, k: number, dragging: WheelEvent }, event: D3ZoomEvent< SVGElement, any>) => void-
onMoveEnd-(position: { coordinates: [number, number], zoom: number }, event: D3ZoomEvent< SVGElement, any>) => void-
Sphere
PropDescriptionTypeDefault
id-string'rsm-sphere'
fill-string'transparent'
stroke-string'currentcolor'
strokeWidth-number0.5
Graticule
PropDescriptionTypeDefault
fill-string'transparent'
stroke-string'currentcolor'
step-Array[10, 10]
Geographies
PropDescriptionTypeDefault
geography-string-
children-(data: object) => void-
parseGeographies- (features: Array) => Array-
Geography
PropDescriptionTypeDefault
geography-object-
style-object-
Marker
PropDescriptionTypeDefault
coordinates-array[]
style-object{}
Line
PropDescriptionTypeDefault
from-[number, number][0, 0]
to-[number, number][0, 0]
coordinates-array[]
fill-string'transparent'
stroke-string'currentcolor'
strokeWidth-number3
Annotation
PropDescriptionTypeDefault
subject-array[]
dx-number30
dy-number30
curve-number0
connectorProps-object-

More usage & examples?

Read the docs, or check out the examples.