CODEWITHSUNDEEP
mapboxmapbox-gl-jsmapbox-gl
guyyug
guyyug

Reputation: 1087

Mapbox filters based on array

I have the following array:

test = ['a', 'b', 'c']

I would like to filter objects on the map if they exist in the array. Is it possible to use this filter with array:

mapObj.setFilter("hover", ['all', ["in", "letter", test[0]]]);

Or alternately, what is the best way to filter object that exist in the array?

Upvotes: 8

Views: 7637

Answers (5)

Beeblebrox
Beeblebrox

Reputation: 36

I used it with .map like in this. I think you should avoid an extra method for concatenation.

         this.$store.map.setFilter(layerName, [
          'match',
          ['get', filterPropertyName],
          currentValues.map((feature) => {
            return feature;
          }),
          true,
          false
        ])

Upvotes: 0

Andi-lo
Andi-lo

Reputation: 2312

Well mapbox's setFilter function does not accept an array as a parameter. You will need to use a format that fits their API which is basically described here under "Set Membership Filters".

https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#filter

To filter multiple variables the Set Membership Filters require a specific format which is

["in", key, v0, ..., vn]

Where v0 to vn are elements of your array which yields

["in", "letter", "a", "b", "c"]

One could write a function to convert an array to this format. Maybe like this:

function buildFilter(arr) {
  var filter = ['in', 'letter'];

  if (arr.length === 0) {
     return filter;
  }
  
  for(var i = 0; i < arr.length; i += 1) {
    filter.push(arr[i]);
  }
  
  return filter;
}

var filterBy = ['a', 'b', 'c'];
var myFilter = buildFilter(filterBy);

console.log(myFilter);

// then you would use it like this:
// mapObj.setFilter("hover", buildFilter(['a', 'b', 'c']));

Upvotes: 13

Nate Cheng
Nate Cheng

Reputation: 464

["in", "letter", ...test] in ES6

should work.

Upvotes: 6

DeadPassive
DeadPassive

Reputation: 887

You can also use:

['in', 'letter'].concat(test);

Where test is your array of values.

Upvotes: 3

Rapha&#235;l Verdier
Rapha&#235;l Verdier

Reputation: 125

Actually there is a native way of doing this, as shown in the "Filter features within mapview" example.

You will have to use a unique attribute of your elements (ideally a unique ID). In your case, given that the attribute is "letter", the code would be the following: 

mapObj.setFilter('hover', ['match', ['get', 'letter'], test, true, false])

For a better understanding of the code, take a look at the documentation about the match expression.

Upvotes: 0

Related Questions