0

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.

2 Answers 2

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.

0

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);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.