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 rel="stylesheet" href="https://openlayers.org/en/v5.2.0/css/ol.css" type="text/css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">

    <script src='https://unpkg.com/mapillary-js@3.1.0/dist/mapillary.min.js'></script>
    <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.2.0/build/ol.js"></script>

    <style>
        html, 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 faCircleLineMarkerStyle = new ol.style.Style({
            text: new ol.style.Text({
                text: '\uf111',
                scale: 0.7,
                font: 'normal 18px FontAwesome',
                fill: new ol.style.Fill({ color: 'rgb(255, 0, 0, 0.5)' }),
                stroke: new ol.style.Stroke({ color: 'white', width: 4 })
            }),
        });

        var faCircleSolidStyle = new ol.style.Style({
            text: new ol.style.Text({
                text: '\uf111',
                scale: 1,
                font: 'normal 18px FontAwesome',
                fill: new ol.style.Fill({ color: 'red' }),
                stroke: new ol.style.Stroke({ color: 'white', width: 4 })
            }),
        });

        var faWifiStyle = new ol.style.Style({
            text: new ol.style.Text({
                text: '\uf1eb',
                scale: 1.2,
                font: 'normal 18px FontAwesome',
                offsetY: -10,
                rotation: 0,
                fill: new ol.style.Fill({ color: 'red' }),
                stroke: new ol.style.Stroke({ color: 'red', width: 3 })
            }),
        });

        var updateBearingStyle = function(bearing) {
            liveBearing = new ol.style.Style({
                text: new ol.style.Text({
                    text: '\uf1eb',
                    scale: 1.2,
                    font: 'normal 18px FontAwesome',
                    offsetY: -10,
                    rotation: bearing * Math.PI / 180,
                    fill: new ol.style.Fill({ color: 'red' }),
                    stroke: new ol.style.Stroke({ color: 'red', width: 3 })
                }),
            });

            return [liveBearing, faCircleSolidStyle];
        };

        var clientId = 'QjI1NnU0aG5FZFZISE56U3R5aWN4Zzo3NTM1MjI5MmRjODZlMzc0';
        var key = 'w3p5M6s6J3HoX1ZREqXZIw';

        var urlStartImage = `https://a.mapillary.com/v3/images/${key}?client_id=${clientId}`;
        var urlSequence = `https://a.mapillary.com/v3/sequences/JMOBN38RSF2h6dpuuiBz6w?client_id=${clientId}`;

        var imagesUrl = `https://a.mapillary.com/v3/images?client_id=${clientId}&sequence_keys=JMOBN38RSF2h6dpuuiBz6w`;

        var imageListSource = new ol.source.Vector({
            projection: 'EPSG:3857',
            url: imagesUrl,
            format: new ol.format.GeoJSON()
        });

        var imageListLayer = new ol.layer.Vector({
            source: imageListSource,
            style: faCircleLineMarkerStyle
        });

        var seqSource = new ol.source.Vector({
            projection: 'EPSG:3857',
            url: urlSequence,
            format: new ol.format.GeoJSON()
        });

        var seqLayer = new ol.layer.Vector({
            source: seqSource,
            style: new ol.style.Style({
                stroke: new ol.style.Stroke({ color: 'white', width: 4 })
            })
        });

        var centerCoord = ol.proj.fromLonLat([14.26317443160897, 46.614749220149136]);

        var pointFeature = new ol.Feature({
            geometry: new ol.geom.Point(centerCoord)
        });

        pointFeature.setStyle([faWifiStyle, faCircleSolidStyle]);

        var movingPointLayer = new ol.layer.Vector({
            source: new ol.source.Vector({ features: [pointFeature] })
        });

        var osmLayer = new ol.layer.Tile({ source: new ol.source.OSM() });

        var map = new ol.Map({
            target: 'map',
            layers: [osmLayer, seqLayer, imageListLayer, movingPointLayer],
            view: new ol.View({ center: centerCoord, zoom: 20 })
        });

        var featureOverlay = new ol.layer.Vector({
            source: new ol.source.Vector(),
            map: map,
            style: [faWifiStyle, faCircleSolidStyle]
        });

        var mly = new Mapillary.Viewer({
            apiClient: clientId,
            component: { cover: false },
            container: 'mly',
            imageKey: key,
        });

        var highlight;
        var displayFeatureInfo = function(pixel, isClick) {
            var feature = map.forEachFeatureAtPixel(
                pixel,
                function(feature, layer) { return feature; },
                {
                    layerFilter: function(layer) { return layer === imageListLayer; },
                    hitTolerance: 5,
                });

            if (feature) {
                if (isClick) {
                    var bearing = feature.get('ca');
                    mly.moveToKey(feature.get('key'));
                    featureOverlay.setStyle(updateBearingStyle(bearing));
                }
            } else {
                return;
            }

            if (feature !== highlight) {
                if (highlight) {
                    featureOverlay.getSource().removeFeature(highlight);
                }

                if (feature) {
                    featureOverlay.getSource().addFeature(feature);
                }

                highlight = feature;
            }
        };

        mly.on(
            Mapillary.Viewer.nodechanged,
            function(node) {
                if (featureOverlay.getVisible()) {
                    featureOverlay.setVisible(false);
                }

                var lonLat = ol.proj.fromLonLat([
                    node.originalLatLon.lon,
                    node.originalLatLon.lat
                ]);

                map.getView().setCenter(lonLat);
                pointFeature.getGeometry().setCoordinates(lonLat);
                pointFeature.setStyle(updateBearingStyle(node.ca));
            });

        map.on('click', function(e) { displayFeatureInfo(e.pixel, true); });

        window.addEventListener('resize', function() { mly.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 rel="stylesheet" href="https://openlayers.org/en/v5.2.0/css/ol.css" type="text/css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">

	<script src='https://unpkg.com/mapillary-js@3.1.0/dist/mapillary.min.js'></script>
	<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.2.0/build/ol.js"></script>

	<style>
	html, 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 faCircleLineMarkerStyle = new ol.style.Style({
	text: new ol.style.Text({
	text: '\uf111',
	scale: 0.7,
	font: 'normal 18px FontAwesome',
	fill: new ol.style.Fill({ color: 'rgb(255, 0, 0, 0.5)' }),
	stroke: new ol.style.Stroke({ color: 'white', width: 4 })
	}),
	});

	var faCircleSolidStyle = new ol.style.Style({
	text: new ol.style.Text({
	text: '\uf111',
	scale: 1,
	font: 'normal 18px FontAwesome',
	fill: new ol.style.Fill({ color: 'red' }),
	stroke: new ol.style.Stroke({ color: 'white', width: 4 })
	}),
	});

	var faWifiStyle = new ol.style.Style({
	text: new ol.style.Text({
	text: '\uf1eb',
	scale: 1.2,
	font: 'normal 18px FontAwesome',
	offsetY: -10,
	rotation: 0,
	fill: new ol.style.Fill({ color: 'red' }),
	stroke: new ol.style.Stroke({ color: 'red', width: 3 })
	}),
	});

	var updateBearingStyle = function(bearing) {
	liveBearing = new ol.style.Style({
	text: new ol.style.Text({
	text: '\uf1eb',
	scale: 1.2,
	font: 'normal 18px FontAwesome',
	offsetY: -10,
	rotation: bearing * Math.PI / 180,
	fill: new ol.style.Fill({ color: 'red' }),
	stroke: new ol.style.Stroke({ color: 'red', width: 3 })
	}),
	});

	return [liveBearing, faCircleSolidStyle];
	};

	var clientId = 'QjI1NnU0aG5FZFZISE56U3R5aWN4Zzo3NTM1MjI5MmRjODZlMzc0';
	var key = 'w3p5M6s6J3HoX1ZREqXZIw';

	var urlStartImage = `https://a.mapillary.com/v3/images/${key}?client_id=${clientId}`;
	var urlSequence = `https://a.mapillary.com/v3/sequences/JMOBN38RSF2h6dpuuiBz6w?client_id=${clientId}`;

	var imagesUrl = `https://a.mapillary.com/v3/images?client_id=${clientId}&sequence_keys=JMOBN38RSF2h6dpuuiBz6w`;

	var imageListSource = new ol.source.Vector({
	projection: 'EPSG:3857',
	url: imagesUrl,
	format: new ol.format.GeoJSON()
	});

	var imageListLayer = new ol.layer.Vector({
	source: imageListSource,
	style: faCircleLineMarkerStyle
	});

	var seqSource = new ol.source.Vector({
	projection: 'EPSG:3857',
	url: urlSequence,
	format: new ol.format.GeoJSON()
	});

	var seqLayer = new ol.layer.Vector({
	source: seqSource,
	style: new ol.style.Style({
	stroke: new ol.style.Stroke({ color: 'white', width: 4 })
	})
	});

	var centerCoord = ol.proj.fromLonLat([14.26317443160897, 46.614749220149136]);

	var pointFeature = new ol.Feature({
	geometry: new ol.geom.Point(centerCoord)
	});

	pointFeature.setStyle([faWifiStyle, faCircleSolidStyle]);

	var movingPointLayer = new ol.layer.Vector({
	source: new ol.source.Vector({ features: [pointFeature] })
	});

	var osmLayer = new ol.layer.Tile({ source: new ol.source.OSM() });

	var map = new ol.Map({
	target: 'map',
	layers: [osmLayer, seqLayer, imageListLayer, movingPointLayer],
	view: new ol.View({ center: centerCoord, zoom: 20 })
	});

	var featureOverlay = new ol.layer.Vector({
	source: new ol.source.Vector(),
	map: map,
	style: [faWifiStyle, faCircleSolidStyle]
	});

	var mly = new Mapillary.Viewer({
	apiClient: clientId,
	component: { cover: false },
	container: 'mly',
	imageKey: key,
	});

	var highlight;
	var displayFeatureInfo = function(pixel, isClick) {
	var feature = map.forEachFeatureAtPixel(
	pixel,
	function(feature, layer) { return feature; },
	{
	layerFilter: function(layer) { return layer === imageListLayer; },
	hitTolerance: 5,
	});

	if (feature) {
	if (isClick) {
	var bearing = feature.get('ca');
	mly.moveToKey(feature.get('key'));
	featureOverlay.setStyle(updateBearingStyle(bearing));
	}
	} else {
	return;
	}

	if (feature !== highlight) {
	if (highlight) {
	featureOverlay.getSource().removeFeature(highlight);
	}

	if (feature) {
	featureOverlay.getSource().addFeature(feature);
	}

	highlight = feature;
	}
	};

	mly.on(
	Mapillary.Viewer.nodechanged,
	function(node) {
	if (featureOverlay.getVisible()) {
	featureOverlay.setVisible(false);
	}

	var lonLat = ol.proj.fromLonLat([
	node.originalLatLon.lon,
	node.originalLatLon.lat
	]);

	map.getView().setCenter(lonLat);
	pointFeature.getGeometry().setCoordinates(lonLat);
	pointFeature.setStyle(updateBearingStyle(node.ca));
	});

	map.on('click', function(e) { displayFeatureInfo(e.pixel, true); });

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