mirror of
https://github.com/mapillary/mapillary-js.git
synced 2026-01-25 14:07:28 +00:00
b562a0b06c
Migrate to Rollup. Emit umd, minified umd, module, type declarations and source maps. Work around problems with Falcor by using virtual module. Migrate to Jest. Run tests in with CommonJS modules becasue ES6 is not supported. Work around dependency problems by bootstrap to ensure they are not loaded during test. Remove all unused dependencies. Create state transition matrix to avoid circular dependencies. chore: tsc and rollup watch build chore: incremental watch build Remove unused dependencies. chore: use existing type packages chore: mock favicon chore: improve watch build chore: fix styles build chore: specific commonjs build for tests chore: reset spec files refactor: explicit state transition matrix chore: make src commands work chore: working unit tests and lib chore: add serve docs script chore: remove unused bundle config chore: refactor rollup config to avoid duplication fix: falcor imports fix: transition from source to target Fixes #87 Fixes #100 Fixes #159 Fixes #208
127 lines
4.1 KiB
HTML
127 lines
4.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<title>MapillaryJS Markers</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" />
|
|
<script src="dist/mapillary.js"></script>
|
|
|
|
<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>
|