oscarlorentzon · January 20, 2021 08:36
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%; }
        #message {
            text-align: center;
            width: 100%;
            position: absolute;
            top: 60px;
            padding: 4px 0;
            background-color: white;
        }
    </style>
 </head>

 <body>
    <div id='mly'></div>
    <div id='message'></div>

    <script>
        function setMessage(message) {
            var messageContainer = document.getElementById('message');
            messageContainer.innerHTML = message;
        }

        var componentOptions = null;

        if (Mapillary.isSupported()) {
            // Enable or disable any components, e.g. tag and popup which requires WebGL support
            // or use the default components by not supplying any component options.
            componentOptions = { /* Default options */ };

            setMessage("MapillaryJS is fully supported by your browser.");
        } else if (Mapillary.isFallbackSupported()) {
            // On top of the disabled components below, also the popup, marker and tag
            // components require WebGL support and should not be enabled (they are
            // disabled by default so does not need to be specified below).
            componentOptions = {
                // Disable components requiring WebGL support
                direction: false,
                imagePlane: false,
                keyboard: false,
                mouse: false,
                sequence: false,

                // Enable fallback components
                image: true,
                navigation: true,
            }

            setMessage("MapillaryJS fallback functionality is supported by your browser.");
        } else {
            // Handle the fact that MapillaryJS is not supported in a way that is
            // appropriate for your application.
            setMessage("MapillaryJS is not supported by your browser.");
        }

        if (!!componentOptions) {
            // Deactivate cover without interaction needed.
            componentOptions.cover = false;

            var mly = new Mapillary.Viewer({
                // Replace this with your own client ID from mapillary.com
                apiClient: 'QjI1NnU0aG5FZFZISE56U3R5aWN4Zzo3NTM1MjI5MmRjODZlMzc0',
                component: componentOptions, 
                container: 'mly',
                imageKey: '6ZcXjb82YuNEtPNA3fqBzA',
            });

            // 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%; }
	#message {
	text-align: center;
	width: 100%;
	position: absolute;
	top: 60px;
	padding: 4px 0;
	background-color: white;
	}
	</style>
	</head>

	<body>
	<div id='mly'></div>
	<div id='message'></div>

	<script>
	function setMessage(message) {
	var messageContainer = document.getElementById('message');
	messageContainer.innerHTML = message;
	}

	var componentOptions = null;

	if (Mapillary.isSupported()) {
	// Enable or disable any components, e.g. tag and popup which requires WebGL support
	// or use the default components by not supplying any component options.
	componentOptions = { /* Default options */ };

	setMessage("MapillaryJS is fully supported by your browser.");
	} else if (Mapillary.isFallbackSupported()) {
	// On top of the disabled components below, also the popup, marker and tag
	// components require WebGL support and should not be enabled (they are
	// disabled by default so does not need to be specified below).
	componentOptions = {
	// Disable components requiring WebGL support
	direction: false,
	imagePlane: false,
	keyboard: false,
	mouse: false,
	sequence: false,

	// Enable fallback components
	image: true,
	navigation: true,
	}

	setMessage("MapillaryJS fallback functionality is supported by your browser.");
	} else {
	// Handle the fact that MapillaryJS is not supported in a way that is
	// appropriate for your application.
	setMessage("MapillaryJS is not supported by your browser.");
	}

	if (!!componentOptions) {
	// Deactivate cover without interaction needed.
	componentOptions.cover = false;

	var mly = new Mapillary.Viewer({
	// Replace this with your own client ID from mapillary.com
	apiClient: 'QjI1NnU0aG5FZFZISE56U3R5aWN4Zzo3NTM1MjI5MmRjODZlMzc0',
	component: componentOptions,
	container: 'mly',
	imageKey: '6ZcXjb82YuNEtPNA3fqBzA',
	});

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