globe.js

Simple way to visualise things on a 3D globe

Usage

Get it from NPM

npm install globejs

Using 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, height = 200, color = 0x0000ff;
    window.Globe.init("world.jpg", 0.005);
    window.Globe.add(latitude, longitude, height, 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,
      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 and removing markers

Markers can be added like this:

var marker = window.Globe.add(latitude, longitude, height, color);

Where:

latitude and longitude are decimal degrees between -90/+90 (latitude) and -180/+180 (longitude), e.g. 47.367347 and 8.550002 for 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. 0xff0000 for red, 0x00ff00 for green, etc.

Markers can also be removed later on:

window.Globe.remove(marker);

"Fly in" animation for markers

Using the animation option, you can let the new markers "fly in". Check out the live demo here.

Clustering

The globe also has a basic implementation of clustering to visualise a large amount of data, which would result in too many markers.
To be able to visualise those amounts of data, you can cluster markers along a grid, like this:

window.Globe.init("world.jpg", 0.005, {clustering: true, clusterGridSize: 5});

All calls to window.Globe.add() will only add to the height of the marker that's closest to the desired position on the grid. See a demo here.

Hack it / Contribute

Hacking

Clone this repository
Install all the dependencies
Run the dev task 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 dev

Then 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-pages branch of this repository.

Thank you very much!

imclab / globe.js Goto Github PK

globe.js's Introduction

globe.js

Simple way to visualise things on a 3D globe

Usage

Get it from NPM

Using with Browserify or without it

Simple example

Using more advanced options

Adding and removing markers

"Fly in" animation for markers

Clustering

Hack it / Contribute

Hacking

Contributing

globe.js's People

Contributors

Watchers

Recommend Projects

Recommend Topics

Recommend Org

Jobs