This Jaanga cookbook section contains the demo for building a 3D Globe using Three.js and Open Street Map 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 + "Oh! That's some Globe!"
See also post on jaanga.com
General controls:
Features that could happen:
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:
// add reset permalinkjQuery 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 theme-able 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 © 2013 Jaanga contributors
All software and documentation in this repository is available under the MIT license.
The MIT License
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:
And many thanks to:
The JavaScript DOM
See also and in particular FGx on GitHub which has been the cause and the impetus for this globe.
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 let 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
Adjust smoothness of globe automatically. 2013-12-11
Adjust the color correction of the globe.
Add location and level navigation. 2013-06-03
Add 3D topology.
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 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