mapbox-gl map events doesn't fires

[ws-hofshteyn]

Hi! I'm trying to use mapbox-gl events but they doesn't works. Leaflet does. Tried to use events for map and for layer as well. Maybe I missed something. Here is code example:

let leafletMap = L.map('map').setView([38.912753, -77.032194], 2);

L.marker([38.912753, -77.032194])
  .bindPopup("Hello <b>Leaflet GL</b>!<br>Whoa, it works!")
  .addTo(leafletMap)
  .openPopup();

var gl = L.mapboxGL({
  accessToken: "pk.eyJ1IjoicGF0cmlrMDAwIiwiYSI6ImNqemw1OW9mNzBqeGMzZG4wYzZqMHI0djQifQ.G1bbUCb8OxmhGlKB_y_aat",
  style: 'mapbox://styles/mapbox/bright-v8'
}).addTo(leafletMap);

gl._glMap.on('load', () => {
  console.log('MAPBOX map loaded');

  // let's see events on mapbox map
  gl._glMap.on('mousemove', () => { console.log('MAPBOX mousemove') });
  gl._glMap.on('mouseenter', () => { console.log('MAPBOX mouseenter') });
  gl._glMap.on('mouseout', () => { console.log('MAPBOX mouseout') });
  gl._glMap.on('mouseleave', () => { console.log('MAPBOX mouseleave') });
  gl._glMap.on('mouseover', () => { console.log('MAPBOX mouseover') });

  // let's add some layer and fire events on it

  gl._glMap.addSource('states', {
    'type': 'geojson',
    'data': 'https://docs.mapbox.com/mapbox-gl-js/assets/us_states.geojson'
  });
  gl._glMap.addLayer({
    'id': 'state-fills',
    'type': 'fill',
    'source': 'states',
    'layout': {},
    'paint': {
      'fill-color': '#627BC1',
      'fill-opacity': ['case', ['boolean', ['feature-state', 'hover'], false], 1, 0.5 ]
    }
  });

  gl._glMap.on('mouseenter', 'state-fills', (e) => {console.log('state-fills mouseenter', e) });
  gl._glMap.on('mousemove', 'state-fills', (e) => {console.log('state-fills mousemove', e) });
  gl._glMap.on('mouseout', 'state-fills', (e) => {console.log('state-fills mouseout', e) });
  gl._glMap.on('mouseleave', 'state-fills', (e) => {console.log('state-fills mouseleave', e) });

})

// now let's see on leaflet map events
// SPOILER: they are works
leafletMap.on('mousemove', () => { console.log('LEAFLET mousemove') });
leafletMap.on('mouseenter', () => { console.log('LEAFLET mouseenter') });
leafletMap.on('mouseout', () => { console.log('LEAFLET mouseout') });
leafletMap.on('mouseleave', () => { console.log('LEAFLET mouseleave') });
leafletMap.on('mouseover', () => { console.log('LEAFLET mouseover') })

Working example: https://jsfiddle.net/hofshteyn/vat9skq5/2/

[w8r]

@ws-hofshteyn Hi, I've added a patch here https://jsfiddle.net/w8r/Ljsd89tu/
Can I use your example code for the next release?

[ws-hofshteyn]

@w8r yes, sure.
I also find another issue but seems it was already published here: it's about changing position of marker (or point) when zoom value is lower than 2. I see this issue at your example. Will it be fixed? And should create another issue?

[w8r]

@ws-hofshteyn it would be easier to track if you create another issue, but I suppose that the maxZoom values between leaflet and mapbox-gl are different