122 lines
5.7 KiB
HTML
122 lines
5.7 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<title>Planetary.js</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">
|
|
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
|
|
|
|
</head>
|
|
<body>
|
|
<div class='ui fixed inverted large menu main-menu'>
|
|
<div class='items'>
|
|
<a class='item title' href='/index.html'>
|
|
<i class='globe icon'></i>Planetary.js
|
|
</a>
|
|
<span class='spacer hide-on-mobile'></span>
|
|
<a class='item minor' href='https://github.com/BinaryMuse/planetary.js/releases'>
|
|
<i class='download icon'></i><span class='hide-on-mobile'>Download</span>
|
|
</a>
|
|
<a class='item minor' href='/examples/'>
|
|
<i class='laptop icon'></i><span class='hide-on-mobile'>Examples</span>
|
|
</a>
|
|
<a class='item minor' href='/documentation/'>
|
|
<i class='book icon'></i><span class='hide-on-mobile'>Documentation</span>
|
|
</a>
|
|
<a class='item minor' href='https://github.com/BinaryMuse/planetary.js'>
|
|
<i class='github alternate icon'></i><span class='hide-on-mobile'>Fork on GitHub</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class='content container'>
|
|
<div class='page ui slim stackable grid'>
|
|
<div class='four wide column'>
|
|
<div class='ui fluid vertical menu'>
|
|
<a class='item ' href='/documentation/index.html'>
|
|
Introduction
|
|
<i class='icon home'></i>
|
|
</a>
|
|
<a class='item ' href='/documentation/core.html'>
|
|
Core API
|
|
<i class='icon setting'></i>
|
|
</a>
|
|
<a class='item ' href='/documentation/planet.html'>
|
|
Planet API
|
|
<i class='icon globe'></i>
|
|
</a>
|
|
<a class='item active' href='/documentation/plugins.html'>
|
|
Plugins
|
|
<i class='icon edit'></i>
|
|
</a>
|
|
<a class='item with-subitems ' href='/documentation/builtin.html'>
|
|
Built-In Plugins
|
|
<i class='icon bolt'></i>
|
|
</a>
|
|
<div class='item contains-subitems'>
|
|
<div class='menu'>
|
|
<a class='item ' href='/documentation/builtin_earth.html'>Earth</a>
|
|
<a class='item ' href='/documentation/builtin_topojson.html'>TopoJSON</a>
|
|
<a class='item ' href='/documentation/builtin_oceans.html'>Oceans</a>
|
|
<a class='item ' href='/documentation/builtin_land.html'>Land</a>
|
|
<a class='item ' href='/documentation/builtin_borders.html'>Borders</a>
|
|
<a class='item ' href='/documentation/builtin_pings.html'>Pings</a>
|
|
<a class='item ' href='/documentation/builtin_zoom.html'>Zoom</a>
|
|
<a class='item ' href='/documentation/builtin_drag.html'>Drag</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class='twelve wide column'>
|
|
<h1>Plugins</h1>
|
|
<p>Planetary.js uses a plugin-based architecture, and all the built-in functionality is built using this architecture. This makes Planetary.js extremely flexible.</p>
|
|
<h2>Loading Plugins</h2>
|
|
<p>Plugins are loaded either globally by <code>planetaryjs.loadPlugin</code> or for a specific planet instance by <code>planet.loadPlugin</code>. If you call <code>draw</code> on a planet and it has no plugins loaded at all (from either source), Planetary.js will use the default plugin stack, which consists of the <code>earth</code> and <code>pings</code> plugins.</p>
|
|
<h2>Anatomy of a Plugin</h2>
|
|
<p>A plugin is simply a JavaScript function that takes a planet instance as a parameter and performs some predefined operation. <strong>The best plugins do one tiny thing.</strong> If you want a plugin to do a lot of things at once, you should build a plugin that wraps other, smaller plugins; in fact, this is exactly how the <code>earth</code> plugin is built. See the <a href="/documentation/builtin_earth.html">Earth</a> documentation for more details.</p>
|
|
<p>Most of the time, a plugin will implement its behavior by registering callbacks into the planet's lifecycle hooks. For example, the following simple plugin increments the planet's projection's rotation by one degree every tick (this would make for a very fast spinning globe, but demonstrates the idea nicely enough):</p>
|
|
<div class='ui raise segment'>
|
|
<div class='ui red ribbon label'>JavaScript</div>
|
|
|
|
<pre><code class="language-javascript">var autorotate = function(planet) {
|
|
planet.onDraw(function() {
|
|
var rotation = planet.projection.rotate();
|
|
rotation[0] += 1;
|
|
if (rotation[0] >= 180) rotation[0] -= 360;
|
|
planet.projection.rotate(rotation);
|
|
});
|
|
};
|
|
|
|
planet.loadPlugin(autorotate);</code></pre>
|
|
<p></div></p>
|
|
<h2>Plugin Generators</h2>
|
|
<p>Often, you'll want your plugin to be configurable with some user-defined values. You can create a function generator, which is a function that takes your configuration data and then <em>returns</em> the plugin function. You can then call this generator to generate the plugin function for use by <code>loadPlugin</code>.</p>
|
|
<div class='ui raise segment'>
|
|
<div class='ui red ribbon label'>JavaScript</div>
|
|
|
|
<pre><code class="language-javascript">var autorotate = function(degreesPerTick) {
|
|
return function(planet) {
|
|
planet.onDraw(function() {
|
|
var rotation = planet.projection.rotate();
|
|
rotation[0] += degreesPerTick;
|
|
if (rotation[0] >= 180) rotation[0] -= 360;
|
|
planet.projection.rotate(rotation);
|
|
});
|
|
};
|
|
};
|
|
|
|
planet.loadPlugin(autorotate(5));</code></pre>
|
|
<p></div></p>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|