Update modal popup from callback based on scattermapbox click event data

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.

3 posts - 3 participants

Read full topic