Support filtering by multiple photo usernames

This commit is contained in:
Quincy Morgan
2020-10-19 16:27:07 -04:00
parent f5d53caaf7
commit 081db7c7a6
7 changed files with 49 additions and 31 deletions

4
API.md
View File

@@ -45,8 +45,8 @@ of iD (e.g. `https://ideditor-release.netlify.app`), the following parameters ar
_Available values:_ `streetside` (Microsoft Bing), `mapillary`, `mapillary-signs`, `mapillary-map-features`, `openstreetcam`
* __`photo_dates`__ - The range of capture dates by which to filter street-level photos. Dates are given in YYYY-MM-DD format and separated by `_`. One-sided ranges are supported.<br/>
_Example:_ `photo_dates=2019-01-01_2020-12-31`, `photo_dates=2019-01-01_`, `photo_dates=_2020-12-31`<br/>
* __`photo_username`__ - The Mapillary or OpenStreetCam username by which to filter street-level photos.<br/>
_Example:_ `photo_user=quincylvania`<br/>
* __`photo_username`__ - The Mapillary or OpenStreetCam username by which to filter street-level photos. Multiple comma-separated usernames are supported.<br/>
_Example:_ `photo_user=quincylvania`, `photo_user=quincylvania,chrisbeddow`<br/>
* __`photo`__ - The service and ID of the street-level photo to show.<br/>
_Example:_ `photo=streetside/718514589`<br/>
_Available prefixes:_ `streetside/`, `mapillary/`, `openstreetcam/`

View File

@@ -13,7 +13,7 @@ export function rendererPhotos(context) {
var _dateFilters = ['fromDate', 'toDate'];
var _fromDate;
var _toDate;
var _username;
var _usernames;
function photos() {}
@@ -81,10 +81,21 @@ export function rendererPhotos(context) {
};
photos.setUsernameFilter = function(val, updateUrl) {
_username = val;
if (val && typeof val === 'string') val = val.replace(/;/g, ',').split(',');
if (val) {
val = val.map(d => d.trim()).filter(Boolean);
if (!val.length) {
val = null;
}
}
_usernames = val;
dispatch.call('change', this);
if (updateUrl) {
setUrlFilterValue('photo_username', val);
var hashString;
if (_usernames) {
hashString = _usernames.join(',');
}
setUrlFilterValue('photo_username', hashString);
}
};
@@ -117,7 +128,7 @@ export function rendererPhotos(context) {
};
photos.shouldFilterByUsername = function() {
return showsLayer('mapillary') || showsLayer('openstreetcam');
return showsLayer('mapillary') || showsLayer('openstreetcam') || showsLayer('streetside');
};
photos.showsPhotoType = function(val) {
@@ -153,8 +164,8 @@ export function rendererPhotos(context) {
return photos;
};
photos.username = function() {
return _username;
photos.usernames = function() {
return _usernames;
};
photos.init = function() {

View File

@@ -492,12 +492,12 @@ export default {
var showsFlat = context.photos().showsFlat();
var fromDate = context.photos().fromDate();
var toDate = context.photos().toDate();
var username = context.photos().username();
var usernames = context.photos().usernames();
var filter = ['all'];
if (!showsPano) filter.push(['==', 'pano', false]);
if (!showsFlat && showsPano) filter.push(['==', 'pano', true]);
if (username) filter.push(['==', 'username', username]);
if (usernames && usernames.length) filter.push(['==', 'username', usernames[0]]);
if (fromDate) {
var fromTimestamp = new Date(fromDate).getTime();
filter.push(['>=', 'capturedAt', fromTimestamp]);

View File

@@ -116,7 +116,7 @@ export function svgMapillaryImages(projection, context, dispatch) {
var showsFlat = context.photos().showsFlat();
var fromDate = context.photos().fromDate();
var toDate = context.photos().toDate();
var username = context.photos().username();
var usernames = context.photos().usernames();
if (!showsPano || !showsFlat) {
images = images.filter(function(image) {
@@ -136,9 +136,9 @@ export function svgMapillaryImages(projection, context, dispatch) {
return new Date(image.captured_at).getTime() <= toTimestamp;
});
}
if (username) {
if (usernames) {
images = images.filter(function(image) {
return image.captured_by === username;
return usernames.indexOf(image.captured_by) !== -1;
});
}
return images;
@@ -149,7 +149,7 @@ export function svgMapillaryImages(projection, context, dispatch) {
var showsFlat = context.photos().showsFlat();
var fromDate = context.photos().fromDate();
var toDate = context.photos().toDate();
var username = context.photos().username();
var usernames = context.photos().usernames();
if (!showsPano || !showsFlat) {
sequences = sequences.filter(function(sequence) {
@@ -184,9 +184,9 @@ export function svgMapillaryImages(projection, context, dispatch) {
return new Date(sequence.properties.captured_at).getTime() <= toTimestamp;
});
}
if (username) {
if (usernames) {
sequences = sequences.filter(function(sequence) {
return sequence.properties.username === username;
return usernames.indexOf(sequence.properties.username) !== -1;
});
}

View File

@@ -110,7 +110,7 @@ export function svgOpenstreetcamImages(projection, context, dispatch) {
function filterImages(images) {
var fromDate = context.photos().fromDate();
var toDate = context.photos().toDate();
var username = context.photos().username();
var usernames = context.photos().usernames();
if (fromDate) {
var fromTimestamp = new Date(fromDate).getTime();
@@ -124,9 +124,9 @@ export function svgOpenstreetcamImages(projection, context, dispatch) {
return new Date(item.captured_at).getTime() <= toTimestamp;
});
}
if (username) {
if (usernames) {
images = images.filter(function(item) {
return item.captured_by === username;
return usernames.indexOf(item.captured_by) !== -1;
});
}
@@ -136,7 +136,7 @@ export function svgOpenstreetcamImages(projection, context, dispatch) {
function filterSequences(sequences) {
var fromDate = context.photos().fromDate();
var toDate = context.photos().toDate();
var username = context.photos().username();
var usernames = context.photos().usernames();
if (fromDate) {
var fromTimestamp = new Date(fromDate).getTime();
@@ -150,9 +150,9 @@ export function svgOpenstreetcamImages(projection, context, dispatch) {
return new Date(image.properties.captured_at).getTime() <= toTimestamp;
});
}
if (username) {
if (usernames) {
sequences = sequences.filter(function(image) {
return image.properties.captured_by === username;
return usernames.indexOf(image.properties.captured_by) !== -1;
});
}
@@ -177,7 +177,7 @@ export function svgOpenstreetcamImages(projection, context, dispatch) {
sequences = filterSequences(sequences);
images = filterImages(images);
}
var traces = layer.selectAll('.sequences').selectAll('.sequence')
.data(sequences, function(d) { return d.properties.key; });

View File

@@ -162,7 +162,7 @@ export function svgStreetside(projection, context, dispatch) {
function filterBubbles(bubbles) {
var fromDate = context.photos().fromDate();
var toDate = context.photos().toDate();
var username = context.photos().username();
var usernames = context.photos().usernames();
if (fromDate) {
var fromTimestamp = new Date(fromDate).getTime();
@@ -176,9 +176,9 @@ export function svgStreetside(projection, context, dispatch) {
return new Date(bubble.captured_at).getTime() <= toTimestamp;
});
}
if (username) {
if (usernames) {
bubbles = bubbles.filter(function(bubble) {
return bubble.captured_by === username;
return usernames.indexOf(bubble.captured_by) !== -1;
});
}
@@ -188,7 +188,7 @@ export function svgStreetside(projection, context, dispatch) {
function filterSequences(sequences) {
var fromDate = context.photos().fromDate();
var toDate = context.photos().toDate();
var username = context.photos().username();
var usernames = context.photos().usernames();
if (fromDate) {
var fromTimestamp = new Date(fromDate).getTime();
@@ -202,9 +202,9 @@ export function svgStreetside(projection, context, dispatch) {
return new Date(sequences.properties.captured_at).getTime() <= toTimestamp;
});
}
if (username) {
if (usernames) {
sequences = sequences.filter(function(sequences) {
return sequences.properties.captured_by === username;
return usernames.indexOf(sequences.properties.captured_by) !== -1;
});
}

View File

@@ -237,7 +237,7 @@ export function uiSectionPhotoOverlays(context) {
function drawUsernameFilter(selection) {
function filterEnabled() {
return context.photos().username();
return context.photos().usernames();
}
var ul = selection
.selectAll('.layer-list-username-filter')
@@ -280,15 +280,22 @@ export function uiSectionPhotoOverlays(context) {
.attr('type', 'text')
.attr('class', 'list-item-input')
.call(utilNoAuto)
.property('value', context.photos().username())
.property('value', usernameValue)
.on('change', function() {
var value = d3_select(this).property('value');
context.photos().setUsernameFilter(value, true);
d3_select(this).property('value', usernameValue);
});
li
.merge(liEnter)
.classed('active', filterEnabled);
function usernameValue() {
var usernames = context.photos().usernames();
if (usernames) return usernames.join('; ');
return usernames;
}
}
function toggleLayer(which) {