How to set filter only on country boundaries with US worldview? - mapbox

Question

I'm using Mapbox GL to color dynamically countries. Some of the countries are red, some are green.
For this, I'm using the country-boundaries-v1 source, then I use the iso_3166-1 data from country-boundaries to set a filter on the layers that use the country-boundaries source.
This is the code where I add my layers:
addLayers (map, layers) {
layers.forEach((layer) => {
map.addLayer({
id: layer.id,
source: layer.source,
'source-layer': layer.sourceLayer,
layout: {
visibility: 'none'
},
type: 'fill',
paint: {
'fill-opacity': 0.5
}
}, 'country-label')
})
},
And there is where I make visible my layer, add the color and set my filter on a list of iso_3166-1 codes:
map.setLayoutProperty(state.id, 'visibility', 'visible')
map.setPaintProperty(state.id, 'fill-color', this.layerColor(formattedState))
map.setFilter('positive-countries', ['in', 'iso_3166_1', 'FR', 'BE', 'IN', 'CN', 'JP'])
The problem is that when I add the 'fill-color' property on my layers that have reduced opacity, countries with different worldview (like China, Japan, India) therefore have layers that overlap. The result is that some countries, instead of having a layer with an opacity of 0.6, have 3 with an opacity of 0.6, which makes them opaque.
I tried to add this :
map.setFilter('positive-countries', ['match', ['get', 'worldview'], ['all', 'US'], true, false])
Hope Mapbox only uses the US worldview, but it doesn't work.
Here is a screenshot of my map so you can see the problem:
As you can see, countries like China, India and Japan have multiple layers because there's multiple worldview for these countries, so they look different than others.
Does anyone know if what I want to do is possible?
EDIT:
I tried this:
const filters = [
'any',
['in', 'iso_3166_1', 'MA', 'BR'],
['==', 'all', ['get', 'worldview']],
['in', 'US', ['get', 'worldview']]
]
map.setFilter('positive-countries', filters)
But I got these errors:
mapbox-gl.js:31 Error: layers.positive-countries.filter[2][2]: string, number, or boolean expected, array found
mapbox-gl.js:31 Error: layers.positive-countries.filter[3][2]: string, number, or boolean expected, array found
If I remove ['in', 'iso_3166_1', 'MA', 'BR'], there are no more errors but of course I have no applied filter on my map.
So, I tried this:
const filters = [
'any',
['==', 'all', ['get', 'worldview']],
['in', 'US', ['get', 'worldview']]
]
map.setFilter(params['id'], filters)
map.setFilter(params['id'], ['in', 'iso_3166_1', 'MA', 'BR'])
but the result is the same as without filter on the worldview...

Answer 1

If someone else is facing the same problem, this is the solution:
const filters = [
'all',
['match', ['get', 'worldview'], ['all', 'US'], true, false],
['match', ['get', 'iso_3166_1'], ['MA', 'BR'], true, false]
]
this.map.setFilter(layerId, filters)
Only the countries as seen by the USA are then visible