From 57410b264bbf14b489a89cd25ed7ecf7a8525693 Mon Sep 17 00:00:00 2001 From: Kushan Joshi <0o3ko0@gmail.com> Date: Wed, 12 Jul 2017 16:21:57 +0530 Subject: [PATCH 1/7] add mapillary detections --- modules/services/mapillary.js | 66 +++++++++++++++++++++++++++++++---- 1 file changed, 60 insertions(+), 6 deletions(-) diff --git a/modules/services/mapillary.js b/modules/services/mapillary.js index 34f814fa2..e3d2ee0f0 100644 --- a/modules/services/mapillary.js +++ b/modules/services/mapillary.js @@ -22,7 +22,8 @@ var apibase = 'https://a.mapillary.com/v3/', mapillaryImage, mapillarySignDefs, mapillarySignSprite, - mapillaryViewer; + mapillaryViewer, + tagComponent; function abortRequest(i) { @@ -143,7 +144,11 @@ function loadNextTilePage(which, currZoom, url, tile) { 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 === 'signs') d = { + key: feature.properties.detections[0].image_key, + detectionKey: feature.properties.detections[0].detection_key, + loc: loc, value: feature.properties.value + }; features.push({minX: loc[0], minY: loc[1], maxX: loc[0], maxY: loc[1], data: d}); } @@ -358,6 +363,45 @@ export default { return this; }, + showDetections: function(detectionKey) { + if (!detectionKey) return tagComponent.removeAll(); + + 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 tagComponent.removeAll(); + 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( + 'polygonTag', polygonGeometry, { text: data.properties.value } + ); + } else if (data.properties.shape.type === 'Point') { + var pointGeometry = new Mapillary + .TagComponent + .PointGeometry(data.properties.shape.coordinates[0]); + tag = new Mapillary.TagComponent.SpotTag( + 'pointTag', pointGeometry, { text: data.properties.value } + ); + } + + if (tag && data.properties.image_key === mapillaryImage) { + tagComponent.add([tag]); + } else { + tagComponent.removeAll(); + } + }); + }, hideViewer: function() { @@ -398,11 +442,13 @@ export default { baseImageSize: 320, component: { cover: false, - keyboard: false + keyboard: false, + tag: true } }; mapillaryViewer = new Mapillary.Viewer('mly', clientId, imageKey, opts); + tagComponent = mapillaryViewer.getComponent('tag'); mapillaryViewer.on('nodechanged', nodeChanged); } @@ -422,15 +468,23 @@ 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; }); + .classed('selected', function(d) { + return d.key === imageKey; + }); + var detectionKey; + d3.selectAll('.layer-mapillary-signs .icon-sign') + .each(function(d) { + if (d.key === imageKey) { + detectionKey = d.detectionKey; + } + }); + this.showDetections(detectionKey); return this; }, From fa9df011555e2fed8a5d4e57091c318df93e3084 Mon Sep 17 00:00:00 2001 From: Bryan Housel Date: Wed, 12 Jul 2017 17:31:19 -0400 Subject: [PATCH 2/7] Guard code for mapillaryViewer, local scope for tagComponent --- modules/services/mapillary.js | 68 ++++++++++++++++++----------------- 1 file changed, 36 insertions(+), 32 deletions(-) diff --git a/modules/services/mapillary.js b/modules/services/mapillary.js index e3d2ee0f0..8896f2d9d 100644 --- a/modules/services/mapillary.js +++ b/modules/services/mapillary.js @@ -22,8 +22,7 @@ var apibase = 'https://a.mapillary.com/v3/', mapillaryImage, mapillarySignDefs, mapillarySignSprite, - mapillaryViewer, - tagComponent; + mapillaryViewer; function abortRequest(i) { @@ -363,44 +362,50 @@ export default { return this; }, + + + showDetections: function(detectionKey) { + if (!mapillaryViewer) return; + + var tagComponent = mapillaryViewer.getComponent('tag'); if (!detectionKey) return tagComponent.removeAll(); - var url = apibase + 'detections/'+ + 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 tagComponent.removeAll(); - 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( - 'polygonTag', polygonGeometry, { text: data.properties.value } - ); - } else if (data.properties.shape.type === 'Point') { - var pointGeometry = new Mapillary - .TagComponent - .PointGeometry(data.properties.shape.coordinates[0]); - tag = new Mapillary.TagComponent.SpotTag( - 'pointTag', pointGeometry, { text: data.properties.value } - ); - } + .mimeType('application/json') + .response(function(xhr) { + return JSON.parse(xhr.responseText); + }).get(function(err, data) { + if (!data || !data.properties) return tagComponent.removeAll(); + 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( + 'polygonTag', polygonGeometry, { text: data.properties.value } + ); + } else if (data.properties.shape.type === 'Point') { + var pointGeometry = new Mapillary + .TagComponent + .PointGeometry(data.properties.shape.coordinates[0]); + tag = new Mapillary.TagComponent.SpotTag( + 'pointTag', pointGeometry, { text: data.properties.value } + ); + } - if (tag && data.properties.image_key === mapillaryImage) { - tagComponent.add([tag]); - } else { - tagComponent.removeAll(); - } - }); + if (tag && data.properties.image_key === mapillaryImage) { + tagComponent.add([tag]); + } else { + tagComponent.removeAll(); + } + }); }, @@ -448,7 +453,6 @@ export default { }; mapillaryViewer = new Mapillary.Viewer('mly', clientId, imageKey, opts); - tagComponent = mapillaryViewer.getComponent('tag'); mapillaryViewer.on('nodechanged', nodeChanged); } From 30a12fb1be6b98f3f8c12d67fc6cd9cb3898dfb2 Mon Sep 17 00:00:00 2001 From: Bryan Housel Date: Thu, 13 Jul 2017 23:47:44 -0400 Subject: [PATCH 3/7] Cache images->detections, show multiple detections per image --- modules/services/mapillary.js | 193 ++++++++++++++++++++------------- modules/svg/mapillary_signs.js | 21 +++- 2 files changed, 136 insertions(+), 78 deletions(-) diff --git a/modules/services/mapillary.js b/modules/services/mapillary.js index 8896f2d9d..d7144a561 100644 --- a/modules/services/mapillary.js +++ b/modules/services/mapillary.js @@ -128,34 +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, - detectionKey: feature.properties.detections[0].detection_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 + }; + + // 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 }; - - features.push({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); @@ -236,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; @@ -259,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); }, @@ -296,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) { @@ -364,51 +389,6 @@ export default { }, - - showDetections: function(detectionKey) { - if (!mapillaryViewer) return; - - var tagComponent = mapillaryViewer.getComponent('tag'); - if (!detectionKey) return tagComponent.removeAll(); - - 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 tagComponent.removeAll(); - 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( - 'polygonTag', polygonGeometry, { text: data.properties.value } - ); - } else if (data.properties.shape.type === 'Point') { - var pointGeometry = new Mapillary - .TagComponent - .PointGeometry(data.properties.shape.coordinates[0]); - tag = new Mapillary.TagComponent.SpotTag( - 'pointTag', pointGeometry, { text: data.properties.value } - ); - } - - if (tag && data.properties.image_key === mapillaryImage) { - tagComponent.add([tag]); - } else { - tagComponent.removeAll(); - } - }); - }, - - hideViewer: function() { d3.select('#content') .selectAll('.mapillary-wrap') @@ -457,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.. @@ -473,26 +455,87 @@ 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') + + d3.selectAll('.layer-mapillary-images .viewfield-group') .classed('selected', function(d) { return d.key === imageKey; }); - var detectionKey; d3.selectAll('.layer-mapillary-signs .icon-sign') - .each(function(d) { - if (d.key === imageKey) { - detectionKey = d.detectionKey; - } + .classed('selected', function(d) { + return _.some(d.detections, function(detection) { + return detection.image_key === imageKey; + }); }); - this.showDetections(detectionKey); + + this.updateDetections(); return this; }, + updateDetections: function() { + if (!mapillaryViewer) return; + + var tagComponent = mapillaryViewer.getComponent('tag'); + var detections = mapillaryCache.detections[mapillaryImage]; + + _.each(detections, function(v, k) { + if (_.isEmpty(v)) { + loadDetection(k); + } else { + tagComponent.add([v]); + } + }); + + + 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 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( + detectionKey, polygonGeometry, { text: data.properties.value } + ); + } else if (data.properties.shape.type === 'Point') { + var pointGeometry = new Mapillary + .TagComponent + .PointGeometry(data.properties.shape.coordinates[0]); + tag = new Mapillary.TagComponent.SpotTag( + detectionKey, pointGeometry, { text: data.properties.value } + ); + } + + if (tag) { + var ik = data.properties.image_key; + mapillaryCache.detections[ik][detectionKey] = tag; + if (mapillaryImage === ik) { + tagComponent.add([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..36897a735 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(); } @@ -79,7 +90,11 @@ export function svgMapillarySigns(projection, context, dispatch) { .attr('class', 'icon-sign') .attr('width', '32px') // for Firefox .attr('height', '32px') // for Firefox - .classed('selected', function(d) { return d.key === imageKey; }) + .classed('selected', function(d) { + return _.some(d.detections, function(detection) { + return detection.image_key === imageKey; + }); + }) .on('click', click); enter From e71381ed458a72590d30d43bf1dc963fd2deb3fe Mon Sep 17 00:00:00 2001 From: Bryan Housel Date: Fri, 14 Jul 2017 00:45:20 -0400 Subject: [PATCH 4/7] Adjust street sign image dimensions to try to make them less blurry (still kinda blurry but closes #4145 anyway) --- css/60_mapillary.css | 23 +++++++---------------- modules/svg/mapillary_signs.js | 8 ++++---- 2 files changed, 11 insertions(+), 20 deletions(-) diff --git a/css/60_mapillary.css b/css/60_mapillary.css index 578e96a9b..a248a1ac2 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,12 @@ } .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; } + diff --git a/modules/svg/mapillary_signs.js b/modules/svg/mapillary_signs.js index 36897a735..77b1b1ef2 100644 --- a/modules/svg/mapillary_signs.js +++ b/modules/svg/mapillary_signs.js @@ -88,8 +88,8 @@ 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 + .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; @@ -104,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 } From bde4d6510f2eecd9efc8d57b987e28600fc88ff9 Mon Sep 17 00:00:00 2001 From: Bryan Housel Date: Fri, 14 Jul 2017 00:53:44 -0400 Subject: [PATCH 5/7] Update mapillary tests --- test/spec/services/mapillary.js | 47 +++++++++++++++------------------ 1 file changed, 21 insertions(+), 26 deletions(-) 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); }); From 590ab7d8b95a53c5c8a2ad63f2cac61d54c04a82 Mon Sep 17 00:00:00 2001 From: Bryan Housel Date: Fri, 14 Jul 2017 01:20:26 -0400 Subject: [PATCH 6/7] Detection cache can store source data, not instantiated tag objects --- modules/services/mapillary.js | 73 ++++++++++++++++++++++------------- 1 file changed, 47 insertions(+), 26 deletions(-) diff --git a/modules/services/mapillary.js b/modules/services/mapillary.js index d7144a561..d0dec62f1 100644 --- a/modules/services/mapillary.js +++ b/modules/services/mapillary.js @@ -480,14 +480,16 @@ export default { updateDetections: function() { if (!mapillaryViewer) return; - var tagComponent = mapillaryViewer.getComponent('tag'); var detections = mapillaryCache.detections[mapillaryImage]; - - _.each(detections, function(v, k) { - if (_.isEmpty(v)) { + _.each(detections, function(data, k) { + if (_.isEmpty(data)) { loadDetection(k); } else { - tagComponent.add([v]); + var tag = makeTag(data); + if (tag) { + var tagComponent = mapillaryViewer.getComponent('tag'); + tagComponent.add([tag]); + } } }); @@ -506,33 +508,52 @@ export default { .get(function(err, data) { if (!data || !data.properties) return; - 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( - detectionKey, polygonGeometry, { text: data.properties.value } - ); - } else if (data.properties.shape.type === 'Point') { - var pointGeometry = new Mapillary - .TagComponent - .PointGeometry(data.properties.shape.coordinates[0]); - tag = new Mapillary.TagComponent.SpotTag( - detectionKey, pointGeometry, { text: data.properties.value } - ); - } + var ik = data.properties.image_key; + mapillaryCache.detections[ik][detectionKey] = data; - if (tag) { - var ik = data.properties.image_key; - mapillaryCache.detections[ik][detectionKey] = tag; - if (mapillaryImage === ik) { + if (mapillaryImage === ik) { + var tag = makeTag(data); + if (tag) { + var tagComponent = mapillaryViewer.getComponent('tag'); tagComponent.add([tag]); } } }); } + + + function makeTag(data) { + 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: data.properties.value + } + ); + + } 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: data.properties.value + } + ); + } + + return tag; + } }, From 802d5707d6541c8eea02cb882b9de9e494f2fcb7 Mon Sep 17 00:00:00 2001 From: Bryan Housel Date: Fri, 14 Jul 2017 02:32:35 -0400 Subject: [PATCH 7/7] Style detections for better visibility --- css/60_mapillary.css | 12 ++++++++++++ modules/services/mapillary.js | 16 ++++++++++++++-- 2 files changed, 26 insertions(+), 2 deletions(-) diff --git a/css/60_mapillary.css b/css/60_mapillary.css index a248a1ac2..2910342e1 100644 --- a/css/60_mapillary.css +++ b/css/60_mapillary.css @@ -66,3 +66,15 @@ 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 d0dec62f1..846e0504e 100644 --- a/modules/services/mapillary.js +++ b/modules/services/mapillary.js @@ -523,7 +523,12 @@ export default { 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 @@ -534,7 +539,12 @@ export default { data.properties.key, polygonGeometry, { - text: data.properties.value + text: text, + textColor: 0xffff00, + lineColor: 0xffff00, + lineWidth: 2, + fillColor: 0xffff00, + fillOpacity: 0.3, } ); @@ -547,7 +557,9 @@ export default { data.properties.key, pointGeometry, { - text: data.properties.value + text: text, + color: 0xffff00, + textColor: 0xffff00 } ); }