3D representation of Google Maps/Routes?

Question

I need to build a 3d live map of current airplane flights. It needs to be able to run on a browser without downloading any plugin (cough Google Earth cough).

I already managed doing something similar with google map :

But I need to be able to show it in a 3d - globe POV :

something like :

Is there anything I can do in google maps to make them globe-3d or is there something else (API) which I can use ?

Answer 1

A good starting point may be webgl-globe from the Google Data Arts team. It's built on three.js and webgl:

You'd have to change the bars to arcs, but it's a start :)

A caveat: webgl is the best way to get interactive 3d in the browser without other dependencies, but it isn't supported by safari or IE yet, or if the user is missing graphics drivers.

Answer 2

I remember seeing a tweet, I think by Paul Irish that allowed you to alter google maps using css to create a globe shape.

http://updates.html5rocks.com/2012/09/Interactive-Globe-with-CSS-shaders-Google-Maps

Don't know if it has been updated as it was the latest Chrome only but it may be worth taking a look.

Answer 3

You can use the mercantor projection to map the sphere coordinate to the Google maps tiles, I. e. pixelcoordinate. Then you can choose an open source library to draw to the canvas and then add some simple matrices transformation to rotate the globe. The tile mapping works with a quad key. It's describe here: http://msdn.microsoft.com/en-us/library/bb259689.aspx.