Implement megazooming

js/id/renderer/background.js

@@ -1,5 +1,6 @@
 iD.Background = function() {
     var tile = d3.geo.tile(),
+        scaleExtent = [0, 20],
         projection, source;
 
     // derive the tiles onscreen, remove those offscreen and position tiles
@@ -9,7 +10,7 @@ iD.Background = function() {
             .scale(projection.scale())
             .translate(projection.translate())(),
             z = Math.max(Math.log(projection.scale()) / Math.log(2) - 8, 0),
-            rz = Math.floor(z),
+            rz = Math.max(scaleExtent[0], Math.min(scaleExtent[1], Math.floor(z))),
             ts = 256 * Math.pow(2, z - rz),
             tile_origin = [
                 projection.scale() / 2 - projection.translate()[0],
@@ -52,6 +53,12 @@ iD.Background = function() {
         return background;
     };
 
+    background.scaleExtent = function(_) {
+        if (!arguments.length) return tile.scaleExtent();
+        tile.scaleExtent(_);
+        return background;
+    };
+
     return background;
 };
 

js/id/renderer/map.js

@@ -10,7 +10,7 @@ iD.Map = function() {
         zoom = d3.behavior.zoom()
             .translate(projection.translate())
             .scale(projection.scale())
-            .scaleExtent([1024, 256 * Math.pow(2, 20)])
+            .scaleExtent([1024, 256 * Math.pow(2, 24)])
             .on('zoom', zoomPan),
         only,
         dblclickEnabled = true,
@@ -87,7 +87,8 @@ iD.Map = function() {
         getline = function(d) { return d._line; },
         key = function(d) { return d.id; },
         background = iD.Background()
-            .projection(projection),
+            .projection(projection)
+            .scaleExtent([0, 20]),
         class_stroke = iD.Style.styleClasses('stroke'),
         class_fill = iD.Style.styleClasses('stroke'),
         class_area = iD.Style.styleClasses('area'),

js/lib/d3.geo.tile.js

@@ -1,11 +1,16 @@
 d3.geo.tile = function() {
   var size = [960, 500],
       scale = 256,
+      scaleExtent = [0, 20],
       translate = [size[0] / 2, size[1] / 2];
 
+  function bound(_) {
+      return Math.min(scaleExtent[1], Math.max(scaleExtent[0], _));
+  }
+
   function tile() {
     var z = Math.max(Math.log(scale) / Math.LN2 - 8, 0),
-        z0 = z | 0,
+        z0 = bound(z | 0),
         k = Math.pow(2, z - z0 + 8),
         origin = [(translate[0] - scale / 2) / k, (translate[1] - scale / 2) / k],
         tiles = [],
@@ -24,6 +29,12 @@ d3.geo.tile = function() {
     return tiles;
   }
 
+  tile.scaleExtent = function(_) {
+    if (!arguments.length) return scaleExtent;
+    scaleExtent = _;
+    return tile;
+  };
+
   tile.size = function(_) {
     if (!arguments.length) return size;
     size = _;