mapillary-js
Version:
WebGL JavaScript library for displaying street level imagery from mapillary.com
116 lines (96 loc) • 4.21 kB
HTML
<html>
<head>
<title>MapillaryJS Markers Debug Page</title>
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<script src='dist/mapillary.js'></script>
<link rel='stylesheet' href='dist/mapillary.min.css' />
<style>
body { margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; }
#viewer { width: 100%; height: 100%; }
</style>
</head>
<body>
<div id='viewer'></div>
<script>
const mly = new Mapillary.Viewer(
'viewer',
'QjI1NnU0aG5FZFZISE56U3R5aWN4ZzpkYzg0NzE3MDA0YTRhZjlh',
null,
{
component: {
cover: false,
marker: true,
stats: false,
},
});
const createTimes = [];
const addTimes = [];
const batchSize = 1000;
let markerCount = 0;
const markerComponent = mly.getComponent("marker");
// Log performance results
const logTimes = function() {
const totalCreateTime = createTimes
.reduce(function(acc, val) { return acc + val; }, 0);
const totalAddTime = addTimes
.reduce(function(acc, val) { return acc + val; }, 0);
console.log("Markers added:", markerCount);
console.log("Batch size:", batchSize);
console.log("Total create time:", totalCreateTime.toFixed(2));
console.log("Average batch create time:", (totalCreateTime / createTimes.length).toFixed(2));
console.log("Average marker create time:", (totalCreateTime / createTimes.length / batchSize).toFixed(4));
console.log("Total add time:", totalAddTime.toFixed(2));
console.log("Average batch add time:", (totalAddTime / addTimes.length).toFixed(2));
console.log("Average marker add time:", (totalAddTime / addTimes.length / batchSize).toFixed(4));
};
// Create markers in a bounding box with center at latLon
const createRandomMarkers = function(start, count, latLon) {
const getRandomUniform = function(min, max) {
return Math.random() * (max - min) + min;
};
const t0 = window.performance.now();
const boxWidth = 0.1;
const minLat = latLon.lat - boxWidth / 2;
const maxLat = latLon.lat + boxWidth / 2;
const minLon = latLon.lon - boxWidth / 2;
const maxLon = latLon.lon + boxWidth / 2;
const markers = [];
for (let i = start; i < start + count; i++) {
const lat = getRandomUniform(minLat, maxLat);
const lon = getRandomUniform(minLon, maxLon);
const marker = new Mapillary.MarkerComponent.SimpleMarker(
i.toString(), { lat: lat, lon: lon, }, { interactive: true });
markers.push(marker);
}
createTimes.push(window.performance.now() - t0);
return markers;
};
// Add markers to component in batch
const addMarkers = function(markers) {
const t0 = window.performance.now();
markerComponent.add(markers);
addTimes.push(window.performance.now() - t0);
};
// Start creating and adding markers when node has been set
mly.moveToKey('6Zhtztzt67fWmdd4OYH44w')
.then(
function(n) {
let intervalId = window.setInterval(function() {
const markers = createRandomMarkers(markerCount, batchSize, n.latLon);
addMarkers(markers);
markerCount += batchSize;
if (markerCount >= 1e6) {
window.clearInterval(intervalId);
logTimes();
}
},
5);
},
function(e) { console.error(e); });
window.addEventListener('resize', function() { mly.resize(); });
</script>
</body>
</html>