New: 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.
Note: I have moved my blog to zcreativelabs.com/blog/. You can find an updated version of this article and more there. Future articles will only be published there. Please subscribe to the z creative labs newsletter to receive my latest articles in your inbox.
Globes
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 :)
