Buttons in scatter_mapbox dont update

Dash Python
1

Hi all, I am new to plotly and would like to use scatter_mapbox however I am facing two issues: the button don’t seem to refresh the map (i wanted to use button to apply a filter on the set of markers that are added to the map), and I can’t zoom in the map using the mouse scroll button. I wonder if the two issues are related and due to some page refresh issue.

My code is the following:

import plotly.express as px
import pandas as pd
import plotly.io as pio

# Sample DataFrame with a 'type' column
data = {
    'latitude': [34.0522, 36.1699, 40.7128, 34.0522],
    'longitude': [-118.2437, -115.1398, -74.0060, -118.2437],
    'value': [10.5, 20.2, 30.1, 15.0],
    'type': [1, 2, 1, 2]  # Different types
}

df = pd.DataFrame(data)

# Create a scatter mapbox figure
fig = px.scatter_mapbox(df,
                         lat='latitude',
                         lon='longitude',
                         color='value',
                         color_continuous_scale=px.colors.sequential.Reds,
                         size=[10] * len(df),
                         hover_name=df.index.astype(str),
                         mapbox_style="open-street-map",
                         zoom=4,
                         center=dict(lat=36, lon=-95))

# Define buttons
buttons = [
    dict(label='All Types',
         method='update',
         args=[{'visible': [True] * len(df)}]),  # Show all markers
]

# Add type-specific buttons
for i in range(1, 3):  # Types 1 and 2
    buttons.append(dict(label=f'Type {i}',
                        method='update',
                        args=[{'visible': [t == i for t in df['type']]}]))  # Update visibility based on type

# Update layout to include buttons
fig.update_layout(
    updatemenus=[{
        'buttons': buttons,
        'direction': 'down',
        'showactive': True,
    }],
    title="Map with Type Filtering"
)

fig.show()

Any help appreciated
thanks