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:

Simple interactive globe implementation using the new <ZoomableGlobe /> component.

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:

Animating the globe’s rotation is straightforward with react-motion.

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.

Example of globe in combination with markers.