In the 16th century, Gerardus Mercator, a Flemish cartographer devised a new way of depicting the world on a flat plane. We set off to explore his map in order to illustrate his biggest blunders, unearth curious facts and explain the advantages that make this representation of the globe still relevant today.
I especially like the fact that the several parts of the map get highlighted as you scroll, thanks to the use of ScrollMagic
📜 If you’d want to venture into your own “animate as you scroll” adventure, I’d recommend a more modern library such as the aforementioned Scrollama(which uses IntersectionObserver)
🗺 In case you want to see for yourself how much Mercator distorts our view of the world, go play The Mercator Puzzle. In case you’re really into projections you might want to check out the contents of my talk Geoshizzle(from a long long time ago)
🌍 If you’re new to mapping & projections, or don’t want to read the lengthy article, this video from Vox sums it up quite nicely what’s wrong with the Mercator projection:
In the Puzzle you need to drag the shape of the territory to the right place. Just like in childhood we collected pictures piece by piece, so here you can collect a country from regions or whole continents from countries!
In the Quiz you need find the country by flag, emblem or the capital. Did you know that Monaco and Indonesia have the same flags? And that the flags of the United States and Liberia differ only in the number of stars? So, these and other interesting things can be learned and remembered after brainstorming right now!
One of the core ideas covered in my talk named “Geoshizzle” on mapping is that the Mercator projection is way overdue. It’s main feature of preserving angle measurements is no longer feasible in this time and age (it was back when you were sailing a boat to get somewhere), and it’s distortion of areas has affected how we perceive the size of the world (e.g. Greenland and Antarctica really aren’t that big).
Michael Davis has created a really good article on this, filled with visualisations using Tissot’s indicatrices demonstrating the effects of each projection.
Pictured above you can see Tissot’s indicatrices drawn onto a globe, an equirectangular projecten, and the Mercator projection
A Frenchman named Tissot came up with something fancy. The general idea was to characterize local distortions; To show you what a small circle would look like when moved from the globe to the map.
The coolest part of the article/site is that the visualisations are interactive: you can give each globe a spin and simultaneously see how (the distortion of) the linked projection is affected by it.
If you’ve been following my blog for some time now you’ll know that I’m no fan of the Mercator projection, as it has distorted our perception of how big countries are. With “The True Size Of…” you can drag around some countries and see so yourself.
Since Google Maps v3.11 (*) it’s possible to move around a google.maps.Polygon by using the mouse (if the draggable property is set to true — see example here). Unfortunately the API does not allow us to move that Polygon programatically.
google.maps.Polygon.moveTo() is a Google Maps extension enabling just that: it allows one to programmatically move a google.maps.Polygon on the map without any user/mouse interaction. The script works with both geodesic (polygons that follow the curvature of the earth) and non-geodesic (straight) polygons.
In the screenshot above, the red polygon is the original one, and the green one is the one that’s been moved using google.maps.Polygon.moveTo(). The distortion is normal, due to the Mercator Projection
(*) The current stable version of Google Maps still is 3.10. For now (until 3.11 is the stable one), you can include the experimental 3.11 version by referencing http://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false