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
    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';


1 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' />

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.