FAQ

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.

Q: Why doesn't my canvas element work with Planetary.js?

A: 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 draw method.

Q: Why can't I load the world-110m.json file with the TopoJSON plugin?

A: 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.

Q: How do I manipulate my globe?

A: The planet object has methods and properties for manipulating the globe; most notable is the projection property. See the Planet API for more information.

Q: I'm getting "Cannot read property 'geo' of undefined" or "Cannot call method 'feature' of undefined."

A: Ensure you're requiring the D3 and TopoJSON libraries before Planetary.js.

Q: Can I use Planetary.js with AMD or CommonJS?

A: 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 npm) uses Node-specific functionality, so you can't, for instance, browserify it directly.

AMD

This example uses RequireJS. Since neither D3 nor TopoJSON support AMD, we will use RequireJS's shim configuration.

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>

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
});

CommonJS

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 browserify-shim for more information.

3.7 KiB Raw Blame History

FAQ

AMD

CommonJS

3.7 KiB

Raw Blame History