Search code examples
reactjsmapbox-gl-jsreact-map-gl

How to add layer on click with react-map-gl?


I have a mapping React app that uses react-map-gl. This library really simplifies things when it comes to using react with MapboxGL, as I can add layers as components, however I'd like to add a Layer on click, with pure MapboxGL I could just use map.addLayer but with react-map-gl that is not an option.

I am trying specifically to add an extrusion to a polygon when I click it. I have gotten it to work with pure MapboxGL but not react-map-gl.

Any ideas on how to do this? Sorry, I new to both React and MapboxGL.


Solution

  • You can invoke a function on map click like this:

    <Map
      ...
      onClick={handleMapClick}
    >...</Map>
    

    And in handleMapClick function, you need to add your logic.