117 lines
5.3 KiB
HTML
117 lines
5.3 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<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">
|
|
|
|
<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">
|
|
|
|
<link href="/css/prism.css" rel="stylesheet">
|
|
</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 active' 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='red item ' href='/documentation/index.html'>
|
|
Introduction
|
|
<i class='icon home'></i>
|
|
</a>
|
|
<a class='blue item ' href='/documentation/core.html'>
|
|
Core API
|
|
<i class='icon setting'></i>
|
|
</a>
|
|
<a class='orange item ' href='/documentation/planet.html'>
|
|
Planet API
|
|
<i class='icon globe'></i>
|
|
</a>
|
|
<a class='teal item ' href='/documentation/plugins.html'>
|
|
Plugins
|
|
<i class='icon edit'></i>
|
|
</a>
|
|
<a class='green 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 active' 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>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>"world-110m.json"</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: '/data/world-110m.json'
|
|
});</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('/data/world-110m.json', 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>
|
|
</div>
|
|
<script type='text/javascript' src='/js/prism.js'></script>
|
|
</body>
|
|
</html>
|