I have a marker in the map. I want to change its state when it is clicked and change it back when other place on the map is clicked.
The problem is that map.on("click", console.log) is also fired upon clicking the marker.
I want to see only the marker clicked event, because map click invokes state rollback.
<!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='.39.1/mapbox-gl.js'></script>
<link href='.39.1/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
mapboxgl.accessToken = 'access token';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v9',
center: [-65.017, -16.457],
zoom: 5
});
var el = document.createElement('div');
el.style.backgroundImage = 'url(/)';
el.style.width = 40 + 'px';
el.style.height = 40 + 'px';
new mapboxgl.Marker(el)
.setLngLat([ -63.29223632812499, -18.28151823530889 ])
.addTo(map);
el.addEventListener('click', console.log);
map.on('click', console.log);
</script>
</body>
</html>
I have a marker in the map. I want to change its state when it is clicked and change it back when other place on the map is clicked.
The problem is that map.on("click", console.log) is also fired upon clicking the marker.
I want to see only the marker clicked event, because map click invokes state rollback.
<!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://api.tiles.mapbox./mapbox-gl-js/v0.39.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox./mapbox-gl-js/v0.39.1/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
mapboxgl.accessToken = 'access token';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v9',
center: [-65.017, -16.457],
zoom: 5
});
var el = document.createElement('div');
el.style.backgroundImage = 'url(https://placekitten./g/40/40/)';
el.style.width = 40 + 'px';
el.style.height = 40 + 'px';
new mapboxgl.Marker(el)
.setLngLat([ -63.29223632812499, -18.28151823530889 ])
.addTo(map);
el.addEventListener('click', console.log);
map.on('click', console.log);
</script>
</body>
</html>
2 Answers
Reset to default 15I think what you wanna do is to stop the event from getting handled twice when the user clicked on a marker. To do that you could just use event.stopPropagation();
See: https://developer.mozilla/en/docs/Web/API/Event/stopPropagation
In your code you can use it like this:
function handleKitten(e) {
e.target.style.backgroundImage = 'url(http://placekitten./g/50/50)';
e.stopPropagation();
}
function handleMapClick(e) {
console.log('handleMapClick', e);
}
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v9',
center: [-65.017, -16.457],
zoom: 5
});
var el = document.createElement('div');
el.style.backgroundImage = 'url(https://placekitten./g/40/40/)';
el.style.width = 40 + 'px';
el.style.height = 40 + 'px';
new mapboxgl.Marker(el)
.setLngLat([ -63.29223632812499, -18.28151823530889 ])
.addTo(map);
el.addEventListener('click', handleKitten, false);
map.on('click', handleMapClick);I made a quick jsfiddle for demonstration: https://jsfiddle/andi_lo/guzskv7n/7/
You might wanna use map.once(), or map.off(), see: Double on click event with mapbox gl