diff --git a/css/60_mapillary.css b/css/60_mapillary.css index 578e96a9b..2910342e1 100644 --- a/css/60_mapillary.css +++ b/css/60_mapillary.css @@ -46,9 +46,9 @@ .layer-mapillary-signs .icon-sign .icon-sign-body { min-width: 20px; - height: 28px; - width: 28px; - border: 2px solid transparent; + height: 24px; + width: 24px; + outline: 2px solid transparent; pointer-events: visible; cursor: pointer; /* Opera */ cursor: url(img/cursor-select-mapillary.png) 6 1, pointer; /* FF */ @@ -57,21 +57,24 @@ } .layer-mapillary-signs .icon-sign:hover .icon-sign-body { - border: 2px solid rgba(255,198,0,0.8); + outline: 2px solid rgba(255,198,0,0.8); z-index: 80; - } +} .layer-mapillary-signs .icon-sign.selected .icon-sign-body { - border: 2px solid rgba(255,0,0,0.8); - z-index: 80; - } - -.layer-mapillary-signs .icon-sign .t { - font-size: 28px; - z-index: 70; -} - -.layer-mapillary-signs .icon-sign:hover .t, -.layer-mapillary-signs .icon-sign.selected .t { + outline: 2px solid rgba(255,0,0,0.8); z-index: 80; } + + +/* Mapillary viewer */ +#mly .domRenderer .TagSymbol { + font-size: 12px; + background-color: rgba(0, 0, 0, 0.4); + padding: 0 4px; + border-radius: 4px; + transform: translate(-50%, -120%) !important; +} + + + diff --git a/modules/services/mapillary.js b/modules/services/mapillary.js index 34f814fa2..846e0504e 100644 --- a/modules/services/mapillary.js +++ b/modules/services/mapillary.js @@ -128,30 +128,58 @@ function loadNextTilePage(which, currZoom, url, tile) { cache.nextURL[tile.id] = pagination.next; } } - - return JSON.parse(xhr.responseText); }) + return JSON.parse(xhr.responseText); + }) .get(function(err, data) { cache.loaded[id] = true; delete cache.inflight[id]; if (err || !data.features || !data.features.length) return; - var features = [], - feature, loc, d; + var features = data.features.map(function(feature) { + var loc = feature.geometry.coordinates, + 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, key: feature.properties.key, loc: loc }; - if (which === 'signs') d = { key: feature.properties.detections[0].image_key, loc: loc, value: feature.properties.value }; + if (which === 'images') { + d = { + loc: loc, + ca: feature.properties.ca, + key: feature.properties.key + }; + } else if (which === 'objects') { + d = { + loc: loc, + key: feature.properties.key, + value: feature.properties.value, + package: feature.properties.package, + detections: feature.properties.detections + }; - features.push({minX: loc[0], minY: loc[1], maxX: loc[0], maxY: loc[1], data: d}); - } + // cache image_key -> detection_key + feature.properties.detections.forEach(function(detection) { + var ik = detection.image_key; + var dk = detection.detection_key; + if (!mapillaryCache.detections[ik]) { + mapillaryCache.detections[ik] = {}; + } + if (!mapillaryCache.detections[ik][dk]) { + mapillaryCache.detections[ik][dk] = {}; + } + }); + } + + return { + minX: loc[0], minY: loc[1], maxX: loc[0], maxY: loc[1], data: d + }; + }); cache.rtree.load(features); - if (which === 'images') dispatch.call('loadedImages'); - if (which === 'signs') dispatch.call('loadedSigns'); + if (which === 'images') { + dispatch.call('loadedImages'); + } else if (which === 'objects') { + dispatch.call('loadedSigns'); + } + if (data.features.length === maxResults) { // more pages to load cache.nextPage[tile.id] = nextPage + 1; loadNextTilePage(which, currZoom, url, tile); @@ -232,14 +260,15 @@ export default { if (cache.images && cache.images.inflight) { _.forEach(cache.images.inflight, abortRequest); } - if (cache.signs && cache.signs.inflight) { - _.forEach(cache.signs.inflight, abortRequest); + if (cache.objects && cache.objects.inflight) { + _.forEach(cache.objects.inflight, abortRequest); } } mapillaryCache = { images: { inflight: {}, loaded: {}, nextPage: {}, nextURL: {}, rtree: rbush() }, - signs: { inflight: {}, loaded: {}, nextPage: {}, nextURL: {}, rtree: rbush() } + objects: { inflight: {}, loaded: {}, nextPage: {}, nextURL: {}, rtree: rbush() }, + detections: {} }; mapillaryImage = null; @@ -255,7 +284,7 @@ export default { signs: function(projection) { var psize = 32, limit = 3; - return searchLimited(psize, limit, projection, mapillaryCache.signs.rtree); + return searchLimited(psize, limit, projection, mapillaryCache.objects.rtree); }, @@ -292,7 +321,7 @@ export default { loadSigns: function(context, projection) { var url = apibase + 'objects?'; - loadTiles('signs', url, projection); + loadTiles('objects', url, projection); // load traffic sign defs if (!mapillarySignDefs) { @@ -398,7 +427,8 @@ export default { baseImageSize: 320, component: { cover: false, - keyboard: false + keyboard: false, + tag: true } }; @@ -407,6 +437,8 @@ export default { } function nodeChanged(node) { + mapillaryViewer.getComponent('tag').removeAll(); // remove previous detections + var clicks = mapillaryClicks; var index = clicks.indexOf(node.key); if (index > -1) { // nodechange initiated from clicking on a marker.. @@ -422,19 +454,121 @@ export default { selectedImage: function(imageKey, fromClick) { if (!arguments.length) return mapillaryImage; - mapillaryImage = imageKey; + if (fromClick) { mapillaryClicks.push(imageKey); } - d3.selectAll('.layer-mapillary-images .viewfield-group, .layer-mapillary-signs .icon-sign') - .classed('selected', function(d) { return d.key === imageKey; }); + d3.selectAll('.layer-mapillary-images .viewfield-group') + .classed('selected', function(d) { + return d.key === imageKey; + }); + d3.selectAll('.layer-mapillary-signs .icon-sign') + .classed('selected', function(d) { + return _.some(d.detections, function(detection) { + return detection.image_key === imageKey; + }); + }); + + this.updateDetections(); return this; }, + updateDetections: function() { + if (!mapillaryViewer) return; + + var detections = mapillaryCache.detections[mapillaryImage]; + _.each(detections, function(data, k) { + if (_.isEmpty(data)) { + loadDetection(k); + } else { + var tag = makeTag(data); + if (tag) { + var tagComponent = mapillaryViewer.getComponent('tag'); + tagComponent.add([tag]); + } + } + }); + + + function loadDetection(detectionKey) { + var url = apibase + 'detections/'+ + detectionKey + '?' + utilQsString({ + client_id: clientId, + }); + + d3.request(url) + .mimeType('application/json') + .response(function(xhr) { + return JSON.parse(xhr.responseText); + }) + .get(function(err, data) { + if (!data || !data.properties) return; + + var ik = data.properties.image_key; + mapillaryCache.detections[ik][detectionKey] = data; + + if (mapillaryImage === ik) { + var tag = makeTag(data); + if (tag) { + var tagComponent = mapillaryViewer.getComponent('tag'); + tagComponent.add([tag]); + } + } + }); + } + + + function makeTag(data) { + var valueParts = data.properties.value.split('--'); + if (valueParts.length !== 3) return; + + var text = valueParts[1].replace(/-/g, ' '); + var tag; + + // Currently only two shapes + if (data.properties.shape.type === 'Polygon') { + var polygonGeometry = new Mapillary + .TagComponent + .PolygonGeometry(data.properties.shape.coordinates[0]); + + tag = new Mapillary.TagComponent.OutlineTag( + data.properties.key, + polygonGeometry, + { + text: text, + textColor: 0xffff00, + lineColor: 0xffff00, + lineWidth: 2, + fillColor: 0xffff00, + fillOpacity: 0.3, + } + ); + + } else if (data.properties.shape.type === 'Point') { + var pointGeometry = new Mapillary + .TagComponent + .PointGeometry(data.properties.shape.coordinates[0]); + + tag = new Mapillary.TagComponent.SpotTag( + data.properties.key, + pointGeometry, + { + text: text, + color: 0xffff00, + textColor: 0xffff00 + } + ); + } + + return tag; + } + }, + + cache: function(_) { if (!arguments.length) return mapillaryCache; mapillaryCache = _; diff --git a/modules/svg/mapillary_signs.js b/modules/svg/mapillary_signs.js index 0ff746055..77b1b1ef2 100644 --- a/modules/svg/mapillary_signs.js +++ b/modules/svg/mapillary_signs.js @@ -56,9 +56,20 @@ export function svgMapillarySigns(projection, context, dispatch) { context.map().centerEase(d.loc); + var selected = mapillary.selectedImage(), + imageKey; + + // Pick one of the images the sign was detected in, + // preference given to an image already selected. + d.detections.forEach(function(detection) { + if (!imageKey || selected === detection.image_key) { + imageKey = detection.image_key; + } + }); + mapillary - .selectedImage(d.key, true) - .updateViewer(d.key, context) + .selectedImage(imageKey, true) + .updateViewer(imageKey, context) .showViewer(); } @@ -77,9 +88,13 @@ export function svgMapillarySigns(projection, context, dispatch) { var enter = signs.enter() .append('foreignObject') .attr('class', 'icon-sign') - .attr('width', '32px') // for Firefox - .attr('height', '32px') // for Firefox - .classed('selected', function(d) { return d.key === imageKey; }) + .attr('width', '24px') // for Firefox + .attr('height', '24px') // for Firefox + .classed('selected', function(d) { + return _.some(d.detections, function(detection) { + return detection.image_key === imageKey; + }); + }) .on('click', click); enter @@ -89,8 +104,8 @@ export function svgMapillarySigns(projection, context, dispatch) { signs .merge(enter) - .attr('x', function(d) { return projection(d.loc)[0] - 16; }) // offset by -16px to - .attr('y', function(d) { return projection(d.loc)[1] - 16; }); // center signs on loc + .attr('x', function(d) { return projection(d.loc)[0] - 12; }) // offset by -12px to + .attr('y', function(d) { return projection(d.loc)[1] - 12; }); // center signs on loc } diff --git a/test/spec/services/mapillary.js b/test/spec/services/mapillary.js index bc5752161..0bf7b7f39 100644 --- a/test/spec/services/mapillary.js +++ b/test/spec/services/mapillary.js @@ -45,7 +45,8 @@ describe('iD.serviceMapillary', function() { it('Initializes cache one time', function() { var cache = mapillary.cache(); expect(cache).to.have.property('images'); - expect(cache).to.have.property('signs'); + expect(cache).to.have.property('objects'); + expect(cache).to.have.property('detections'); mapillary.init(); var cache2 = mapillary.cache(); @@ -226,7 +227,7 @@ describe('iD.serviceMapillary', function() { mapillary.loadSigns(context, context.projection); var rects = [{ - 'package': 'trafficsign_us_3.0', + package: 'trafficsign', rect: [ 0.805, 0.463, 0.833, 0.502 ], length: 4, score: '1.27', @@ -301,45 +302,39 @@ describe('iD.serviceMapillary', function() { describe('#signs', function() { it('returns signs in the visible map area', function() { - var signs = [{ - 'package': 'trafficsign_us_3.0', - rect: [ 0.805, 0.463, 0.833, 0.502 ], - length: 4, - score: '1.27', - type: 'regulatory--maximum-speed-limit-65--us' + var detections = [{ + detection_key: '78vqha63gs1upg15s823qckcmn', + image_key: 'bwYs-uXLDvm_meo_EC5Nzw' }], features = [ - { minX: 10, minY: 0, maxX: 10, maxY: 0, data: { key: '0', loc: [10,0], signs: signs } }, - { minX: 10, minY: 0, maxX: 10, maxY: 0, data: { key: '1', loc: [10,0], signs: signs } }, - { minX: 10, minY: 1, maxX: 10, maxY: 1, data: { key: '2', loc: [10,1], signs: signs } } + { minX: 10, minY: 0, maxX: 10, maxY: 0, data: { key: '0', loc: [10,0], detections: detections } }, + { minX: 10, minY: 0, maxX: 10, maxY: 0, data: { key: '1', loc: [10,0], detections: detections } }, + { minX: 10, minY: 1, maxX: 10, maxY: 1, data: { key: '2', loc: [10,1], detections: detections } } ]; - mapillary.cache().signs.rtree.load(features); + mapillary.cache().objects.rtree.load(features); var res = mapillary.signs(context.projection); expect(res).to.deep.eql([ - { key: '0', loc: [10,0], signs: signs }, - { key: '1', loc: [10,0], signs: signs } + { key: '0', loc: [10,0], detections: detections }, + { key: '1', loc: [10,0], detections: detections } ]); }); it('limits results no more than 3 stacked signs in one spot', function() { - var signs = [{ - 'package': 'trafficsign_us_3.0', - rect: [ 0.805, 0.463, 0.833, 0.502 ], - length: 4, - score: '1.27', - type: 'regulatory--maximum-speed-limit-65--us' + var detections = [{ + detection_key: '78vqha63gs1upg15s823qckcmn', + image_key: 'bwYs-uXLDvm_meo_EC5Nzw' }], features = [ - { minX: 10, minY: 0, maxX: 10, maxY: 0, data: { key: '0', loc: [10,0], signs: signs } }, - { minX: 10, minY: 0, maxX: 10, maxY: 0, data: { key: '1', loc: [10,0], signs: signs } }, - { minX: 10, minY: 0, maxX: 10, maxY: 0, data: { key: '2', loc: [10,0], signs: signs } }, - { minX: 10, minY: 0, maxX: 10, maxY: 0, data: { key: '3', loc: [10,0], signs: signs } }, - { minX: 10, minY: 0, maxX: 10, maxY: 0, data: { key: '4', loc: [10,0], signs: signs } } + { minX: 10, minY: 0, maxX: 10, maxY: 0, data: { key: '0', loc: [10,0], detections: detections } }, + { minX: 10, minY: 0, maxX: 10, maxY: 0, data: { key: '1', loc: [10,0], detections: detections } }, + { minX: 10, minY: 0, maxX: 10, maxY: 0, data: { key: '2', loc: [10,0], detections: detections } }, + { minX: 10, minY: 0, maxX: 10, maxY: 0, data: { key: '3', loc: [10,0], detections: detections } }, + { minX: 10, minY: 0, maxX: 10, maxY: 0, data: { key: '4', loc: [10,0], detections: detections } } ]; - mapillary.cache().signs.rtree.load(features); + mapillary.cache().objects.rtree.load(features); var res = mapillary.signs(context.projection); expect(res).to.have.length.of.at.most(3); });