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%; }
        #mly1 { position: absolute; height: 100%; width: 50%; }
        #mly2 { position: absolute; height: 100%; width: 50%; left: 50%; }
    </style>
 </head>

 <body>
    <div id='mly1'></div>
    <div id='mly2'></div>

    <script>
        /**
         * When you want to show a specific image in the viewer from
         * the start you should initialize it with a key (see mly1 below).
         *
         * When you do not know the first image key at implementation
         * time, e.g. in a map-viewer application you should initialize
         * the viewer without a key and call `moveToKey` instead (see mly2
         * below).
         *
         * When initializing the viewer with a key it is bound to that key
         * until the node for that key has been successfully loaded.
         * Also, a cover with the image of the key will be shown.
         * If the data for that key can not be loaded because the key is
         * faulty or other errors occur it is not possible to navigate
         * to another key because the viewer is not navigable. The viewer
         * becomes navigable when the data for the key has been loaded and
         * the image is shown in the viewer. This wayof initializing
         * the viewer is mostly for embedding in blog posts and similar
         * where one wants to show a specific image initially.
         *
         * If the viewer is initialized without a key (with null or
         * undefined) it is not bound to any particular key and it is
         * possible to move to any key with `viewer.moveToKey("<my-image-key>")`.
         * If the first move to a key fails it is possible to move to another
         * key. The viewer will show a black background until a move
         * succeeds. This way of intitializing is suited for a map-viewer
         * application when the initial key is not known at implementation
         * time.
         */

        // Create a viewer with an image key specified. This is suitable for
        // embedding in blog posts and similar when the key is known beforehand.
        var mly1 = new Mapillary.Viewer({
            // Replace this with your own client ID from mapillary.com
            apiClient: 'QjI1NnU0aG5FZFZISE56U3R5aWN4Zzo3NTM1MjI5MmRjODZlMzc0',
            component: { cover: false }, 
            container: 'mly1',
            imageKey: '6ZcXjb82YuNEtPNA3fqBzA',
        });

        // When loading a key the viewer is not navigable.
        console.log("mly1 - is navigable:", mly1.isNavigable);

        // Calling `moveToKey` will throw because the viewer is not navigable until
        // the intial key has been successfully loaded.
        mly1.moveToKey('6ZcXjb82YuNEtPNA3fqBzA').then(
            function(node) { console.log('mly1 loaded key:', node.key); },
            function(error) { console.error('mly1 error:', error); });

        // Create a viewer without a key specified and call move to key instead.
        // This is suitable for map-viewer applications where the key is not
        // known at implementation time.
        var mly2 = new Mapillary.Viewer({
            // Replace this with your own client ID from mapillary.com
            apiClient: 'QjI1NnU0aG5FZFZISE56U3R5aWN4Zzo3NTM1MjI5MmRjODZlMzc0',
            container: 'mly2',
        });

        // When the viewer is initialized without a key the viewer is navigable.
        console.log("mly2 - is navigable:", mly2.isNavigable);

        mly2.moveToKey('6ZcXjb82YuNEtPNA3fqBzA').then(
            function(node) { console.log('mly2 loaded key:', node.key); },
            function(error) { console.error('mly2 error:', error); });

        var createNavigableChanged = function(name) {
            return function(navigable) {
                console.log(name, "- navigable changed to:", navigable);
            }
        }

        // Listen to navigable changes and log
        mly1.on(Mapillary.Viewer.navigablechanged, createNavigableChanged('mly1'));
        mly2.on(Mapillary.Viewer.navigablechanged, createNavigableChanged('mly2'));

        // Whenever the cover is activated for any viewer the viewer will not be navigable.

        // Viewer size is dynamic so resize should be called every time the window size changes
        window.addEventListener("resize", function() { mly1.resize(); mly2.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%; }
	#mly1 { position: absolute; height: 100%; width: 50%; }
	#mly2 { position: absolute; height: 100%; width: 50%; left: 50%; }
	</style>
	</head>

	<body>
	<div id='mly1'></div>
	<div id='mly2'></div>

	<script>
	/**
	* When you want to show a specific image in the viewer from
	* the start you should initialize it with a key (see mly1 below).
	*
	* When you do not know the first image key at implementation
	* time, e.g. in a map-viewer application you should initialize
	* the viewer without a key and call `moveToKey` instead (see mly2
	* below).
	*
	* When initializing the viewer with a key it is bound to that key
	* until the node for that key has been successfully loaded.
	* Also, a cover with the image of the key will be shown.
	* If the data for that key can not be loaded because the key is
	* faulty or other errors occur it is not possible to navigate
	* to another key because the viewer is not navigable. The viewer
	* becomes navigable when the data for the key has been loaded and
	* the image is shown in the viewer. This wayof initializing
	* the viewer is mostly for embedding in blog posts and similar
	* where one wants to show a specific image initially.
	*
	* If the viewer is initialized without a key (with null or
	* undefined) it is not bound to any particular key and it is
	* possible to move to any key with `viewer.moveToKey("<my-image-key>")`.
	* If the first move to a key fails it is possible to move to another
	* key. The viewer will show a black background until a move
	* succeeds. This way of intitializing is suited for a map-viewer
	* application when the initial key is not known at implementation
	* time.
	*/

	// Create a viewer with an image key specified. This is suitable for
	// embedding in blog posts and similar when the key is known beforehand.
	var mly1 = new Mapillary.Viewer({
	// Replace this with your own client ID from mapillary.com
	apiClient: 'QjI1NnU0aG5FZFZISE56U3R5aWN4Zzo3NTM1MjI5MmRjODZlMzc0',
	component: { cover: false },
	container: 'mly1',
	imageKey: '6ZcXjb82YuNEtPNA3fqBzA',
	});

	// When loading a key the viewer is not navigable.
	console.log("mly1 - is navigable:", mly1.isNavigable);

	// Calling `moveToKey` will throw because the viewer is not navigable until
	// the intial key has been successfully loaded.
	mly1.moveToKey('6ZcXjb82YuNEtPNA3fqBzA').then(
	function(node) { console.log('mly1 loaded key:', node.key); },
	function(error) { console.error('mly1 error:', error); });

	// Create a viewer without a key specified and call move to key instead.
	// This is suitable for map-viewer applications where the key is not
	// known at implementation time.
	var mly2 = new Mapillary.Viewer({
	// Replace this with your own client ID from mapillary.com
	apiClient: 'QjI1NnU0aG5FZFZISE56U3R5aWN4Zzo3NTM1MjI5MmRjODZlMzc0',
	container: 'mly2',
	});

	// When the viewer is initialized without a key the viewer is navigable.
	console.log("mly2 - is navigable:", mly2.isNavigable);

	mly2.moveToKey('6ZcXjb82YuNEtPNA3fqBzA').then(
	function(node) { console.log('mly2 loaded key:', node.key); },
	function(error) { console.error('mly2 error:', error); });

	var createNavigableChanged = function(name) {
	return function(navigable) {
	console.log(name, "- navigable changed to:", navigable);
	}
	}

	// Listen to navigable changes and log
	mly1.on(Mapillary.Viewer.navigablechanged, createNavigableChanged('mly1'));
	mly2.on(Mapillary.Viewer.navigablechanged, createNavigableChanged('mly2'));

	// Whenever the cover is activated for any viewer the viewer will not be navigable.

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