Skip to content

Instantly share code, notes, and snippets.

@oscarlorentzon

oscarlorentzon/index.html

Last active January 20, 2021 08:36
Show Gist options
  • Save oscarlorentzon/94539cefc33296ab6f28e3a83ecdccf1 to your computer and use it in GitHub Desktop.
Save oscarlorentzon/94539cefc33296ab6f28e3a83ecdccf1 to your computer and use it in GitHub Desktop.
Download ZIP
Create tags
Raw
index.html
<!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/[email protected]/dist/mapillary.min.js'></script>
<link href='https://unpkg.com/[email protected]/dist/mapillary.min.css' rel='stylesheet' />
<style>
html, body { margin: 0; padding: 0; height: 100%; }
#mly { height: 100%; }
.button-container { background: white; position: absolute; top: 0; left: 0; padding: 5px; }
.button-container > button {
display: block;
border: 1px solid black;
background-color: white;
color: black;
border-radius: none;
margin-top: 2px;
}
</style>
</head>
<body>
<div id='mly'></div>
<div class="button-container">
<button onclick="changeMode(Mapillary.TagComponent.TagMode.CreatePoint)">Create point</button>
<button onclick="changeMode(Mapillary.TagComponent.TagMode.CreatePolygon)">Create polygon</button>
<button onclick="changeMode(Mapillary.TagComponent.TagMode.CreateRect)">Create rectangle</button>
<button onclick="changeMode(Mapillary.TagComponent.TagMode.CreateRectDrag)">Create rectangle drag</button>
<button onclick="changeMode(Mapillary.TagComponent.TagMode.Default)">Stop creating</button>
</div>
<script>
var viewer = new Mapillary.Viewer({
apiClient: "QjI1NnU0aG5FZFZISE56U3R5aWN4Zzo3NTM1MjI5MmRjODZlMzc0",
component: {
cover: false,
tag: true,
},
container: "mly",
imageKey: "6YEHDch0Co4JPLcU5rdiRQ",
});
// Retrieve tag component
var tagComponent = viewer.getComponent("tag");
// Change mode on button clicks
function changeMode(tagMode) {
tagComponent.changeMode(tagMode);
}
// Create and add editable tags based on created geometry type
var createdIndex = 0;
tagComponent.on(Mapillary.TagComponent.TagComponent.geometrycreated, function(geometry) {
var id = "id-" + createdIndex++;
var tag;
if (geometry instanceof Mapillary.TagComponent.RectGeometry) {
tag = new Mapillary.TagComponent.OutlineTag(id, geometry, { editable: true, text: "rect" });
} else if (geometry instanceof Mapillary.TagComponent.PointGeometry) {
tag = new Mapillary.TagComponent.SpotTag(id, geometry, { editable: true, text: "point" });
} else if (geometry instanceof Mapillary.TagComponent.PolygonGeometry) {
tag = new Mapillary.TagComponent.OutlineTag(id, geometry, { editable: true, text: "polygon" });
} else {
throw new Error("Unsupported geometry type");
}
var onTagGeometryChanged = function(tag) { console.log(tag.id, tag.geometry); };
tag.on(Mapillary.TagComponent.OutlineTag.geometrychanged, onTagGeometryChanged);
tagComponent.add([tag]);
});
// Tags are related to a specific node, remove them when node changes
viewer.on(Mapillary.Viewer.nodechanged, function(node) {
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