Feature hover state not working on Mapbox GL JS

Question

I have added a hover state to the countries in my map, but the hover state only works in the Studio environment and not in any other external embed e.g. iframe or preview.

I have created a codepen to demonstrate the issue: https://codepen.io/jplatford/pen/emOrebx.

Mapbox provides the following snippet. I can see that it hits the handler because of the console log, but the state (name hover-state) never seems to take affect and change the colour of the country currently hovered over.

map.addInteraction("move-handler", {
  type: "mousemove",
  target: {
    "layerId": "available-countries"
},
  handler: (e) => {

    if (e.feature) {
      if (feature) {
        map.setFeatureState(feature, { ["hover-state"]: false });
      }

      feature = e.feature;
      console.log(feature);
      map.setFeatureState(feature, { ["hover-state"]: true });
    }

    if (feature) {
      map.setFeatureState(feature, { ["hover-state"]: false });
      feature = null;
    }
  }
});

Marianne · Accepted Answer · 2025-02-04 23:39:09Z

1

The fact that you want the features to be highlighted has to be explicit. The hover-state is just the first step that says "this feature is being hovered over" but it doesn't say "this feature has to change color".

I never used MapBox but I did a quick dive into their docs and it appears that features have a "highlight" state. With that it mind, i updated your code to highlight the features when the mouse hovers over them, and undo that when the mouse leaves. It seems the "hover" state still has to be set to true for the highlight to happen, hence why i kept it :

let map = new mapboxgl.Map({
    container: "map",
    style: 'mapbox://styles/eirinigialou/cm6qmuu6w010p01r5hluj8s7q',
    center: [6.34, 28.99],
    scrollZoom: false,
    renderWorldCopies: false,
    height: "100%"
});



map.on('load', () => {
    map.resize();
});


//add interactions
map.addInteraction("move-handler", {
    type: "mousemove",
    target: {
        "layerId": "available-countries"
    },
    handler: (e) => {
        if (e.feature) {
            map.setFeatureState(e.feature, {
                ["hover-state"]: true
            });
            map.setFeatureState(e.feature, {
                ["highlight"]: true
            });
        }
    }
});

map.addInteraction("leave-handler", {
    type: "mouseleave",
    target: {
        "layerId": "available-countries"
    },
    handler: (e) => {
        if (e.feature) {
            map.setFeatureState(e.feature, {
                ["hover-state"]: false
            });
            map.setFeatureState(e.feature, {
                ["highlight"]: false
            });
        }
    }
});

Useful docs link here

answered Feb 4 at 23:39

Marianne

3012 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

JakePlatford Feb 5 at 15:04

Thank you! Very odd, this highlight state is not mentioned in any of their examples or other documentation around hover/click states that I've read through.

Marianne Feb 5 at 18:30

Yeah I kinda had to dig and used this property but you also have a "paint" property for layers that you can set with a specific condition, for example if the hover state is true. The layer properties are here : docs.mapbox.com/style-spec/reference/layers And an example is here : docs.mapbox.com/mapbox-gl-js/example/hover-styles

Collectives™ on Stack Overflow

Feature hover state not working on Mapbox GL JS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related