GeoMapCanvas

@nivo/geomapcanvas
svgcanvas

A canvas implementation of the GeoMap component, should be used used when you have complex geometries as it offers better performance than its SVG counterpart.

Please note that because the features file is pretty huge, it's not included in the generated code, you can find the file used for this example here, you'll have to pass the features array to the features property.

The responsive alternative of this component is ResponsiveGeoMap.

Actions Logs
Start interacting with the chart to log actions
Base
numberrequired

Chart width.

numberrequired

Chart height.

numberoptionaldefault:'Depends on device'

Adjust pixel ratio, useful for HiDPI screens.

supportsvgcanvas
objectoptional
px
px
px
px

Chart margin.

Projection
stringoptionaldefault:'mercator'
mercator

Defines the projection to use.

numberoptionaldefault:100

Projection scale.

[number, number]optionaldefault:[0.5, 0.5]
value[0.5, 0.5]
px
px

Projection x/y translation.

[number, number, number]optionaldefault:[0, 0, 0]
value[0, 0, 0]

Projection rotation.

Style
Themeoptional

Define style for common elements such as labels, axes…

numberoptionaldefault:0
px

Control border width.

string | object | Functionoptionaldefault:'#000000'
inheritthemecustom
#333333

Method to compute border color.

object[]optional

Define patterns and gradients.

supportsvgcanvas
object[]optional

Define rules to apply patterns and gradients

supportsvgcanvas
Graticule
booleanoptionaldefault:false
   

Enable meridians and parallels, useful for showing projection distortion.

numberoptionaldefault:0.5
px

Control meridians and parallel lines width.

stringoptionaldefault:'#999999'
   #666666

Control meridians and parallel lines color.

Interactivity
booleanoptionaldefault:true
   

Enable/disable interactivity.

Functionoptional

onClick handler, it receives clicked node data and style plus mouse event.