mapillary-js
Version:
WebGL JavaScript library for displaying street level imagery from mapillary.com
143 lines (120 loc) • 4.56 kB
HTML
<html>
<head>
<title>Spatial data</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="dist/mapillary.min.css" />
<script src="dist/mapillary.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
html,
body,
#mly {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="mly"></div>
<script>
const viewer = new Mapillary.Viewer({
apiClient: "QjI1NnU0aG5FZFZISE56U3R5aWN4ZzpkYzg0NzE3MDA0YTRhZjlh",
component: { cover: false, stats: false, spatialData: true },
container: "mly",
imageKey: "zarcRdNFZwg3FkXNcsFeGw",
});
window.addEventListener("resize", function () { viewer.resize(); });
const spatial = viewer.getComponent("spatialData");
const s = Object.assign(
{},
spatial.defaultConfiguration,
{ imagesVisible: true });
const camMode = Mapillary.SpatialDataComponent.CameraVisualizationMode;
const none = camMode.Default;
const cluster = camMode.Cluster;
const connectedComponent = camMode.ConnectedComponent;
const sequence = camMode.Sequence;
const camModeRotation = {};
camModeRotation[none] = cluster;
camModeRotation[cluster] = connectedComponent;
camModeRotation[connectedComponent] = sequence;
camModeRotation[sequence] = none;
const posMode = Mapillary.SpatialDataComponent.OriginalPositionMode;
const hidden = posMode.Hidden;
const flat = posMode.Flat;
const altitude = posMode.Altitude;
const posModeRotation = {};
posModeRotation[hidden] = flat;
posModeRotation[flat] = altitude;
posModeRotation[altitude] = hidden;
function toggleImages() {
s.imagesVisible = !s.imagesVisible;
if (s.imagesVisible) { viewer.activateComponent("imagePlane"); }
else { viewer.deactivateComponent("imagePlane"); }
}
function rotateCvm() {
s.cameraVisualizationMode =
camModeRotation[s.cameraVisualizationMode];
configure("cameraVisualizationMode");
}
function rotatePm() {
s.originalPositionMode =
posModeRotation[s.originalPositionMode];
configure("originalPositionMode");
}
function toggleBooleanSetting(name) {
s[name] = !s[name];
configure(name);
}
function changeSize(name, coeff) {
s[name] *= coeff;
s[name] = Math.max(0.01, Math.min(1, s[name]));
configure(name);
}
function configure(name) {
const c = {}; c[name] = s[name];
spatial.configure(c);
}
var filterIndex = 0;
var filters = [
[],
["==", "fullPano", true],
["==", "sequenceKey", "s5I5m7BvYykB677MpFnOIw"],
["in", "sequenceKey", "s5I5m7BvYykB677MpFnOIw", "-aC4wx-8oOkCp6SFGXoyAg"],
];
function setFilter() {
filterIndex = (filterIndex + 1) % filters.length;
viewer.setFilter(filters[filterIndex]).then(
function (n) {
console.log("filter", filters[filterIndex]);
});
}
window.document.addEventListener(
"keydown",
e => {
let name = undefined;
switch (e.key) {
case 'c': name = 'camerasVisible'; break;
case 'e': name = 'earthControls'; break;
case 'p': name = 'pointsVisible'; break;
case 't': name = 'tilesVisible'; break;
case 'i': toggleImages(); break;
case 'v': rotateCvm(); break;
case 'o': rotatePm(); break;
case 'q': changeSize('pointSize', 0.9); break;
case 'w': changeSize('pointSize', 1.1); break;
case 'a': changeSize('cameraSize', 0.9); break;
case 's': changeSize('cameraSize', 1.1); break;
case 'f': setFilter(); break;
default: break;
}
if (!!name) { toggleBooleanSetting(name); }
});
</script>
</body>
</html>