Listen for click and hover events on a Marker
This example demonstrates how to listen for user interaction events on a Marker. Unlike map features, markers are not part of the map canvas, so you cannot use Mapbox GL JS event handlers like map.on('click', ...) to interact with them.
Instead, you must use standard JavaScript event listeners on the marker's HTML element. Use marker.getElement() to get a reference to the marker's DOM element, then attach event listeners for click, mouseenter, mouseleave, or other DOM events.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Listen for click and hover events on a Marker</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v3.18.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.18.0/mapbox-gl.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<style>
.event-display {
font:
bold 12px/20px 'Helvetica Neue',
Arial,
Helvetica,
sans-serif;
background-color: #3386c0;
color: #fff;
position: absolute;
top: 20px;
left: 50%;
z-index: 1;
width: 200px;
margin-left: -100px;
display: block;
padding: 10px 20px;
border-radius: 3px;
text-align: center;
}
</style>
<div id="map"></div>
<div id="event-display" class="event-display">Hover or click the marker</div>
<script>
// TO MAKE THE MAP APPEAR YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
const eventDisplay = document.getElementById('event-display');
// Venice, Italy coordinates
const veniceCoordinates = [12.3345, 45.4408];
const map = new mapboxgl.Map({
container: 'map',
// Choose from Mapbox's core styles, or make your own style with Mapbox Studio
style: 'mapbox://styles/mapbox/standard',
center: veniceCoordinates,
zoom: 12
});
const marker = new mapboxgl.Marker()
.setLngLat(veniceCoordinates)
.addTo(map);
// Get the marker's HTML element
const markerElement = marker.getElement();
let resetTimeout;
// Add mouseenter event listener
markerElement.addEventListener('mouseenter', () => {
markerElement.style.cursor = 'pointer';
eventDisplay.textContent = 'Marker is hovered!';
// Clear any pending reset
if (resetTimeout) {
clearTimeout(resetTimeout);
}
});
// Add mouseleave event listener
markerElement.addEventListener('mouseleave', () => {
markerElement.style.cursor = '';
// Only reset if not in clicked state
if (eventDisplay.textContent === 'Marker is hovered!') {
eventDisplay.textContent = 'Hover or click the marker';
}
});
// Add click event listener
markerElement.addEventListener('click', () => {
eventDisplay.textContent = 'You clicked the marker!';
// Reset to original message after 3 seconds
if (resetTimeout) {
clearTimeout(resetTimeout);
}
resetTimeout = setTimeout(() => {
eventDisplay.textContent = 'Hover or click the marker';
}, 3000);
});
</script>
</body>
</html>
このコードスニペットは、
YOUR_MAPBOX_ACCESS_TOKENをあなたのMapboxアカウントのアクセストークンに置き換えるまで、期待通りに動作しません。import React, { useRef, useEffect, useState } from 'react';
import mapboxgl from 'mapbox-gl';
const MapboxExample = () => {
const mapContainer = useRef(null);
const map = useRef(null);
const marker = useRef(null);
const [eventMessage, setEventMessage] = useState('Hover or click the marker');
const resetTimeout = useRef(null);
// Venice, Italy coordinates
const veniceCoordinates = [12.3345, 45.4408];
useEffect(() => {
// TO MAKE THE MAP APPEAR YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
map.current = new mapboxgl.Map({
container: mapContainer.current,
style: 'mapbox://styles/mapbox/standard',
center: veniceCoordinates,
zoom: 12
});
// mapboxgl.Marker creates an SVG marker element positioned at the given coordinates
// you must use imperative JavaScript to add event listeners to the marker's element
marker.current = new mapboxgl.Marker()
.setLngLat(veniceCoordinates)
.addTo(map.current);
// Get the marker's HTML element
const markerElement = marker.current.getElement();
// Add mouseenter event listener
const handleMouseEnter = () => {
markerElement.style.cursor = 'pointer';
setEventMessage('Marker is hovered!');
// Clear any pending reset
if (resetTimeout.current) {
clearTimeout(resetTimeout.current);
}
};
// Add mouseleave event listener
const handleMouseLeave = () => {
markerElement.style.cursor = '';
// Only reset if not in clicked state
setEventMessage((current) => {
if (current === 'Marker is hovered!') {
return 'Hover or click the marker';
}
return current;
});
};
// Add click event listener
const handleClick = () => {
setEventMessage('You clicked the marker!');
// Reset to original message after 3 seconds
if (resetTimeout.current) {
clearTimeout(resetTimeout.current);
}
resetTimeout.current = setTimeout(() => {
setEventMessage('Hover or click the marker');
}, 3000);
};
markerElement.addEventListener('mouseenter', handleMouseEnter);
markerElement.addEventListener('mouseleave', handleMouseLeave);
markerElement.addEventListener('click', handleClick);
// Cleanup
return () => {
markerElement.removeEventListener('mouseenter', handleMouseEnter);
markerElement.removeEventListener('mouseleave', handleMouseLeave);
markerElement.removeEventListener('click', handleClick);
if (resetTimeout.current) {
clearTimeout(resetTimeout.current);
}
marker.current.remove();
map.current.remove();
};
}, []);
return (
<>
<div ref={mapContainer} style={{ height: '100%' }} />
<div
style={{
font: "bold 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif",
backgroundColor: '#3386c0',
color: '#fff',
position: 'absolute',
top: '20px',
left: '50%',
zIndex: 1,
width: '200px',
marginLeft: '-100px',
display: 'block',
padding: '10px 20px',
borderRadius: '3px',
textAlign: 'center'
}}
>
{eventMessage}
</div>
</>
);
};
export default MapboxExample;
このコードスニペットは、
YOUR_MAPBOX_ACCESS_TOKENをあなたのMapboxアカウントのアクセストークンに置き換えるまで、期待通りに動作しません。このexampleは役に立ちましたか？