In 2013, I made an interactive antipode map (points on opposite sides of the Earth) using the Google Maps API. As I’m trying to make the leap from Google Maps/Mapbox JS to Mapbox GL JS, here is my rehash of the same map. The only tangible difference between these two maps is that you can rotate this version (right-click and drag).
Some issues I have yet to solve:
- I can’t seem to get the rotated maps’ labels to display correctly (i.e. right-side up and left to right). I would need to somehow change them to be rendered as a mirror image.
The second set of maps don’t render at all in Chrome, although they do while testing locally. This entire project seems to work in IE and Firefox. edit: this project now seems to work in Chrome.
– this map was featured on Google Maps Mania! http://googlemapsmania.blogspot.ca/2016/07/the-antipodes-maps.html
Last night, lying in bed, I found myself wondering what was on the far side of the Earth (apparently that point is called an antipode). So, today, I made this map to find out. It actually turned into a pretty amazing ride down a CSS-riddled rabbit-hole, and now the map is complete with flipped and mirrored maps, jQuery opacity slider (at the bottom), and animated PaperJS lat/long display.
There are surprisingly few places where you could dig straight through the centre of the Earth and emerge on dry land. If you’re going to try it, here are a few relatively safe places:
- Fiji to Mali
- Auckland, NZ to Seville, Spain
- A large portion of Argentina/Chile to China/Mongolia
- Bermuda to Perth, Australia (you’ll emerge in shallow water, so bring some swimming trunks)
- Philippines to Brazil
- Hawaii to Botswana
Disappointingly, if I dug straight through the Earth to other side, I’d end up about far as possible in the middle of the Indian Ocean.
There are lots of similar maps out there, but I’ve yet to find another one with interactive transparent overlay maps (possibly by design – it gets a little overwhelming). If you find other cool antipode maps, feel free to link to them here.
edit: now includes custom map style!
edit: does not seem to work in Safari or IE.