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

$ npm install --save react-simple-maps

Read the docs on github.

Basic Map

How to render a basic world map with react-simple-maps.

Projections

How to use built-in projections with react-simple-maps.

How to add a graticule to react-simple-maps.

How to add a custom projection from d3-geo/d3-geo-projection.

Managing zooming and panning in react-simple-maps.

How to add simple markers to a map with react-simple-maps.

How to use custom SVG markers.

Decide what is shown and what is hidden.

How to bind data to maps and creating a choropleth map.

How to create a coropleth map showing the various subregions in the world.

How to create a coropleth map showing the subregions of the world.

How to bind data to maps and creating a bubble map.

How to display a country map with its main administrative units.

How to add annotations to a map with react-simple-maps.

How to animate react-simple-maps with react-motion.

How to add a tooltip with react-simple-maps and redux-tooltip.

How to add a pie charts as markers on a map with victory.

To learn more about creating declarative maps with React and d3-geo read How to create pure react SVG maps with topojson and d3-geo on Medium.

Check out the code for all the examples on github.