mirror of
https://github.com/mapillary/mapillary-js.git
synced 2025-12-08 17:35:55 +00:00
129 lines
4.5 KiB
HTML
129 lines
4.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>MapillaryJS Popup</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,
|
|
.mly-viewer-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<script type="module">
|
|
import {
|
|
Alignment,
|
|
OutlineTag,
|
|
Popup,
|
|
RectGeometry,
|
|
Viewer,
|
|
} from "/dist/mapillary.module.js";
|
|
import { accessToken } from "/doc-src/.access-token/token.js";
|
|
|
|
// Change popup point or rect based on tag geometry
|
|
function onGeometryChanged(tag) {
|
|
const popup = tagPopups[tag.id].popup;
|
|
popup.setBasicRect(tag.geometry.rect);
|
|
}
|
|
|
|
function createPopup(label) {
|
|
const popupOptions = {
|
|
float: Alignment.Top,
|
|
position: Alignment.Top,
|
|
};
|
|
const popup = new Popup(popupOptions);
|
|
const span = document.createElement("span");
|
|
span.innerHTML = label;
|
|
popup.setDOMContent(span);
|
|
return popup;
|
|
}
|
|
|
|
async function createTagPopups(id) {
|
|
return new Promise((resolve) => {
|
|
const amount = 1000;
|
|
const rows = Math.floor(Math.sqrt(amount));
|
|
const cols = rows;
|
|
const itemWidth = 1 / cols;
|
|
const itemHeight = 1 / rows;
|
|
const paddingX = itemWidth / 10;
|
|
const paddingY = itemHeight / 10;
|
|
const tagPopups = {};
|
|
for (let col = 0; col < cols; ++col) {
|
|
for (let row = 0; row < rows; ++row) {
|
|
const x0 = col / cols + paddingX;
|
|
const x1 = x0 + itemWidth - 2 * paddingX;
|
|
const y0 = row / rows + paddingY;
|
|
const y1 = y0 + itemHeight - 2 * paddingY;
|
|
const rect = [x0, y0, x1, y1];
|
|
const geometry = new RectGeometry(rect);
|
|
const id = `tag-id-${row}-${col}`;
|
|
const options = { editable: false };
|
|
const tag = new OutlineTag(id, geometry, options);
|
|
tag.on("geometrychanged", onGeometryChanged);
|
|
const popup = createPopup(id);
|
|
popup.setBasicRect(rect);
|
|
tagPopups[id] = { popup, tag };
|
|
}
|
|
}
|
|
resolve(tagPopups);
|
|
});
|
|
}
|
|
|
|
function initViewer() {
|
|
const imageId = "300943088210479";
|
|
const container = document.createElement("div");
|
|
container.className = "mly-viewer-container";
|
|
document.body.appendChild(container);
|
|
const viewerOptions = {
|
|
accessToken,
|
|
component: {
|
|
cover: false,
|
|
popup: true,
|
|
tag: true,
|
|
},
|
|
container,
|
|
};
|
|
const viewer = new Viewer(viewerOptions);
|
|
viewer.moveTo(imageId).catch((error) => console.error(error));
|
|
return viewer;
|
|
}
|
|
|
|
const viewer = initViewer();
|
|
|
|
const tagPopups = await createTagPopups();
|
|
const popups = Object.keys(tagPopups).map(
|
|
(id) => tagPopups[id].popup
|
|
);
|
|
const tags = Object.keys(tagPopups).map((id) => tagPopups[id].tag);
|
|
|
|
const popupComp = viewer.getComponent("popup");
|
|
const tagComp = viewer.getComponent("tag");
|
|
|
|
const onimage = () => {
|
|
tagComp.removeAll();
|
|
tagComp.add(tags);
|
|
popupComp.removeAll();
|
|
popupComp.add(popups);
|
|
};
|
|
viewer.on("image", onimage);
|
|
</script>
|
|
</body>
|
|
</html>
|