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.

Thanks for the question, I am facing the same problem as well

Hi @keval, in your callback, you only define the is_open attribute of your modal as an output. What you want to do is update whether or not the modal is open but also the content of your two labels.

You can try the following:

@app.callback(
    [
        Output("modal", "is_open"),
        Output("name", "children"),
        Output("address", "children"),
    ],
    [Input("map-graph1", "clickData")],
)
def display_popup(clickData):
    if clickData is None:
        return [no_update] * 3
    else:
        name = clickData['points'][0]['customdata']['Name']
        address = clickData['points'][0]['customdata']['Address']
        return [True, name, address]