Cannot relayout mapbox_style with button

📊 Plotly Python
1

I am trying to update the mapbox_style using buttons. In the following code, I added four buttons. The first two buttons update the margins and work as intended. The third button is supposed to update the mapbox_style to ‘carto-darkmatter’, but it does nothing. The fourth button is supposed to update the mapbox_style to ‘carto-darkmatter’ and update the margins, but it only updates the margins. I cannot seem to update the mapbox_style using buttons. Is there any way to achieve this?

fig=px.choropleth_mapbox(center=dict(lon=-95.7129,
                                     lat=37.0902),
                         zoom=2.5)
fig.update_layout(dict(mapbox_style= 'open-street-map'))
fig.update_layout(
    updatemenus=[
        dict(
            type="buttons",
            direction='down',
            buttons=[
                dict(label="Margin 1",
                     method="relayout",
                     args=[{'margin': dict(l=100, r=200, t=50, b=50)}]),
                dict(label="Margin 2",
                     method="relayout",
                     args=[{'margin': dict(l=0, r=0, t=0, b=0)}]),
                dict(label="Mapbox",
                     method="relayout",
                     args=[{'mapbox_style': 'carto-darkmatter'}]),
                dict(label="Margin and Mapbox",
                     method="update",
                     args=[{"mapbox_style": 'carto-darkmatter'},
                           {'margin': dict(l=0, r=0, t=0, b=0)}]),
            ],
        )
    ]
)

Just to note, in the following code, I set the mapbox_style twice, first as ‘carto-darkmatter’ and after that as ‘open-street-map’. The second update overwrites the first and only the ‘open-stree-map’ style is used. So it is possible to overwrite mapbox_style. I can even use VSCode interactive to run the first update_layout line and it shows the ‘carto-darkmatter’ style, and then run the second update_layout line and it shows the ‘open-street-map’ style. Is there a reason this cannot be achieved with a button instead (like in the code above)?

fig=px.choropleth_mapbox(center=dict(lon=-95.7129,
                                     lat=37.0902),
                         zoom=2.5)
fig.update_layout(dict(mapbox_style= 'carto-darkmatter'))
fig.update_layout(dict(mapbox_style= 'open-street-map'))
2

I have created a code based on the sample in the reference for your assignment. It seems that the map box needs to be configured not only for style but also for other necessary settings. The update method is relayout, as shown in the reference.

import plotly.express as px

df = px.data.election()
geojson = px.data.election_geojson()

fig = px.choropleth_mapbox(df,
                           geojson=geojson,
                           color="Bergeron",
                           locations="district",
                           featureidkey="properties.district",
                           center={"lat": 45.5517, "lon": -73.7073},
                           #mapbox_style="carto-positron",
                           zoom=9
                          )
# fig.update_layout(margin={"r":0,"t":0,"l":0,"b":0})

fig.update_layout(dict(mapbox_style='open-street-map'))
fig.update_layout(
    updatemenus=[
        dict(
            type="buttons",
            direction='down',
            buttons=[
                dict(label="Margin 1",
                     method="relayout",
                     args=[{'margin': dict(l=100, r=200, t=50, b=50)}]),
                dict(label="Margin 2",
                     method="relayout",
                     args=[{'margin': dict(l=0, r=0, t=0, b=0)}]),
                dict(label="Mapbox",
                     method="relayout",
                     args=[{"mapbox": {"style":'carto-darkmatter', 
                            "center": {"lat": 45.5517, "lon": -73.7073},
                            "zoom": 9}}
                          ]),
                dict(label="Margin and Mapbox",
                     method="relayout",
                     args=[{"mapbox": {"style": 'carto-darkmatter',
                                       "center": {"lat": 45.5517, "lon": -73.7073},
                                       "zoom": 9},
                            'margin': dict(l=0, r=0, t=60, b=0)}]),
            ],
        )
    ]
)
fig.show()

newplot (81)
newplot (81)1075×360 126 KB

1 Like
3

Thank you! That worked perfectly and is exactly what I wanted.

Just to add, it is certainly a peculiar and unexpected behavior. It means that every time I want to change the mapbox style, I need to figure out the current zoom and center and use that.