yob-v-u yob-v-u - 2 months ago 9
Javascript Question

Cannot seem to get mouseover event to work with mapbox

I'm having a bit of trouble figuring out why the

mouseover
event doesn't work with mapbox gl.

map.on('load', function() {
var geoJson = '{
"type": "FeatureCollection",
"crs": {
"type": "name",
"properties": {
"name": "urn:ogc:def:crs:OGC:1.3:CRS84"
}
},
"features": [
{
"type": "Feature",
"properties": {
...
},
"geometry": {
"type": "Point",
"coordinates": [
-118.6059,
34.1829
]
}
}]
}';


map.addSource('someData', {
type: 'geojson',
data: geoJson,
cluster: true,
clusterMaxZoom: 14
});

map.addLayer({
'id': 'unclustered-markers',
'type': 'symbol',
'source': 'someData',
'layout': {
'icon-image': 'circle-11'
}
});
});


So that part works and the coordinates are displayed on the map within the cluster. However, when I try the
mouseover
event, nothing happens.

map.on('mouseover',function(e) {
console.log(e); // nothing is logged when I hover over the map or the points
var features = map.queryRenderedFeatures(e.point, { layers: ['unclustered-markers'] });
...
});


If I change that event to
click
then the event is logged to the console when I click on the map.

Answer

It seems that you are using the wrong event name. Note that is it mousemove, not mouseover. To fix this, change your code to:

map.on('mousemove',function(e) {
    console.log(e);                 
    //....
});

Here is a working example: https://jsfiddle.net/kmandov/o870ufLr/ Open the console to see the events.

Comments