Zooming and Panning

This example uses react-simple-maps to zoom and pan to different locations on a world map. Select a city from the list to get started.

Check out the code for this example on github.

The city links use setState to trigger zooming and panning on the map once clicked. Check out the react-motion example to see how this would work with animations.

* 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 gadm.org.

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.