From fdc64c232a63e206f1c2b1c5786ceff5f66e4dd7 Mon Sep 17 00:00:00 2001
From: Tom MacWright <tom@macwright.org>
Date: Fri, 4 Jan 2013 17:35:26 -0500
Subject: [PATCH] Implement layer offset nudging. Fixes #292

---
 css/app.css                  | 24 ++++++++++++++++++++++++
 js/id/renderer/background.js | 17 +++++++++++++++--
 js/id/ui/layerswitcher.js    | 30 ++++++++++++++++++++++++++++++
 3 files changed, 69 insertions(+), 2 deletions(-)

diff --git a/css/app.css b/css/app.css
index c960d5ddb..e7f5d9466 100644
--- a/css/app.css
+++ b/css/app.css
@@ -599,6 +599,30 @@ button.Browse .label {
     top:210px;
 }
 
+.layerswitcher-control .adjustments {
+    padding:5px;
+    opacity:0.2;
+}
+
+.layerswitcher-control .adjustments:hover {
+    opacity:1;
+}
+
+.layerswitcher-control .adjustments .reset {
+    height:20px;
+    font-size:10px;
+    font-weight:normal;
+    padding:0 5px;
+}
+
+.layerswitcher-control .nudge {
+    height:20px;
+    width:20px;
+    font-size:10px;
+    margin-right:2px;
+    font-weight:normal;
+}
+
 .opacity-options-wrapper {
     padding: 10px 10px 0 10px;
 }
diff --git a/js/id/renderer/background.js b/js/id/renderer/background.js
index 27b1942ab..6d7ac3d92 100644
--- a/js/id/renderer/background.js
+++ b/js/id/renderer/background.js
@@ -2,6 +2,7 @@ iD.Background = function() {
     var tile = d3.geo.tile(),
         projection,
         cache = {},
+        offset = [0, 0];
         transformProp = iD.util.prefixCSSProperty('Transform'),
         source = d3.functor('');
 
@@ -90,13 +91,25 @@ iD.Background = function() {
             var _ts = 256 * Math.pow(2, z - d[2]);
             var scale = tileSize(d, z);
             return 'translate(' +
-                Math.round((d[0] * _ts) - tile_origin[0]) + 'px,' +
-                Math.round((d[1] * _ts) - tile_origin[1]) + 'px) scale(' + scale + ',' + scale + ')';
+                (Math.round((d[0] * _ts) - tile_origin[0]) + offset[0]) + 'px,' +
+                (Math.round((d[1] * _ts) - tile_origin[1]) + offset[1]) + 'px) scale(' + scale + ',' + scale + ')';
         });
 
         if (Object.keys(cache).length > 100) cache = {};
     }
 
+    background.offset = function(_) {
+        if (!arguments.length) return offset;
+        offset = _;
+        return background;
+    };
+
+    background.nudge = function(_) {
+        offset[0] += _[0];
+        offset[1] += _[1];
+        return background;
+    };
+
     background.projection = function(_) {
         if (!arguments.length) return projection;
         projection = _;
diff --git a/js/id/ui/layerswitcher.js b/js/id/ui/layerswitcher.js
index bd4479c01..94d4956d9 100644
--- a/js/id/ui/layerswitcher.js
+++ b/js/id/ui/layerswitcher.js
@@ -125,6 +125,36 @@ iD.layerswitcher = function(map) {
                     .insert('span')
                     .attr('class','icon toggle');
 
+        var adjustments = content
+            .append('div')
+            .attr('class', 'adjustments');
+
+        var directions = [
+            ['←', [-1, 0]],
+            ['↑', [0, -1]],
+            ['→', [1, 0]],
+            ['↓', [0, 1]]];
+
+        function nudge(d) {
+            map.background.nudge(d[1]);
+            map.redraw();
+        }
+
+        adjustments.selectAll('button')
+            .data(directions).enter()
+            .append('button')
+            .attr('class', 'nudge')
+            .text(function(d) { return d[0]; })
+            .on('click', nudge);
+
+        adjustments.append('button')
+            .text('reset')
+            .attr('class', 'reset')
+            .on('click', function() {
+                map.background.offset([0, 0]);
+                map.redraw();
+            });
+
 
         selection.call(clickoutside);
         selectLayer(map.background.source());