Skip to content

Instantly share code, notes, and snippets.

@oscarlorentzon
Last active January 20, 2021 08:36
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save oscarlorentzon/3eb61ce99b3c1cedba88942cb02f317d to your computer and use it in GitHub Desktop.
Save oscarlorentzon/3eb61ce99b3c1cedba88942cb02f317d to your computer and use it in GitHub Desktop.
Initialize with or without a key
<!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/mapillary-js@3.1.0/dist/mapillary.min.js'></script>
<link href='https://unpkg.com/mapillary-js@3.1.0/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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment