Implement layer offset nudging. Fixes #292

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;
 }

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 = _;

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());