@panoramax/web-viewer
Version:
Panoramax web viewer for geolocated pictures
55 lines (50 loc) • 1.18 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Panoramax Coverage Map</title>
<style>
#map {
position: relative;
width: 95%;
margin: 2.5%;
height: 400px;
}
#map.fullpage {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: unset;
width: unset;
margin: 0;
}
</style>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<pnx-coverage-map
id="coverage"
class="fullpage"
endpoint="https://api.panoramax.xyz/api"
/>
<script>
// Retrieve component from DOM
var coverage = document.getElementById("coverage");
coverage.addEventListener("ready", () => {
// Listen to sequence hovered on map
coverage.map.on("sequence-hover", e => {
console.log("Hovered sequence", e.seqId);
});
// Listen to user clicks on map
coverage.addEventListener("select", e => {
console.log("Selected sequence", e.detail.seqId, "picture", e.detail.picId);
});
}, {once: true});
</script>
</body>
</html>