Partition viewport into regions and cull visible mapillary data

This is awesome because it allows mappers to see a subset of the data
at low zoom, but they get more of it as they zoom in.

js/id/renderer/mapillary_image_layer.js

@@ -58,7 +58,7 @@ iD.MapillaryImageLayer = function(context) {
     }
 
     function drawMarkers() {
-        var data = mapillary.images(context.map().extent());
+        var data = mapillary.images(context);
 
         var markers = layer.selectAll('.viewfield-group')
             .data(data, function(d) { return d.key; });

js/id/renderer/mapillary_sign_layer.js

@@ -43,7 +43,7 @@ iD.MapillarySignLayer = function(context) {
     }
 
     function drawSigns() {
-        var data = mapillary.signs(context.map().extent());
+        var data = mapillary.signs(context);
 
         var signs = layer.select('.mapillary-sign-offset')
             .selectAll('.icon-sign')

js/id/services/mapillary.js

@@ -125,16 +125,48 @@ iD.services.mapillary = function() {
         loadTiles('signs', url, projection, dimensions);
     };
 
-    mapillary.images = function(extent) {
-        return iD.services.mapillary.cache.images.rtree
-            .search(extent.rectangle())
-            .map(function(d) { return d[4]; });
+
+    // partition viewport into `psize` x `psize` regions
+    function partitionViewport(psize, context) {
+        psize = psize || 16;
+        var projection = context.projection,
+            dimensions = context.map().dimensions(),
+            cols = d3.range(0, dimensions[0], psize),
+            rows = d3.range(0, dimensions[1], psize),
+            partitions = [];
+
+        rows.forEach(function(y) {
+            cols.forEach(function(x) {
+                var min = [x, y + psize],
+                    max = [x + psize, y];
+                partitions.push(
+                    iD.geo.Extent(projection.invert(min), projection.invert(max)));
+            });
+        });
+
+        return partitions;
+    }
+
+    // no more than `limit` results per partition.
+    function searchLimited(psize, limit, context, rtree) {
+        limit = limit || 3;
+
+        var partitions = partitionViewport(psize, context);
+        return _.flatten(_.compact(_.map(partitions, function(extent) {
+            return rtree.search(extent.rectangle())
+                .slice(0, limit)
+                .map(function(d) { return d[4]; });
+        })));
+    }
+
+    mapillary.images = function(context) {
+        var psize = 16, limit = 3;
+        return searchLimited(psize, limit, context, iD.services.mapillary.cache.images.rtree);
     };
 
-    mapillary.signs = function(extent) {
-        return iD.services.mapillary.cache.signs.rtree
-            .search(extent.rectangle())
-            .map(function(d) { return d[4]; });
+    mapillary.signs = function(context) {
+        var psize = 32, limit = 3;
+        return searchLimited(psize, limit, context, iD.services.mapillary.cache.signs.rtree);
     };
 
     mapillary.signHTML = function(d) {