Drag Plugin
-
This plugin is not yet impelemented.
+
The drag plugin allows for modifying the planet's projection's rotation with the mouse wheel. It supports dragging vertically with hard stops at the north and south poles, and dragging horizontally without restriction.
+
API
+
planetaryjs.plugins.drag([config])
+
Valid keys for config are:
+
+onDrag, onDragStart, onDragEnd: hooks to the d3.behavior.drag object's drag, dragstart, and dragend events; each defaults to a no-op
+
+
JavaScript
+
+
planetaryjs.plugins.drag({
+ onDrag: function() {
+ console.log("The planet was dragged!", d3.event);
+ }
+});
+
diff --git a/documentation/builtin_zoom.html b/documentation/builtin_zoom.html
index 3310c2a..bca3160 100644
--- a/documentation/builtin_zoom.html
+++ b/documentation/builtin_zoom.html
@@ -80,7 +80,25 @@
Zoom Plugin
-
This plugin is not yet impelemented.
+
The zoom plugin allows for modifying the planet's projection's scale with the mouse wheel.
+
API
+
planetaryjs.plugins.zoom([config])
+
Valid keys for config are:
+
+initialScale: the value to initialize the d3.behavior.zoom object's scale to; defaults to the scale of the planet's projection at the time the planet is initializedscaleExtent: the value to use for the d3.behavior.zoom object's scaleExtent property, which defines how far in and out the planet can be zoomed; defaults to [50, 2000]onZoom, onZoomStart, onZoomEnd: hooks to the d3.behavior.zoom object's zoom, zoomstart, and zoomend events; each defaults to a no-op
+
+
JavaScript
+
+
planetaryjs.plugins.zoom({
+ scaleExtent: [200, 1000],
+ onZoom: function() {
+ console.log("The planet was zoomed!", d3.event);
+ }
+});
+
diff --git a/js/homepage.js b/js/homepage.js
index b313bf1..b0a490f 100644
--- a/js/homepage.js
+++ b/js/homepage.js
@@ -12,6 +12,21 @@
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]);
@@ -43,9 +58,14 @@
// 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 (!lastTick) {
+ if (paused || !lastTick) {
lastTick = new Date();
} else {
var now = new Date();
diff --git a/js/lib/planetaryjs.min.js b/js/lib/planetaryjs.min.js
index bbbbd47..2248ce1 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 */
-!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