Announcing Dash Bio 1.0.0 🎉 : a one-stop-shop for bioinformatics and drug development visualizations.

Display mapbox pop up based on value returned from the callback function

I have a button in app layout and a callback function tied to the mapbox graph that is updated based on


            dbc.Button("Run", id="run-button", size="lg", className="mr-1"),

        ], style={"width":"50%", "margin-top": "-17.5%"}),

In the callback function, I calculate the value based on inputs that I’d like to use in the pop-up.

# Update map graph

@app.callback(Output("map-graph1", "figure"),
                  Input("input1", "val1"),
                  Input("input2", "val2"),
def update_graph(val1, val2, nclicks):

    **calc_val = val1 * val2**

    data = []

    # Color by category group by
    for i, row in df_lease.iterrows():

        lat = row['Lat']
        lng = row['Long']

        rent = row['Rent(SF/Yr)']
        submarket = row['SubMarket']


                    "type": "scattermapbox",
                    "lat": [lat],
                    "lon": [lng],
                    "name": "Location",
                    "hovertext": [[rent],[submarket]],
                    "showlegend": False,
                    "hoverinfo": "text",
                    "mode": "markers",
                    "marker": {
                        "symbol": "circle",
                        "size": 12,
                        "opacity": 0.7


    layout = {
             "autosize": True,
             "hovermode": "closest",
             "title": "Property Map",
             "mapbox": {
                 "accesstoken": MAPBOX_KEY,
                 "bearing": 0,
                 "center": {
                     "lat": 33.4484,
                     "lon": -112.0740
                 "pitch": 0,
                 "zoom": 10,
                 "style": "outdoors",

    return {"data": data, "layout": layout}

I’d like to display the calc_val in mapbox pop up. Popup similar to this: Display a popup | Mapbox GL JS | Mapbox

I am not sure how to do popups in scattermapbox (maybe someone else can answer it), but it is easy to do in Dash Leaflet. Here is a small example,

import dash
import dash_html_components as html
import dash_leaflet as dl

app = dash.Dash()
app.layout = html.Div([
    dl.Map([dl.TileLayer(), dl.Marker(position=(56,10), children=[dl.Popup("Hello world!")])],
           style={'width': '100%', 'height': '50vh', 'margin': "auto", "display": "block"}),

if __name__ == '__main__':