Add centerZoom to center and zoom the map with one redraw. Fixes #416

Also throttles redraw and make hash track the map faster.

js/id/id.js

@@ -209,8 +209,7 @@ window.iD = function(container) {
         var hash = iD.Hash().map(map);
 
         if (!hash.hadHash) {
-            map.zoom(20)
-                .center([-77.02271,38.90085]);
+            map.centerZoom([-77.02271, 38.90085], 20);
         }
 
         d3.select('.user-container').call(iD.ui.userpanel(connection)

js/id/renderer/hash.js

@@ -1,5 +1,5 @@
 iD.Hash = function() {
-    var hash = {},
+    var hash = { hadHash: false },
         s0, // cached location.hash
         lat = 90 - 1e-8, // allowable latitude range
         map;
@@ -10,8 +10,9 @@ iD.Hash = function() {
         if (args.length < 3 || args.some(isNaN)) {
             return true; // replace bogus hash
         } else {
-            map.zoom(args[0])
-                .center([args[2], Math.min(lat, Math.max(-lat, args[1]))]);
+            map.centerZoom([args[2],
+                Math.min(lat, Math.max(-lat, args[1]))],
+                args[0]);
         }
     };
 
@@ -27,12 +28,13 @@ iD.Hash = function() {
     var move = _.throttle(function() {
         var s1 = formatter(map);
         if (s0 !== s1) location.replace(s0 = s1); // don't recenter the map!
-    }, 1000);
+    }, 100);
 
     function hashchange() {
         if (location.hash === s0) return; // ignore spurious hashchange events
-        if (parser(map, (s0 = location.hash).substring(2)))
+        if (parser(map, (s0 = location.hash).substring(2))) {
             move(); // replace bogus hash
+        }
     }
 
     hash.map = function(x) {

js/id/renderer/map.js

@@ -161,7 +161,7 @@ iD.Map = function() {
         redraw();
     }
 
-    function redraw(difference) {
+    var redraw = _.throttle(function(difference) {
         dispatch.move(map);
         surface.attr('data-zoom', ~~map.zoom());
         tilegroup.call(background);
@@ -172,7 +172,7 @@ iD.Map = function() {
             editOff();
         }
         return map;
-    }
+    }, 10);
 
     function pointLocation(p) {
         var translate = projection.translate(),
@@ -207,10 +207,7 @@ iD.Map = function() {
         return map;
     };
 
-    map.zoom = function(z) {
-        if (!arguments.length) {
-            return Math.max(Math.log(projection.scale()) / Math.LN2 - 8, 0);
-        }
+    function setZoom(z) {
         var scale = 256 * Math.pow(2, z),
             center = pxCenter(),
             l = pointLocation(center);
@@ -223,8 +220,17 @@ iD.Map = function() {
         t[1] += center[1] - l[1];
         projection.translate(t);
         zoom.translate(projection.translate());
-        return redraw();
-    };
+    }
+
+    function setCenter(loc) {
+        var t = projection.translate(),
+            c = pxCenter(),
+            ll = projection(loc);
+        projection.translate([
+            t[0] - ll[0] + c[0],
+            t[1] - ll[1] + c[1]]);
+        zoom.translate(projection.translate());
+    }
 
     map.size = function(_) {
         if (!arguments.length) return dimensions;
@@ -244,17 +250,25 @@ iD.Map = function() {
         if (!arguments.length) {
             return projection.invert(pxCenter());
         } else {
-            var t = projection.translate(),
-                c = pxCenter(),
-                ll = projection(loc);
-            projection.translate([
-                t[0] - ll[0] + c[0],
-                t[1] - ll[1] + c[1]]);
-            zoom.translate(projection.translate());
+            setCenter(loc);
             return redraw();
         }
     };
 
+    map.zoom = function(z) {
+        if (!arguments.length) {
+            return Math.max(Math.log(projection.scale()) / Math.LN2 - 8, 0);
+        }
+        setZoom(z);
+        return redraw();
+    };
+
+    map.centerZoom = function(loc, z) {
+        setCenter(loc);
+        setZoom(z);
+        return redraw();
+    };
+
     map.centerEase = function(loc) {
         var from = map.center().slice(), t = 0;
         d3.timer(function() {
@@ -279,7 +293,7 @@ iD.Map = function() {
                 vZoomDiff = Math.log(Math.abs(vFactor)) / Math.LN2,
                 newZoom = map.zoom() - Math.max(hZoomDiff, vZoomDiff);
 
-            map.zoom(newZoom).center(extent.center());
+            map.centerZoom(extent.center(), newZoom);
         }
     };