Mapbox-gl-js: map.setFilter() bug with 'within' expression within 'all' expression

[dpdiliberto]

I created an example by going off this example to test setting a filter based on 1) features within a certain polygon using the within expression, as well as 2) features that met certain data conditions using the in expression.

My example works with the within expression or in expression individually, but not when they are both within an all expression. Here is my filter expression that does not work:

map.setFilter('population', ['all', ['in', 'Hispanic', ['get', 'ethnicity']], ['within', feature]]);

I was able to get this to work with the following workaround:

map.setPaintProperty('population', 'circle-opacity' , ['to-number', ['all', ['within', feature], ['==', ['get', 'ethnicity'], 'Hispanic']]]);

Is this a bug or expected behavior?

mapbox-gl-js version: 1.9.0

browser: Chrome Version 80.0.3987.163

Steps to Trigger Behavior

1. map.setFilter('population', ['all', ['in', 'Hispanic', ['get', 'ethnicity']], ['within', feature]]); does not work
   2.map.setFilter('population', ['within', feature]); and map.setFilter('population', ['in', 'Hispanic', ['get', 'ethnicity']]); work individually
2. I was able to work around this with @arindam1993 's help with map.setPaintProperty('population', 'circle-opacity' , ['to-number', ['all', ['within', feature], ['==', ['get', 'ethnicity'], 'Hispanic']]]);

Link to Demonstration

https://jsbin.com/yoqunojelu/edit?html,output

Expected Behavior

Being able to filter for both conditions: 1) being within a polygon and 2) certain data conditions

Actual Behavior

It is not possible to filter for both when using the within expression.

[arindam1993]

Hi @zmiao , would you happen to know what can cause this off the top of your head?

[zmiao]

@dpdiliberto @arindam1993 I am trying to debug this issue, but for both pages I got access errors for the isochone API: Failed to load resource: the server responded with a status of 401 (Unauthorized). Can you help me checking this?

[zmiao]

by the way, @dpdiliberto you mentioned map.setFilter('population', ['all', ['in', 'Hispanic', ['get', 'ethnicity']], ['within', feature]]) doesn't work,
but map.setPaintProperty('population', 'circle-opacity' , ['to-number', ['all', ['within', feature], ['==', ['get', 'ethnicity'], 'Hispanic']]]) works.

I see the second one did not use in expression, have you tried filter with:
map.setFilter('population', ['all', ['==', ['get', 'ethnicity'], 'Hispanic'], ['within', feature]]) ?

[zmiao]

I think I know what is going wrong, the problem is that the combination of within and in here is not an expression, then it tries to convert the within expression. But in current filter implementation, converting valid expression within is ignored not considered . Thanks for bringing this up, I will fix it soon!

[octopusabhiraj]

I am facing a similar problem as well. My data points contain 3 properties - timestamp (d), id (i) and name (n). The following filter does not work:
[ "all", [">=", ["get", "d"], 1577854800], ["<=", ["get", "d"], 1577941199], ["within", <geoJson>] ]

When I combine one more filter expression for property 'i', the filter works for the first 3 expressions out of the 4 expressions below:
[ "all", [">=", ["get", "d"], 1577854800], ["<=", ["get", "d"], 1577941199], ["match", ["get", "i"], ["bdba680267591d0543072cf18cd98e57", "c42c6d59e302b45e5fb6be6e8abdfcbb", "2b34c7d0c8fe7021eae2cf8b693f6d14"], true, false], ["within", <geoJson>] ]

@zmiao can you look into this as well?

[zmiao]

@octopusabhiraj there is a pr open for this issue. Please verify if it fixes your issue.

[octopusabhiraj]

@zmiao thanks for the quick fix, works in my case. 👍

[dpdiliberto]

@zmiao I'm still seeing the same results on my end with the following filter expression: map.setFilter('population', ['all', ['in', 'Hispanic', ['get', 'ethnicity']], ['within', feature]]);:

Is there anything I should update in my expression to get this to work as expected?

[zmiao]

@dpdiliberto, I tried locally it works for me. I think the probable reason is you are still using the old gl-js version:

<script src="https://api.mapbox.com/mapbox-gl-js/v1.9.0/mapbox-gl.js"></script>