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

Dash Python
1

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


html.Div([

            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"),
                  Input('run-button",'n_clicks")
              ]
             )
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']

        data.append({

                    "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

2

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__':
    app.run_server()