Last active
January 20, 2021 08:37
-
-
Save oscarlorentzon/898c55ef06917b07f165b7707d9f3a9e to your computer and use it in GitHub Desktop.
Determine if viewer is navigable
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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: 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({ | |
| // Replace this with your own client ID from mapillary.com | |
| apiClient: 'QjI1NnU0aG5FZFZISE56U3R5aWN4Zzo3NTM1MjI5MmRjODZlMzc0', | |
| container: 'mly1', | |
| imageKey: '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({ | |
| // Replace this with your own client ID from mapillary.com | |
| apiClient: 'QjI1NnU0aG5FZFZISE56U3R5aWN4Zzo3NTM1MjI5MmRjODZlMzc0', | |
| component: { cover: false }, | |
| container: 'mly2', | |
| imageKey: '6ZcXjb82YuNEtPNA3fqBzA', | |
| }); | |
| // 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({ | |
| // Replace this with your own client ID from mapillary.com | |
| apiClient: 'QjI1NnU0aG5FZFZISE56U3R5aWN4Zzo3NTM1MjI5MmRjODZlMzc0', | |
| container: 'mly3', | |
| }); | |
| // 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