Realtime Webgl Globe
A webgl earth making it easy to add custom shapes at coordinates in realtime.
Demo!
Or check out this demo that shows the position of the International Space Station!
Features
- Makes it easy to add custom shapes to the globe at lat/long positions.
- Interactive (mousewheel scroll & mouse drags).
- Easy API for adding elements on the globe while it's running.
Basic Usage
var div = document.getElementById('globe');
var urls = {
earth: 'img/world.jpg',
bump: 'img/bump.jpg',
specular: 'img/specular.jpg',
}
// create a globe
var globe = new Globe(div, urls);
// start it
globe.init();
// random data
var data = {
color: '#FF0000',
size: 20,
lat: 52.3747158, // Amsterdam!
lon: 4.8986231, // Amsterdam!
size: 20
};
// add a block on Amsterdam
globe.addBlock(data);
API
Class: Globe
Realtime Globe is a WebGL based earth globe that makes it super simple to add shapes in realtime on specific lat/lon positions on earth.
Globe.init()
Initializes the globe
Globe.zoomRelative(delta)
Zoom the earth relatively to its current zoom (passing a positive number will zoom towards the earth, while a negative number will zoom away from earth).
Parameters
- delta:
Integer
Returns: this
Globe.zoomTo(altitute)
Transition the altitute of the camera to a specific distance from the earth's core.
Parameters
- altitute:
Integer
Returns: this
Globe.zoomImmediatelyTo(altitude)
Set the altitute of the camera to a specific distance from the earth's core.
Parameters
- altitude:
Integer
Returns: this
Globe.center(pos)
Transition the globe from its current position to the new coordinates.
Parameters
- pos:
Object, the position - pos.lat:
Float, latitute position - pos.lon:
Float, longtitute position
Returns: this
Globe.centerImmediate(pos)
Center the globe on the new coordinates.
Parameters
- pos:
Object, the position - pos.lat:
Float, latitute position - pos.lon:
Float, longtitute position
Returns: this
Globe.addLevitatingBlock(data)
Adds a block to the globe. The globe will spawn
just below the earth's surface and levitate
out of the surface until it is fully out of the
earth.
Parameters
- data:
Object - data.lat:
Float, latitute position - data.lon:
Float, longtitute position - data.size:
Float, size of the block - data.color:
String, color of the block
Returns: this
Globe.addBlock(data)
Adds a block to the globe.
Parameters
- data:
Object - data.lat:
Float, latitute position - data.lon:
Float, longtitute position - data.size:
Float, size of the block - data.color:
String, color of the block
Returns: this
Globe.removeAllBlocks()
Remove all blocks from the globe.
Returns: this