diff --git a/js/id/renderer/mapillary_image_layer.js b/js/id/renderer/mapillary_image_layer.js index 60571c32f..2e172a6e7 100644 --- a/js/id/renderer/mapillary_image_layer.js +++ b/js/id/renderer/mapillary_image_layer.js @@ -1,8 +1,8 @@ iD.MapillaryImageLayer = function(context) { var mapillary = iD.services.mapillary(), debouncedRedraw = _.debounce(function () { context.pan([0,0]); }, 1000), - rtree = rbush(), enabled = false, + minZoom = 12, layer; @@ -23,8 +23,8 @@ iD.MapillaryImageLayer = function(context) { } function showLayer() { + editOn(); layer - .style('display', 'block') .style('opacity', 0) .transition() .duration(500) @@ -39,12 +39,16 @@ iD.MapillaryImageLayer = function(context) { .transition() .duration(500) .style('opacity', 0) - .each('end', function() { - layer - .style('display', 'none') - .selectAll('.viewfield-group') - .remove(); - }); + .each('end', editOff); + } + + function editOn() { + layer.style('display', 'block'); + } + + function editOff() { + layer.selectAll('.viewfield-group').remove(); + layer.style('display', 'none'); } function transform(d) { @@ -53,30 +57,8 @@ iD.MapillaryImageLayer = function(context) { return t; } - function imagesLoaded(data) { - if (!data.features.length) return; - - var images = [], - image, loc; - - for (var i = 0; i < data.features.length; i++) { - image = data.features[i]; - loc = image.geometry.coordinates; - images.push([loc[0], loc[1], loc[0], loc[1], { - key: image.properties.key, - ca: image.properties.ca, - loc: loc - }]); - } - - rtree.load(images); - debouncedRedraw(); - } - function drawMarkers() { - var data = rtree - .search(context.map().extent().rectangle()) - .map(function(d) { return d[4]; }); + var data = mapillary.images(context.map().extent()); var markers = layer.selectAll('.viewfield-group') .data(data, function(d) { return d.key; }); @@ -105,7 +87,6 @@ iD.MapillaryImageLayer = function(context) { .remove(); } - function render(selection) { layer = selection.selectAll('svg') .data([0]); @@ -137,8 +118,13 @@ iD.MapillaryImageLayer = function(context) { }); if (enabled) { - drawMarkers(); - mapillary.loadImages(context.projection, layer.dimensions()); + if (~~context.map().zoom() < minZoom) { + editOff(); + } else { + editOn(); + drawMarkers(); + mapillary.loadImages(context.projection, layer.dimensions()); + } } } @@ -161,7 +147,7 @@ iD.MapillaryImageLayer = function(context) { mapillary - .on('loadedImages', imagesLoaded); + .on('loadedImages', debouncedRedraw); return render; }; diff --git a/js/id/renderer/mapillary_sign_layer.js b/js/id/renderer/mapillary_sign_layer.js index 52b649bc5..739f17c35 100644 --- a/js/id/renderer/mapillary_sign_layer.js +++ b/js/id/renderer/mapillary_sign_layer.js @@ -1,8 +1,8 @@ iD.MapillarySignLayer = function(context) { var mapillary = iD.services.mapillary(), debouncedRedraw = _.debounce(function () { context.pan([0,0]); }, 1000), - rtree = rbush(), enabled = false, + minZoom = 12, layer; @@ -23,41 +23,27 @@ iD.MapillarySignLayer = function(context) { } function showLayer() { - layer.style('display', 'block'); + editOn(); debouncedRedraw(); } function hideLayer() { debouncedRedraw.cancel(); hideThumbnail(); + editOff(); + } + + function editOn() { + layer.style('display', 'block'); + } + + function editOff() { layer.selectAll('.icon-sign').remove(); layer.style('display', 'none'); } - function signsLoaded(data) { - if (!data.features.length) return; - - var signs = [], - sign, loc; - - for (var i = 0; i < data.features.length; i++) { - sign = data.features[i]; - loc = sign.geometry.coordinates; - signs.push([loc[0], loc[1], loc[0], loc[1], { - key: sign.properties.key, - signs: sign.properties.rects, - loc: loc - }]); - } - - rtree.load(signs); - debouncedRedraw(); - } - function drawSigns() { - var data = rtree - .search(context.map().extent().rectangle()) - .map(function(d) { return d[4]; }); + var data = mapillary.signs(context.map().extent()); var signs = layer.select('.mapillary-sign-offset') .selectAll('.icon-sign') @@ -117,8 +103,13 @@ iD.MapillarySignLayer = function(context) { .attr('transform', 'translate(-16, -16)'); // center signs on loc if (enabled) { - drawSigns(); - mapillary.loadSigns(context, context.projection, layer.dimensions()); + if (~~context.map().zoom() < minZoom) { + hideLayer(); + } else { + layer.style('display', 'block'); + drawSigns(); + mapillary.loadSigns(context, context.projection, layer.dimensions()); + } } } @@ -141,7 +132,7 @@ iD.MapillarySignLayer = function(context) { mapillary - .on('loadedSigns', signsLoaded); + .on('loadedSigns', debouncedRedraw); return render; }; diff --git a/js/id/services/mapillary.js b/js/id/services/mapillary.js index ee0fbbc78..9ebca7153 100644 --- a/js/id/services/mapillary.js +++ b/js/id/services/mapillary.js @@ -57,7 +57,7 @@ iD.services.mapillary = function() { var tiles = getTiles(projection, dimensions); _.filter(which.inflight, function(v, k) { - var wanted = _.find(tiles, function(tile) { return k === tile.id; }); + var wanted = _.find(tiles, function(tile) { return k === (tile.id + ',0'); }); if (!wanted) delete which.inflight[k]; return !wanted; }).map(abortRequest); @@ -68,13 +68,13 @@ iD.services.mapillary = function() { } function loadTilePage(which, url, tile, page) { - var cache = iD.services.mapillary.cache, + var cache = iD.services.mapillary.cache[which], id = tile.id + ',' + String(page), rect = tile.extent.rectangle(); - if (which.loaded[id] || which.inflight[id]) return; + if (cache.loaded[id] || cache.inflight[id]) return; - which.inflight[id] = d3.json(url + + cache.inflight[id] = d3.json(url + iD.util.qsString({ geojson: 'true', limit: maxResults, @@ -85,16 +85,28 @@ iD.services.mapillary = function() { max_lon: rect[2], max_lat: rect[3] }), function(err, data) { - which.loaded[id] = true; - delete which.inflight[id]; - if (err) return; + cache.loaded[id] = true; + delete cache.inflight[id]; + if (err || !data.features || !data.features.length) return; - if (which === cache.images) { - dispatch.loadedImages(data); - } else if (which === cache.signs) { - dispatch.loadedSigns(data); + var features = [], + feature, loc, d; + + for (var i = 0; i < data.features.length; i++) { + feature = data.features[i]; + loc = feature.geometry.coordinates; + d = { key: feature.properties.key, loc: loc }; + if (which === 'images') d.ca = feature.properties.ca; + if (which === 'signs') d.signs = feature.properties.rects; + + features.push([loc[0], loc[1], loc[0], loc[1], d]); } + cache.rtree.load(features); + + if (which === 'images') dispatch.loadedImages(); + if (which === 'signs') dispatch.loadedSigns(); + if (data.features.length === maxResults) { loadTilePage(which, url, tile, ++page); } @@ -103,17 +115,26 @@ iD.services.mapillary = function() { } mapillary.loadImages = function(projection, dimensions) { - var cache = iD.services.mapillary.cache, - url = apibase + 'search/im/geojson?'; - loadTiles(cache.images, url, projection, dimensions); + var url = apibase + 'search/im/geojson?'; + loadTiles('images', url, projection, dimensions); }; mapillary.loadSigns = function(context, projection, dimensions) { - var cache = iD.services.mapillary.cache, - url = apibase + 'search/im/geojson/or?'; - + var url = apibase + 'search/im/geojson/or?'; loadSignDefs(context); - loadTiles(cache.signs, url, projection, dimensions); + 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]; }); + }; + + mapillary.signs = function(extent) { + return iD.services.mapillary.cache.signs.rtree + .search(extent.rectangle()) + .map(function(d) { return d[4]; }); }; mapillary.signHTML = function(d) { @@ -188,8 +209,8 @@ iD.services.mapillary = function() { } iD.services.mapillary.cache = { - images: { inflight: {}, loaded: {}, rbush: rbush() }, - signs: { inflight: {}, loaded: {}, rbush: rbush() } + images: { inflight: {}, loaded: {}, rtree: rbush() }, + signs: { inflight: {}, loaded: {}, rtree: rbush() } }; iD.services.mapillary.thumb = null; @@ -204,4 +225,3 @@ iD.services.mapillary = function() { return d3.rebind(mapillary, dispatch, 'on'); }; -