mirror of
https://github.com/mapillary/mapillary-js.git
synced 2025-12-08 17:35:55 +00:00
166 lines
5.6 KiB
HTML
166 lines
5.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>MapillaryJS</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%;
|
|
}
|
|
|
|
.viewer {
|
|
width: 100%;
|
|
height: calc(100% - 32px);
|
|
}
|
|
|
|
button {
|
|
margin-top: 4px;
|
|
margin-left: 6px;
|
|
height: 24px;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<script type="module">
|
|
import {
|
|
isFallbackSupported,
|
|
isSupported,
|
|
CameraControls,
|
|
RenderMode,
|
|
Viewer,
|
|
} from "/dist/mapillary.module.js";
|
|
import { accessToken } from "/doc-src/.access-token/token.js";
|
|
|
|
(function main() {
|
|
checkSupport();
|
|
|
|
const imageId = "303729947926829";
|
|
|
|
const container = document.createElement("div");
|
|
container.className = "viewer";
|
|
document.body.append(container);
|
|
|
|
const viewer = new Viewer({
|
|
accessToken,
|
|
cameraControls: CameraControls.Gravity,
|
|
component: { cover: false },
|
|
container,
|
|
renderMode: RenderMode.Letterbox,
|
|
});
|
|
|
|
viewer.moveTo(imageId).catch((error) => console.warn(error));
|
|
|
|
viewer.on("load", (event) => console.log(event.type));
|
|
|
|
addButtons(viewer);
|
|
})();
|
|
|
|
function checkSupport() {
|
|
const sup = `isSupported: ${isSupported()}`;
|
|
const fSup = `isFallbackSupported: ${isFallbackSupported()}`;
|
|
console.log(`${sup}, ${fSup}`);
|
|
}
|
|
|
|
function addButton(content, handler) {
|
|
const button = document.createElement("button");
|
|
button.textContent = content;
|
|
button.addEventListener("click", handler);
|
|
document.body.append(button);
|
|
}
|
|
|
|
function addButtons(viewer) {
|
|
addButton("Activate", () => viewer.deactivateCover());
|
|
addButton("Deactivate", () => viewer.activateCover());
|
|
addButton("Remove", () => viewer.remove());
|
|
addButton("Fill", () => viewer.setRenderMode(RenderMode.Fill));
|
|
addButton("Letterbox", () =>
|
|
viewer.setRenderMode(RenderMode.Letterbox)
|
|
);
|
|
addButton("Gravity", () =>
|
|
viewer.setCameraControls(CameraControls.Gravity)
|
|
);
|
|
addButton("Street", () =>
|
|
viewer.setCameraControls(CameraControls.Street)
|
|
);
|
|
|
|
let filterIndex = 0;
|
|
const filters = [
|
|
[],
|
|
["==", "cameraType", "spherical"],
|
|
["==", "sequenceId", "s5I5m7BvYykB677MpFnOIw"],
|
|
[
|
|
"in",
|
|
"sequenceId",
|
|
"s5I5m7BvYykB677MpFnOIw",
|
|
"-aC4wx-8oOkCp6SFGXoyAg",
|
|
],
|
|
[
|
|
"all",
|
|
[
|
|
">=",
|
|
"capturedAt",
|
|
1370509079741 - 24 * 60 * 60 * 1000,
|
|
],
|
|
[
|
|
"<=",
|
|
"capturedAt",
|
|
1370509079741 + 24 * 60 * 60 * 1000,
|
|
],
|
|
],
|
|
];
|
|
addButton("Filter", () => {
|
|
filterIndex = (filterIndex + 1) % filters.length;
|
|
viewer.setFilter(filters[filterIndex]).then(function (n) {
|
|
console.log("filter", filters[filterIndex]);
|
|
});
|
|
});
|
|
|
|
const sequenceComponent = viewer.getComponent("sequence");
|
|
addButton("Play", () => {
|
|
viewer.deactivateComponent("cache");
|
|
sequenceComponent.play();
|
|
});
|
|
addButton("Stop", () => {
|
|
viewer.activateComponent("cache");
|
|
sequenceComponent.stop();
|
|
});
|
|
|
|
let sliderActive = false;
|
|
addButton("Slider", () => {
|
|
if (sliderActive) {
|
|
viewer.activateComponent("image");
|
|
viewer.activateComponent("direction");
|
|
viewer.activateComponent("sequence");
|
|
viewer.activateComponent("keyboard");
|
|
viewer.deactivateComponent("slider");
|
|
sliderActive = false;
|
|
} else {
|
|
viewer.activateComponent("slider");
|
|
viewer.deactivateComponent("image");
|
|
viewer.deactivateComponent("direction");
|
|
viewer.deactivateComponent("sequence");
|
|
viewer.deactivateComponent("keyboard");
|
|
sliderActive = true;
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|