oscarlorentzon · January 20, 2021 08:36
diff --git a/index.html b/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%; }
    </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>
	<!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%; }
	</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>