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...




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



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.


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

The Discussion

Conversation locked

This conversation has been locked by the site admins. No new comments can be made.