CODEWITHSUNDEEP
javascriptmapboxmapbox-gl-js
C. Roux
C. Roux

Reputation: 133

mapbox gl js click event on layer

I am currently working on an interactive map using Mapbox GL JS. I wanted to call a specific function when the user click on a layer, so I added something like :

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

and also :

map.on('click', 'layername', function(e) {.....});

Before the last Mapbox GL JS update, all was working fine. But now, it works.... sometimes but not always (with periods, like one day on two). I've seen exemples of click event listeners (Mapbox GL JS: ignore map click event if marker is clicked), whitch I don't use. But this is for markers; how to make it work for layers, or the whole map ?
Thank you in advance !

PS : Is anywhere a complete list of what to change to adapt to the new version ? Because this is not my only issue...
PS2 : Note that "mouseenter" and "mouseleave" work perfectly fine, sometimes.

Edit: Here is a piece of code :

mapboxgl.accessToken = 'pk.eyJ1IjoiY2xlbWFwYm94IiwiYSI6ImNqOHVsbjdpdDBxM2wyd3JwcnVjZGtsZmsifQ.cv3w8BmCJAy0f0YF1ZFSTA';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/clemapbox/cjj5g2pge0huj2sntqmafju85',
});

map.on('click', function (e) {
    console.log("click on map");
});

map.on('click', 'RER stops', function(e){
	console.log("click on RER stop");
});

map.on('mouseenter', 'RER stops', function () {
    map.getCanvas().style.cursor = 'pointer';
});

map.on('mouseleave', 'RER stops', function () {
    map.getCanvas().style.cursor = '';
});
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.js'></script>
        <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.css' rel='stylesheet' />
        <title>TEST click event</title>
    </head>
    <body>
        <section id='map' style="width:100%;height:500px"></section>
        <script src="TEST.js"></script>
    </body>
</html>

Note : 'RER stop' is a layer with the blue-and-white "RER" rounds when you zoom in.

Upvotes: 3

Views: 8646

Answers (1)

mclaeysb
mclaeysb

Reputation: 41

Moving to MapBox GL JS version 0.48 solved this for me!

Upvotes: 2

Related Questions