CODEWITHSUNDEEP
javascriptmapboxmapbox-gl-js
apizzimenti
apizzimenti

Reputation: 467

Selective Opacity in MapBox

I'm currently trying to set the opacity of individual units in a given layer. Based on this question, I am creating a filter to get the right units – which works properly when selecting the same units for setting individual patterns – and attempting to set the opacity value accordingly. My filter is the following MapBoxGL style expression:

filter = [
    "in",
    ["get", "GEOID20"],
    ["literal", geoids],
    1/3, 0
]

Based on my understanding of style expressions, this should set the opacities of the units found by the query to 1/3, and set all others to 0. However, I consistently get the same JS error:

Error: layers.browse_in_vtds20.paint.fill-opacity: Expected 2 arguments, but found 4 instead.

Where am I going wrong here? The above expression works for setting colors/patterns individually, why shouldn't it work for setting opacities?

Upvotes: 0

Views: 1199

Answers (1)

Steve Bennett
Steve Bennett

Reputation: 126697

You're half-right. This part of your filter is right:

filter = [
    "in",
    ["get", "GEOID20"],
    ["literal", geoids]
]

The last part (1/3, 0) you seem to have mixed up with data-driven expressions.

A filter reduces the number of features that are shown for a layer. If something doesn't match the filter, it doesn't get shown. That's it.

A data-driven expression changes something depending on attributes of each feature.

You could solve this problem either of two ways.

First, a layer with opacity 0.3, and a filter that hides non-relevant points.

eg:

{
  "id": "mypoints",
  "type": "circle",
  "paint": {
    "circle-opacity": 1/3,
  },
  "filter": [
    "in",
    ["get", "GEOID20"],
    ["literal", geoids]
  ]
}

Or, a data-driven expression that shows all points, some at 1/3, and some at 0.

{
  "id": "mypoints",
  "type": "circle",
  "paint": {
    "circle-opacity": [
      "case", [
        "in",
        ["get", "GEOID20"],
        ["literal", geoids]
      ],
      1/3,
      0
    ]
  }
}

Upvotes: 1

Related Questions