CODEWITHSUNDEEP
pythonmapboxplotly-dashplotly-python
rongz
rongz

Reputation: 31

Dash datatable interactive with Mapbox

I am trying to make my dash datatable interactive with my Mapbox. So when I click on “A” highlighted as the image shown below, it should show me the latitude/longitude of the point on mapbox. Correct me if I am wrong but I need to use the callback function - clickData. But I tried a few times using clickData but it did not work. Was wondering if there is any code I can refer to or any website out there that talks about dash datatable interactive with clickData . Thank you!

This is my table:

Image of table

This is my coding for mapbox:

fig = px.scatter_mapbox(df4_1.to_dict('records'), lat="Latitude", lon="Longitude", hover_name="Name", hover_data=["Id"],color_discrete_sequence=["purple"], zoom=9, height=450)
fig.update_layout(mapbox_style="open-street-map")
fig.update_layout(margin={"r":0,"t":0,"l":0,"b":0})

Upvotes: 1

Views: 494

Answers (1)

Igna
Igna

Reputation: 1127

clickData is not a property of a dash datatable, what you have, is an active_cell property. There are examples on how to use the active cell to update plots. The caveat is that you don't get the value inside of the selected cell, but the row, and column id. This active_cell is not reliable if you have sorting enabled, or editing.

They give an example on how to get the value if you have a static datasource(df), but If you don't have a static datasource then you need to use a sort of data sharing solution between callbacks like a dcc.Store. https://dash.plotly.com/datatable/interactivity

Anyway at this point the problem just increased in complexity so I would suggest a different simpler model:

In that case I would say to separate the mapbox and the datatable entirely and just have a text input that generates the plot and have a simple callback:

#put this before your mapbox
dcc.Input(
    id="text_input_id",
    type="text,
    placeholder="input name of mapbox")


@app.callback(
Output("out-all-types", "children"),
Input("text_input_id", "value"),
)
def render_mapbox(val):
    data=get_data(val) #do your stuff, get the data, make the plot 
    fig= ....
    return fig

Upvotes: 1

Related Questions