mapillary-js
Version:
WebGL JavaScript library for displaying street level imagery from mapillary.com
126 lines (100 loc) • 4.22 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%;
}
#mly {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="mly"></div>
<script>
const mly = new Mapillary.Viewer({
apiClient: "QjI1NnU0aG5FZFZISE56U3R5aWN4ZzpkYzg0NzE3MDA0YTRhZjlh",
component: { cover: false, marker: true },
container: "mly",
});
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>