diff --git a/js/id/renderer/mapillary_image_layer.js b/js/id/renderer/mapillary_image_layer.js index 4272a49c2..ee5876e15 100644 --- a/js/id/renderer/mapillary_image_layer.js +++ b/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') diff --git a/js/id/renderer/mapillary_sign_layer.js b/js/id/renderer/mapillary_sign_layer.js index fb1473cbf..adfcd5fc5 100644 --- a/js/id/renderer/mapillary_sign_layer.js +++ b/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) { diff --git a/js/id/services/mapillary.js b/js/id/services/mapillary.js index 599acbc2c..ee0fbbc78 100644 --- a/js/id/services/mapillary.js +++ b/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; };