I have some data in customdata
property of scattermapbox
which I’d like to show in modal popup upon a marker click event.
For this I pass the data from customdata
to callback function.
@app.callback(Output("modal", "is_open"),
[
Input("map-graph1", "clickData")],
[State("modal", "is_open")],
)
def display_popup(clickData, close, is_open):
if clickData is None:
return (no_update)
else:
Name = clickData['points'][0]['customdata']['Name']
Address = clickData['points'][0]['customdata']['Address']
return (Name, Address)
The Modal wrapped in html.Div
is:
dbc.Modal(
[
dbc.ModalHeader("Lease Information"),
dbc.ModalBody(
[
dbc.Label("Address:", id='address'),
dbc.Label("Name:", id='name')
]
),
dbc.ModalFooter(
[
dbc.Button("OK", color="primary", size="lg", className="mr-1"),
]
),
],
id="modal",
),
], style={"width": "50%"}),
How do I update the Modal popup based on values returned by callback function.