DocsExamplesGitHubGetting started

Getting started

This is a simple getting started guide for react-simple-maps. This guide will show you how to install react-simple-maps, and how to create your first SVG map chart with it.


Start by installing react-simple-maps and its dependencies.

npm install --save react-simple-maps

...or if you are using yarn:

yarn add --save react-simple-maps

Note that react-simple-maps depends on React hooks and therefore requires React v16.8 or higher.

Basic example

For this most basic example of an SVG map chart, all you need is the ComposableMap, Geographies, and Geography component. In order to create your map you will first need a valid topojson/geojson file. We have a few topojson files (based on Natural Earth data) that you can experiment with in the react-simple-maps repo.

* The boundaries and the designations used on this map do not imply the expression of any opinion on the part of the react-simple-maps team or z creative labs and are used for illustrative purposes only. The boundaries and shapes are not part of the react-simple-maps library and are sourced from Natural Earth Data and gadm.org.

You should now have a functional SVG map that you can use for data visualization. Check out the examples to learn how to use react-simple-maps to create more advanced and engaging map charts.

If you are interested in how to create custom topojson files based on shapefile data, check out this guide on how to convert shapefiles to topojson/geojson with mapshaper.org.


Sign up to the React Simple Maps newsletter and be the first one to know when we publish new stuff.

Hire Us!

Are you looking for someone to create beautiful mapcharts?

Contact us

React Simple Maps


More Tools

Check out these other design and development tools by z creative labs.

Get Waves

© 2021 z creative labs