Data driven styling using multiple filters in mapbox gl js

Question

Common approach of data-driven style using filters is:

"filter": ["==", "Label Type", "CurbRamp"] // Using one data value/property

How do I incorporate multiple filters; so incorporating an 'AND' condition using multiple data properties, something like:

        // "filter": {
        //     ["==", "Severity", "2.0"],
        //     ["==", "Label Type", "Problem"]
        // }

I haven't been able to find any examples on the internet.

Answer 1

You can use an all expression:

["all", <filter-0>, <filter-1>, <filter-n>]

There's also any and none for combining filters.

Check the documentation here: https://docs.mapbox.com/mapbox-gl-js/style-spec/expressions/#all

Answer 2

The all keyword does this.

In your specific case it would be:

"filter": ["all",
    ["==", "Severity", "2.0"],
    ["==", "Label Type", "Problem"]
 ]