Skip to content

Instantly share code, notes, and snippets.

@oscarlorentzon

oscarlorentzon/index.html

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/a9ad92a720d2f175c9ce7f3f982ac59f to your computer and use it in GitHub Desktop.
Save oscarlorentzon/a9ad92a720d2f175c9ce7f3f982ac59f to your computer and use it in GitHub Desktop.
Download ZIP
Configure point, polygon and rect 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/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");
// Create a configured spot tag showing a point
var point = [0.524, 0.434];
var pointGeometry = new Mapillary.TagComponent.PointGeometry(point);
var pointTag = new Mapillary.TagComponent.SpotTag(
'pointTag',
pointGeometry,
{
color: 0xff00ff,
editable: true,
text: "streetlight",
textColor: 0xff00ff,
});
// Create an configured outline tag showing a polygon
var polygon = [
[0.042, 0.558],
[0.051, 0.444],
[0.071, 0.445],
[0.074, 0.412],
[0.063, 0.405],
[0.063, 0.403],
[0.065, 0.402],
[0.064, 0.400],
[0.096, 0.381],
[0.183, 0.386],
[0.244, 0.440],
[0.253, 0.449],
[0.266, 0.467],
[0.265, 0.468],
[0.266, 0.471],
[0.258, 0.472],
[0.257, 0.475],
[0.247, 0.621],
[0.176, 0.623],
[0.040, 0.610],
[0.045, 0.566],
[0.042, 0.558],
];
polygonGeometry = new Mapillary.TagComponent.PolygonGeometry(polygon);
var polygonTag = new Mapillary.TagComponent.OutlineTag(
'polygonTag',
polygonGeometry,
{
editable: true,
fillColor: 0x00ffff,
fillOpacity: 0.3,
lineColor: 0x00ffff,
text: "building",
textColor: 0x00ffff,
});
// Create a configured outline tag showing a rectangle
var rect = [0.68, 0.51, 0.72, 0.56];
var rectGeometry = new Mapillary.TagComponent.RectGeometry(rect);
var rectTag = new Mapillary.TagComponent.OutlineTag(
'rectTag',
rectGeometry,
{
editable: true,
fillColor: 0xffff00,
fillOpacity: 0.3,
lineColor: 0xffff00,
text: "stop sign",
textColor: 0xffff00,
});
// Add tags when the related node is shown, otherwise remove them.
viewer.on(Mapillary.Viewer.nodechanged, function(node) {
if (node.key === tagKey) {
tagComponent.add([pointTag, polygonTag, rectTag]);
} else {
tagComponent.removeAll();
}
});
window.addEventListener("resize", function() { viewer.resize(); });
</script>
</body>
</html>
@andrewharvey
Copy link

L75 would be better as var polygonGeometry... for style consistency.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment