oscarlorentzon · January 20, 2021 08:35
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
    <meta charset='utf-8' />
    <title></title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,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 = 'FnqSkFAZXjv4Uqmqd4X_NA';

        var mly = new Mapillary.Viewer({
            // Replace this with your own client ID from mapillary.com
            apiClient: 'QjI1NnU0aG5FZFZISE56U3R5aWN4Zzo3NTM1MjI5MmRjODZlMzc0',
            component: {
                cover: false,
                popup: true,
            },
            container: 'mly',
            imageKey: popupKey,
        });

         // Get popup component
        var popupComponent = mly.getComponent('popup');

        var span = document.createElement('span');
        span.innerHTML = 'parking meter';

        var popup = new Mapillary.PopupComponent.Popup();
        popup.setDOMContent(span);
        popup.setBasicPoint([0.546, 0.523]);

        var onNodeChanged = function(node) {
            // Add the popup for the specific key, otherwise remove it
            if (node.key === popupKey) {
                popupComponent.add([popup]);
            } else {
                popupComponent.removeAll();
                mly.off(Mapillary.Viewer.nodechanged, onNodeChanged);
            }
        }

        mly.on(Mapillary.Viewer.nodechanged, onNodeChanged);

        // Viewer size is dynamic so resize should be called every time the window size changes
        window.addEventListener("resize", function() { mly.resize(); });
    </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset='utf-8' />
	<title></title>
	<meta name='viewport' content='initial-scale=1,maximum-scale=1,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 = 'FnqSkFAZXjv4Uqmqd4X_NA';

	var mly = new Mapillary.Viewer({
	// Replace this with your own client ID from mapillary.com
	apiClient: 'QjI1NnU0aG5FZFZISE56U3R5aWN4Zzo3NTM1MjI5MmRjODZlMzc0',
	component: {
	cover: false,
	popup: true,
	},
	container: 'mly',
	imageKey: popupKey,
	});

	// Get popup component
	var popupComponent = mly.getComponent('popup');

	var span = document.createElement('span');
	span.innerHTML = 'parking meter';

	var popup = new Mapillary.PopupComponent.Popup();
	popup.setDOMContent(span);
	popup.setBasicPoint([0.546, 0.523]);

	var onNodeChanged = function(node) {
	// Add the popup for the specific key, otherwise remove it
	if (node.key === popupKey) {
	popupComponent.add([popup]);
	} else {
	popupComponent.removeAll();
	mly.off(Mapillary.Viewer.nodechanged, onNodeChanged);
	}
	}

	mly.on(Mapillary.Viewer.nodechanged, onNodeChanged);

	// Viewer size is dynamic so resize should be called every time the window size changes
	window.addEventListener("resize", function() { mly.resize(); });
	</script>
	</body>
	</html>