Mercator Puzzle(gmaps-samples.googlecode.com)
gmaps-samples.googlecode.com
Mercator Puzzle
http://gmaps-samples.googlecode.com/svn/trunk/poly/puzzledrag.html
31 comments
This reminds me of this great segment from the West Wing: http://www.youtube.com/watch?v=n8zBC2dvERM
As a Finn, I'm thankful for Mercator's contribution to improving Finnish self-esteem. It's an insignificant corner of Europe with less people than most Chinese cities nobody has ever heard of, but at least it looks big on the map!
I had no idea how small Finland was... Not that much bigger than some of those small African equatorial countries.
well, I guess if a guy hears of Nokia probably (s)he knows about Finland :-)
Does anyone know why Google insists on Mercator projection? I guess that it makes the implementation bit simpler, but on the other hand you'd imagine that if anyone then Google would have the resources to use some more reasonable projection for greater good.
I think this is an externally visible link: http://productforums.google.com/forum/#!topic/maps/A2ygEJ5eG... . It's the answer I received when I filed an internal bug on this.
"Hi John - Thanks for the feedback. Maps uses Mercator because it preserves angles. The first launch of Maps actually did not use Mercator, and streets in high latitude places like Stockholm did not meet at right angles on the map the way they do in reality. While this distorts a 'zoomed-out view' of the map, it allows close-ups (street level) to appear more like reality. The majority of our users are looking down at the street level for businesses, directions, etc... so we're sticking with this projection for now."
"Hi John - Thanks for the feedback. Maps uses Mercator because it preserves angles. The first launch of Maps actually did not use Mercator, and streets in high latitude places like Stockholm did not meet at right angles on the map the way they do in reality. While this distorts a 'zoomed-out view' of the map, it allows close-ups (street level) to appear more like reality. The majority of our users are looking down at the street level for businesses, directions, etc... so we're sticking with this projection for now."
Yes, there are two properties that are important for Google Maps:
1. Mercator is conformal, which means angles are preserved. So if you zoom into any small part of the map, it will look right. Equal-area maps distort angles.
2. North is always in the same direction—up. Together with the conformal property, it means that all directions are preserved: North, South, and everything else.
The primary use case for Google Maps is not to show the whole world at once, rather it is targeted at street-level mapping. Hence, Mercator is an ideal choice.
1. Mercator is conformal, which means angles are preserved. So if you zoom into any small part of the map, it will look right. Equal-area maps distort angles.
2. North is always in the same direction—up. Together with the conformal property, it means that all directions are preserved: North, South, and everything else.
The primary use case for Google Maps is not to show the whole world at once, rather it is targeted at street-level mapping. Hence, Mercator is an ideal choice.
Of course, Google Maps isn't subject to the same limitations as paper maps – the projection could vary with both position and zoom level.
There are design and technical concerns, but they are not insurmountable. After all, if you ignore tilting then Google Earth is essentially a dynamically redrawn (position and scale variant!) planar map projection. With the proliferation of vector maps on mobile and WebGL in the browser, it seems like a solution could be found.
There are design and technical concerns, but they are not insurmountable. After all, if you ignore tilting then Google Earth is essentially a dynamically redrawn (position and scale variant!) planar map projection. With the proliferation of vector maps on mobile and WebGL in the browser, it seems like a solution could be found.
Interesting. From this description I would expect that mercator would always agree with lat/long in terms of "Is X North or South of Y" questions.
However, Albany (Australia) appears to be South of Melbourne when in its starting position on this map (inverted when moved to its correct position.) How is this possible?
However, Albany (Australia) appears to be South of Melbourne when in its starting position on this map (inverted when moved to its correct position.) How is this possible?
[deleted]
Not sure if this makes sense, but couldn't they have different projections for different zoom levels?
I see a huge, annoying jump into and out of Mercator.
A bit of tweening animation should be able to fix that though.
It messes up around Antarctica, but it works much better than mine, which doesn't even exist, so I should probably be quiet.
That's really cool. Thanks for sharing.
As far as I can tell that actually could work very well, though the implementation might be quite difficult: 15 different zoom levels (I think) that google uses probably wouldn't be enough to make transitions between each seamless, requiring client side scaling during the zoom animations (which will either make the images slightly blurry or require loading higher resolution images).
[deleted]
Of course. The real challenge is making it look good with pinch-to-zoom.
Yes, and considering that Google Maps can use WebGL with vector graphics, it would be seamless.
Also, the math required to convert lat/lon to web Mercator is fairly light and not resource intensive.
I have been waiting for MANY years for them to do something about this. At least after the XKCD strip came out. http://xkcd.com/977/
The thing is, Mercator was never actually intended to be used as a map, per se. What it was supposed to be used for was a navigation chart, and it's extremely useful in that context: straight lines on the map correspond to straight lines in the real world, the compass directions are the same no matter where you look, and so on. Other projections distort these things, and there can be good reasons to do that depending on what exactly one wants to do. If you're trying to find single points, it really doesn't matter so much. But when the reason you're using the map is to find a route between Point A and Point B, Mercator really is the most reasonable projection for the job.
Unless you want to find a straight line (great circle) between two distant points.
Yes, you are correct, however that's a different sort of straight line: it is the shortest distance between two points, but it isn't the most easily navigable line. The navigable ones are lines of constant bearing, since a ship could/can set their compass and make adjustments to hold it "straight" rather than having to do the computations required to follow a great circle.
Great circles are not straight lines on the Mercator projection. Rhumb lines are straight, but not great circles.
If you want great circles to be straight lines, use the Gnomonic projection.
http://demonstrations.wolfram.com/GreatCirclesOnMercatorsCha...
http://en.wikipedia.org/wiki/Gnomonic_projection
If you want great circles to be straight lines, use the Gnomonic projection.
http://demonstrations.wolfram.com/GreatCirclesOnMercatorsCha...
http://en.wikipedia.org/wiki/Gnomonic_projection
You would almost never strictly use a map for this purpose historically, you'd calculate it using tools.
Mercator has loads of advantages which other projections don't- most importantly that angles are preserved and distances are not distorted when zoomed in. It only really has one disadvantage - that in a fully zommed out view, the poles appear bigger. That's not a biggie. You can find world maps in other projections easily on other sites.
I understand that Mercator isn't the most accurate representation, but seriously, "greater good?" There are a lot of things that I think Google can do "for greater good," and changing how they show a map isn't even in the first hundred pages.
The bang for the buck is pretty good though.
Most people don't own an Atlas anymore. In the public consciousness Google Maps is the world map. If choice of map projection is important anywhere (which is debatable), it's important on Google Maps.
And remember: you can always fail over to Mercator.
Most people don't own an Atlas anymore. In the public consciousness Google Maps is the world map. If choice of map projection is important anywhere (which is debatable), it's important on Google Maps.
And remember: you can always fail over to Mercator.
Map projections are part of the technological infrastructure of the world. Most people shouldn't have to worry, but someone needs to. What about calculating missile range? Or designing a tunnel that needs to be accurate to 1cm. Are your GPS surveys out by 30cm because you used a system that ignores continental drift. Or placing an oil rig in the wrong place in the sea due to a poor projection choice.
Another advantage of Mercator is that if you display the map from latitudes of about -85 degrees to +85 degrees you end up with a perfect square, which makes chopping the map into tiles nice and easy.
Google Earth uses a completely different (and superior) system, however it's more resource intensive.
TL;DR The Mercator projection is a solution to a problem that does not exist in Google Earth.
Projections, Mercator included, are ways to map a 3D shape (the globe) onto a static 2D surface (a map). Google Earth uses a dynamic 2D surface (a screen) to display a changing view of a 3D object. See TL;DR.
Projections, Mercator included, are ways to map a 3D shape (the globe) onto a static 2D surface (a map). Google Earth uses a dynamic 2D surface (a screen) to display a changing view of a 3D object. See TL;DR.
I think it's got to do with preserving north south east and west angles. Also, the distortion is only noticeable when you're zoomed out. When zoomed in most things are in relative proportion to each other.
Because making the US look smaller is not politically astute in a jingoistic you're-with-us-or-you're-against-us patriotic state.
I wish it randomized the puzzle pieces every time. And there should be a timer.
Same here ... So I created a dynamic version myself: http://bramus.github.com/mercator-puzzle-redux/ :-)
fantastic! thank you!
Solution: http://i.imgur.com/Odujjao.png
In case you're stuck on a piece.
In case you're stuck on a piece.
Fantastic. As a bonus side-effect, people never believe me when I tell them Australia is bigger than Europe, and this will let them play and see it for themselves.
Actually, Australia is smaller than Europe (in means of the area) -- its 7.7M(km^2) to 10.2M(km^2).
Depends on what you think of as the boundaries of Europe - the area quoted includes areas of land that many people I speak with don't include.
It's easiest just to let people overlay the map.
Added in edit: Europe does in fact extend a lot further North-East than people think, and when you include that area - yes - Europe is bigger. The actual overlay still surprises people.
It's easiest just to let people overlay the map.
Added in edit: Europe does in fact extend a lot further North-East than people think, and when you include that area - yes - Europe is bigger. The actual overlay still surprises people.
I imagine he means Europe sans Russia, which is true.
It's crazy how much Mercator distorts the globe. I was playing around with various map projections via WebGL shaders [1] and the size problems really stand out when the map is recentered. With modern digital maps, we should really stop using old projections that were designed to work on limited paper maps.
[1] http://sxp.me/maps/ (Select equirectangular as the projection and drag the crosshairs to recenter.)
[1] http://sxp.me/maps/ (Select equirectangular as the projection and drag the crosshairs to recenter.)
It's not really that it's old and out of date; it makes a different set of tradeoffs to other projections, and so typically looks better over small areas but isn't appropriate for a world map since the distortion becomes extreme near the poles.
This. There are a couple of different things people use maps for, but the biggest two are finding out where things are and figuring out routes between two things. Mercator throws the needle all the way toward finding routes between two things, and it is very, very good at that, but this comes at the expense of distorting exact locations and sizes of things.
Perhaps a compromise is possible, whereby Mercator is used when plotting routes between things but some other projection is used when you're looking for isolated points. Let each projection do what it does best.
Perhaps a compromise is possible, whereby Mercator is used when plotting routes between things but some other projection is used when you're looking for isolated points. Let each projection do what it does best.
Slight bug: if you bring the piece low enough, the color invert.
That's quite amusing. I see the problem: when the shape distorts enough to connect its boundaries across the south pole, the outside becomes the inside.
This I like. But why does moving the pieces up and down produce a sort of cylinder?
Because that's how the Mercator projection distorts object size: http://en.wikipedia.org/wiki/Mercator_projection#Distortion
I think it's because the mercator projection distorts size, while the pieces try to stay the same (real-world) size as you move them. I didn't make the game, I just found it.
I would really like to see it with random selection of countries every time your reload the page - and then to see it in primary schools during geography lessons - that would be a killer!
There's an educational game like that, 'Stack the countries'. It's loads of fun. (Available for iPhone, iPad, and Windows Phone)
http://www.youtube.com/watch?v=FZzzw4ohq-o
https://itunes.apple.com/us/app/stack-the-countries/id407838...
http://www.youtube.com/watch?v=FZzzw4ohq-o
https://itunes.apple.com/us/app/stack-the-countries/id407838...
Just in case somebody's interested, here's a related experiment we made to generate and display map tiles in a "google earth-style" projection using CSS transforms:
https://github.com/asaarinen/spherical-map
https://github.com/asaarinen/spherical-map
There's a touch issue:
When you successfully match a country, the shape turns green. However you can move the shape once out of its position. It remains green after the move but you can't move it again (future attempts to move the green item are treated as panning the map)
When you successfully match a country, the shape turns green. However you can move the shape once out of its position. It remains green after the move but you can't move it again (future attempts to move the green item are treated as panning the map)
I'm partially ashamed to admit that I got all of them but one: a piece that had straight eastern and southern sides. It looked like a Canadian or Australian state/territory (large and having flat edges), but I couldn't place it.
Also I had a hard time placing Brazil.
Also I had a hard time placing Brazil.
It was Mauritania. But I also zoomed in after like half of them so that's kinda cheating.
haha, i had a different piece that was difficult - it was the saudi arabia piece. That took me forever to see.
I had a hard time finding Ukraine, Thailand was also slightly hard to place pixel-perfect !
Took me a couple tries to get Thailand, too, as it didn't snap to the map the first time I placed it.
A version with all countries would be an interesting teaching tool, to learn about geography and cartography. Would need to option to display only some countries at a time, to avoid overwhelming the user.
A version with all countries would be an interesting teaching tool, to learn about geography and cartography. Would need to option to display only some countries at a time, to avoid overwhelming the user.
Mauritania ;)
That was boss, "only" took me a 30-minutes! Well done and great for learning geography.
Seriously 30 minutes? Is this an American thing? To my mind almost all of them were obvious from the shapes alone (the one with straight edges wasn't, but the very fact that its borders are straight lines tell you there's only a few parts of the world it could be in).
Straight line border segments for nations seem to correlate well
with borders determined by treaties between colonial powers.
Dragging all the red outlines to the equator was a big help.
Initial placement of red outlines in oceans might make the goal more obvious from the initial view.
A "satellite POV" might be interesting (same click&drag UI spins the earth/repositions the POV). The red outlines could then be placed in the empty corners.
Dragging all the red outlines to the equator was a big help.
Initial placement of red outlines in oceans might make the goal more obvious from the initial view.
A "satellite POV" might be interesting (same click&drag UI spins the earth/repositions the POV). The red outlines could then be placed in the empty corners.
Please don't make it a "my country vs. your country" thing. Some people have more aptitude for geography than others; it doesn't much matter where they are (as long as some schooling exists). I'm American and didn't have any trouble.
And who said the GP was American, anyway?
And who said the GP was American, anyway?
D3 has an amazing projection system for creating SVG maps from GeoJSON.
https://github.com/mbostock/d3/wiki/Geo-Projections
https://github.com/mbostock/d3/wiki/Geo-Projections
Imagine how much harder this would be if you also had to rotate.
I have been wishing for a long time to have an outline feature in Google maps (or any map tool for that matter). I always want to compare the size of things (partly because of the distortion of the projection), say is the city of SF larger or smaller than NYC? I was stoked when Google added city boundaries, so that means they know them. Now there just needs to be a way to select a city, state/province/department/whatever, or country and drag it somewhere.
The sad thing is that the set of countries is always the same.
answers in the sauce :
var answers = { australia: new google.maps.LatLngBounds( new google.maps.LatLng(-45.379453600000005, 110.69313639999996), new google.maps.LatLng(-8.571888000000001, 155.16969360000007)), southAfrica: new google.maps.LatLngBounds( new google.maps.LatLng(-36.73497648232876, 13.33984375), new google.maps.LatLng(-21.010097985940735, 35.87890625)), greenland: new google.maps.LatLngBounds( new google.maps.LatLng(57.9905285, -75.1942745), new google.maps.LatLng(83.97751860000001, -9.709575500000028)), finland: new google.maps.LatLngBounds( new google.maps.LatLng(59.21319690000001, 19.53808950000007), new google.maps.LatLng(70.7889305, 31.90050659999997)), mongolia: new google.maps.LatLngBounds( new google.maps.LatLng(40.74287280000001, 86.85821429999999), new google.maps.LatLng(52.641200000000005, 121.12602760000004)), thailand: new google.maps.LatLngBounds( new google.maps.LatLng(3.9541530000000003, 95.39209260000007), new google.maps.LatLng(21.477918000000003, 106.6929963)), peru: new google.maps.LatLngBounds( new google.maps.LatLng(-19.255824000000004, -82.93600620000001), new google.maps.LatLng(1.5, -67.99965480000003)), brazil: new google.maps.LatLngBounds( new google.maps.LatLng(-35.42974050000001, -74.69401470000003), new google.maps.LatLng(6.5, -33.06445550000001)), iceland: new google.maps.LatLngBounds( new google.maps.LatLng(62.758218600000006, -25.764343499999995), new google.maps.LatLng(67.1959161, -11.481647000000066)), drcongo: new google.maps.LatLngBounds( new google.maps.LatLng(-15.448980381203414, 9.3359375), new google.maps.LatLng(7.485096269212087, 36.015625)), ukraine: new google.maps.LatLngBounds( new google.maps.LatLng(43.456458529383056, 20.234375), new google.maps.LatLng(53.29973879045674, 42.34375)), madagascar: new google.maps.LatLngBounds( new google.maps.LatLng(-26.898128422978452, 39.5703125), new google.maps.LatLng(-10.366188047247464, 55.3515625)), saudiArabia: new google.maps.LatLngBounds( new google.maps.LatLng(14.77959730788355, 33.41796875), new google.maps.LatLng(33.68098354643421, 57.28515625)), mexico: new google.maps.LatLngBounds( new google.maps.LatLng(11.700047540913861, -119.90234375), new google.maps.LatLng(34.264084202839264, -83.65234374999994)), mauritania: new google.maps.LatLngBounds( new google.maps.LatLng(12.387690937704622, -18.7890625), new google.maps.LatLng(29.336753501211746, -2.3046875)) };
var answers = { australia: new google.maps.LatLngBounds( new google.maps.LatLng(-45.379453600000005, 110.69313639999996), new google.maps.LatLng(-8.571888000000001, 155.16969360000007)), southAfrica: new google.maps.LatLngBounds( new google.maps.LatLng(-36.73497648232876, 13.33984375), new google.maps.LatLng(-21.010097985940735, 35.87890625)), greenland: new google.maps.LatLngBounds( new google.maps.LatLng(57.9905285, -75.1942745), new google.maps.LatLng(83.97751860000001, -9.709575500000028)), finland: new google.maps.LatLngBounds( new google.maps.LatLng(59.21319690000001, 19.53808950000007), new google.maps.LatLng(70.7889305, 31.90050659999997)), mongolia: new google.maps.LatLngBounds( new google.maps.LatLng(40.74287280000001, 86.85821429999999), new google.maps.LatLng(52.641200000000005, 121.12602760000004)), thailand: new google.maps.LatLngBounds( new google.maps.LatLng(3.9541530000000003, 95.39209260000007), new google.maps.LatLng(21.477918000000003, 106.6929963)), peru: new google.maps.LatLngBounds( new google.maps.LatLng(-19.255824000000004, -82.93600620000001), new google.maps.LatLng(1.5, -67.99965480000003)), brazil: new google.maps.LatLngBounds( new google.maps.LatLng(-35.42974050000001, -74.69401470000003), new google.maps.LatLng(6.5, -33.06445550000001)), iceland: new google.maps.LatLngBounds( new google.maps.LatLng(62.758218600000006, -25.764343499999995), new google.maps.LatLng(67.1959161, -11.481647000000066)), drcongo: new google.maps.LatLngBounds( new google.maps.LatLng(-15.448980381203414, 9.3359375), new google.maps.LatLng(7.485096269212087, 36.015625)), ukraine: new google.maps.LatLngBounds( new google.maps.LatLng(43.456458529383056, 20.234375), new google.maps.LatLng(53.29973879045674, 42.34375)), madagascar: new google.maps.LatLngBounds( new google.maps.LatLng(-26.898128422978452, 39.5703125), new google.maps.LatLng(-10.366188047247464, 55.3515625)), saudiArabia: new google.maps.LatLngBounds( new google.maps.LatLng(14.77959730788355, 33.41796875), new google.maps.LatLng(33.68098354643421, 57.28515625)), mexico: new google.maps.LatLngBounds( new google.maps.LatLng(11.700047540913861, -119.90234375), new google.maps.LatLng(34.264084202839264, -83.65234374999994)), mauritania: new google.maps.LatLngBounds( new google.maps.LatLng(12.387690937704622, -18.7890625), new google.maps.LatLng(29.336753501211746, -2.3046875)) };
And I was reminded of this: http://www.youtube.com/watch?v=IuZYhFtSZsY
@puzzle: great idea!
@puzzle: great idea!
I cheated at 8/15.
Viewed source and got all rest of countries names.
Viewed source and got all rest of countries names.
Got it. Zooming is essential on a tablet, because of the "my fat finger is in front of my eyes" problem, which I've solved, by the way. As it is, you have to zoom in to be able to see and drag.
(I took down the solution. If someone knows their way around VNC, it will get posted faster.)
(I took down the solution. If someone knows their way around VNC, it will get posted faster.)
This is an awesome UI concept that could be used to demonstrate other kinds of projections, too. It would be awesome to see similar apps related to perspective transformations, rectilinear vs. fisheye lenses, tilt-shift lenses, panorama stitching, etc.
Fantastic! I learnt something new today. I did not know that the world was projected using Mercator projection and the how that played a role in distortion of the land size.
I really enjoyed this! Like a good jigsaw puzzle only better...
When this first came around, I was surprised how big Greenland is after all. It's not a small island, it's as big as the entire US East Coast.
I like that the piece for Australia starts above Greenland. That really puts everything into perspective right away.
This freaks out on the latest chrome android beta. Wonky flashing over parts of the map. Nexus 7
Wasn't sure if it was just me/chrome or everyone.
Wonderful: just spent quite some time playing it.
It would be amazingly lovely if you could also display simultaneously other mappings than the Mercator one. Say a sphere in 3D in the upper right corner, with the "figures" moving / showing on both mappings.
It's interesting to see that if you take the eight biggest countries by size (well, ok, Antartica ain't a country), they all are very placed in term of GDP:
Russia: 10th (GDP), 1 (size) Antartica: ---, 2 (size) Canada: 11 (GDP), 3 (size) China: 2 (GDP), 4 (size) U.S.A.: 1st (GDP), 5 (size) Brazil: 6 (GDP), 6 (size) Australia: 12 (GDP), 7 (size) India: 9 (GDP), 8 (size)
You then have Argentina and Kazakhstan lacking quite a bit behind:
Argentina: 26 (GDP), 9 (size) Kazakhstan: 49 (GDP), 10 (size)
It would be amazingly lovely if you could also display simultaneously other mappings than the Mercator one. Say a sphere in 3D in the upper right corner, with the "figures" moving / showing on both mappings.
It's interesting to see that if you take the eight biggest countries by size (well, ok, Antartica ain't a country), they all are very placed in term of GDP:
Russia: 10th (GDP), 1 (size) Antartica: ---, 2 (size) Canada: 11 (GDP), 3 (size) China: 2 (GDP), 4 (size) U.S.A.: 1st (GDP), 5 (size) Brazil: 6 (GDP), 6 (size) Australia: 12 (GDP), 7 (size) India: 9 (GDP), 8 (size)
You then have Argentina and Kazakhstan lacking quite a bit behind:
Argentina: 26 (GDP), 9 (size) Kazakhstan: 49 (GDP), 10 (size)