Deck.gl: Listen for click on basemap

Question

The Deck.gl docs on interactivity make it pretty clear how to add click listeners to a specific layer in a map, but I am not certain how to add a click listener to the basemap itself.

The use case I'm after is that clicking an iconLayer shows a modal, then clicking the basemap (a <DeckGL/> base component, as distinct from children such as an iconLayer) hides the modal.

I could jerry-rig something together by binding a click listener to the webgl canvas, then on click checking if my iconLayer received the click, but there must be a better way. Does anyone know how to differentiate clicks on the basemap from those on a layer using deck.gl? Any suggestions would be very helpful!

Answer 1

spending whole day on this.

I just figured out that onClick property in DeckGL component captures every click both in empty area or layered area. The event object come from empty DeckGL canvas looks like this:

{
  "x": 877,
  "y": 556,
  "coordinate": [
    106.85059802642887,
    -6.138317762993974
  ],
  "lngLat": [
    106.85059802642887,
    -6.138317762993974
  ],
  "layer": null, //If the click come from layer, the layer should not null
  "color": null,
  "object": null,
  "index": -1
}

Figured out if the click comes from a layer on top of DeckGL, layer will contain object related props.

So, in your case, you can check whether the layer is empty or not

<DeckGL 
  //...Other props
  
  onClick={(event) => {
  
    //Click comes from empty area 
    if(event.layer === null) {
       // Set popup
       
    }else{
       // Clear Popup
    }
  }}
/>

Answer 2

const layer = new ScatterplotLayer({
    ...
    pickable: true,
    onHover: (info, event) => console.log('Hovered:', info, event),
    [onClick: (info, event) => console.log('Clicked:', info, event)][1]
});

hi you can call onclick while declaring your layer as shown above, this is from the documentations @ https://deck.gl/docs/developer-guide/interactivity .

here is how you would implement it https://i.stack.imgur.com/eNiKW.png

PS I'll be checking back on this thread soon so feel free to ask away