Skip to content

Instantly share code, notes, and snippets.

@oscarlorentzon
Last active January 20, 2021 08:34
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save oscarlorentzon/d19b3387b7671be59f4add09f67c3b63 to your computer and use it in GitHub Desktop.
Listen to geometry changes
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<script src='https://unpkg.com/mapillary-js@3.1.0/dist/mapillary.min.js'></script>
<link href='https://unpkg.com/mapillary-js@3.1.0/dist/mapillary.min.css' rel='stylesheet' />
<style>
html, body { margin: 0; padding: 0; height: 100%; }
#mly { height: 100%; }
</style>
</head>
<body>
<div id='mly'></div>
<script>
var tagKey = '6YEHDch0Co4JPLcU5rdiRQ';
var viewer = new Mapillary.Viewer({
apiClient: "QjI1NnU0aG5FZFZISE56U3R5aWN4Zzo3NTM1MjI5MmRjODZlMzc0",
component: {
cover: false,
tag: true,
},
container: "mly",
imageKey: tagKey,
});
// Retrieve tag component
var tagComponent = viewer.getComponent("tag");
var tags = [];
// Create a configured outline tag showing a rectangle
function createRectTag() {
var rect = [0.68, 0.51, 0.72, 0.56];
var rectGeometry = new Mapillary.TagComponent.RectGeometry(rect);
var rectTag = new Mapillary.TagComponent.OutlineTag(
'id',
rectGeometry,
{
editable: true,
fillOpacity: 0.2,
text: "stop sign",
});
return rectTag;
}
function onTagGeometryChanged(tag) {
console.log(tag.geometry.rect);
}
// Add tags when the related node is shown, otherwise remove them.
// Add event listener when tag is created and remove event
// listener when tag is removed.
viewer.on(Mapillary.Viewer.nodechanged, function(node) {
if (node.key === tagKey) {
var tag = createRectTag();
tag.on("geometrychanged", onTagGeometryChanged);
tags.push(tag);
tagComponent.add([tag]);
} else {
for (var i = 0; i < tags.length; i++) {
var tag = tags[i];
tag.off("geometrychanged", onTagGeometryChanged);
}
tags = [];
tagComponent.removeAll();
}
});
window.addEventListener("resize", function() { viewer.resize(); });
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment