Pings Plugin

The pings plugin allows you to display animated "pings" at any location on the planet. It publishes a method to create pings at planet.plugins.pings.add.

API

planetaryjs.plugins.pings([config])

Valid keys for config are:

color: the default color for pings; defaults to "white"
ttl: the default TTL for pings in milliseconds (how long they take to fade out); defaults to 2000
angle: the maximum angle for the ping (it will grow to this size over the course of its TTL); defaults to 5
latitudeFirst: reverse the order of the latitudinal and longitudinal coordinates passed to the add function (so that the latitudinal coordinate comes first); defaults to false. See the note on add, below, for more information.

JavaScript

planetaryjs.plugins.pings({
  color: 'yellow', ttl: 5000, angle: 10
});

planet.plugins.pings.add(lng, lat, [config])

Add a new ping to the globe at the longitudinal and latitudinal coordinates specified by lng and lat. Valid keys for config are:

color: the default color for pings; defaults to "white"
ttl: the default TTL for pings in milliseconds (how long they take to fade out); defaults to 2000
angle: the maximum angle for the ping (it will grow to this size over the course of its TTL); defaults to 5

Any values not set by config will default to the values specified in the plugin's configuration, if any were set.

Note that the longitudinal coordinate comes first, followed by the latitudinal coordinate, unless you pass latitudeFirst as an option to the plugin configuration function. This corresponds to the conventions used by D3 (which Planetary.js is based on); for more information on the problem of axis ordering in software, see this article at the GeoTools web site.

JavaScript

var colors = ['red', 'yellow', 'white', 'orange', 'green', 'cyan', 'pink'];
setInterval(function() {
  var lat = Math.random() * 170 - 85;
  var lng = Math.random() * 360 - 180;
  var color = colors[Math.floor(Math.random() * colors.length)];
  var angle = Math.random() * 10;
  planet.plugins.pings.add(lng, lat, { color: color, ttl: 2000, angle: angle });
}, 250);