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

**URL:** <https://community.plotly.com/t/display-mapbox-pop-up-based-on-value-returned-from-the-callback-function/42746>\
**Category:** Dash Python\
**Created:** [July 21, 2020, 10:46am UTC](https://community.plotly.com/t/display-mapbox-pop-up-based-on-value-returned-from-the-callback-function/42746 "2020-07-21T10:46:31Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![keval](https://avatars.discourse-cdn.com/v4/letter/k/ec9cab/32.png) [@keval](https://community.plotly.com/u/keval)\
**Post date:** [July 21, 2020, 10:46am UTC](https://community.plotly.com/t/display-mapbox-pop-up-based-on-value-returned-from-the-callback-function/42746/1 "2020-07-21T10:46:31Z")

</div>

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

```auto

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.

```auto
# 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](https://docs.mapbox.com/mapbox-gl-js/example/popup/)

---

<div class="post-metadata">

**Author:** ![Emil](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/emil/32/31734_2.png) [@Emil](https://community.plotly.com/u/Emil)\
**Post date:** [July 21, 2020, 1:25pm UTC](https://community.plotly.com/t/display-mapbox-pop-up-based-on-value-returned-from-the-callback-function/42746/2 "2020-07-21T13:25:32Z")

</div>

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,

```auto
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()

```