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!
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];