diff --git a/site/public/amd/_layout.ejs b/site/public/amd/_layout.ejs new file mode 100644 index 0000000..b35ef3c --- /dev/null +++ b/site/public/amd/_layout.ejs @@ -0,0 +1,10 @@ + + + Planetary.js AMD Test + + + + + + diff --git a/site/public/amd/index.ejs b/site/public/amd/index.ejs new file mode 100644 index 0000000..e69de29 diff --git a/site/public/amd/test.js b/site/public/amd/test.js new file mode 100644 index 0000000..2701b73 --- /dev/null +++ b/site/public/amd/test.js @@ -0,0 +1,24 @@ +requirejs.config({ + baseUrl: '/js/lib', + shim: { + d3: { exports: 'd3' }, + topojson: { exports: 'topojson' } + }, + paths: { + "d3": 'd3.v3.min', + "topojson": 'topojson.v1.min' + } +}); + +requirejs(['planetaryjs.min'], function(planetaryjs) { + var planet = planetaryjs.planet(); + // You can remove this statement if `world-110m.json` + // is in the same path as the HTML page: + planet.loadPlugin(planetaryjs.plugins.earth({ + topojson: { file: '/world-110m.json' } + })); + // Make the planet fit well in its canvas + planet.projection.scale(250).translate([250, 250]); + var canvas = document.getElementById('globe'); + planet.draw(canvas); +}); diff --git a/site/public/documentation/faq.md b/site/public/documentation/faq.md index 23f1dcf..2fc520a 100644 --- a/site/public/documentation/faq.md +++ b/site/public/documentation/faq.md @@ -44,4 +44,54 @@ planet's `draw` method. **Q:** I'm getting "Cannot read property 'geo' of undefined" or "Cannot call method 'feature' of undefined." -**A:** Ensure you're requiring the [D3](http://d3js.org/) and [TopoJSON](https://github.com/mbostock/topojson) libraries before Planetary.js +**A:** Ensure you're requiring the [D3](http://d3js.org/) and [TopoJSON](https://github.com/mbostock/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](https://npmjs.org/)) uses Node-specific functionality, so you can't, for instance, [browserify](http://browserify.org/) it directly. + +## AMD + +This example uses [RequireJS](http://requirejs.org/). Since neither D3 nor TopoJSON support AMD, we will use RequireJS's [shim configuration](http://requirejs.org/docs/api.html#config-shim). + +
+
HTML
+ +```html + + + + +``` + +
JavaScript
+ +```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](https://github.com/thlorenz/browserify-shim) for more information.