Skip to content

Instantly share code, notes, and snippets.

@oscarlorentzon
Last active January 20, 2021 08:34
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/520548974a5b184059553b75d3af8eb3 to your computer and use it in GitHub Desktop.
Save oscarlorentzon/520548974a5b184059553b75d3af8eb3 to your computer and use it in GitHub Desktop.
MapillaryJS + HERE Maps
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link href='https://unpkg.com/mapillary-js@3.1.0/dist/mapillary.min.css' rel='stylesheet' />
<link href="https://js.cit.api.here.com/v3/3.0/mapsjs-ui.css" rel="stylesheet" type="text/css" />
<script src='https://unpkg.com/mapillary-js@3.1.0/dist/mapillary.min.js'></script>
<script type="text/javascript" src="https://js.cit.api.here.com/v3/3.0/mapsjs-core.js"></script>
<script type="text/javascript" src="https://js.cit.api.here.com/v3/3.0/mapsjs-service.js"></script>
<script type="text/javascript" src="https://js.cit.api.here.com/v3/3.0/mapsjs-ui.js"></script>
<script type="text/javascript" src="https://js.cit.api.here.com/v3/3.0/mapsjs-mapevents.js"></script>
<style>
body { margin:0; padding:0; height: 100%; }
#mly { position: absolute; height: 100%; width: 66%; }
#map { position: absolute; width: 34%; top: 0; right: 0; bottom: 0; }
</style>
</head>
<body>
<div id='mly'></div>
<div id='map'></div>
<script>
var platform = new H.service.Platform({
app_id: 'DemoAppId01082013GAL',
app_code: 'AJKnXv84fjrb0KIHawS0Tg',
useCIT: true,
useHTTPS: true
});
var defaultLayers = platform.createDefaultLayers();
var map = new H.Map(
document.getElementById('map'),
defaultLayers.normal.map,
{ center: { lat: 56.04351888068181, lng: 12.695600612967427 }, zoom: 15 });
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
var ui = H.ui.UI.createDefault(map, defaultLayers);
var mly = new Mapillary.Viewer({
apiClient: 'QjI1NnU0aG5FZFZISE56U3R5aWN4Zzo3NTM1MjI5MmRjODZlMzc0',
container: 'mly',
imageKey: 'zarcRdNFZwg3FkXNcsFeGw',
});
var marker;
mly.on(Mapillary.Viewer.nodechanged, function (node) {
var latLng = { lat: node.latLon.lat, lng: node.latLon.lon };
if (!marker) {
marker = new H.map.Marker(latLng);
map.addObject(marker);
} else {
marker.setPosition(latLng);
}
map.setCenter(latLng);
});
window.addEventListener('resize', function() {
mly.resize();
map.getViewPort().resize();
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment