From 5cad239577eddd9b50c9e5c55f61bb82728204e7 Mon Sep 17 00:00:00 2001 From: Brandon Tilley Date: Mon, 23 Dec 2013 14:16:19 -0800 Subject: [PATCH] Update site --- documentation/builtin.html | 6 +- documentation/builtin_borders.html | 6 +- documentation/builtin_drag.html | 6 +- documentation/builtin_earth.html | 6 +- documentation/builtin_land.html | 6 +- documentation/builtin_oceans.html | 6 +- documentation/builtin_pings.html | 6 +- documentation/builtin_topojson.html | 6 +- documentation/builtin_zoom.html | 6 +- documentation/core.html | 6 +- documentation/faq.html | 114 ++++++++++++++++++++ documentation/help.html | 6 +- documentation/index.html | 6 +- documentation/planet.html | 6 +- documentation/plugins.html | 6 +- examples/basic.html | 82 +++++++++++++++ examples/basic.js | 14 +++ examples/quake.html | 58 +---------- examples/rotating.html | 156 ++++++++++++++++++++++++++++ examples/rotating.js | 84 +++++++++++++++ index.html | 11 +- js/lib/planetaryjs.min.js | 2 +- 22 files changed, 533 insertions(+), 72 deletions(-) create mode 100644 documentation/faq.html create mode 100644 examples/basic.html create mode 100644 examples/basic.js create mode 100644 examples/rotating.html create mode 100644 examples/rotating.js diff --git a/documentation/builtin.html b/documentation/builtin.html index 50523b5..fbb4628 100644 --- a/documentation/builtin.html +++ b/documentation/builtin.html @@ -71,9 +71,13 @@ Drag + + FAQ + + Getting Help - + diff --git a/documentation/builtin_borders.html b/documentation/builtin_borders.html index 4383c50..82b6016 100644 --- a/documentation/builtin_borders.html +++ b/documentation/builtin_borders.html @@ -71,9 +71,13 @@ Drag + + FAQ + + Getting Help - + diff --git a/documentation/builtin_drag.html b/documentation/builtin_drag.html index 4554275..9da8ff3 100644 --- a/documentation/builtin_drag.html +++ b/documentation/builtin_drag.html @@ -71,9 +71,13 @@ Drag + + FAQ + + Getting Help - + diff --git a/documentation/builtin_earth.html b/documentation/builtin_earth.html index 4697ee8..11be14b 100644 --- a/documentation/builtin_earth.html +++ b/documentation/builtin_earth.html @@ -71,9 +71,13 @@ Drag + + FAQ + + Getting Help - + diff --git a/documentation/builtin_land.html b/documentation/builtin_land.html index ea67429..ad26669 100644 --- a/documentation/builtin_land.html +++ b/documentation/builtin_land.html @@ -71,9 +71,13 @@ Drag + + FAQ + + Getting Help - + diff --git a/documentation/builtin_oceans.html b/documentation/builtin_oceans.html index dd6c297..dab98e2 100644 --- a/documentation/builtin_oceans.html +++ b/documentation/builtin_oceans.html @@ -71,9 +71,13 @@ Drag + + FAQ + + Getting Help - + diff --git a/documentation/builtin_pings.html b/documentation/builtin_pings.html index e4ea461..85ed7c7 100644 --- a/documentation/builtin_pings.html +++ b/documentation/builtin_pings.html @@ -71,9 +71,13 @@ Drag + + FAQ + + Getting Help - + diff --git a/documentation/builtin_topojson.html b/documentation/builtin_topojson.html index 26c8162..35a1459 100644 --- a/documentation/builtin_topojson.html +++ b/documentation/builtin_topojson.html @@ -71,9 +71,13 @@ Drag + + FAQ + + Getting Help - + diff --git a/documentation/builtin_zoom.html b/documentation/builtin_zoom.html index bca3160..52abf6b 100644 --- a/documentation/builtin_zoom.html +++ b/documentation/builtin_zoom.html @@ -71,9 +71,13 @@ Drag + + FAQ + + Getting Help - + diff --git a/documentation/core.html b/documentation/core.html index 942b384..c1e6555 100644 --- a/documentation/core.html +++ b/documentation/core.html @@ -71,9 +71,13 @@ Drag + + FAQ + + Getting Help - + diff --git a/documentation/faq.html b/documentation/faq.html new file mode 100644 index 0000000..457a9aa --- /dev/null +++ b/documentation/faq.html @@ -0,0 +1,114 @@ + + + + Planetary.js: Awesome interactive globes for the web + + + + + + + + + + + +
+
+ + Planetary.js + + + + Download + + + Examples + + + Documentation + + + Fork on GitHub + +
+
+ + +
+
+
+
+ + Introduction + + + + Core API + + + + Planet API + + + + Plugins + + + + Built-In Plugins + + +
+
+ Earth + TopoJSON + Oceans + Land + Borders + Pings + Zoom + Drag +
+
+ + FAQ + + + + Getting Help + + +
+
+ +
+

FAQ

+

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

+ +
+
+
+ + + diff --git a/documentation/help.html b/documentation/help.html index 12bfc86..140a4c1 100644 --- a/documentation/help.html +++ b/documentation/help.html @@ -71,9 +71,13 @@ Drag + + FAQ + + Getting Help - + diff --git a/documentation/index.html b/documentation/index.html index d29aec3..9b99c72 100644 --- a/documentation/index.html +++ b/documentation/index.html @@ -71,9 +71,13 @@ Drag + + FAQ + + Getting Help - + diff --git a/documentation/planet.html b/documentation/planet.html index ca55419..b30e197 100644 --- a/documentation/planet.html +++ b/documentation/planet.html @@ -71,9 +71,13 @@ Drag + + FAQ + + Getting Help - + diff --git a/documentation/plugins.html b/documentation/plugins.html index 91c0cc1..8d2a894 100644 --- a/documentation/plugins.html +++ b/documentation/plugins.html @@ -71,9 +71,13 @@ Drag + + FAQ + + Getting Help - + diff --git a/examples/basic.html b/examples/basic.html new file mode 100644 index 0000000..bb31e1c --- /dev/null +++ b/examples/basic.html @@ -0,0 +1,82 @@ + + + + Planetary.js: Awesome interactive globes for the web + + + + + + + + + + + +
+
+ + Planetary.js + + + + Download + + + Examples + + + Documentation + + + Fork on GitHub + +
+
+ + +
+
+
+

Basic Globe

+ +

This example shows the minimum code you need to render a basic representation of the planet Earth.

+ +
+ +
+ +
+
HTML
+
<canvas id='basicGlobe' width='400' height='400'></canvas>
+ +
JavaScript
+
(function() {
+  var canvas = document.getElementById('basicGlobe');
+  var planet = planetaryjs.planet();
+  // Loading this plugin technically happens automatically,
+  // but we need to specify the path to the `world-110m.json` file.
+  planet.loadPlugin(planetaryjs.plugins.earth({
+    topojson: { file: '/world-110m.json' }
+  }));
+  // Scale the planet's radius to half the canvas' size...
+  planet.projection.scale(canvas.width / 2);
+  // ...and move the planet to the center of the canvas.
+  planet.projection.translate([canvas.width / 2, canvas.height / 2]);
+  planet.draw(canvas);
+})();
+
+ + + + + + + + +
+
+
+ + + diff --git a/examples/basic.js b/examples/basic.js new file mode 100644 index 0000000..afe452a --- /dev/null +++ b/examples/basic.js @@ -0,0 +1,14 @@ +(function() { + var canvas = document.getElementById('basicGlobe'); + var planet = planetaryjs.planet(); + // Loading this plugin technically happens automatically, + // but we need to specify the path to the `world-110m.json` file. + planet.loadPlugin(planetaryjs.plugins.earth({ + topojson: { file: '/world-110m.json' } + })); + // Scale the planet's radius to half the canvas' size... + planet.projection.scale(canvas.width / 2); + // ...and move the planet to the center of the canvas. + planet.projection.translate([canvas.width / 2, canvas.height / 2]); + planet.draw(canvas); +})(); diff --git a/examples/quake.html b/examples/quake.html index 4aa20ba..6d4c122 100644 --- a/examples/quake.html +++ b/examples/quake.html @@ -76,8 +76,10 @@ borders: { stroke: '#001320' } })); planet.loadPlugin(planetaryjs.plugins.pings({})); - planet.loadPlugin(zoom()); - planet.loadPlugin(drag({ + planet.loadPlugin(planetaryjs.plugins.zoom({ + scaleExtent: [50, 5000] + })); + planet.loadPlugin(planetaryjs.plugins.drag({ onDragStart: function() { planet.plugins.autorotate.pause(); }, @@ -274,58 +276,6 @@ }); }; }; - - // Plugin to allow zooming with the mouse wheel - function zoom(options) { - return function(planet) { - planet.onInit(function() { - var zoom = d3.behavior.zoom() - .scale(planet.projection.scale()) - .scaleExtent([50, 5000]) - .on('zoom', function() { - planet.projection.scale(d3.event.scale); - }); - d3.select(planet.canvas).call(zoom); - }); - }; - }; - - // Plugin to allow rotating the globe by dragging with the mouse - function drag(options) { - var options = options || {}; - var noop = function() {}; - var onDragStart = options.onDragStart || noop; - var onDragEnd = options.onDragEnd || noop; - var onDrag = options.onDrag || noop; - return function(planet) { - planet.onInit(function() { - var drag = d3.behavior.drag() - .on('dragstart', onDragStart) - .on('dragend', onDragEnd) - .on('drag', function() { - onDrag(); - var dx = d3.event.dx; - var dy = d3.event.dy; - var rotation = planet.projection.rotate(); - var radius = planet.projection.scale(); - // Dragging from the center of the planet to the edge - // of the planet should rotate it 90 degrees - var scale = d3.scale.linear() - .domain([-1 * radius, radius]) - .range([-90, 90]); - var degX = scale(dx); - var degY = scale(dy); - rotation[0] += degX; - rotation[1] -= degY; - if (rotation[1] > 90) rotation[1] = 90; - if (rotation[1] < -90) rotation[1] = -90; - if (rotation[0] >= 180) rotation[0] -= 360; - planet.projection.rotate(rotation); - }); - d3.select(planet.canvas).call(drag); - }); - }; - }; })(); diff --git a/examples/rotating.html b/examples/rotating.html new file mode 100644 index 0000000..21f554b --- /dev/null +++ b/examples/rotating.html @@ -0,0 +1,156 @@ + + + + Planetary.js: Awesome interactive globes for the web + + + + + + + + + + + +
+
+ + Planetary.js + + + + Download + + + Examples + + + Documentation + + + Fork on GitHub + +
+
+ + +
+
+
+

Basic Globe

+ +

This code shows the example from the homepage, which rotates, shows randomly positioned, colored, and sized pings on the globe, and supports mouse-based dragging and zooming. It also shows the creation and use of a plugin, which powers the automatic rotation and exposes a public API.

+ +

The demo also shows how you can keep your globe from looking pixelated on high density displays my changing the canvas' width and height but keeping its displayed width and height the same via CSS styling.

+ +
+ +
+ +
+
HTML
+
<canvas id='basicGlobe' width='400' height='400'
+  style='width: 400px; height: 400px;'></canvas>
+ +
JavaScript
+
(function() {
+  var globe = planetaryjs.planet();
+  // The `earth` plugin draws the oceans and the land; it's actually
+  // a combination of several separate built-in plugins.
+  globe.loadPlugin(planetaryjs.plugins.earth({
+    topojson: { file:   '/world-110m.json' },
+    oceans:   { fill:   '#000080' },
+    land:     { fill:   '#339966' },
+    borders:  { stroke: '#008000' }
+  }));
+  // The `pings` plugin draws animated pings on the globe.
+  globe.loadPlugin(planetaryjs.plugins.pings());
+  // Load our custom `autorotate` plugin; see below.
+  globe.loadPlugin(autorotate(10));
+  // The `zoom` and `drag` plugins enable
+  // manipulating the globe with the mouse.
+  globe.loadPlugin(planetaryjs.plugins.zoom({
+    scaleExtent: [100, 300]
+  }));
+  globe.loadPlugin(planetaryjs.plugins.drag({
+    // Dragging the globe shoud pause the
+    // automatic rotation until we release the mouse.
+    onDragStart: function() {
+      globe.plugins.autorotate.pause();
+    },
+    onDragEnd: function() {
+      globe.plugins.autorotate.resume();
+    }
+  }))
+  // Set up the globe's initial scale, offset, and rotation.
+  globe.projection.scale(175).translate([175, 175]).rotate([0, -10, 0]);
+
+  // Every few hundred milliseconds, we'll draw another random ping.
+  var colors = ['red', 'yellow', 'white', 'orange', 'green', 'cyan', 'pink'];
+  setInterval(function() {
+    var lat = Math.random() * 170 - 85;
+    var lng = Math.random() * 360 - 180;
+    var color = colors[Math.floor(Math.random() * colors.length)];
+    globe.plugins.pings.add(lat, lng, { color: color, ttl: 2000, angle: Math.random() * 10 });
+  }, 250);
+
+  var canvas = document.getElementById('rotatingGlobe');
+  // Special code to handle high-density displays (e.g. retina, some phones)
+  // In the future, Planetary.js will handle this by itself (or via a plugin).
+  if (window.devicePixelRatio == 2) {
+    canvas.width = 800;
+    canvas.height = 800;
+    context = canvas.getContext('2d');
+    context.scale(2, 2);
+  }
+  // Draw that globe!
+  globe.draw(canvas);
+
+  // This plugin will automatically rotate the globe around its vertical
+  // axis a configured number of degrees every second.
+  function autorotate(degPerSec) {
+    // Planetary.js plugins are functions that take a `planet` instance
+    // as an argument...
+    return function(planet) {
+      var lastTick = null;
+      var paused = false;
+      planet.plugins.autorotate = {
+        pause:  function() { paused = true;  },
+        resume: function() { paused = false; }
+      };
+      // ...and configure hooks into certain pieces of its lifecycle.
+      planet.onDraw(function() {
+        if (paused || !lastTick) {
+          lastTick = new Date();
+        } else {
+          var now = new Date();
+          var delta = now - lastTick;
+          // This plugin uses the built-in projection (provided by D3)
+          // to rotate the globe each time we draw it.
+          var rotation = planet.projection.rotate();
+          rotation[0] += degPerSec * delta / 1000;
+          if (rotation[0] >= 180) rotation[0] -= 360;
+          planet.projection.rotate(rotation);
+          lastTick = now;
+        }
+      });
+    };
+  };
+})();
+
+ + + + + + + + +
+
+
+ + + diff --git a/examples/rotating.js b/examples/rotating.js new file mode 100644 index 0000000..abec7c4 --- /dev/null +++ b/examples/rotating.js @@ -0,0 +1,84 @@ +(function() { + var globe = planetaryjs.planet(); + // The `earth` plugin draws the oceans and the land; it's actually + // a combination of several separate built-in plugins. + globe.loadPlugin(planetaryjs.plugins.earth({ + topojson: { file: '/world-110m.json' }, + oceans: { fill: '#000080' }, + land: { fill: '#339966' }, + borders: { stroke: '#008000' } + })); + // The `pings` plugin draws animated pings on the globe. + globe.loadPlugin(planetaryjs.plugins.pings()); + // Load our custom `autorotate` plugin; see below. + globe.loadPlugin(autorotate(10)); + // The `zoom` and `drag` plugins enable + // manipulating the globe with the mouse. + globe.loadPlugin(planetaryjs.plugins.zoom({ + scaleExtent: [100, 300] + })); + globe.loadPlugin(planetaryjs.plugins.drag({ + // Dragging the globe shoud pause the + // automatic rotation until we release the mouse. + onDragStart: function() { + globe.plugins.autorotate.pause(); + }, + onDragEnd: function() { + globe.plugins.autorotate.resume(); + } + })) + // Set up the globe's initial scale, offset, and rotation. + globe.projection.scale(175).translate([175, 175]).rotate([0, -10, 0]); + + // Every few hundred milliseconds, we'll draw another random ping. + var colors = ['red', 'yellow', 'white', 'orange', 'green', 'cyan', 'pink']; + setInterval(function() { + var lat = Math.random() * 170 - 85; + var lng = Math.random() * 360 - 180; + var color = colors[Math.floor(Math.random() * colors.length)]; + globe.plugins.pings.add(lat, lng, { color: color, ttl: 2000, angle: Math.random() * 10 }); + }, 250); + + var canvas = document.getElementById('rotatingGlobe'); + // Special code to handle high-density displays (e.g. retina, some phones) + // In the future, Planetary.js will handle this by itself (or via a plugin). + if (window.devicePixelRatio == 2) { + canvas.width = 800; + canvas.height = 800; + context = canvas.getContext('2d'); + context.scale(2, 2); + } + // Draw that globe! + globe.draw(canvas); + + // This plugin will automatically rotate the globe around its vertical + // axis a configured number of degrees every second. + function autorotate(degPerSec) { + // Planetary.js plugins are functions that take a `planet` instance + // as an argument... + return function(planet) { + var lastTick = null; + var paused = false; + planet.plugins.autorotate = { + pause: function() { paused = true; }, + resume: function() { paused = false; } + }; + // ...and configure hooks into certain pieces of its lifecycle. + planet.onDraw(function() { + if (paused || !lastTick) { + lastTick = new Date(); + } else { + var now = new Date(); + var delta = now - lastTick; + // This plugin uses the built-in projection (provided by D3) + // to rotate the globe each time we draw it. + var rotation = planet.projection.rotate(); + rotation[0] += degPerSec * delta / 1000; + if (rotation[0] >= 180) rotation[0] -= 360; + planet.projection.rotate(rotation); + lastTick = now; + } + }); + }; + }; +})(); diff --git a/index.html b/index.html index 552af5b..9960b97 100644 --- a/index.html +++ b/index.html @@ -53,9 +53,13 @@
Mouse drag + zoom support
-
+ +
+ +
Extremely extensible via a plugin-based architecture
@@ -77,10 +81,11 @@
+
diff --git a/js/lib/planetaryjs.min.js b/js/lib/planetaryjs.min.js index 2248ce1..f3626f4 100644 --- a/js/lib/planetaryjs.min.js +++ b/js/lib/planetaryjs.min.js @@ -1,2 +1,2 @@ -/*! Planetary.js 0.2.0 | (c) 2013 Brandon Tilley | Released under MIT License */ +/*! Planetary.js 0.2.1 | (c) 2013 Brandon Tilley | Released under MIT License */ !function(n,t){"function"==typeof define&&define.amd?define(["d3","topojson"],t):"object"==typeof exports?module.exports=t(require("d3"),require("topojson")):n.planetaryjs=t(n.d3,n.topojson,n)}(this,function(n,t,o){"use strict";var i=null;o&&(i=o.planetaryjs);var e=[],r=function(t,o,i){n.timer(function(){t.context.clearRect(0,0,o.width,o.height);for(var n=0;n=o.onInit.length?r(n,t,o):e(l)};e(l)}else r(n,t,o)},u=function(n,t,o,i){l(n,o),n.canvas=t,n.context=t.getContext("2d"),a(n,t,i)},c={plugins:{},noConflict:function(){return o.planetaryjs=i,c},loadPlugin:function(n){e.push(n)},planet:function(){var t=[],o={onInit:[],onDraw:[]},i={plugins:{},draw:function(n){u(i,n,t,o)},onInit:function(n){o.onInit.push(n)},onDraw:function(n){o.onDraw.push(n)},loadPlugin:function(n){t.push(n)},withSavedContext:function(n){if(!this.context)throw new Error("No canvas to fetch context for");this.context.save(),n(this.context),this.context.restore()}};return i.projection=n.geo.orthographic().clipAngle(90).precision(0),i.path=n.geo.path().projection(i.projection),i}};return c.plugins.topojson=function(t){return function(o){o.plugins.topojson={},o.onInit(function(i){if(t.world)o.plugins.topojson.world=t.world,setTimeout(i,0);else{var e=t.file||"world-110m.json";n.json(e,function(n,t){if(n)throw new Error("Could not load JSON "+e);o.plugins.topojson.world=t,i()})}})}},c.plugins.oceans=function(n){return function(t){t.onDraw(function(){t.withSavedContext(function(o){o.beginPath(),t.path.context(o)({type:"Sphere"}),o.fillStyle=n.fill||"black",o.fill()})})}},c.plugins.land=function(n){return function(o){var i=null;o.onInit(function(){var n=o.plugins.topojson.world;i=t.feature(n,n.objects.land)}),o.onDraw(function(){o.withSavedContext(function(t){t.beginPath(),o.path.context(t)(i),0!=n.fill&&(t.fillStyle=n.fill||"white",t.fill()),n.stroke&&(n.lineWidth&&(t.lineWidth=n.lineWidth),t.strokeStyle=n.stroke,t.stroke())})})}},c.plugins.borders=function(n){return function(o){var i=null,e={internal:function(n,t){return n.id!==t.id},external:function(n,t){return n.id===t.id},both:function(){return!0}};o.onInit(function(){var r=o.plugins.topojson.world,l=r.objects.countries,a=n.type||"internal";i=t.mesh(r,l,e[a])}),o.onDraw(function(){o.withSavedContext(function(t){t.beginPath(),o.path.context(t)(i),t.strokeStyle=n.stroke||"gray",n.lineWidth&&(t.lineWidth=n.lineWidth),t.stroke()})})}},c.plugins.earth=function(n){var n=n||{},t=n.topojson||{},o=n.oceans||{},i=n.land||{},e=n.borders||{};return function(n){c.plugins.topojson(t)(n),c.plugins.oceans(o)(n),c.plugins.land(i)(n),c.plugins.borders(e)(n)}},c.plugins.pings=function(t){var o=[],i=function(n,i,e){var e=e||{};e.color=e.color||t.color||"white",e.ttl=e.ttl||t.ttl||2e3,e.angle=e.angle||t.angle||5,o.push({lat:n,lng:i,time:new Date,options:e})},e=function(n,t,i){for(var e=[],l=0;l90&&(e[1]=90),e[1]<-90&&(e[1]=-90),e[0]>=180&&(e[0]-=360),t.projection.rotate(e)});n.select(t.canvas).call(o)})}},c}); \ No newline at end of file