How to access map-box fill-extrusion layers to apply hover effect/popups

Question

I am looking for a way to create a hover effect on a fill-extrusion layers

I have replicated the demo at: https://www.mapbox.com/mapbox-gl-js/example/hover-styles/ [this is on flat shapes]

The I have also built a demo using fill-extrusion layers layers where the height and color is set based on an input set

Both the above samples works fine

In my fill-extrusion project, I cant seem to crack the code on hovering over the layer - when testing with the simple function:

map.on("mouseenter", "state-fills", function() {
    // Change the cursor style as a UI indicator.
    map.getCanvas().style.cursor = 'pointer';
});

I don't see the the cursor changing.

This leads me to believe that the "mouseenter" on layer with id: state-fills is not the correct way to achieve this?

Ultimately I would like to create a hover effect with a popup, but for now, If i can just figure out why my "mouseenter" doesn't do anything, Im sure I will be going in the right direction

I have also tried replacing mouseenter with mousemove - but to no avail

Here is the more complete map init:

map.on('load', function () {
  // Include the Province Shapefile
  map.addSource('mySrcName', {
    type: 'vector',
    url: 'mapbox://pantoeflou.82pwfdao'
  });

  //Create a layer from the source data -- Works Fine
  map.addLayer({
    source: 'mySrcName',
    'source-layer': '3_Fields-83vr21',
    id: 'state-fills',
    type: 'fill-extrusion',
    paint: {
      'fill-extrusion-opacity': 0.75,
      'fill-extrusion-color': {
        property: 'PROV_ID',
        type: 'categorical',
        stops: colorStops('Val') // Data attbt
      },
      'fill-extrusion-height': {
        property: 'PROV_ID',
        type: 'categorical',
        stops: hightStops('Val2') // Data attbt
      }
    }
  });

    // !! Does Nothing !!
    // When the user moves their mouse over the states-fill layer, we'll update the filter in
    // the state-fills-hover layer to only show the matching state, thus making a hover effect.
    map.on("mouseenter", "state-fills", function() {
        // Change the cursor style as a UI indicator.
        map.getCanvas().style.cursor = 'pointer';
    });

});

Answer 1

I'm not sure this will help you but I was having a similar issue with changing the cursor style on mouseover.

I too was looking at the mapbox state-fill demo for guidance and it worked fine but I couldn't reapply the mouseover function to change the cursor style.

I agonised over this for a few hours but got there in the end.

The solution for me was two fold:

Firstly, I used "mousemove" and "mouseout" instead of "mouseenter" and "mouseleave". I'd read answers to a few issues people were having on Github.

Secondly, I had to look again at my html, I noticed that I wasn't using the latest version Mapbox GL in my header. The current version is v.40.0. I was calling on v.31.0.

As soon as i switched out the map box GL version in the header for the current one - html below - the problem was solved.

<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.40.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.40.0/mapbox-gl.css' rel='stylesheet' />