globe.js v2.0.0
globe.js
Simple way to visualise things on a 3D globe
See a live demo here.
Usage
Get it from NPM
npm install globejsUsing with Browserify or without it
This package can be used with browserify like this:
var Globe = require('globejs');
Globe.init("world.jpg", 0.005);or in vanilla Javascript like this:
<script src="globe.js" data-compat="true"></script>
<script>
window.Globe.init("world.jpg", 0.005);
</script>Simple example
In the simplest case, you can get things on the globe like this:
<!doctype html>
<html>
<body>
<script src="globe.js" data-compat="true"></script>
<script>
var latitude = 47.367347, longitude = 8.550002, color = 0x0000ff;
window.Globe.init("world.jpg", 0.005);
window.Globe.add(latitude, longitude, 0, color); // blue marker on Zurich
</script>
</body>
</html>Using more advanced options
In this case, we will add it into a container, have it transparent and with a red background colour. We will also specify a callback that is called when a frame is rendered, that just logs to console.
<!doctype html>
<html>
<body>
<div id="worldcontainer" style="width:500px; height:500px"></div>
<script src="globe.js" data-compat="true"></script>
<script>
var latitude = 47.367347, longitude = 8.550002, height = 200, color = 0x0000ff;
window.Globe.init("world.png", 0.005, {
bg: 0xff0000,
animation: true,
transparent: true,
onRender: function() { console.log("Rendered."); },
container: document.getElementById("worldcontainer")
});
window.Globe.add(latitude, longitude, height, color); // blue marker on Zurich
</script>
</body>
</html>Adding markers
Markers can be added like this:
var marker = window.Globe.add(latitude, longitude, height, color);Where:
latitudeandlongitudeare decimal degrees between -90/+90 (latitude) and -180/+180 (longitude), e.g.47.367347and8.550002for Zurich.- height is the height of the marker sticking out of the globe. For comparison: The globe has a radius of 600 canvas pixels...
- color is a hex number representing the RGB color, e.g.
0xff0000for red,0x00ff00for green, etc.
"Fly in" animation for markers
Using the animation option, you can let the new markers "fly in".
Check out the live demo here.
Hack it / Contribute
Hacking
- Clone this repository
- Install all the dependencies
- Run the
devtask to watch and auto-rewrite the browserify bundle while hacking
Like this:
git clone https://github.com/avgp/globe.js.git
cd globe
npm install
npm run devThen run the static file server of your choice, e.g. python -m SimpleHTTPServer and tweak it to your needs.
Contributing
All contributions welcome - if you're not sure about something, please don't hesitate to open an issue or pull request!
To get started for contributing, do:
- Fork the repo on github
- Clone your fork
- Create a new branch for the thing you'll be working on
- Code code code
- Push to your fork
- Make a pull request against the
gh-pagesbranch of this repository.
Thank you very much!