Simple Markers

In this example we add South America's capital cities to the map as simple markers with labels.

Check out the code for this example on github.

Buenos AiresLa PazBrasiliaSantiagoBogotaQuitoGeorgetownParamariboCayenneAsuncionMontevideoCaracasLima

Markers in react-simple-maps can contain any shape, as well as text. By default we use the <circle /> element to render a simple circle. Check out the custom SVG markers example to see how to add arbitrary SVG shapes as markers.

Tabbing is enabled by default on both geographies and markers.

* 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 and

react-simple-maps is a library of React components to make SVG maps using d3-geo and topojson.

react-simple-maps was made at and is maintained by z creative labs.

Check out these mapping articles we wrote on Medium!
Copyright © Richard Zimerman 2017. MIT Licensed.