Mapbox GL Combine Filters Issue

Question

I am having a problem with Mapbox GL combining filters. The filters work individually but when in combination produce an error. The borough filters uses an array of values that could be change dynamically but I just put an example in the code of what it might look like. Whenever I try and combine the filters I get the error: "expected one of [==, !=, >, >=, <, <=, in, !in, all, any, none, has, !has], "match" found" The problem seems to be combining a filter that uses the 'match' express with a filter using the '==' operator. Does anyone know how to fix this.

var borough_val = ["BX", "BK", "MN"];

var zipCodeFilter = ["==", 'ZipCode', Number(zipcode_val)];
var boroughFilter = ['match', ['get', 'Borough'], borough_val, true, false];

var combinedFilter = ["all", zipCodeFilter, boroughFilter];
map.setFilter('parcels_fill', combinedFilter);

Answer 1

This is a trap that I have fallen into several times. There is "old syntax" and "new syntax".

Old syntax: ['==', 'ZipCode', '90210']

New syntax: ['==', ['get', 'ZipCode'], '90210']

To a certain extent, old syntax is still supported, as you have noticed. But if you try to combine old syntax and new syntax, Mapbox-GL-JS assumes the entire expression is new syntax, and it fails to parse.

The simple fix is to use new syntax throughout:

var borough_val = ["BX", "BK", "MN"];

var zipCodeFilter = ["==", ['get', 'ZipCode'], Number(zipcode_val)];
var boroughFilter = ['match', ['get', 'Borough'], borough_val, true, false];

var combinedFilter = ["all", zipCodeFilter, boroughFilter];
map.setFilter('parcels_fill', combinedFilter);

(There are also cases where or some reason (unresolvable ambiguities? too much effort?), Mapbox-GL-JS fails to recognise more complex expressions that were valid "old syntax". For that reason, it's generally safest to use new syntax everywhere.)