yob-v-u yob-v-u - 1 year ago 71
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.

Answer Source

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: https://jsfiddle.net/kmandov/o870ufLr/ Open the console to see the events.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download