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' />

    <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',
        });

        var markerComponent = mly.getComponent('marker');

        var createMarker = function(id, latLon, color) {
            var marker = new Mapillary.MarkerComponent.SimpleMarker(
                id,
                { lat: latLon.lat, lon: latLon.lon },
                {
                    ballColor: color,
                    color: color,
                    interactive: true,
                });

            return marker;
        }

        // Add markers to component
        var defaultColor = "#ff0";
        var hoverColor = "#f80";
        markerComponent.add([
            createMarker('id-1', { lat: 33.34472682559541, lon: -118.32670195267636 }, defaultColor),
            createMarker('id-2', { lat: 33.34473641359787, lon: -118.3267162471838 }, defaultColor),
        ]);

        // Change color of hovered marker
        var lastPos = null;
        var draggedId = null;
        var hoveredMarker = null;
        var updateHoverState = function(hoveredId) {
            // Do not update when dragging to keep hovered color
            if (draggedId != null) {
                return;
            }

            if (hoveredId == null) {
                if (hoveredMarker != null) {
                    markerComponent.add([
                        createMarker(hoveredMarker.id, hoveredMarker.latLon, defaultColor),
                    ]);
                    hoveredMarker = null;
                }
            } else {
                if (hoveredMarker == null) {
                    hoveredMarker = createMarker(hoveredId, markerComponent.get(hoveredId).latLon, hoverColor);
                    markerComponent.add([hoveredMarker]);
                } else if (hoveredMarker.id !== hoveredId) {
                    var regularMarker = createMarker(hoveredMarker.id, hoveredMarker.latLon, defaultColor);
                    hoveredMarker = createMarker(hoveredId, markerComponent.get(hoveredId).latLon, hoverColor);
                    markerComponent.add([regularMarker, hoveredMarker]);
                }
            }
        }

        // Store last position to uproject on drag end and update hover state
        mly.on("mousemove", function(e) {
            lastPos = e.pixelPoint;
            markerComponent.getMarkerIdAt(e.pixelPoint).then(updateHoverState);
        });
        mly.on("mouseover", function(e) {
            lastPos = e.pixelPoint;
            markerComponent.getMarkerIdAt(e.pixelPoint).then(updateHoverState);
        });
        mly.on("mouseup", function(e) {
            lastPos = e.pixelPoint;
            markerComponent.getMarkerIdAt(e.pixelPoint).then(updateHoverState);
        });

        // Reset hover state on mouse out
        mly.on("mouseout", function(e) {
            lastPos = null;
            updateHoverState(null);
        });

        var updateHoverStateWithLastPos = function(lastPos) {
            if (lastPos != null) {
                markerComponent.getMarkerIdAt(lastPos).then(updateHoverState);
            } else {
                updateHoverState(null);
            }
        }

        markerComponent.on("dragstart", function(e) { draggedId = e.marker.id; });
        markerComponent.on("dragend", function(e) {
            draggedId = null;
            updateHoverStateWithLastPos(lastPos);
        });


        // Change hovered marker on mouse end if last position is
        // defined (i.e. mouse is over Viewer).
        mly.on("moveend", function(event) {
            updateHoverStateWithLastPos(lastPos);
        });

        mly.moveToKey('m-slOlK_DYuHWHJSxeJd7g').catch(function(e) { console.error(e); });

        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' />

	<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',
	});

	var markerComponent = mly.getComponent('marker');

	var createMarker = function(id, latLon, color) {
	var marker = new Mapillary.MarkerComponent.SimpleMarker(
	id,
	{ lat: latLon.lat, lon: latLon.lon },
	{
	ballColor: color,
	color: color,
	interactive: true,
	});

	return marker;
	}

	// Add markers to component
	var defaultColor = "#ff0";
	var hoverColor = "#f80";
	markerComponent.add([
	createMarker('id-1', { lat: 33.34472682559541, lon: -118.32670195267636 }, defaultColor),
	createMarker('id-2', { lat: 33.34473641359787, lon: -118.3267162471838 }, defaultColor),
	]);

	// Change color of hovered marker
	var lastPos = null;
	var draggedId = null;
	var hoveredMarker = null;
	var updateHoverState = function(hoveredId) {
	// Do not update when dragging to keep hovered color
	if (draggedId != null) {
	return;
	}

	if (hoveredId == null) {
	if (hoveredMarker != null) {
	markerComponent.add([
	createMarker(hoveredMarker.id, hoveredMarker.latLon, defaultColor),
	]);
	hoveredMarker = null;
	}
	} else {
	if (hoveredMarker == null) {
	hoveredMarker = createMarker(hoveredId, markerComponent.get(hoveredId).latLon, hoverColor);
	markerComponent.add([hoveredMarker]);
	} else if (hoveredMarker.id !== hoveredId) {
	var regularMarker = createMarker(hoveredMarker.id, hoveredMarker.latLon, defaultColor);
	hoveredMarker = createMarker(hoveredId, markerComponent.get(hoveredId).latLon, hoverColor);
	markerComponent.add([regularMarker, hoveredMarker]);
	}
	}
	}

	// Store last position to uproject on drag end and update hover state
	mly.on("mousemove", function(e) {
	lastPos = e.pixelPoint;
	markerComponent.getMarkerIdAt(e.pixelPoint).then(updateHoverState);
	});
	mly.on("mouseover", function(e) {
	lastPos = e.pixelPoint;
	markerComponent.getMarkerIdAt(e.pixelPoint).then(updateHoverState);
	});
	mly.on("mouseup", function(e) {
	lastPos = e.pixelPoint;
	markerComponent.getMarkerIdAt(e.pixelPoint).then(updateHoverState);
	});

	// Reset hover state on mouse out
	mly.on("mouseout", function(e) {
	lastPos = null;
	updateHoverState(null);
	});

	var updateHoverStateWithLastPos = function(lastPos) {
	if (lastPos != null) {
	markerComponent.getMarkerIdAt(lastPos).then(updateHoverState);
	} else {
	updateHoverState(null);
	}
	}

	markerComponent.on("dragstart", function(e) { draggedId = e.marker.id; });
	markerComponent.on("dragend", function(e) {
	draggedId = null;
	updateHoverStateWithLastPos(lastPos);
	});


	// Change hovered marker on mouse end if last position is
	// defined (i.e. mouse is over Viewer).
	mly.on("moveend", function(event) {
	updateHoverStateWithLastPos(lastPos);
	});

	mly.moveToKey('m-slOlK_DYuHWHJSxeJd7g').catch(function(e) { console.error(e); });

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