How to dynamically filter layer data with one or more filter values through flat style variable

[venishkhant]

I am using latest openlayers version.

I have created layer using WebGLPointsLayer with flatstyle. I want to build functionality to where user can apply filter to filter data on map.

Below are the scenarios: When user has not selected any region, it should show all region data. When user select single region, it should show single region. When user select multiple regions, it should selected region related data on map. This is not working with dynamic value. It will work when I hardcoded multiple region in a style

Openlayer Doc for Expression: https://openlayers.org/en/latest/apidoc/module-ol_expr_expression.html

Hardcode Filter style:
{ variables: { multiRegionSelected: [], countrySelected: '', }, filter: [ 'all', ['in', ['get', 'region'], ['literal', ['MA', 'CA', 'FL']]], [ 'any', ['==', ['var', 'countrySelected'], ''], ['==', ['get', 'country'], ['var', 'countrySelected']], ], ], 'circle-radius': [ 'interpolate', ['exponential', 2], ['zoom'], 5, 4, 15, 1536, ], 'circle-fill-color': ['match', ['get', 'hover'], 1, '#ff3f3f', '#006688'], 'circle-displacement': [0, 0], 'circle-opacity': 0.95, }

Set dynamic filter value:

{ variables: { multiRegionSelected: [], countrySelected: '', }, filter: [ 'all', // Multiple Region selection // Dynamic filter not working when user select one or more region // When user doesn't have any region selected it should show all region data [ 'any', ['in', ['get', 'region'], ['literal', ['var', 'multiRegionSelected']]], ['==', ['var', 'multiRegionSelected'], 0], // To load all region when no region selected ], [ 'any', ['==', ['var', 'countrySelected'], ''], ['==', ['get', 'country'], ['var', 'countrySelected']], ], ], 'circle-radius': [ 'interpolate', ['exponential', 2], ['zoom'], 5, 4, 15, 1536, ], 'circle-fill-color': ['match', ['get', 'hover'], 1, '#ff3f3f', '#6688'], 'circle-displacement': [0, 0], 'circle-opacity': 0.95, }

To Update style variable dynamically, I have used updateStyleVariables

pointsLayer.updateStyleVariables({ countrySelected: 'us', multiRegionSelected: ['MA', 'CA', 'FL'], });

To Reproduce
ere is the complete example: https://codesandbox.io/s/accessible-forked-vf7w6l

Expected behavior
When user select one or more region, map data should filter accordingly.

[alpinisme]

I don't believe you can use arrays as style variables, however nice that might be.

Style variables. Each variable must hold a number or string.
https://openlayers.org/en/latest/apidoc/module-ol_layer_WebGLTile.html#~Style

[venishkhant]

As per the expression document, I believe we could use array values to filter layer data using flat style.

https://openlayers.org/en/latest/apidoc/module-ol_expr_expression.html#~ExpressionValue

I can see data is filter on map when I pass hard coded values like below:

filter: ['in', ['get', 'region'], ['literal', ['MA', 'CA', 'FL']]]
When I want to pass dynamic value using variable, its not working.

It would be very helpful, if you know any other workaround.
Is there any other way where I can filter webgl layer data using multiple dynamic value?