mapillary-js
Version:
WebGL JavaScript library for displaying street level imagery from mapillary.com
145 lines (115 loc) • 4.8 kB
HTML
<html>
<head>
<title>MapillaryJS Tags Debug Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="dist/mapillary.min.css" />
<script src="dist/mapillary.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
#mly {
width: 90%;
height: 90%;
}
</style>
</head>
<body>
<div id="mly"></div>
<button onclick="createGeometry(Mapillary.TagComponent.TagMode.CreatePolygon)">Create polygon</button>
<button onclick="createGeometry(Mapillary.TagComponent.TagMode.CreateRect)">Create rectangle</button>
<button onclick="createGeometry(Mapillary.TagComponent.TagMode.CreateRectDrag)">Create rectangle drag</button>
<button onclick="createGeometry(Mapillary.TagComponent.TagMode.CreatePoint)">Create point</button>
<button onclick="stopCreate()">Stop create</button>
<button onclick="deactivate()">Deactivate</button>
<button onclick="activate()">Activate</button>
<script>
var viewer = new Mapillary.Viewer({
apiClient: "QjI1NnU0aG5FZFZISE56U3R5aWN4ZzpkYzg0NzE3MDA0YTRhZjlh",
component: { cover: false, tag: true },
container: "mly",
imageKey: "zarcRdNFZwg3FkXNcsFeGw",
renderMode: Mapillary.RenderMode.Letterbox,
});
window.addEventListener("resize", function () { viewer.resize(); });
function deactivate() { viewer.deactivateComponent("tag"); }
function activate() { viewer.activateComponent("tag"); }
var tagComponent = viewer.getComponent("tag");
function createGeometry(tagMode) {
tagComponent.changeMode(tagMode);
}
var currentMode = Mapillary.TagComponent.TagMode.Default;
tagComponent.on(Mapillary.TagComponent.TagComponent.modechanged, function (mode) {
currentMode = mode;
})
document.addEventListener("keydown", function (keyEvent) {
if (keyEvent.key === "Control" && currentMode === Mapillary.TagComponent.TagMode.CreateRectDrag) {
createGeometry(Mapillary.TagComponent.TagMode.Default);
}
});
document.addEventListener("keyup", function (keyEvent) {
if (keyEvent.key === "Control" && currentMode === Mapillary.TagComponent.TagMode.Default) {
createGeometry(Mapillary.TagComponent.TagMode.CreateRectDrag);
}
});
function stopCreate() {
tagComponent.changeMode(Mapillary.TagComponent.TagMode.Default);
}
var createdTags = {};
function onTagGeometryChanged(tag) { return; };
var createdIndex = 0;
function createOutlineTag(geometry, text) {
var id = "created" + createdIndex++;
var options = {
editable: true,
fillColor: 0x00FFFF,
fillOpacity: 0.2,
lineColor: 0x00FFFF,
lineWidth: 1,
text: text,
textColor: 0x00FFFF,
};
var tag = new Mapillary.TagComponent.OutlineTag(
id, geometry, options);
tag.on(Mapillary.TagComponent.OutlineTag.geometrychanged, onTagGeometryChanged);
return tag;
}
function createSpotTag(geometry) {
var id = "created" + createdIndex++;
var options = {
editable: true,
color: 0x00FFFF,
text: "Point",
textColor: 0x00FFFF,
};
var tag = new Mapillary.TagComponent.SpotTag(id, geometry, options);
tag.on(Mapillary.TagComponent.SpotTag.geometrychanged, onTagGeometryChanged);
return tag;
}
tagComponent.on(Mapillary.TagComponent.TagComponent.geometrycreated, function (geometry) {
var tag;
if (geometry instanceof Mapillary.TagComponent.RectGeometry) {
tag = createOutlineTag(geometry, "Rectangle");
} else if (geometry instanceof Mapillary.TagComponent.PolygonGeometry) {
tag = createOutlineTag(geometry, "Polygon");
} else if (geometry instanceof Mapillary.TagComponent.PointGeometry) {
tag = createSpotTag(geometry);
}
createdTags[tag.id] = tag;
tagComponent.add([tag]);
});
viewer.on(Mapillary.Viewer.nodechanged, function (node) {
createdTags = {};
tagComponent.removeAll();
});
</script>
</body>
</html>