With React-Motion

This example shows animated zooming and panning with react-motion. Start by clicking on one of the cities in the list.

Check out the code for this example on github.

Just like in the Zooming and Panning example the city links use setState to set the center and the zoom of the map to the clicked city. This time however we wrap the map in the <Motion /> component from react-motion, allowing us to animate zooming and panning.

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