Planetary.js - "Awesome interactive globes for the web"

Today's Web Wednesday's post, I'm highlighting something I thought was interesting, different and just kind of cool.

Sure, you might not need this everyday (or week, month), but when you do...

Planetary.js

image

 

Fully customizable, including colors, rotation, and more

 

Display animated "pings" at any location with custom colors and sizes

 

Mouse drag + zoom support

 

Extremely extensible via a plugin-based architecture

 

100% free and open source, licensed under the MIT license

Examples

image

Rotating Globe with Pings

This code shows the example from the homepage, which rotates, shows randomly positioned, colored, and sized pings on the globe, and supports mouse-based dragging and zooming. It also shows the creation and use of a plugin, which powers the automatic rotation and exposes a public API.

We're using a specially-made TopoJSON file that includes lake data so that we can draw lakes on the globe with a custom plugin, which you can find at the bottom of the JavaScript. The custom TopoJSON was made using the TopoJSON command-line tool and data from Natural Earth; you can also download the JSON file for your own use.

The demo also shows how you can keep your globe from looking pixelated on high density displays by changing the canvas' width and height but keeping its displayed width and height the same via CSS styling.

SNAGHTMLa8a87da

Like I said, you might not need this often, but I bet now that you've seen this, the ideas are already coming...

Tags:

Follow the Discussion

Comments Closed

Comments have been closed since this content was published more than 30 days ago, but if you'd like to continue the conversation, please create a new thread in our Forums,
or Contact Us and let us know.