view raw
yob-v-u yob-v-u - 8 months ago 30
Javascript Question

Cannot seem to get mouseover event to work with mapbox

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

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": [

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

'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
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
then the event is logged to the console when I click on the map.


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) {

Here is a working example: Open the console to see the events.