Mapbox GL Feature Manipulation

Question

Running "mapbox-gl": "^0.53.1"

I want to update the color of a layer "type": "fill-extrusion" This is not just one feature that I select, but it might be a multitude of features that are altered (otherwise this highlight feature with click in mapbox gl solution might work). but adding a new layer is therefore not an option. This is what I tried - it obviously does not work.

this.map.on('click', 'grid-test', function (e) {
      e.features[0].properties["color"] = "#ff00ff";
});

I have not found propper update methods that I can call to tell a layer to rerender. The other solution I see is to reset all the data - but I am still a bit reluctant to that solution. Coming from an OL background, I expect certain basic functions to exist.

Answer 1

If all you want to do is change the color of one layer, you can use something like this exmaple:

map.on('click', 'grid-test',function (e) {
  map.setPaintProperty( 'grid-test', 'fill-extrusion-color', "#ff00ff");
});

I would recommend adding a variable to test whether it has been clicked or not, so you decide when you want to change the color, checkout the example, maybe add a button that does that, or add another listener on the rest of the map that sets the layer back yo its original color.

Answer 2

Instead of adding a new layer, my solution is to reset the clicked layers data like this:

let clickedLayer: GeoJSONSource =  map.getSource('grid-test') as GeoJSONSource;
let currentSource = clickedLayer['_data'];
for (let feature of currentSource["features"]) {
  if (feature.properties["id"] === clickedFeature.properties["id"] || feature.properties["id"] === 0) {
    feature.properties["color"] = "#ff00ff";
  }
}
clickedLayer.setData(currentSource);