Fetch all paginated Mapillary results, cleanup thumbnail selection

js/id/renderer/mapillary_image_layer.js

@@ -8,14 +8,15 @@ iD.MapillaryImageLayer = function(context) {
 
     function showThumbnail(imageKey) {
         var thumb = mapillary.selectedThumbnail();
-        layer.selectAll('g')
+
+        d3.selectAll('.layer-mapillary-images .viewfield-group, .layer-mapillary-signs .icon-sign')
             .classed('selected', function(d) { return d.key === thumb; });
 
         mapillary.showThumbnail(context.container(), imageKey);
     }
 
     function hideThumbnail() {
-        layer.selectAll('g')
+        d3.selectAll('.layer-mapillary-images .viewfield-group, .layer-mapillary-signs .icon-sign')
             .classed('selected', false);
 
         mapillary.hideThumbnail(context.container());
@@ -41,7 +42,7 @@ iD.MapillaryImageLayer = function(context) {
             .each('end', function() {
                 layer
                     .style('display', 'none')
-                    .selectAll('g')
+                    .selectAll('.viewfield-group')
                     .remove();
             });
     }
@@ -74,16 +75,16 @@ iD.MapillaryImageLayer = function(context) {
 
     function drawMarkers() {
         var data = rtree
-                .search(context.map().extent().rectangle())
-                .map(function(d) { return d[4]; });
+            .search(context.map().extent().rectangle())
+            .map(function(d) { return d[4]; });
 
-        var markers = layer.selectAll('g')
+        var markers = layer.selectAll('.viewfield-group')
             .data(data, function(d) { return d.key; });
 
         // Enter
         var enter = markers.enter()
             .append('g')
-            .attr('class', 'image');
+            .attr('class', 'viewfield-group');
 
         enter.append('path')
             .attr('class', 'viewfield')

js/id/renderer/mapillary_sign_layer.js

@@ -8,42 +8,30 @@ iD.MapillarySignLayer = function(context) {
 
     function showThumbnail(imageKey) {
         var thumb = mapillary.selectedThumbnail();
-        layer.selectAll('.icon-sign')
+
+        d3.selectAll('.layer-mapillary-images .viewfield-group, .layer-mapillary-signs .icon-sign')
             .classed('selected', function(d) { return d.key === thumb; });
 
         mapillary.showThumbnail(context.container(), imageKey);
     }
 
     function hideThumbnail() {
-        layer.selectAll('.icon-sign')
+        d3.selectAll('.layer-mapillary-images .viewfield-group, .layer-mapillary-signs .icon-sign')
             .classed('selected', false);
 
         mapillary.hideThumbnail(context.container());
     }
 
     function showLayer() {
-        layer
-            .style('display', 'block')
-            .style('opacity', 0)
-            .transition()
-            .duration(500)
-            .style('opacity', 1)
-            .each('end', debouncedRedraw);
+        layer.style('display', 'block')
+        debouncedRedraw();
     }
 
     function hideLayer() {
         debouncedRedraw.cancel();
         hideThumbnail();
-        layer
-            .transition()
-            .duration(500)
-            .style('opacity', 0)
-            .each('end', function() {
-                layer
-                    .style('display', 'none')
-                    .selectAll('.icon-sign')
-                    .remove();
-            });
+        layer.selectAll('.icon-sign').remove();
+        layer.style('display', 'none');
     }
 
     function signsLoaded(data) {

js/id/services/mapillary.js

@@ -1,12 +1,12 @@
-iD.services.mapillary  = function() {
+iD.services.mapillary = function() {
     var mapillary = {},
         dispatch = d3.dispatch('loadedImages', 'loadedSigns'),
         apibase = 'https://a.mapillary.com/v2/',
         urlImage = 'https://www.mapillary.com/map/im/',
         urlThumb = 'https://d1cuyjsrcm0gby.cloudfront.net/',
         clientId = 'NzNRM2otQkR2SHJzaXJmNmdQWVQ0dzo1ZWYyMmYwNjdmNDdlNmVi',
-        tileZoom = 14,
-        selectedThumbnail;
+        maxResults = 1000,
+        tileZoom = 14;
 
 
     function loadSignDefs(context) {
@@ -54,8 +54,7 @@ iD.services.mapillary  = function() {
 
 
     function loadTiles(which, url, projection, dimensions) {
-        var cache = iD.services.mapillary.cache,
-            tiles = getTiles(projection, dimensions);
+        var tiles = getTiles(projection, dimensions);
 
         _.filter(which.inflight, function(v, k) {
             var wanted = _.find(tiles, function(tile) { return k === tile.id; });
@@ -64,36 +63,45 @@ iD.services.mapillary  = function() {
         }).map(abortRequest);
 
         tiles.forEach(function(tile) {
-            var id = tile.id,
-                rect = tile.extent.rectangle();
-
-            if (which.loaded[id] || which.inflight[id]) return;
-
-            var what = (which === cache.images ? 'images' : 'signs');
-            console.log('requesting ' + what + ' tile ' + id);
-
-            which.inflight[id] = d3.json(url +
-                iD.util.qsString({
-                    geojson: 'true',
-                    client_id: clientId,
-                    min_lon: rect[0],
-                    min_lat: rect[1],
-                    max_lon: rect[2],
-                    max_lat: rect[3]
-                }), function(err, data) {
-                    which.loaded[id] = true;
-                    delete which.inflight[id];
-                    if (err) return;
-
-                    if (which === cache.images)
-                        dispatch.loadedImages(data);
-                    else if (which === cache.signs)
-                        dispatch.loadedSigns(data);
-                }
-            );
+            loadTilePage(which, url, tile, 0);
         });
     }
 
+    function loadTilePage(which, url, tile, page) {
+        var cache = iD.services.mapillary.cache,
+            id = tile.id + ',' + String(page),
+            rect = tile.extent.rectangle();
+
+        if (which.loaded[id] || which.inflight[id]) return;
+
+        which.inflight[id] = d3.json(url +
+            iD.util.qsString({
+                geojson: 'true',
+                limit: maxResults,
+                page: page,
+                client_id: clientId,
+                min_lon: rect[0],
+                min_lat: rect[1],
+                max_lon: rect[2],
+                max_lat: rect[3]
+            }), function(err, data) {
+                which.loaded[id] = true;
+                delete which.inflight[id];
+                if (err) return;
+
+                if (which === cache.images) {
+                    dispatch.loadedImages(data);
+                } else if (which === cache.signs) {
+                    dispatch.loadedSigns(data);
+                }
+
+                if (data.features.length === maxResults) {
+                    loadTilePage(which, url, tile, ++page);
+                }
+            }
+        );
+    }
+
     mapillary.loadImages = function(projection, dimensions) {
         var cache = iD.services.mapillary.cache,
             url = apibase + 'search/im/geojson?';
@@ -158,7 +166,7 @@ iD.services.mapillary  = function() {
     };
 
     mapillary.hideThumbnail = function(selection) {
-        selectedThumbnail = null;
+        iD.services.mapillary.thumb = null;
         selection.selectAll('.mapillary-image')
             .transition()
             .duration(200)
@@ -167,8 +175,8 @@ iD.services.mapillary  = function() {
     };
 
     mapillary.selectedThumbnail = function(imageKey) {
-        if (!arguments.length) return selectedThumbnail;
-        selectedThumbnail = imageKey;
+        if (!arguments.length) return iD.services.mapillary.thumb;
+        iD.services.mapillary.thumb = imageKey;
     };
 
     mapillary.reset = function() {
@@ -184,6 +192,8 @@ iD.services.mapillary  = function() {
             signs:  { inflight: {}, loaded: {}, rbush: rbush() }
         };
 
+        iD.services.mapillary.thumb = null;
+
         return mapillary;
     };