Last active
January 20, 2021 08:28
-
-
Save oscarlorentzon/e0806c8eebe0c67e681c20be95d546b9 to your computer and use it in GitHub Desktop.
Marker options
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%; } | |
#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