Transparent Mapbox Globe

Wed 06 July 2022

Mapbox recently released a new version of the GL JS library, including a globe projection.

Had to quickly try out the new @Mapbox globe. Here are some randomly generated satellites.https://t.co/urwNiKkbR4 pic.twitter.com/gqtV8DHrBw
— Darren Wiens (@dkwiens) June 28, 2022

The globe looks amazing, out of the box, but wouldn't it be cool to have the option to make it hollow and see the other side?

I want to be transparent about something, and yet... somewhat intentionally opaque, until I figure out if this is interesting 🌍 pic.twitter.com/snG3L5cvH9
— Darren Wiens (@dkwiens) July 6, 2022

The main points about the transparent globe above are:

create two map objects (beware, because I assume this has the consequence of counting double for billing)
flip one map horizontally, through the CSS style transform: scaleX(-1);
modify map events (e.g. load, move, zoom) so that when the user interacts with the unflipped map, the desired effect is applied to the flipped map
disable interaction handles (e.g. dragRotate, pitchWithRotate, touchPitch, touchZoomRotate) as necessary to limit the trouble the user can get into by interacting with the map

Admittedly, it's not a perfect solution. Because both maps bend outward toward the user, I find that the illusion works better some times more than others, depending on if I'm concentrating on that or not. The illusion also suffers when zoomed in, likely something to do with the perspective. In my example, I fade the flipped map when the user zooms in.

Code: here

Try it out in the live example: here (note: pinch interactions are disabled on touch devices. To zoom in, one finger double tap, to zoom out two finger double tap.)

Shout out to the staff at Sparkgeo for CSS guidance and alpha testing.

Get in touch with me on Twitter if you want to talk about it!

Tags: