CalvinBackup/iD
1
0
Fork 0
mirror of https://github.com/FoggedLens/iD.git synced 2026-02-13 01:02:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #4148 from openstreetmap/detections

Browse Source 
Adds mapillary detections
This commit is contained in:
Bryan Housel
2017-07-14 02:39:44 -04:00
committed by GitHub
parent 009693841f 802d5707d6
commit 30355d8fa8
4 changed files with 219 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
css/60_mapillary.css
View File

@@ -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;
}

180
modules/services/mapillary.js
View File

@@ -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 <Polygon|Point>
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 = _;

29
modules/svg/mapillary_signs.js
View File

@@ -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
}

47
test/spec/services/mapillary.js
View File

@@ -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);
});