Skip to content

Instantly share code, notes, and snippets.

@oscarlorentzon
Last active January 20, 2021 08:28
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/e0806c8eebe0c67e681c20be95d546b9 to your computer and use it in GitHub Desktop.
Save oscarlorentzon/e0806c8eebe0c67e681c20be95d546b9 to your computer and use it in GitHub Desktop.
Marker options
<!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%; }
#mly { height: 100%; }
</style>
</head>
<body>
<div id='mly'></div>
<script>
// Enable marker component when setting up viewer
var mly = new Mapillary.Viewer({
apiClient: 'QjI1NnU0aG5FZFZISE56U3R5aWN4Zzo3NTM1MjI5MmRjODZlMzc0',
component: {
cover: false,
marker: true,
},
container: 'mly',
});
// Create an yellow interactive simple marker and define all options
var interactiveMarker = new Mapillary.MarkerComponent.SimpleMarker(
'interactive-id',
{ lat: 33.34472682559541, lon: -118.32670195267636 },
{
ballColor: '#000',
ballOpacity: 1,
color: 0xffff00,
opacity: 0.5,
interactive: true,
radius: 0.8,
});
// Create a non interactive simple marker with default options
var defaultMarker = new Mapillary.MarkerComponent.SimpleMarker(
'default-id',
{ lat: 33.34473641359787, lon: -118.3267162471838 });
// Add markers to component
var markerComponent = mly.getComponent('marker');
markerComponent.add([interactiveMarker, defaultMarker]);
// Listen for marker changes
markerComponent.on(Mapillary.MarkerComponent.MarkerComponent.changed, function(e) {
console.log('Marker changed:', e.marker.id, e.marker.latLon);
});
mly.moveToKey('m-slOlK_DYuHWHJSxeJd7g').catch(function(e) { console.error(e); });
// Viewer size is dynamic so resize should be called every time the window size changes
window.addEventListener("resize", function() { mly.resize(); });
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment