andy/planetary.js
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update site

Browse Source
This commit is contained in:
Brandon Tilley 2013-12-21 23:39:18 -08:00
parent 04c93dfbc0
commit cbe34f61c1
15 changed files with 167 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
documentation/builtin.html
View File

@ -1,7 +1,7 @@
<!doctype html>
<html>
<head>
<title>Planetary.js</title>
<title>Planetary.js: Awesome interactive globes for the web</title>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700|Open+Sans:300italic,400,300,700' rel='stylesheet' type='text/css'>
<link type="text/css" rel="stylesheet" href="/semantic/css/semantic.min.css">
<link type="text/css" rel="stylesheet" href="/css/planetaryjs.css">
@ -87,6 +87,7 @@
<li><a href="/documentation/builtin_zoom.html">Zoom</a> - enables mouse-based zooming of the globe via the mousewheel</li>
<li><a href="/documentation/builtin_drag.html">Drag</a> - enables mouse-based rotation of the globe via dragging</li>
</ul>
<p>Built-in plugins exposed as properties on <code>planetaryjs.plugins</code>.</p>
</div>
</div>

22
documentation/builtin_borders.html
View File

@ -1,7 +1,7 @@
<!doctype html>
<html>
<head>
<title>Planetary.js</title>
<title>Planetary.js: Awesome interactive globes for the web</title>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700|Open+Sans:300italic,400,300,700' rel='stylesheet' type='text/css'>
<link type="text/css" rel="stylesheet" href="/semantic/css/semantic.min.css">
<link type="text/css" rel="stylesheet" href="/css/planetaryjs.css">
@ -76,6 +76,26 @@
<div class='twelve wide column'>
<h1>Borders Plugin</h1>
<p>The <code>borders</code> plugin renders the borders around (and between) countries. It uses TopoJSON data published to <code>planet.plugins.topojson.world</code> by the <a href="/documentation/builtin_topojson.html">TopoJSON plugin</a>.</p>
<h2>API</h2>
<p><strong><code>planetaryjs.plugins.borders([config])</code></strong></p>
<p>Valid keys for <code>config</code> are:</p>
<ul>
<li><code>stroke</code>: the <code>strokeStyle</code> to use for the context; defaults to <code>&quot;gray&quot;</code></li>
<li><code>lineWidth</code> the <code>lineWidth</code> to set on the context; defaults to no value, and the context&#39;s <code>lineWidth</code> is not modified</li>
<li><code>type</code>: valid options are <code>&quot;internal&quot;</code>, <code>&quot;external&quot;</code>, or <code>&quot;both&quot;</code>. <code>&quot;internal&quot;</code> draws borders between countries but not coastlines; <code>&quot;external&quot;</code> does the opposite. <code>&quot;both&quot;</code>, unsurprisingly, draws both. Defaults to <code>&quot;internal&quot;</code>.</li>
</ul>
<div class='ui raise segment'>
<div class='ui red ribbon label'>JavaScript</div>
<pre><code class="language-javascript">planetaryjs.plugins.borders({
stroke: &#39;#008000&#39;, lineWidth: 0.25, type: &#39;both&#39;
});</code></pre>
<p></div></p>
<p>See also:</p>
<ul>
<li><a href="/documentation/builtin_topojson.html">TopoJSON Plugin</a></li>
</ul>
</div>
</div>

2
documentation/builtin_drag.html
View File

@ -1,7 +1,7 @@
<!doctype html>
<html>
<head>
<title>Planetary.js</title>
<title>Planetary.js: Awesome interactive globes for the web</title>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700|Open+Sans:300italic,400,300,700' rel='stylesheet' type='text/css'>
<link type="text/css" rel="stylesheet" href="/semantic/css/semantic.min.css">
<link type="text/css" rel="stylesheet" href="/css/planetaryjs.css">

29
documentation/builtin_earth.html
View File

@ -1,7 +1,7 @@
<!doctype html>
<html>
<head>
<title>Planetary.js</title>
<title>Planetary.js: Awesome interactive globes for the web</title>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700|Open+Sans:300italic,400,300,700' rel='stylesheet' type='text/css'>
<link type="text/css" rel="stylesheet" href="/semantic/css/semantic.min.css">
<link type="text/css" rel="stylesheet" href="/css/planetaryjs.css">
@ -76,6 +76,33 @@
<div class='twelve wide column'>
<h1>Earth Plugin</h1>
<p>The <code>earth</code> plugin is simply a wrapper around the <code>topojson</code>, <code>oceans</code>, <code>land</code>, and <code>borders</code> plugins. It parses its configuration and passes pieces of it to the individual plugins.</p>
<h2>API</h2>
<p><strong><code>planetaryjs.plugins.earth([config])</code></strong></p>
<p>Valid keys for <code>config</code> are:</p>
<ul>
<li><code>topojson</code>: options to pass to the <code>topojson</code> plugin</li>
<li><code>oceans</code>: options to pass to the <code>oceans</code> plugin</li>
<li><code>land</code>: options to pass to the <code>land</code> plugin</li>
<li><code>borders</code>: options to pass to the <code>borders</code> plugin</li>
</ul>
<div class='ui raise segment'>
<div class='ui red ribbon label'>JavaScript</div>
<pre><code class="language-javascript">planetaryjs.plugins.earth({
topojson: { file: &#39;world-110m.json&#39; },
oceans: { fill: &#39;#000080&#39; },
land: { fill: &#39;#339966&#39; },
borders: { stroke: &#39;#008000&#39; }
});</code></pre>
<p></div></p>
<p>See also:</p>
<ul>
<li><a href="/documentation/builtin_topojson.html">TopoJSON Plugin</a></li>
<li><a href="/documentation/builtin_oceans.html">Oceans Plugin</a></li>
<li><a href="/documentation/builtin_land.html">Land Plugin</a></li>
<li><a href="/documentation/builtin_borders.html">Borders Plugin</a></li>
</ul>
</div>
</div>

22
documentation/builtin_land.html
View File

@ -1,7 +1,7 @@
<!doctype html>
<html>
<head>
<title>Planetary.js</title>
<title>Planetary.js: Awesome interactive globes for the web</title>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700|Open+Sans:300italic,400,300,700' rel='stylesheet' type='text/css'>
<link type="text/css" rel="stylesheet" href="/semantic/css/semantic.min.css">
<link type="text/css" rel="stylesheet" href="/css/planetaryjs.css">
@ -76,6 +76,26 @@
<div class='twelve wide column'>
<h1>Land Plugin</h1>
<p>The <code>land</code> plugin renders Earth&#39;s landmasses. It uses TopoJSON data published to <code>planet.plugins.topojson.world</code> by the <a href="/documentation/builtin_topojson.html">TopoJSON plugin</a>.</p>
<h2>API</h2>
<p><strong><code>planetaryjs.plugins.land([config])</code></strong></p>
<p>Valid keys for <code>config</code> are:</p>
<ul>
<li><code>fill</code>: the <code>fillStyle</code> to use for the context; defaults to <code>&quot;white&quot;</code></li>
<li><code>stroke</code>: the <code>strokeStyle</code> to use for the context; defaults to no value, resulting in no stroke around the landmasses</li>
<li><code>lineWidth</code> the <code>lineWidth</code> to set on the context; only effective if <code>stroke</code> is set. Defaults to no value, resulting in no change to the context&#39;s <code>lineWidth</code></li>
</ul>
<div class='ui raise segment'>
<div class='ui red ribbon label'>JavaScript</div>
<pre><code class="language-javascript">planetaryjs.plugins.land({
fill: &#39;#339966&#39;, stroke: &#39;#000000&#39;
});</code></pre>
<p></div></p>
<p>See also:</p>
<ul>
<li><a href="/documentation/builtin_topojson.html">TopoJSON Plugin</a></li>
</ul>
</div>
</div>

16
documentation/builtin_oceans.html
View File

@ -1,7 +1,7 @@
<!doctype html>
<html>
<head>
<title>Planetary.js</title>
<title>Planetary.js: Awesome interactive globes for the web</title>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700|Open+Sans:300italic,400,300,700' rel='stylesheet' type='text/css'>
<link type="text/css" rel="stylesheet" href="/semantic/css/semantic.min.css">
<link type="text/css" rel="stylesheet" href="/css/planetaryjs.css">
@ -76,6 +76,20 @@
<div class='twelve wide column'>
<h1>Oceans Plugin</h1>
<p>The <code>oceans</code> plugin simply renders the main shape of the globe, filling it in with a solid color.</p>
<h2>API</h2>
<p><strong><code>planetaryjs.plugins.oceans([config])</code></strong></p>
<p>Valid keys for <code>config</code> are:</p>
<ul>
<li><code>fill</code>: the <code>fillStyle</code> to use for the globe; defaults to <code>&quot;black&quot;</code></li>
</ul>
<div class='ui raise segment'>
<div class='ui red ribbon label'>JavaScript</div>
<pre><code class="language-javascript">planetaryjs.plugins.oceans({
fill: &#39;#000080&#39;
});</code></pre>
<p></div></p>
</div>
</div>

32
documentation/builtin_pings.html
View File

@ -1,7 +1,7 @@
<!doctype html>
<html>
<head>
<title>Planetary.js</title>
<title>Planetary.js: Awesome interactive globes for the web</title>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700|Open+Sans:300italic,400,300,700' rel='stylesheet' type='text/css'>
<link type="text/css" rel="stylesheet" href="/semantic/css/semantic.min.css">
<link type="text/css" rel="stylesheet" href="/css/planetaryjs.css">
@ -76,6 +76,36 @@
<div class='twelve wide column'>
<h1>Pings Plugin</h1>
<p>The <code>pings</code> plugin allows you to display animated &quot;pings&quot; at any location on the planet. It publishes a method to create pings at <code>planet.plugins.pings.add</code>.</p>
<h2>API</h2>
<p><strong><code>planetaryjs.plugins.pings([config])</code></strong></p>
<p>Valid keys for <code>config</code> are:</p>
<ul>
<li><code>color</code>: the default color for pings; defaults to <code>&quot;white&quot;</code></li>
<li><code>ttl</code>: the default TTL for pings in milliseconds (how long they take to fade out); defaults to 2000</li>
<li><code>angle</code>: the maximum angle for the ping (it will grow to this size over the course of its TTL); defaults to <code>5</code></li>
</ul>
<div class='ui raise segment'>
<div class='ui red ribbon label'>JavaScript</div>
<pre><code class="language-javascript">planetaryjs.plugins.pings({
color: &#39;yellow&#39;, ttl: 5000, angle: 10
});</code></pre>
<p></div></p>
<p><strong><code>planet.plugins.pings.add(lat, lng, [config])</code></strong></p>
<p>Add a new ping to the globe at the latitudinal and longitudinal coordinates specified by <code>lat</code> and <code>lng</code>. <code>config</code> 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.</p>
<div class='ui raise segment'>
<div class='ui red ribbon label'>JavaScript</div>
<pre><code class="language-javascript">var colors = [&#39;red&#39;, &#39;yellow&#39;, &#39;white&#39;, &#39;orange&#39;, &#39;green&#39;, &#39;cyan&#39;, &#39;pink&#39;];
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(lat, lng, { color: color, ttl: 2000, angle: angle });
}, 250);</code></pre>
<p></div></p>
</div>
</div>

33
documentation/builtin_topojson.html
View File

@ -1,7 +1,7 @@
<!doctype html>
<html>
<head>
<title>Planetary.js</title>
<title>Planetary.js: Awesome interactive globes for the web</title>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700|Open+Sans:300italic,400,300,700' rel='stylesheet' type='text/css'>
<link type="text/css" rel="stylesheet" href="/semantic/css/semantic.min.css">
<link type="text/css" rel="stylesheet" href="/css/planetaryjs.css">
@ -76,6 +76,37 @@
<div class='twelve wide column'>
<h1>TopoJSON Plugin</h1>
<p>The <code>topojson</code> plugin parses <a href="https://github.com/mbostock/topojson">TopoJSON data</a> and publishes it on <code>planet.plugins.topojson.world</code> for other plugins to use (particularly for rendering geographical data using D3).</p>
<p>The plugin can load data from a file using Ajax, or can be provided an object that has come from some other source.</p>
<h2>API</h2>
<p><strong><code>planetaryjs.plugins.topojson([config])</code></strong></p>
<p>Valid keys for <code>config</code> are:</p>
<ul>
<li><code>world</code>: a JavaScript object representing TopoJSON data (not JSON data); defaults to no value, which will cause the plugin to load data from the <code>file</code> configuration option</li>
<li><code>file</code>: the path to a TopoJSON data file to be loaded via Ajax; defaults to <code>&quot;world-110m.json&quot;</code>, which can be downloaded with the Planetary.js library from the <a href="https://github.com/BinaryMuse/planetary.js/releases">download page</a>.</li>
</ul>
<p>If you plan on creating more than one planet from the same TopoJSON data, you can load the data once before loading the plugin and pass the parsed data to the plugin via the <code>world</code> property rather than letting the plugin load the data via Ajax each time a new planet is created.</p>
<div class='ui raise segment'>
<div class='ui red ribbon label'>JavaScript</div>
<pre><code class="language-javascript">planetaryjs.plugins.topojson({
file: &#39;/data/world-110m.json&#39;
});</code></pre>
<p></div></p>
<div class='ui raise segment'>
<div class='ui red ribbon label'>JavaScript</div>
<pre><code class="language-javascript">d3.json(&#39;/data/world-110m.json&#39;, function(err, data) {
planetaryjs.plugins.topojson({
world: data
});
// Create planets inside this callback
});</code></pre>
<p></div></p>
<ul>
<li><a href="/documentation/builtin_land.html">Land Plugin</a></li>
<li><a href="/documentation/builtin_borders.html">Borders Plugin</a></li>
</ul>
</div>
</div>

2
documentation/builtin_zoom.html
View File

@ -1,7 +1,7 @@
<!doctype html>
<html>
<head>
<title>Planetary.js</title>
<title>Planetary.js: Awesome interactive globes for the web</title>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700|Open+Sans:300italic,400,300,700' rel='stylesheet' type='text/css'>
<link type="text/css" rel="stylesheet" href="/semantic/css/semantic.min.css">
<link type="text/css" rel="stylesheet" href="/css/planetaryjs.css">

2
documentation/core.html
View File

@ -1,7 +1,7 @@
<!doctype html>
<html>
<head>
<title>Planetary.js</title>
<title>Planetary.js: Awesome interactive globes for the web</title>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700|Open+Sans:300italic,400,300,700' rel='stylesheet' type='text/css'>
<link type="text/css" rel="stylesheet" href="/semantic/css/semantic.min.css">
<link type="text/css" rel="stylesheet" href="/css/planetaryjs.css">

2
documentation/index.html
View File

@ -1,7 +1,7 @@
<!doctype html>
<html>
<head>
<title>Planetary.js</title>
<title>Planetary.js: Awesome interactive globes for the web</title>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700|Open+Sans:300italic,400,300,700' rel='stylesheet' type='text/css'>
<link type="text/css" rel="stylesheet" href="/semantic/css/semantic.min.css">
<link type="text/css" rel="stylesheet" href="/css/planetaryjs.css">

2
documentation/planet.html
View File

@ -1,7 +1,7 @@
<!doctype html>
<html>
<head>
<title>Planetary.js</title>
<title>Planetary.js: Awesome interactive globes for the web</title>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700|Open+Sans:300italic,400,300,700' rel='stylesheet' type='text/css'>
<link type="text/css" rel="stylesheet" href="/semantic/css/semantic.min.css">
<link type="text/css" rel="stylesheet" href="/css/planetaryjs.css">

10
documentation/plugins.html
View File

@ -1,7 +1,7 @@
<!doctype html>
<html>
<head>
<title>Planetary.js</title>
<title>Planetary.js: Awesome interactive globes for the web</title>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700|Open+Sans:300italic,400,300,700' rel='stylesheet' type='text/css'>
<link type="text/css" rel="stylesheet" href="/semantic/css/semantic.min.css">
<link type="text/css" rel="stylesheet" href="/css/planetaryjs.css">
@ -205,6 +205,14 @@ setTimeout(function() {
planet.plugins.autorotate.pause();
}, 5000);</code></pre>
<p></div></p>
<h2>Best Practices</h2>
<p>There are a few things you can do to make your plugin all it can be:</p>
<ol>
<li>Make your plugin very small; ideally, it should do only <em>one thing</em> very well. Be extremely liberal with splitting plugins into smaller plugins, which makes them easier to understand, test, and compose. It&#39;s easy to say &quot;this plugin renders the Earth,&quot; but it really renders oceans, land masses, and borders.</li>
<li>Use function generators to generate your plugin (as described above in &quot;Plugin Generators&quot;), even if it doesn&#39;t take any configuration options. It makes for a more consistent API, and allows you to add the ability to specify configuration options in the future without changing the base API.</li>
<li>Make configuration optional if at all possible. Write your plugin so that it checks for missing values and uses sensible defaults.</li>
<li>Only publish public data and API methods to <code>planet.plugins.pluginName</code>, where <code>pluginName</code> is the name of your plugin.</li>
</ol>
</div>
</div>

2
index.html
View File

@ -1,7 +1,7 @@
<!doctype html>
<html>
<head>
<title>Planetary.js</title>
<title>Planetary.js: Awesome interactive globes for the web</title>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700|Open+Sans:300italic,400,300,700' rel='stylesheet' type='text/css'>
<link type="text/css" rel="stylesheet" href="/semantic/css/semantic.min.css">
<link type="text/css" rel="stylesheet" href="/css/planetaryjs.css">

4
js/lib/planetaryjs.min.js vendored
View File

@ -1,2 +1,2 @@
/*! Planetary.js 0.1.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 i=null;o&&(i=o.planetaryjs);var e=[],r=function(t,o,i){n.timer(function(){t.context.clearRect(0,0,o.width,o.height);for(var n=0;n<i.onDraw.length;n++)i.onDraw[n]()})},l=function(n,t){for(var o=0;o<e.length;o++)t.unshift(e[o]);0==t.length&&(a.plugins.earth&&n.loadPlugin(a.plugins.earth()),a.plugins.pings&&n.loadPlugin(a.plugins.pings()));for(var o=0;o<t.length;o++)t[o](n)},u=function(n,t,o){if(o.onInit.length){var i=0,e=function(n){var t=o.onInit[i];t.length?t(function(){i++,n()}):(t(),i++,setTimeout(n,0))},l=function(){i>=o.onInit.length?r(n,t,o):e(l)};e(l)}else r(n,t,o)},s=function(n,t,o,i){l(n,o),n.canvas=t,n.context=t.getContext("2d"),u(n,t,i)},a={plugins:{},noConflict:function(){return o.planetaryjs=i,a},loadPlugin:function(n){e.push(n)},planet:function(){var t=[],o={onInit:[],onDraw:[]},i={plugins:{},draw:function(n){s(i,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 i.projection=n.geo.orthographic().clipAngle(90).precision(0),i.path=n.geo.path().projection(i.projection),i}};return a.plugins.topojson=function(t){return function(o){o.plugins.topojson={},o.onInit(function(i){if(t.world)o.plugins.topojson.world=t.world,setTimeout(i,0);else{var e=t.file||"world-110m.json";n.json(e,function(n,t){if(n)throw new Error("Could not load JSON "+e);o.plugins.topojson.world=t,i()})}})}},a.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(),0!=n.stroke&&(o.strokeStyle=n.stroke,o.stroke())})})}},a.plugins.land=function(n){return function(o){var i=null;o.onInit(function(){var n=o.plugins.topojson.world;i=t.feature(n,n.objects.land)}),o.onDraw(function(){o.withSavedContext(function(t){t.beginPath(),o.path.context(t)(i),0!=n.fill&&(t.fillStyle=n.fill||"white",t.fill()),n.stroke&&(t.strokeStyle=n.stroke,t.stroke())})})}},a.plugins.borders=function(n){return function(o){var i=null;o.onInit(function(){var n=o.plugins.topojson.world,e=n.objects.countries;i=t.mesh(n,e,function(n,t){return n.id!==t.id})}),o.onDraw(function(){o.withSavedContext(function(t){t.beginPath(),o.path.context(t)(i),t.strokeStyle=n.stroke||"gray",t.stroke()})})}},a.plugins.earth=function(n){var n=n||{},t=n.topojson||{},o=n.oceans||{},i=n.land||{},e=n.borders||{};return function(n){a.plugins.topojson(t)(n),a.plugins.oceans(o)(n),a.plugins.land(i)(n),a.plugins.borders(e)(n)}},a.plugins.pings=function(){var t=[],o=function(n,o,i){var i=i||{};i.color=i.color||"white",i.ttl=i.ttl||2e3,i.angle=i.angle||5,t.push({lat:n,lng:o,time:new Date,options:i})},i=function(n,o,i){for(var r=[],l=0;l<t.length;l++){var u=t[l],s=i-u.time;s<u.options.ttl&&(r.push(u),e(n,o,i,s,u))}t=r},e=function(t,o,i,e,r){var l=1-e/r.options.ttl,u=n.rgb(r.options.color);u="rgba("+u.r+","+u.g+","+u.b+","+l+")",o.strokeStyle=u;var s=n.geo.circle().origin([r.lng,r.lat]).angle(e/r.options.ttl*r.options.angle)();o.beginPath(),t.path.context(o)(s),o.stroke()};return function(n){n.plugins.pings={add:o},n.onDraw(function(){var t=new Date;n.withSavedContext(function(o){i(n,o,t)})})}},a});
/*! Planetary.js 0.2.0 | (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 i=null;o&&(i=o.planetaryjs);var e=[],r=function(t,o,i){n.timer(function(){t.context.clearRect(0,0,o.width,o.height);for(var n=0;n<i.onDraw.length;n++)i.onDraw[n]()})},l=function(n,t){for(var o=0;o<e.length;o++)t.unshift(e[o]);0==t.length&&(s.plugins.earth&&n.loadPlugin(s.plugins.earth()),s.plugins.pings&&n.loadPlugin(s.plugins.pings()));for(var o=0;o<t.length;o++)t[o](n)},u=function(n,t,o){if(o.onInit.length){var i=0,e=function(n){var t=o.onInit[i];t.length?t(function(){i++,n()}):(t(),i++,setTimeout(n,0))},l=function(){i>=o.onInit.length?r(n,t,o):e(l)};e(l)}else r(n,t,o)},a=function(n,t,o,i){l(n,o),n.canvas=t,n.context=t.getContext("2d"),u(n,t,i)},s={plugins:{},noConflict:function(){return o.planetaryjs=i,s},loadPlugin:function(n){e.push(n)},planet:function(){var t=[],o={onInit:[],onDraw:[]},i={plugins:{},draw:function(n){a(i,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 i.projection=n.geo.orthographic().clipAngle(90).precision(0),i.path=n.geo.path().projection(i.projection),i}};return s.plugins.topojson=function(t){return function(o){o.plugins.topojson={},o.onInit(function(i){if(t.world)o.plugins.topojson.world=t.world,setTimeout(i,0);else{var e=t.file||"world-110m.json";n.json(e,function(n,t){if(n)throw new Error("Could not load JSON "+e);o.plugins.topojson.world=t,i()})}})}},s.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()})})}},s.plugins.land=function(n){return function(o){var i=null;o.onInit(function(){var n=o.plugins.topojson.world;i=t.feature(n,n.objects.land)}),o.onDraw(function(){o.withSavedContext(function(t){t.beginPath(),o.path.context(t)(i),0!=n.fill&&(t.fillStyle=n.fill||"white",t.fill()),n.stroke&&(n.lineWidth&&(t.lineWidth=n.lineWidth),t.strokeStyle=n.stroke,t.stroke())})})}},s.plugins.borders=function(n){return function(o){var i=null,e={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,u=n.type||"internal";i=t.mesh(r,l,e[u])}),o.onDraw(function(){o.withSavedContext(function(t){t.beginPath(),o.path.context(t)(i),t.strokeStyle=n.stroke||"gray",n.lineWidth&&(t.lineWidth=n.lineWidth),t.stroke()})})}},s.plugins.earth=function(n){var n=n||{},t=n.topojson||{},o=n.oceans||{},i=n.land||{},e=n.borders||{};return function(n){s.plugins.topojson(t)(n),s.plugins.oceans(o)(n),s.plugins.land(i)(n),s.plugins.borders(e)(n)}},s.plugins.pings=function(t){var o=[],i=function(n,i,e){var e=e||{};e.color=e.color||t.color||"white",e.ttl=e.ttl||t.ttl||2e3,e.angle=e.angle||t.angle||5,o.push({lat:n,lng:i,time:new Date,options:e})},e=function(n,t,i){for(var e=[],l=0;l<o.length;l++){var u=o[l],a=i-u.time;a<u.options.ttl&&(e.push(u),r(n,t,i,a,u))}o=e},r=function(t,o,i,e,r){var l=1-e/r.options.ttl,u=n.rgb(r.options.color);u="rgba("+u.r+","+u.g+","+u.b+","+l+")",o.strokeStyle=u;var a=n.geo.circle().origin([r.lng,r.lat]).angle(e/r.options.ttl*r.options.angle)();o.beginPath(),t.path.context(o)(a),o.stroke()};return function(n){n.plugins.pings={add:i},n.onDraw(function(){var t=new Date;n.withSavedContext(function(o){e(n,o,t)})})}},s});