oscarlorentzon/index.html

## index.html
<!DOCTYPE HTML>
<html>
    <head>
        <meta charset='utf-8' />
        <title></title>
        <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />

        <link href='https://unpkg.com/mapillary-js@3.1.0/dist/mapillary.min.css' rel='stylesheet' />
        <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.27.0/mapbox-gl.css' rel='stylesheet' />

        <script src='https://unpkg.com/mapillary-js@3.1.0/dist/mapillary.min.js'></script>
        <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.27.0/mapbox-gl.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>
            mapboxgl.accessToken = 'pk.eyJ1IjoibWFwaWxsYXJ5IiwiYSI6ImNpanB0NmN1bDAwOTF2dG03enM3ZHRocDcifQ.Z6wgtnyRBO0TuY3Ak1tVLQ';
            var map = new mapboxgl.Map({
                container: 'map',
                style: 'mapbox://styles/mapbox/streets-v8',
                center: [12.695600612967427, 56.04351888068181],
                zoom: 15,
            });

            var markerSource = {
                type: 'geojson',
                data: {
                    type: 'Feature',
                    geometry: {
                        type: 'Point',
                        coordinates: [12.695600612967427, 56.04351888068181],
                    },
                    properties: { },
                },
            };

            map.on('style.load', function() {
                map.addSource('markers', markerSource);
                map.addLayer({
                    id: 'markers',
                    type: 'symbol',
                    source: 'markers',
                    layout: {
                        'icon-image': '{marker-symbol}-15',
                    },
                });
            });

            var mly = new Mapillary.Viewer({
                apiClient: 'QjI1NnU0aG5FZFZISE56U3R5aWN4Zzo3NTM1MjI5MmRjODZlMzc0',
                container: 'mly',
                imageKey: 'zarcRdNFZwg3FkXNcsFeGw',
            });

            var marker;
            mly.on(Mapillary.Viewer.nodechanged, function (node) {
                var lngLat = [node.latLon.lon, node.latLon.lat];

                var data = {
                    type: 'Feature',
                    geometry: {
                        type: 'Point',
                        coordinates: lngLat,
                    },
                    properties: {
                        'marker-symbol': 'marker',
                    }
                };

                map.getSource('markers').setData(data);
                map.flyTo({ center: lngLat });
            });

            window.addEventListener('resize', function() { mly.resize(); map.resize(); });
        </script>
    </body>
</html>
	<!DOCTYPE HTML>
	<html>
	<head>
	<meta charset='utf-8' />
	<title></title>
	<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />

	<link href='https://unpkg.com/mapillary-js@3.1.0/dist/mapillary.min.css' rel='stylesheet' />
	<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.27.0/mapbox-gl.css' rel='stylesheet' />

	<script src='https://unpkg.com/mapillary-js@3.1.0/dist/mapillary.min.js'></script>
	<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.27.0/mapbox-gl.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>
	mapboxgl.accessToken = 'pk.eyJ1IjoibWFwaWxsYXJ5IiwiYSI6ImNpanB0NmN1bDAwOTF2dG03enM3ZHRocDcifQ.Z6wgtnyRBO0TuY3Ak1tVLQ';
	var map = new mapboxgl.Map({
	container: 'map',
	style: 'mapbox://styles/mapbox/streets-v8',
	center: [12.695600612967427, 56.04351888068181],
	zoom: 15,
	});

	var markerSource = {
	type: 'geojson',
	data: {
	type: 'Feature',
	geometry: {
	type: 'Point',
	coordinates: [12.695600612967427, 56.04351888068181],
	},
	properties: { },
	},
	};

	map.on('style.load', function() {
	map.addSource('markers', markerSource);
	map.addLayer({
	id: 'markers',
	type: 'symbol',
	source: 'markers',
	layout: {
	'icon-image': '{marker-symbol}-15',
	},
	});
	});

	var mly = new Mapillary.Viewer({
	apiClient: 'QjI1NnU0aG5FZFZISE56U3R5aWN4Zzo3NTM1MjI5MmRjODZlMzc0',
	container: 'mly',
	imageKey: 'zarcRdNFZwg3FkXNcsFeGw',
	});

	var marker;
	mly.on(Mapillary.Viewer.nodechanged, function (node) {
	var lngLat = [node.latLon.lon, node.latLon.lat];

	var data = {
	type: 'Feature',
	geometry: {
	type: 'Point',
	coordinates: lngLat,
	},
	properties: {
	'marker-symbol': 'marker',
	}
	};

	map.getSource('markers').setData(data);
	map.flyTo({ center: lngLat });
	});

	window.addEventListener('resize', function() { mly.resize(); map.resize(); });
	</script>
	</body>
	</html>