Search code examples
mapboxmapbox-gl-jsmapbox-marker

Filtering with array Mapbox GL JS


I'm trying to create a highlighting layer to show certain points when selected on the map - the newMarker signal comes from the server, bringing an objectID, and then I want to add the corresponding point (denoted by the current variable) to the filtered layer. However, the filter isn't picking up any of the points being added to it:

 socket.on('newMarker', function(data) {
     var current = map.queryRenderedFeatures({layers:['tax']}) 
                  [parseInt(data['newMarker'])];
     SPoints.unshift(current.properties.ID);

     var filter = ['match', ['get', 'ID'],'SPoints', true, false];
     map.setFilter('place-highlight', filter);

     var newLayer = map.queryRenderedFeatures({layers:['place- 
                    highlight']});
});

The layer that I'm trying to add the points to:

 map.addLayer({ 
      'id': 'place-highlight',
      'type': 'circle', 
      'source': 'tax',
      'source-layer': 'AllPointsGeoJSON-12eyog',
      'paint': {
        'circle-color': '#00ff00',
        'circle-radius': 20,
        'circle-opacity': 1,
      },
      'filter': ['==', 'ID', -1]
    });

I'm pretty sure the issue is in the way I'm formatting my filter - if I reverse the order of true and false I see all the styling on every point. Thanks very much for your help!


Solution

  • What's going wrong is that SPoints is a local variable (an array, presumably), but you're passing instead a string, "SPoints".

    You should do this instead:

    var filter = ['match', ['get', 'ID'], SPoints, true, false];