Richard Zimerman

February 26, 2018

Globe and Albers USA support in React-Simple-Maps v.0.11

With the release of v.0.11, react-simple-maps now has proper support for rotating globes and the Albers USA projection.

Thematic maps using the Albers USA projection


While creating static globes with react-simple-maps has been technically possible until now, the new <ZoomableGlobe /> component takes globes to the next level. <ZoomableGroup /> relies on a custom panning and zooming implementation that makes regular maps significantly more performant than modifying scale on the projection. This approach is however not possible when using the orthographic projection as we need to modify the rotation parameter. <ZoomableGlobe /> aims to remedy this problem by modifying the projection itself, and enabling globe rotation on drag. A general globe implementation in react-simple-maps v.0.11 now looks fairly simple:

Tada! It’s as simple as that and you have an interactive globe that you can use with all the great features that react-simple-maps normally provides to <ZoomableGroup />. This means that like before you can use react-motion to animate your maps:

Using Markers with Globes

Markers present a special challenge when implementing globes as they now have to become invisible as they move behind the globe during the rotation. In addition to default, hover, and pressed, there is now a new hidden property on the style object that gets passed to each marker. These hidden styles will be activated once the marker moves behind the globe.

To see the new <ZoomableGlobe /> component in action with data, check out the new biggest cities by population example on github.

Albers USA

The other major feature that react-simple-maps v.0.11 adds is proper support for the Albers USA projection. The challenge there has been that react-simple-maps performs certain calculations that relied on rotation, and this was causing problems with projections that do not have a rotation property.

The other challenge with projections like Albers USA is that they have undefined coordinates, since they are clipped.

This means that using the conventional approach with react-motion will not yield a smooth animation between e.g. New York and Honolulu, since there is a jump in coordinates. Using a css transition however will yield good results in the browsers that support css transitions on SVG elements.

To create a map of the US using the Albers USA projection, all you need to do is add projection=”albersUsa” to <ComposableMap />.

You can check out a working choropleth example of the US on github.

If you are into data visualisation and mapping, make sure to give the new react-simple-maps a try. If you find any issues or bugs, report them on issues in the github repo.

Happy mapping :)

Get our latest articles on design, UX, data visualisation, and code in your inbox.

Have a project in mind? Get in touch and let's make something cool. 

hello@zcreativelabs.comGet in touch


Sign up to get our latest articles on design, data visualization, and code directly in your inbox.

z creative labs GmbH
Sihlquai 131, 8005 Zurich


© 2021 z creative labs GmbH