From 14a0b8fdf43751c8789f6e691f4bb828651cbf42 Mon Sep 17 00:00:00 2001 From: Brandon Tilley Date: Mon, 23 Dec 2013 14:15:23 -0800 Subject: [PATCH] Implement basic and rotating globe examples --- site/public/examples/_scripts_basic.ejs | 2 + site/public/examples/_scripts_rotating.ejs | 2 + site/public/examples/basic.ejs | 30 ++++++ site/public/examples/basic.js | 14 +++ site/public/examples/rotating.ejs | 104 +++++++++++++++++++++ site/public/examples/rotating.js | 84 +++++++++++++++++ site/public/index.ejs | 5 +- 7 files changed, 239 insertions(+), 2 deletions(-) create mode 100644 site/public/examples/_scripts_basic.ejs create mode 100644 site/public/examples/_scripts_rotating.ejs create mode 100644 site/public/examples/basic.ejs create mode 100644 site/public/examples/basic.js create mode 100644 site/public/examples/rotating.ejs create mode 100644 site/public/examples/rotating.js diff --git a/site/public/examples/_scripts_basic.ejs b/site/public/examples/_scripts_basic.ejs new file mode 100644 index 0000000..809c551 --- /dev/null +++ b/site/public/examples/_scripts_basic.ejs @@ -0,0 +1,2 @@ +<%- partial('../_scripts') %> + diff --git a/site/public/examples/_scripts_rotating.ejs b/site/public/examples/_scripts_rotating.ejs new file mode 100644 index 0000000..3c5cfbd --- /dev/null +++ b/site/public/examples/_scripts_rotating.ejs @@ -0,0 +1,2 @@ +<%- partial('../_scripts') %> + diff --git a/site/public/examples/basic.ejs b/site/public/examples/basic.ejs new file mode 100644 index 0000000..c744a30 --- /dev/null +++ b/site/public/examples/basic.ejs @@ -0,0 +1,30 @@ +

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);
+})();
+
+ +<%- partial('_scripts_basic') %> diff --git a/site/public/examples/basic.js b/site/public/examples/basic.js new file mode 100644 index 0000000..afe452a --- /dev/null +++ b/site/public/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/site/public/examples/rotating.ejs b/site/public/examples/rotating.ejs new file mode 100644 index 0000000..d4ce6a1 --- /dev/null +++ b/site/public/examples/rotating.ejs @@ -0,0 +1,104 @@ +

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;
+        }
+      });
+    };
+  };
+})();
+
+ +<%- partial('_scripts_rotating') %> diff --git a/site/public/examples/rotating.js b/site/public/examples/rotating.js new file mode 100644 index 0000000..abec7c4 --- /dev/null +++ b/site/public/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/site/public/index.ejs b/site/public/index.ejs index 397b475..480db0c 100644 --- a/site/public/index.ejs +++ b/site/public/index.ejs @@ -40,10 +40,11 @@
+
- View this example's source! + See how to build this example