Using click_state Deck.gl to display click state

Panel
1

Hello, I was looking at the documentation and noticed that DeckGL panes have a click_state that can be used to gathered the click state of the DeckGL panel. I’ve been trying to implement something simple to start off with - a text on the dashboard that updates as the click state changes. However, I haven’t been able to figure this out. I thought creating a function with
@pn.depends(‘deck_gl.click_state’) or @pn.depends(deck_gl.click_state)
would work - but it throws errors like AttributeError: ‘str’ object has no attribute ‘owner’

Could someone turn me to the right direction on using click_state? It seems very useful, but I haven’t been able to find a working example of using it in panel and I was hoping for some guidance.

2

Hi @Kumini,

Panel offers multiple APIs to react on events. In the example below I use pn.bind. With pn.depends, you should put in the decorator a reference to a Parameter, as in @pn.depends(deck_gl.param.click_state).

import panel as pn
import pydeck as pdk
pn.extension('deckgl')

MAPBOX_KEY = "pk.eyJ1IjoicGFuZWxvcmciLCJhIjoiY2s1enA3ejhyMWhmZjNobjM1NXhtbWRrMyJ9.B_frQsAVepGIe-HiOJeqvQ"

json_spec = {
    "initialViewState": {
        "bearing": -27.36,
        "latitude": 52.2323,
        "longitude": -1.415,
        "maxZoom": 15,
        "minZoom": 5,
        "pitch": 40.5,
        "zoom": 6
    },
    "layers": [{
        "@@type": "HexagonLayer",
        "autoHighlight": True,
        "coverage": 1,
        "data": "https://raw.githubusercontent.com/uber-common/deck.gl-data/master/examples/3d-heatmap/heatmap-data.csv",
        "elevationRange": [0, 3000],
        "elevationScale": 50,
        "extruded": True,
        "getPosition": "@@=[lng, lat]",
        "id": "8a553b25-ef3a-489c-bbe2-e102d18a3211",
        "pickable": True
    }],
    "mapStyle": "mapbox://styles/mapbox/dark-v9",
    "views": [
        {"@@type": "MapView", "controller": True}
    ]
}

deck_gl = pn.pane.DeckGL(json_spec, mapbox_api_key=MAPBOX_KEY, sizing_mode='stretch_width', height=600)

def debug(cs):
    return str(cs)

pn.Column(
    pn.bind(debug, deck_gl.param.click_state),
    deck_gl,
)