Function SimpleMap

This widget shows a Map chart from an array of value-country-code elements. This map is fully customizable.

🚨 IMPORTANT: country code strings must follow the ISO-aplha-3 format to work properly.

Example

Here's the most basic example

<SimpleMap data={data} />

Remarks

You can focus on an specific area of the world by combining zooming and x-y axis movement.

In order to achieve this, you can play with defaultZoom and defaultMapTranslation props, until you get your desired result.

Example

Here's an example of a Map zooming to Europe

<SimpleMap data={data} defaultZoom={600} defaultMapTranslation={{ x: 0, y: 11 }} />

You can also customize other visual properties such as height, grid color, unkown data color, countries border, and so on. By using the corresponding props.

Example

Here's an example of a Map with custom colors

<SimpleMap data={data} mapColorSet={'orange_red'} unknownDataColor={'white'} countriesBorderColor={'blue'} />

Also, you have access to more advance customization by exposing the underlining library nivo/geo through configOverrrides prop.