Skip to content

Instantly share code, notes, and snippets.

@oscarlorentzon
Last active January 20, 2021 08:36
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save oscarlorentzon/84fc2d87f4aab1b8a434c96161e13509 to your computer and use it in GitHub Desktop.
Save oscarlorentzon/84fc2d87f4aab1b8a434c96161e13509 to your computer and use it in GitHub Desktop.
Relate popups to tags
<!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 popupKey = 'XRStByh_xxVWzTS0s6miqg';
var mly = new Mapillary.Viewer({
apiClient: 'QjI1NnU0aG5FZFZISE56U3R5aWN4Zzo3NTM1MjI5MmRjODZlMzc0',
component: {
// Activate popup and tag components during viewer initialization
cover: false,
popup: true,
tag: true,
},
container: 'mly',
imageKey: popupKey,
});
function createPopup(label) {
var span = document.createElement('span');
span.innerHTML = label;
// Do not specify the popup float or position options for
// automatic positioning based on viewport
var popup = new Mapillary.PopupComponent.Popup({ offset: 7 });
popup.setDOMContent(span);
return popup;
}
// Change popup point or rect based on tag geometry
var onGeometryChanged = function(tag) {
if (tag.geometry instanceof Mapillary.TagComponent.PointGeometry) {
for (var i = 0; i < popups[tag.id].length; i++) {
var popup = popups[tag.id][i];
popup.setBasicPoint(tag.geometry.point);
}
} else if (tag.geometry instanceof Mapillary.TagComponent.RectGeometry) {
for (var i = 0; i < popups[tag.id].length; i++) {
var popup = popups[tag.id][i];
popup.setBasicRect(tag.geometry.rect);
}
}
}
// Keep track of which popups belong to which tags
var popups = {};
// Relate a tag and a popup to a rect
var rect = [0.687, 0.444, 0.860, 0.585];
var rectGeometry = new Mapillary.TagComponent.RectGeometry(rect);
var rectTag = new Mapillary.TagComponent.OutlineTag('rectTag', rectGeometry, { editable: true });
rectTag.on('geometrychanged', onGeometryChanged);
var rectPopup = createPopup('Concrete bench');
rectPopup.setBasicRect(rect);
popups[rectTag.id] = [];
popups[rectTag.id].push(rectPopup);
// Relate a tag and a popup to a point
var point = [0.272, 0.205];
var pointGeometry = new Mapillary.TagComponent.PointGeometry(point);
var pointTag = new Mapillary.TagComponent.SpotTag('pointTag', pointGeometry, { editable: true });
pointTag.on('geometrychanged', onGeometryChanged);
var pointPopup = createPopup('Street light');
pointPopup.setBasicPoint(point);
popups[pointTag.id] = [];
popups[pointTag.id].push(pointPopup);
// Retrieve components
var popupComponent = mly.getComponent('popup');
var tagComponent = mly.getComponent('tag');
// Add tags and popups when the related node is shown, otherwise remove them.
var onNodeChanged = function(node) {
if (node.key === popupKey) {
tagComponent.add([rectTag, pointTag]);
popupComponent.add([rectPopup, pointPopup]);
} else {
tagComponent.removeAll();
popupComponent.removeAll();
}
}
mly.on(Mapillary.Viewer.nodechanged, onNodeChanged);
window.addEventListener('resize', function() { mly.resize(); });
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment