mirror of
https://github.com/mapillary/mapillary-js.git
synced 2025-12-08 17:35:55 +00:00
155 lines
5.0 KiB
HTML
155 lines
5.0 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>MapillaryJS Marker</title>
|
|
<link rel="icon" href="data:," />
|
|
<meta charset="utf-8" />
|
|
<meta
|
|
name="viewport"
|
|
content="width=device-width, initial-scale=1.0, user-scalable=no"
|
|
/>
|
|
|
|
<link rel="stylesheet" href="/dist/mapillary.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 type="module">
|
|
import { SimpleMarker, Viewer } from "/dist/mapillary.module.js";
|
|
import { accessToken } from "/doc-src/.access-token/token.js";
|
|
|
|
const imageId = "147617667372938";
|
|
|
|
const mly = new Viewer({
|
|
accessToken,
|
|
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 lngLat
|
|
const createRandomMarkers = function (start, count, lngLat) {
|
|
const getRandomUniform = function (min, max) {
|
|
return Math.random() * (max - min) + min;
|
|
};
|
|
|
|
const t0 = window.performance.now();
|
|
const boxWidth = 0.1;
|
|
|
|
const minLat = lngLat.lat - boxWidth / 2;
|
|
const maxLat = lngLat.lat + boxWidth / 2;
|
|
const minLng = lngLat.lng - boxWidth / 2;
|
|
const maxLng = lngLat.lng + boxWidth / 2;
|
|
|
|
const markers = [];
|
|
for (let i = start; i < start + count; i++) {
|
|
const lat = getRandomUniform(minLat, maxLat);
|
|
const lng = getRandomUniform(minLng, maxLng);
|
|
|
|
const marker = new SimpleMarker(
|
|
i.toString(),
|
|
{ lat: lat, lng: lng },
|
|
{ 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 image has been set
|
|
mly.moveTo(imageId).then(
|
|
function (n) {
|
|
let intervalId = window.setInterval(function () {
|
|
const markers = createRandomMarkers(
|
|
markerCount,
|
|
batchSize,
|
|
n.lngLat
|
|
);
|
|
addMarkers(markers);
|
|
|
|
markerCount += batchSize;
|
|
|
|
if (markerCount >= 1e6) {
|
|
window.clearInterval(intervalId);
|
|
logTimes();
|
|
}
|
|
}, 5);
|
|
},
|
|
function (e) {
|
|
console.error(e);
|
|
}
|
|
);
|
|
</script>
|
|
</body>
|
|
</html>
|