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 2000angle: the maximum angle for the ping (it will grow to this size over the course of its TTL); defaults to 5latitudeFirst: 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.planet.plugins.pings.add(lat, lng, [config])
Add a new ping to the globe at the latitudinal and longitudinal coordinates specified by lat and lng. config may take all the same keys as the configuration option for the plugin itself; any values will overwrite values from that object, if any were set.
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 2000angle: the maximum angle for the ping (it will grow to this size over the course of its TTL); defaults to 5Any 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.
Q: Why are the pings I add from the Pings plugin in the wrong place?
+A: Like D3 on which it is based, Planetary.js accepts coordinates with the longitudinal coordinate first. You can set the latitudeFirst option in the plugin configuration to change this. There is some additional discussion on the subject in the Pings plugin documentation.
Q: Why can't I access my DOM element?
A: Planetary.js provides no methods for DOM access or for waiting for the DOM ready event; you'll need to handle this on your own or use a third-party library.
planet.path
planet.path is a d3.geo.path which uses the planet's internal projection to generate path data for geographical features. Its context method is commonly used by interal plugins to take a canvas context and return a path generator that can be used to draw on the globe.
planet.path is a d3.geo.path which uses the planet's internal projection to generate path data for geographical features. Its context method is commonly used by internal plugins to take a canvas context and return a path generator that can be used to draw on the globe.
planet.withSavedContext( function(context){} )
Calls the function with the current canvas context as a paremter, wrapping the function call in context.save() and context.restore(). Use this function any time you're going to modify the context to ensure it gets put back to the way it was.
Calls the function with the current canvas context as a parameter, wrapping the function call in context.save() and context.restore(). Use this function any time you're going to modify the context to ensure it gets put back to the way it was.
<canvas id='quakeCanvas'></canvas>
<h1>Earthquakes: 2013</h1>
-<ul id='magnitues'></ul>
+<ul id='magnitudes'></ul>
<div id='controls'>
<div>
@@ -93,21 +93,21 @@
// Create a color scale for the various earthquake magnitudes; the
- // mininum magnitude in our data set is 2.5.
+ // minimum magnitude in our data set is 2.5.
var colors = d3.scale.pow()
.exponent(2)
.domain([2, 6,10])
.range(['rgb(255,255,204)', 'rgb(253,141,60)','rgb(128,0,38)'])
.clamp(true);
- // Also create a scale for mapping magnitues to ping angle sizes
+ // Also create a scale for mapping magnitudes to ping angle sizes
var angles = d3.scale.pow()
.exponent(2)
.domain([2.5, 10])
.range([0.5, 15])
.clamp(true);
- // Create a key to show the magnitues and their colors
- d3.select('#magnitues').selectAll('li')
+ // Create a key to show the magnitudes and their colors
+ d3.select('#magnitudes').selectAll('li')
.data(colors.ticks(9))
.enter()
.append('li')
@@ -195,7 +195,7 @@
for (var i = 0; i < toPing.length; i++) {
var ping = toPing[i];
- planet.plugins.pings.add(ping.lat, ping.lng, {
+ planet.plugins.pings.add(ping.lng, ping.lat, {
// Here we use the `angles` and `colors` scales we built earlier
// to convert magnitudes to appropriate angles and colors.
angle: angles(ping.mag),
diff --git a/examples/quake/index.html b/examples/quake/index.html
index 103f26e..f54a28d 100644
--- a/examples/quake/index.html
+++ b/examples/quake/index.html
@@ -18,7 +18,7 @@
color: white;
}
- ul#magnitues {
+ ul#magnitudes {
position: absolute;
top: 100px;
left: 30px;
@@ -79,7 +79,7 @@
Earthquakes: 2013
-
+
diff --git a/examples/quake/quake.js b/examples/quake/quake.js
index 7426c80..c6fb4f9 100644
--- a/examples/quake/quake.js
+++ b/examples/quake/quake.js
@@ -30,21 +30,21 @@
// Create a color scale for the various earthquake magnitudes; the
- // mininum magnitude in our data set is 2.5.
+ // minimum magnitude in our data set is 2.5.
var colors = d3.scale.pow()
.exponent(2)
.domain([2, 6,10])
.range(['rgb(255,255,204)', 'rgb(253,141,60)','rgb(128,0,38)'])
.clamp(true);
- // Also create a scale for mapping magnitues to ping angle sizes
+ // Also create a scale for mapping magnitudes to ping angle sizes
var angles = d3.scale.pow()
.exponent(2)
.domain([2.5, 10])
.range([0.5, 15])
.clamp(true);
- // Create a key to show the magnitues and their colors
- d3.select('#magnitues').selectAll('li')
+ // Create a key to show the magnitudes and their colors
+ d3.select('#magnitudes').selectAll('li')
.data(colors.ticks(9))
.enter()
.append('li')
@@ -132,7 +132,7 @@
for (var i = 0; i < toPing.length; i++) {
var ping = toPing[i];
- planet.plugins.pings.add(ping.lat, ping.lng, {
+ planet.plugins.pings.add(ping.lng, ping.lat, {
// Here we use the `angles` and `colors` scales we built earlier
// to convert magnitudes to appropriate angles and colors.
angle: angles(ping.mag),
diff --git a/examples/rotating.html b/examples/rotating.html
index d36d3f5..c93e388 100644
--- a/examples/rotating.html
+++ b/examples/rotating.html
@@ -75,7 +75,7 @@
scaleExtent: [100, 300]
}));
globe.loadPlugin(planetaryjs.plugins.drag({
- // Dragging the globe shoud pause the
+ // Dragging the globe should pause the
// automatic rotation until we release the mouse.
onDragStart: function() {
globe.plugins.autorotate.pause();
@@ -93,7 +93,7 @@
var lat = Math.random() * 170 - 85;
var lng = Math.random() * 360 - 180;
var color = colors[Math.floor(Math.random() * colors.length)];
- globe.plugins.pings.add(lat, lng, { color: color, ttl: 2000, angle: Math.random() * 10 });
+ globe.plugins.pings.add(lng, lat, { color: color, ttl: 2000, angle: Math.random() * 10 });
}, 250);
var canvas = document.getElementById('rotatingGlobe');
diff --git a/examples/rotating.js b/examples/rotating.js
index abec7c4..ecab566 100644
--- a/examples/rotating.js
+++ b/examples/rotating.js
@@ -18,7 +18,7 @@
scaleExtent: [100, 300]
}));
globe.loadPlugin(planetaryjs.plugins.drag({
- // Dragging the globe shoud pause the
+ // Dragging the globe should pause the
// automatic rotation until we release the mouse.
onDragStart: function() {
globe.plugins.autorotate.pause();
@@ -36,7 +36,7 @@
var lat = Math.random() * 170 - 85;
var lng = Math.random() * 360 - 180;
var color = colors[Math.floor(Math.random() * colors.length)];
- globe.plugins.pings.add(lat, lng, { color: color, ttl: 2000, angle: Math.random() * 10 });
+ globe.plugins.pings.add(lng, lat, { color: color, ttl: 2000, angle: Math.random() * 10 });
}, 250);
var canvas = document.getElementById('rotatingGlobe');
diff --git a/js/homepage.js b/js/homepage.js
index b0a490f..b05b3d7 100644
--- a/js/homepage.js
+++ b/js/homepage.js
@@ -18,7 +18,7 @@
scaleExtent: [100, 300]
}));
globe.loadPlugin(planetaryjs.plugins.drag({
- // Dragging the globe shoud pause the
+ // Dragging the globe should pause the
// automatic rotation until we release the mouse.
onDragStart: function() {
globe.plugins.autorotate.pause();
@@ -36,7 +36,7 @@
var lat = Math.random() * 170 - 85;
var lng = Math.random() * 360 - 180;
var color = colors[Math.floor(Math.random() * colors.length)];
- globe.plugins.pings.add(lat, lng, { color: color, ttl: 2000, angle: Math.random() * 10 });
+ globe.plugins.pings.add(lng, lat, { color: color, ttl: 2000, angle: Math.random() * 10 });
}, 250);
var canvas = document.getElementById('homepage-globe-canvas');
diff --git a/js/lib/planetaryjs.min.js b/js/lib/planetaryjs.min.js
index 787664a..e8636c4 100644
--- a/js/lib/planetaryjs.min.js
+++ b/js/lib/planetaryjs.min.js
@@ -1,2 +1,2 @@
-/*! Planetary.js 0.2.1 | (c) 2013 Brandon Tilley | Released under MIT License */
-!function(n,t){"function"==typeof define&&define.amd?define(["d3","topojson"],t):"object"==typeof exports?module.exports=t(require("d3"),require("topojson")):n.planetaryjs=t(n.d3,n.topojson,n)}(this,function(n,t,o){"use strict";var e=null;o&&(e=o.planetaryjs);var i=[],r=function(t,o,e){n.timer(function(){t.context.clearRect(0,0,o.width,o.height);for(var n=0;n=o.onInit.length?r(n,t,o):i(l)};i(l)}else r(n,t,o)},u=function(n,t,o,e){l(n,o),n.canvas=t,n.context=t.getContext("2d"),a(n,t,e)},c={plugins:{},noConflict:function(){return o.planetaryjs=e,c},loadPlugin:function(n){i.push(n)},planet:function(){var t=[],o={onInit:[],onDraw:[]},e={plugins:{},draw:function(n){u(e,n,t,o)},onInit:function(n){o.onInit.push(n)},onDraw:function(n){o.onDraw.push(n)},loadPlugin:function(n){t.push(n)},withSavedContext:function(n){if(!this.context)throw new Error("No canvas to fetch context for");this.context.save(),n(this.context),this.context.restore()}};return e.projection=n.geo.orthographic().clipAngle(90).precision(0),e.path=n.geo.path().projection(e.projection),e}};return c.plugins.topojson=function(t){return function(o){o.plugins.topojson={},o.onInit(function(e){if(t.world)o.plugins.topojson.world=t.world,setTimeout(e,0);else{var i=t.file||"world-110m.json";n.json(i,function(n,t){if(n)throw new Error("Could not load JSON "+i);o.plugins.topojson.world=t,e()})}})}},c.plugins.oceans=function(n){return function(t){t.onDraw(function(){t.withSavedContext(function(o){o.beginPath(),t.path.context(o)({type:"Sphere"}),o.fillStyle=n.fill||"black",o.fill()})})}},c.plugins.land=function(n){return function(o){var e=null;o.onInit(function(){var n=o.plugins.topojson.world;e=t.feature(n,n.objects.land)}),o.onDraw(function(){o.withSavedContext(function(t){t.beginPath(),o.path.context(t)(e),0!=n.fill&&(t.fillStyle=n.fill||"white",t.fill()),n.stroke&&(n.lineWidth&&(t.lineWidth=n.lineWidth),t.strokeStyle=n.stroke,t.stroke())})})}},c.plugins.borders=function(n){return function(o){var e=null,i={internal:function(n,t){return n.id!==t.id},external:function(n,t){return n.id===t.id},both:function(){return!0}};o.onInit(function(){var r=o.plugins.topojson.world,l=r.objects.countries,a=n.type||"internal";e=t.mesh(r,l,i[a])}),o.onDraw(function(){o.withSavedContext(function(t){t.beginPath(),o.path.context(t)(e),t.strokeStyle=n.stroke||"gray",n.lineWidth&&(t.lineWidth=n.lineWidth),t.stroke()})})}},c.plugins.earth=function(n){var n=n||{},t=n.topojson||{},o=n.oceans||{},e=n.land||{},i=n.borders||{};return function(n){c.plugins.topojson(t)(n),c.plugins.oceans(o)(n),c.plugins.land(e)(n),c.plugins.borders(i)(n)}},c.plugins.pings=function(t){var o=[],e=function(n,e,i){var i=i||{};i.color=i.color||t.color||"white",i.ttl=i.ttl||t.ttl||2e3,i.angle=i.angle||t.angle||5,o.push({lat:n,lng:e,time:new Date,options:i})},i=function(n,t,e){for(var i=[],l=0;l90&&(i[1]=90),i[1]<-90&&(i[1]=-90),i[0]>=180&&(i[0]-=360),t.projection.rotate(i),l()});n.select(t.canvas).call(o)})}},c});
\ No newline at end of file
+/*! Planetary.js 0.2.2 | (c) 2013 Brandon Tilley | Released under MIT License */
+!function(n,t){"function"==typeof define&&define.amd?define(["d3","topojson"],t):"object"==typeof exports?module.exports=t(require("d3"),require("topojson")):n.planetaryjs=t(n.d3,n.topojson,n)}(this,function(n,t,o){"use strict";var e=null;o&&(e=o.planetaryjs);var i=[],r=function(t,o,e){n.timer(function(){t.context.clearRect(0,0,o.width,o.height);for(var n=0;n=o.onInit.length?r(n,t,o):i(l)};i(l)}else r(n,t,o)},u=function(n,t,o,e){l(n,o),n.canvas=t,n.context=t.getContext("2d"),a(n,t,e)},c={plugins:{},noConflict:function(){return o.planetaryjs=e,c},loadPlugin:function(n){i.push(n)},planet:function(){var t=[],o={onInit:[],onDraw:[]},e={plugins:{},draw:function(n){u(e,n,t,o)},onInit:function(n){o.onInit.push(n)},onDraw:function(n){o.onDraw.push(n)},loadPlugin:function(n){t.push(n)},withSavedContext:function(n){if(!this.context)throw new Error("No canvas to fetch context for");this.context.save(),n(this.context),this.context.restore()}};return e.projection=n.geo.orthographic().clipAngle(90).precision(0),e.path=n.geo.path().projection(e.projection),e}};return c.plugins.topojson=function(t){return function(o){o.plugins.topojson={},o.onInit(function(e){if(t.world)o.plugins.topojson.world=t.world,setTimeout(e,0);else{var i=t.file||"world-110m.json";n.json(i,function(n,t){if(n)throw new Error("Could not load JSON "+i);o.plugins.topojson.world=t,e()})}})}},c.plugins.oceans=function(n){return function(t){t.onDraw(function(){t.withSavedContext(function(o){o.beginPath(),t.path.context(o)({type:"Sphere"}),o.fillStyle=n.fill||"black",o.fill()})})}},c.plugins.land=function(n){return function(o){var e=null;o.onInit(function(){var n=o.plugins.topojson.world;e=t.feature(n,n.objects.land)}),o.onDraw(function(){o.withSavedContext(function(t){t.beginPath(),o.path.context(t)(e),0!=n.fill&&(t.fillStyle=n.fill||"white",t.fill()),n.stroke&&(n.lineWidth&&(t.lineWidth=n.lineWidth),t.strokeStyle=n.stroke,t.stroke())})})}},c.plugins.borders=function(n){return function(o){var e=null,i={internal:function(n,t){return n.id!==t.id},external:function(n,t){return n.id===t.id},both:function(){return!0}};o.onInit(function(){var r=o.plugins.topojson.world,l=r.objects.countries,a=n.type||"internal";e=t.mesh(r,l,i[a])}),o.onDraw(function(){o.withSavedContext(function(t){t.beginPath(),o.path.context(t)(e),t.strokeStyle=n.stroke||"gray",n.lineWidth&&(t.lineWidth=n.lineWidth),t.stroke()})})}},c.plugins.earth=function(n){var n=n||{},t=n.topojson||{},o=n.oceans||{},e=n.land||{},i=n.borders||{};return function(n){c.plugins.topojson(t)(n),c.plugins.oceans(o)(n),c.plugins.land(e)(n),c.plugins.borders(i)(n)}},c.plugins.pings=function(t){var o=[],t=t||{},e=function(n,e,i){var i=i||{};i.color=i.color||t.color||"white",i.angle=i.angle||t.angle||5,i.ttl=i.ttl||t.ttl||2e3;var r={time:new Date,options:i};t.latitudeFirst?(r.lat=n,r.lng=e):(r.lng=n,r.lat=e),o.push(r)},i=function(n,t,e){for(var i=[],l=0;l90&&(i[1]=90),i[1]<-90&&(i[1]=-90),i[0]>=180&&(i[0]-=360),t.projection.rotate(i),l()});n.select(t.canvas).call(o)})}},c});
\ No newline at end of file