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 imageKey = data.properties.image_key;
_mlyCache.detections[imageKey][detectionKey] = data;
var selectedKey = _mlySelectedImage && _mlySelectedImage.key;
if (imageKey === selectedKey) {
var tag = makeTag(data);
if (tag) {
var tagComponent = _mlyViewer.getComponent('tag');
tagComponent.add([tag]);
}
}
});
}
source.forEach(({url, worker}, index) => {
if (worker) {
const req = request(url);
// use a web worker to parse data
const dataParser = new StreamParser(worker, (data, meta) => {
dispatch(loadDataSuccess(context, index, data, meta));
});
req.on('progress', dataParser.onProgress)
.on('load', dataParser.onLoad)
.get();
} else if (/\.(json|geojson)$/.test(url)) {
// load as json
json(url, (error, response) => {
if (!error) {
dispatch(loadDataSuccess(context, index, response, {}));
}
});
} else {
// load as plain text
text(url, (error, response) => {
if (!error) {
dispatch(loadDataSuccess(context, index, response, {}));
}
});
}
});
function loadTile(source, tile) {
if (source.loaded[tile.id] || source.inflight[tile.id]) return;
var url = source.template
.replace('{x}', tile.xyz[0])
.replace('{y}', tile.xyz[1])
// TMS-flipped y coordinate
.replace(/\{[t-]y\}/, Math.pow(2, tile.xyz[2]) - tile.xyz[1] - 1)
.replace(/\{z(oom)?\}/, tile.xyz[2])
.replace(/\{switch:([^}]+)\}/, function(s, r) {
var subdomains = r.split(',');
return subdomains[(tile.xyz[0] + tile.xyz[1]) % subdomains.length];
});
source.inflight[tile.id] = d3_request(url)
.responseType('arraybuffer')
.get(function(err, data) {
source.loaded[tile.id] = [];
delete source.inflight[tile.id];
if (err || !data) return;
var z = tile.xyz[2];
if (!source.canMerge[z]) {
source.canMerge[z] = {}; // initialize mergeCache
}
source.loaded[tile.id] = vtToGeoJSON(data, tile, source.canMerge[z]);
dispatch.call('loadedData');
});
}
return new Promise((resolve, reject) => {
request(url)
.responseType('arraybuffer')
.get((error, response) => {
if (error) {
reject(error);
} else {
resolve(response.response);
}
});
}).then(parsePLY);
.each(function(d) {
var url = context.imagePath(d + '.svg');
var node = d3_select(this).node();
d3_request(url)
.mimeType('image/svg+xml')
.response(function(xhr) { return xhr.responseXML; })
.get(function(err, svg) {
if (err) return;
node.appendChild(
d3_select(svg.documentElement).attr('id', d).node()
);
if (overrideColors && d !== 'iD-sprite') { // allow icon colors to be overridden..
d3_select(node).selectAll('path')
.attr('fill', 'currentColor');
}
});
});
return new Promise(function(accept, reject) {
var req = request(url),
name;
for (name in options.headers) {
req.header(name, options.headers[name]);
}
requestOptions.forEach(function(name) {
if (options[name]) req[name](options[name]);
});
req.on('error', function(error) {
reject(error || 'Error loading URL: ' + url);
})
.on('load', function(result) {
var text = result && result.responseText;
(!result || result.status === 0)
? reject(text || 'Error')
: accept(text);
})
.get();
});
function loadNextTilePage(which, currZoom, url, tile) {
var cache = _mlyCache[which];
var rect = tile.extent.rectangle();
var maxPages = maxPageAtZoom(currZoom);
var nextPage = cache.nextPage[tile.id] || 0;
var nextURL = cache.nextURL[tile.id] || url +
utilQsString({
per_page: maxResults,
page: nextPage,
client_id: clientId,
bbox: [rect[0], rect[1], rect[2], rect[3]].join(','),
});
if (nextPage > maxPages) return;
var id = tile.id + ',' + String(nextPage);
if (cache.loaded[id] || cache.inflight[id]) return;
cache.inflight[id] = d3_request(nextURL)
.mimeType('application/json')
.response(function(xhr) {
var linkHeader = xhr.getResponseHeader('Link');
if (linkHeader) {
var pagination = parsePagination(xhr.getResponseHeader('Link'));
if (pagination.next) {
cache.nextURL[tile.id] = pagination.next;
}
}
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 = data.features.map(function(feature) {
var loc = feature.geometry.coordinates;
var d;
if (which === 'images') {
d = {
loc: loc,
key: feature.properties.key,
ca: feature.properties.ca,
captured_at: feature.properties.captured_at,
captured_by: feature.properties.username,
pano: feature.properties.pano
};
cache.forImageKey[d.key] = d; // cache imageKey -> image
} else if (which === 'sequences') {
var sequenceKey = feature.properties.key;
cache.lineString[sequenceKey] = feature; // cache sequenceKey -> lineString
feature.properties.coordinateProperties.image_keys.forEach(function(imageKey) {
cache.forImageKey[imageKey] = sequenceKey; // cache imageKey -> sequenceKey
});
return false; // because no `d` data worth loading into an rbush
} else if (which === 'objects') {
d = {
loc: loc,
key: feature.properties.key,
value: feature.properties.value,
package: feature.properties.package,
detections: feature.properties.detections
};
// cache imageKey -> detectionKey
feature.properties.detections.forEach(function(detection) {
var imageKey = detection.image_key;
var detectionKey = detection.detection_key;
if (!_mlyCache.detections[imageKey]) {
_mlyCache.detections[imageKey] = {};
}
if (!_mlyCache.detections[imageKey][detectionKey]) {
_mlyCache.detections[imageKey][detectionKey] = {};
}
});
}
return {
minX: loc[0], minY: loc[1], maxX: loc[0], maxY: loc[1], data: d
};
}).filter(Boolean);
cache.rtree.load(features);
if (which === 'images' || which === 'sequences') {
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);
} else {
cache.nextPage[tile.id] = Infinity; // no more pages to load
}
});
}
function loadNextTilePage(which, currZoom, url, tile) {
var cache = _oscCache[which];
var bbox = tile.extent.bbox();
var maxPages = maxPageAtZoom(currZoom);
var nextPage = cache.nextPage[tile.id] || 1;
var params = utilQsString({
ipp: maxResults,
page: nextPage,
// client_id: clientId,
bbTopLeft: [bbox.maxY, bbox.minX].join(','),
bbBottomRight: [bbox.minY, bbox.maxX].join(',')
}, true);
if (nextPage > maxPages) return;
var id = tile.id + ',' + String(nextPage);
if (cache.loaded[id] || cache.inflight[id]) return;
cache.inflight[id] = d3_request(url)
.mimeType('application/json')
.header('Content-type', 'application/x-www-form-urlencoded')
.response(function(xhr) { return JSON.parse(xhr.responseText); })
.post(params, function(err, data) {
cache.loaded[id] = true;
delete cache.inflight[id];
if (err || !data.currentPageItems || !data.currentPageItems.length) return;
function localeDateString(s) {
if (!s) return null;
var detected = utilDetect();
var options = { day: 'numeric', month: 'short', year: 'numeric' };
var d = new Date(s);
if (isNaN(d.getTime())) return null;
return d.toLocaleDateString(detected.locale, options);
}
var features = data.currentPageItems.map(function(item) {
var loc = [+item.lng, +item.lat];
var d;
if (which === 'images') {
d = {
loc: loc,
key: item.id,
ca: +item.heading,
captured_at: localeDateString(item.shot_date || item.date_added),
captured_by: item.username,
imagePath: item.lth_name,
sequence_id: item.sequence_id,
sequence_index: +item.sequence_index
};
// cache sequence info
var seq = _oscCache.sequences[d.sequence_id];
if (!seq) {
seq = { rotation: 0, images: [] };
_oscCache.sequences[d.sequence_id] = seq;
}
seq.images[d.sequence_index] = d;
}
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 (data.currentPageItems.length === maxResults) { // more pages to load
cache.nextPage[tile.id] = nextPage + 1;
loadNextTilePage(which, currZoom, url, tile);
} else {
cache.nextPage[tile.id] = Infinity; // no more pages to load
}
});
}
function loadNextTilePage(which, currZoom, url, tile) {
var cache = _mlyCache[which];
var rect = tile.extent.rectangle();
var maxPages = maxPageAtZoom(currZoom);
var nextPage = cache.nextPage[tile.id] || 0;
var nextURL = cache.nextURL[tile.id] || url +
utilQsString({
per_page: maxResults,
page: nextPage,
client_id: clientId,
bbox: [rect[0], rect[1], rect[2], rect[3]].join(','),
});
if (nextPage > maxPages) return;
var id = tile.id + ',' + String(nextPage);
if (cache.loaded[id] || cache.inflight[id]) return;
cache.inflight[id] = d3_request(nextURL)
.mimeType('application/json')
.response(function(xhr) {
var linkHeader = xhr.getResponseHeader('Link');
if (linkHeader) {
var pagination = parsePagination(xhr.getResponseHeader('Link'));
if (pagination.next) {
cache.nextURL[tile.id] = pagination.next;
}
}
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 = data.features.map(function(feature) {
var loc = feature.geometry.coordinates;
var d;
// An image (shown as a green dot on the map) is a single street photo with extra
// information such as location, camera angle (CA), camera model, and so on.
// Each image feature is a GeoJSON Point
if (which === 'images') {
d = {
loc: loc,
key: feature.properties.key,
ca: feature.properties.ca,
captured_at: feature.properties.captured_at,
captured_by: feature.properties.username,
pano: feature.properties.pano
};
cache.forImageKey[d.key] = d; // cache imageKey -> image
// Mapillary organizes images as sequences. A sequence of images are continuously captured
// by a user at a give time. Sequences are shown on the map as green lines.
// Each sequence feature is a GeoJSON LineString
} else if (which === 'sequences') {
var sequenceKey = feature.properties.key;
cache.lineString[sequenceKey] = feature; // cache sequenceKey -> lineString
feature.properties.coordinateProperties.image_keys.forEach(function(imageKey) {
cache.forImageKey[imageKey] = sequenceKey; // cache imageKey -> sequenceKey
});
return false; // because no `d` data worth loading into an rbush
// An image detection is a semantic pixel area on an image. The area could indicate
// sky, trees, sidewalk in the image. A detection can be a polygon, a bounding box, or a point.
// Each image_detection feature is a GeoJSON Point (located where the image was taken)
} else if (which === 'image_detections') {
d = {
key: feature.properties.key,
image_key: feature.properties.image_key,
value: feature.properties.value,
package: feature.properties.package,
shape: feature.properties.shape
};
// cache imageKey -> image_detections
if (!cache.forImageKey[d.image_key]) {
cache.forImageKey[d.image_key] = [];
}
cache.forImageKey[d.image_key].push(d);
return false; // because no `d` data worth loading into an rbush
// A map feature is a real world object that can be shown on a map. It could be any object
// recognized from images, manually added in images, or added on the map.
// Each map feature is a GeoJSON Point (located where the feature is)
} else if (which === 'map_features') {
d = {
loc: loc,
key: feature.properties.key,
value: feature.properties.value,
package: feature.properties.package,
detections: feature.properties.detections
};
}
return {
minX: loc[0], minY: loc[1], maxX: loc[0], maxY: loc[1], data: d
};
}).filter(Boolean);
if (cache.rtree && features) {
cache.rtree.load(features);
}
if (which === 'images' || which === 'sequences') {
dispatch.call('loadedImages');
} else if (which === 'map_features') {
dispatch.call('loadedSigns');
}
if (data.features.length === maxResults) { // more pages to load
cache.nextPage[tile.id] = nextPage + 1;
loadNextTilePage(which, currZoom, url, tile);
} else {
cache.nextPage[tile.id] = Infinity; // no more pages to load
}
});
}