From 49ac7edf70536f6c0719d99f1a42a50c67c590da Mon Sep 17 00:00:00 2001 From: Brandon Tilley Date: Sat, 28 Dec 2013 16:18:44 -0800 Subject: [PATCH] Update site --- amd/index.html | 10 ++++++++++ amd/test.js | 24 ++++++++++++++++++++++++ documentation/faq.html | 39 ++++++++++++++++++++++++++++++++++++++- 3 files changed, 72 insertions(+), 1 deletion(-) create mode 100644 amd/index.html create mode 100644 amd/test.js diff --git a/amd/index.html b/amd/index.html new file mode 100644 index 0000000..b35ef3c --- /dev/null +++ b/amd/index.html @@ -0,0 +1,10 @@ + + + Planetary.js AMD Test + + + + + + diff --git a/amd/test.js b/amd/test.js new file mode 100644 index 0000000..2701b73 --- /dev/null +++ b/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/documentation/faq.html b/documentation/faq.html index 62d54da..e82f483 100644 --- a/documentation/faq.html +++ b/documentation/faq.html @@ -116,7 +116,44 @@ 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 and TopoJSON libraries before Planetary.js

+

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.