mirror of
https://github.com/mapillary/mapillary-js.git
synced 2026-01-18 13:56:53 +00:00
146 lines
4.4 KiB
HTML
146 lines
4.4 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,
|
|
RenderMode,
|
|
Viewer,
|
|
} from './dist/mapillary.module.js';
|
|
|
|
let viewer;
|
|
|
|
checkSupport();
|
|
init();
|
|
addButtons();
|
|
|
|
function checkSupport() {
|
|
const sup = `isSupported: ${isSupported()}`;
|
|
const fSup = `isFallbackSupported: ${isFallbackSupported()}`;
|
|
console.log(`${sup}, ${fSup}`);
|
|
}
|
|
|
|
function init() {
|
|
const container = document.createElement('div');
|
|
container.className = 'viewer';
|
|
document.body.append(container);
|
|
|
|
viewer = new Viewer({
|
|
apiClient: 'QjI1NnU0aG5FZFZISE56U3R5aWN4ZzpkYzg0NzE3MDA0YTRhZjlh',
|
|
component: { cover: false },
|
|
container,
|
|
imageId: 'zarcRdNFZwg3FkXNcsFeGw',
|
|
renderMode: RenderMode.Letterbox,
|
|
});
|
|
}
|
|
|
|
function addButton(content, handler) {
|
|
const button = document.createElement('button');
|
|
button.textContent = content;
|
|
button.addEventListener('click', handler);
|
|
document.body.append(button);
|
|
}
|
|
|
|
function addButtons() {
|
|
addButton('Activate', () => viewer.deactivateCover());
|
|
addButton('Deactivate', () => viewer.activateCover());
|
|
addButton('Remove', () => viewer.remove());
|
|
addButton('Fill', () => viewer.setRenderMode(RenderMode.Fill));
|
|
addButton(
|
|
'Letterbox',
|
|
() => viewer.setRenderMode(RenderMode.Letterbox));
|
|
|
|
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>
|