Skip to content

Instantly share code, notes, and snippets.

@oscarlorentzon oscarlorentzon/index.html
Last active Sep 20, 2019

Embed
What would you like to do?
Determine if viewer is navigable
<!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@2.18.1/dist/mapillary.min.js'></script>
<link href='https://unpkg.com/mapillary-js@2.18.1/dist/mapillary.min.css' rel='stylesheet' />
<style>
html, body { margin: 0; padding: 0; height: 100%; }
#mly1 { position: absolute; height: 100%; width: 33%; }
#mly2 { position: absolute; height: 100%; width: 34%; left: 33%; }
#mly3 { position: absolute; height: 100%; width: 33%; right: 0; }
</style>
</head>
<body>
<div id='mly1'></div>
<div id='mly2'></div>
<div id='mly3'></div>
<script>
// Create a viewer that with an active cover.
var mly1 = new Mapillary.Viewer(
'mly1',
// Replace this with your own client ID from mapillary.com
'QjI1NnU0aG5FZFZISE56U3R5aWN4Zzo3NTM1MjI5MmRjODZlMzc0',
'6ZcXjb82YuNEtPNA3fqBzA');
// When the cover is active with a key the viewer is not navigable. When the cover
// has been deactivated and the node has been loaded the viewer will be navigable.
console.log("mly1 - is navigable:", mly1.isNavigable);
// Calling moveToKey, moveDir, moveCloseTo or setAuthToken will result in an exception.
mly1.moveToKey('6ZcXjb82YuNEtPNA3fqBzA').catch(function(e) { console.error('mly1', e); });
// Create a viewer and deactivate the cover immediately.
var mly2 = new Mapillary.Viewer(
'mly2',
// Replace this with your own client ID from mapillary.com
'QjI1NnU0aG5FZFZISE56U3R5aWN4Zzo3NTM1MjI5MmRjODZlMzc0',
'6ZcXjb82YuNEtPNA3fqBzA',
{ component: { cover: false } });
// When the cover is active and loading a key the viewer is not navigable.
console.log("mly2 - is navigable:", mly2.isNavigable);
// Create a viewer without a key specified and call move to key instead.
var mly3 = new Mapillary.Viewer(
'mly3',
// Replace this with your own client ID from mapillary.com
'QjI1NnU0aG5FZFZISE56U3R5aWN4Zzo3NTM1MjI5MmRjODZlMzc0',
null);
// When the cover is active without a key the viewer is navigable.
console.log("mly3 - is navigable:", mly3.isNavigable);
mly3.moveToKey('6ZcXjb82YuNEtPNA3fqBzA').catch(function(e) { console.error('mly3', e); });
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'));
mly3.on(Mapillary.Viewer.navigablechanged, createNavigableChanged('mly3'));
// 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(); mly3.resize(); });
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.