This revision introduces 3D topology capability - ridiculously exaggerated in this instance. 3D topology is currently only supported at zoom levels 1, 2 and 3. Please ignore the extraneous debugging bits.

Sea level is indicated by the blue-green-purple sphere.

This Jaanga cookbook section contains the demo for building a 3D Globe using Three.js and Open Street Map (OSM) data. The app supports the full 18 levels of zoom provided by OSM. The tooltips for the '+' and '-" buttons display the current zoom level.

The source code for the demo is available at: github.com/jaanga/cookbook/

Derivation of the name oSome Globe: oSome = OSM + awesome + "That's some Globe!"

See also post on jaanga.com

General controls:

• Rotate globe: Left mouse / press 1 finger
• Zoom in current level: Mousewheel / two fingers
• Drag globe: Right mouse / press 2 fingers

• Click on the icons to zoom in and out, go home, refresh or straighten the view
• Use the drop down menus to jump to a zoom level or to set the height exaggeration scale
• zero = no scaling. negative numbers make the oceans go up and land masses go down.

Coming up next: more detail for level 3 zoom.

Select a location Antony (near Paris) Australia Hong Kong Paris San Francisco Switzerland Wales World View

It may take twenty seconds or so for the map to appear. The background will turn black until the data starts coming in.

Coming soon:

Sample 3D objects placed on selected levels. For example: Eiffel tower in Paris, Golden Gate Bridge in San Francisco and Opera House in Sydney.

Select a different jQuery UI theme.

jQuery Theme: black-tie blitzer cupertino dark-hive dot-luv eggplant excite-bike flick hot-sneaks humanity le-frog mint-choc overcast pepper-grinder redmond smoothness south-street start sunny swanky-purse trontastic ui-darkness ui-lightness vader

jQuery is a multi-browser JavaScript library designed to simplify the client-side scripting of HTML. jQuery UI is a JavaScript library that provides abstractions for low-level interaction, animation, advanced effects, high-level themeable widgets, is built on top of the jQuery JavaScript library and is used to build interactive web applications. Both libraries are free, open source software, licensed under the MIT License.

Jaanga oSome Globe uses both these libraries to create the user experience components of the app.

In particular, Jaanga oSome Globe provides access to 25 sample themes hosted on the jQuery UI web site.

Each time the theme is updated, a fresh URL is created which can be used as a permalink to save the theme selection for future use. Further revisions of Jaanga oSome Globe will provide further features that may be saved as part of the permalink feature.

A nice benefit of the permalink concept is that your choices may be saved and shared without cookies being saved to your computer.

Copyright

Copyright © 2013 Jaanga contributors

License

All software and documentation in this repository is available under the MIT license.

The MIT License

Credits & Thanks

Open Street Map
copyright © OpenStreetMap contributors

jQuery
copyright © The jQuery Foundation

jQuery UI
Copyright © 2013 jQuery Foundation and other contributors

Three.js
Copyright © 2010-2013 three.js authors

In the course of preparing this app, data has been obtained via several servers including:

earthtools.org/

usgs.gov

gpsvisualizer.com

developers.google.com/maps/

And many thanks to:

GitHub

Stack Overflow

The JavaScript DOM

Jaume Sánchez and his "Blocky Earth" for giving me the idea that elevations are obtainable and you can do reverse Mercator projections.

See also and in particular FGx on GitHub which has been the cause and the impetus for this globe.

Notes

All coding and testing is on currently carried out on Google Chrome only. On other browsers, this app may have even more issues.

This app is at an early and volatile stage. Not all licensing requirements may not been fully met lat alone identified. It is the intension of the authors to play fair and all such requirements will either be met or the feature in question will turned off.

Correct for reverse Mercator projection. * 2013-06-02

Fix quadrant issues with southern hemisphere level changes. * 2013-05-31

add exaggeration scale drop down menu. 2013-06-09

Zoom level 3 to 32 vertices per tile (now 16)

Download elevation data for individual tiles at run-time.

Improve/refine lights and color schemes.

Adjust smoothness of globe automatically.

Adjust the color correction of the globe.

Add location and level navigation. 2013-06-03

Add 3D topology. 2013-06-08

Add permalinks.

Fix issues where displayed date does not cross the date line.

Ability to add data and code to particular locations and levels.

Add windows - each with its own view of the globe, camera location and settings.

Add camera movement after 30 seconds no mouse movement.

Add home button that resets zoom, camera, level, etc to defaults. 2013-05-31

Don't remove then recall currently loaded bitmaps when panning

Preload adjacent bitmaps

Add level slider widget??

Keep on tweaking camera zoom, pan and rotate settings.

Better way of displaying current level.

Access to Google Maps and others map data.

* priority item