Move rtrees to Mapillary service, DRY code, set minZoom to 12

This commit is contained in:
Bryan Housel
2016-02-11 14:09:18 -05:00
parent 6b1fe52d0d
commit ab6a81e344
3 changed files with 81 additions and 84 deletions
+21 -35
View File
@@ -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;
};
+19 -28
View File
@@ -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;
};
+41 -21
View File
@@ -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');
};