Event binding of Layer

[lsbFlying]

Target Use Case

<Layer
type="fill"
id="chinaLayerFill"
paint={{
"fill-opacity": 0.35,
"fill-color": "#107DB3",
}}
// Expected support
// onClick={(e) => { ... }}
// onXXX={(e) => {}}
/>

Proposal

Because there are general business requirements, you only want to process binding events on certain layers

[danielvaughn]

Thanks for filing this @lsbFlying, I agree that this should be a supported feature. Do you have a workaround at the moment?

I'm facing a scenario where I have dozens of layers that need to be seamlessly mounted/unmounted/remounted as the user interacts with my application. Routing these events through <MapGL /> is going to be extremely cumbersome. I tried setting a ref on the <Layer /> component itself, but the imperative methods were removed from the ref in v7.

[hussamkhatib]

any update on this one ?

[bartlomiejwendt]

@lsbFlying, You can freely interact with your layers with the onClick method in react-map-gl.

The only trick here is that you have to use your Map's component onClick method combined with interactiveLayersIds as stated in docs here: https://visgl.github.io/react-map-gl/docs/api-reference/map#onclick

In your case you will have to pass the layer id to the map interactiveLayerIds prop:

import Map from 'react-map-gl'

<Map 
  interactiveLayerIds={['chinaLayerFill']}
  onClick={(event) => {
    const feature = event.features[0]
    // handle your onClick layer logic here
  }}
>
  <Layer
    type="fill"
    id="chinaLayerFill"
    paint={{
      "fill-opacity": 0.35,
      "fill-color": "#107DB3",
    }}
  />
</Map>

This is how I handle this in my app, and it works without any issues.

I agree this is going to be quite messy (as danielvaughn mentioned above) when handling multiple layers and binding different actions/behaviours to them through the Map's onClick method but this is the only way that I can think of right now.

[lswainemoore]

Hi, sorry to open an old thread here, but I'm not confident this actually works. @bartlomiejwendt would you be willing to share code where you used this? This pattern is used in the clusters example, but doesn't work, because features doesn't get populated, as reported here. As far as I can tell from checking out old commits, this example never worked. Thanks!

EDIT: nevermind, see: #2243 (comment)