# Plotly scattermapbox: Native functionality to update map layout

**URL:** <https://community.plotly.com/t/plotly-scattermapbox-native-functionality-to-update-map-layout/66153>\
**Category:** 📊 Plotly Python\
**Created:** [July 16, 2022, 1:07am UTC](https://community.plotly.com/t/plotly-scattermapbox-native-functionality-to-update-map-layout/66153 "2022-07-16T01:07:59Z")\
**Posts on this page:** 6\
**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 16, 2022, 1:07am UTC](https://community.plotly.com/t/plotly-scattermapbox-native-functionality-to-update-map-layout/66153/1 "2022-07-16T01:07:59Z")

</div>

I am building a Dash App that uses plotly `scattermapbox` graph object. Is there a way to natively (without a callback) let users select a map layout in plotly mapbox? I’d like users to switch between different styles.

```
import dash
from dash import dcc
import pandas as pd

df = pd.DataFrame({'x': [1, 2, 3]}) 

layout = html.Div(
                   dcc.Graph(id="map"),
                   dcc.Input(id="inp")
                 )

@app.callback(
              Output('map','figure'),
              Input('inpt','value')
             )
def fin(val):
    
    # do something

    data = []
    
    data.append({

                                 "type": "scattermapbox",
                                 "lat": df["Lat"],
                                 "lon": df["Long"],
                                 "name": "Location",
                                 "showlegend": False,
                                 "hoverinfo": "text",
                                 "mode": "markers",
                                 "clickmode": "event+select",
                                 "customdata": df.loc[:,cd_cols].values,
                                 "marker": {
                                            "symbol": "circle",
                                            "size": 8,
                                            "opacity": 0.7,
                                            "color": "black"
                                           }
                                 }
                   )

      layout = {

                     "autosize": True,
                     "hovermode": "closest",
                     "mapbox": {

                         "accesstoken": MAPBOX_KEY,
                         "bearing": 0,
                         "center": {
                             "lat": xxx,
                             "lon": xxx
                         },
                         "pitch": 0,
                         "zoom": zoom,
                         "style": "satellite-streets",

                     },

                    
        }

        return ({'data': data, 'layout': layout})

```

---

<div class="post-metadata">

**Author:** ![RenaudLN](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/renaudln/32/9041_2.png) [@RenaudLN](https://community.plotly.com/u/RenaudLN)\
**Post date:** [July 16, 2022, 2:54am UTC](https://community.plotly.com/t/plotly-scattermapbox-native-functionality-to-update-map-layout/66153/2 "2022-07-16T02:54:11Z")

</div>

You can use [Plotly Buttons](https://plotly.com/python/custom-buttons/) to update the figure’s layout (with relayout).

---

<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 16, 2022, 2:54pm UTC](https://community.plotly.com/t/plotly-scattermapbox-native-functionality-to-update-map-layout/66153/3 "2022-07-16T14:54:04Z")

</div>

@RenaudLN

This looks promising. However, it’s not clear how this would update the `style` attribute which takes values `streets`, `satellite`, `light`, `dark`.

---

<div class="post-metadata">

**Author:** ![RenaudLN](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/renaudln/32/9041_2.png) [@RenaudLN](https://community.plotly.com/u/RenaudLN)\
**Post date:** [July 16, 2022, 2:55pm UTC](https://community.plotly.com/t/plotly-scattermapbox-native-functionality-to-update-map-layout/66153/4 "2022-07-16T14:55:44Z")

</div>

You would need to specify what you want to update in the layout (mapbox.style), check out the examples in that link.

---

<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 16, 2022, 3:13pm UTC](https://community.plotly.com/t/plotly-scattermapbox-native-functionality-to-update-map-layout/66153/5 "2022-07-16T15:13:27Z")

</div>

Yeah, I modified `layout` dict with `updatemenus`. I am not sure how to define `streets`, `satstreets` as buttons that update mapbox layout style attribute. It’s not quite clear from the example.

```auto
layout = {

                     "autosize": True,
                     "hovermode": "closest",
                     "updatemenus" : {

                        "type":"buttons",
                        "buttons" : [

                            dict(label="None",
                                 method="relayout",
                                 args=["style", []]),

                            dict(label="B1",
                                 method="relayout",
                                 args=["mapbox.style", streets]),

                            dict(label="B2",
                                 method="relayout",
                                 args=["mapbox.style", satstreets]),

                            dict(label="B3",
                                 method="relayout",
                                 args=["mapbox.style", satellite]),

                        ],
                        "type": "buttons",
                        "direction":"right",
                        "pad": {"r": 10, "t": 10},
                        "showactive": True,
                        "x": 0.1,
                        "xanchor": "left",
                        "y": 2,
                        "yanchor": "top"
                     },

                     "mapbox": {

                         "accesstoken": MAPBOX_KEY,
                         "bearing": 0,
                         "center": {
                             "lat": layout_lat,
                             "lon": layout_lon
                         },
                         "pitch": 0,
                         "zoom": zoom,
                         "style": "satellite-streets",

                     },

                     "margin": {
                        "r": 0,
                        "t": 0,
                        "l": 0,
                        "b": 0,
                        "pad": 0
                    }

        }

```

---

<div class="post-metadata">

**Author:** ![Pra713](https://avatars.discourse-cdn.com/v4/letter/p/85e7bf/32.png) [@Pra713](https://community.plotly.com/u/Pra713)\
**Post date:** [March 9, 2024, 3:38am UTC](https://community.plotly.com/t/plotly-scattermapbox-native-functionality-to-update-map-layout/66153/6 "2024-03-09T03:38:58Z")

</div>

Hi! By any chance, were you able to figure out how to solve this issue?