176 lines
8.5 KiB
HTML
176 lines
8.5 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">
|
|
<meta property="og:image" content="http://planetaryjs.com/images/ex-rotating.png">
|
|
<meta property="og:site_name" content="Planetary.js">
|
|
|
|
<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='/'>
|
|
<i class='globe icon'></i>Planetary.js
|
|
</a>
|
|
<span class='spacer hide-on-mobile'></span>
|
|
<a class='item minor ' href='/download/'>
|
|
<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='purple 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>
|
|
<a class='red item active' href='/documentation/faq.html'>
|
|
FAQ
|
|
<i class='icon help'></i>
|
|
</a>
|
|
<a class='green item ' href='/documentation/help.html'>
|
|
Getting Help
|
|
<i class='icon phone'></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class='twelve wide column'>
|
|
<h1>FAQ</h1>
|
|
<p><strong>Q:</strong> Why are the pings I add from the <a href="/documentation/builtin_pings.html">Pings plugin</a> in the wrong place?</p>
|
|
<p><strong>A:</strong> Like D3 on which it is based, Planetary.js accepts coordinates with the longitudinal coordinate first. You can set the <code>latitudeFirst</code> option in the plugin configuration to change this. There is some additional discussion on the subject in the <a href="/documentation/builtin_pings.html">Pings plugin documentation</a>.</p>
|
|
<div class="ui horizontal icon divider">
|
|
<i class="globe icon"></i>
|
|
</div>
|
|
|
|
<p><strong>Q:</strong> Why can't I access my DOM element?</p>
|
|
<p><strong>A:</strong> 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.</p>
|
|
<div class="ui horizontal icon divider">
|
|
<i class="globe icon"></i>
|
|
</div>
|
|
|
|
<p><strong>Q:</strong> Why doesn't my <code>canvas</code> element work with Planetary.js?</p>
|
|
<p><strong>A:</strong> Planetary.js asks for raw DOM elements; if you have an element wrapped with jQuery, D3, or a similar library, you'll need to unwrap it to pass to your
|
|
planet's <code>draw</code> method.</p>
|
|
<div class="ui horizontal icon divider">
|
|
<i class="globe icon"></i>
|
|
</div>
|
|
|
|
<p><strong>Q:</strong> Why can't I load the <code>world-110m.json</code> file with the TopoJSON plugin?</p>
|
|
<p><strong>A:</strong> After checking to make sure you've specified the correct path to the file in the plugin's configuration options, ensure that you're viewing your page over HTTP. Your browser won't be able to make the necessary Ajax request to load the file if you're just viewing the page from your filesystem.</p>
|
|
<div class="ui horizontal icon divider">
|
|
<i class="globe icon"></i>
|
|
</div>
|
|
|
|
<p><strong>Q:</strong> How do I manipulate my globe?</p>
|
|
<p><strong>A:</strong> The planet object has methods and properties for manipulating the globe; most notable is the <code>projection</code> property. See the <a href="/documentation/planet.html">Planet API</a> for more information.</p>
|
|
<div class="ui horizontal icon divider">
|
|
<i class="globe icon"></i>
|
|
</div>
|
|
|
|
<p><strong>Q:</strong> I'm getting "Cannot read property 'geo' of undefined" or "Cannot call method 'feature' of undefined."</p>
|
|
<p><strong>A:</strong> Ensure you're requiring the <a href="http://d3js.org/">D3</a> and <a href="https://github.com/mbostock/topojson">TopoJSON</a> libraries before Planetary.js.</p>
|
|
<div class="ui horizontal icon divider">
|
|
<i class="globe icon"></i>
|
|
</div>
|
|
|
|
<p><strong>Q:</strong> Can I use Planetary.js with AMD or CommonJS?</p>
|
|
<p><strong>A:</strong> Yes and no. Planetary.js uses a universal module definition, and so is compatible with AMD and CommonJS. However, neither D3 nor TopoJSON support AMD, and TopoJSON's CommonJS package (as installed with <a href="https://npmjs.org/">npm</a>) uses Node-specific functionality, so you can't, for instance, <a href="http://browserify.org/">browserify</a> it directly.</p>
|
|
<h2>AMD</h2>
|
|
<p>This example uses <a href="http://requirejs.org/">RequireJS</a>. Since neither D3 nor TopoJSON support AMD, we will use RequireJS's <a href="http://requirejs.org/docs/api.html#config-shim">shim configuration</a>.</p>
|
|
<div class='ui raised segment'>
|
|
<div class='ui blue ribbon label'>HTML</div>
|
|
|
|
<pre><code class="language-html"><body>
|
|
<canvas id='globe' width='500' height='500'></canavs>
|
|
<script src='//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.9/require.min.js'
|
|
data-main='/app.js'></script>
|
|
</body></code></pre>
|
|
<div class='ui red ribbon label'>JavaScript</div>
|
|
|
|
<pre><code class="language-javascript">requirejs.config({
|
|
// Tell RequireJS to use `window.d3` and `window.topojson`
|
|
// for those libraries, respectively
|
|
shim: {
|
|
d3: { exports: 'd3' },
|
|
topojson: { exports: 'topojson' }
|
|
},
|
|
paths: {
|
|
'd3': 'path/to/d3.v3.min',
|
|
'topojson': 'path/to/topojson.v1.min'
|
|
}
|
|
});
|
|
|
|
requirejs(['planetaryjs'], function(planetaryjs) {
|
|
// Use Planetary.js here
|
|
});</code></pre>
|
|
<p></div></p>
|
|
<h2>CommonJS</h2>
|
|
<p>To use Planetary.js with a tool like Browserify, you will need to create a shim for TopoJSON (D3 includes a Browserify-compatible script). Take a look at <a href="https://github.com/thlorenz/browserify-shim">browserify-shim</a> for more information.</p>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script type='text/javascript' src='/js/prism.js'></script>
|
|
<script>
|
|
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
|
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
|
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
|
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
|
|
|
ga('create', 'UA-46705270-1', 'planetaryjs.com');
|
|
ga('send', 'pageview');
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|