Mapbox - achieving three states of paint opacity

user_1738522 0
Viewed 84

I am trying to have 3 states of opacity for the following situation:

  • Clicked = Opacity: 0.8
  • Hover = Opacity: 0.6
  • Default = Opacity: 0.4

I have this code so far:

             'paint': {
                 'fill-color': '#627BC1',
                 'fill-opacity': [
                     'case',
                     ['boolean', ['feature-state', 'hover'], false],
                     0.6,
                     0.4
                 ]
             }

However given it's boolean, can someone help me understand how I can make this into an array with three states rather than 2?

Here is a useable example:

https://codepen.io/hiven/pen/NWwBXJj

James

mapbox-gl mapbox-gl-js mapbox
1 Answers

You should be able to do something like the following

paint: {
  "fill-color": "#627BC1",
  "fill-opacity": [
    "case",
    ["==", ["feature-state", "mystate"], 1],
    0.6,
    ["==", ["feature-state", "mystate"], 2],
    0.8,
    0.4
  ]
}

Then you would just set "mystate" as required...

  // Hover 
  map.setFeatureState(
    { source: "states", id: clickedStateId },
    { mystate: 1 }
  );

  // Clicked
  map.setFeatureState(
    { source: "states", id: clickedStateId },
    { mystate: 2 }
  );

With the default being 0.4

This way you can support an arbitrary number states, each with their own value - rather than a simple Boolean "true/false"

user_748610
Related