Restyling clustered points in scatter_mapbox via callback breaks dcc.Graph figure

from dash import Dash, dcc, html, Input, Output
import dash_bootstrap_components as dbc
import plotly.express as px
import pandas as pd

print('Mapbox token required')
mapbox_token='xxx'

sitesDF = data = pd.DataFrame({'latitude': [1,1,2,2,1,1,2,2],
                               'longitude': [1,2,1,2,-11,-12,-11,-12],
                               'name':['A','B','C','D','E','F','G','H']})

def create_map(included,excluded,clustering):
    included['color'] = 'included'
    excluded['color'] = 'excluded'
    data = pd.concat([included,excluded])
    
    color_discrete_map = {'included': 'rgb(64,217,18)','excluded': 'grey'}
    fig = px.scatter_mapbox(data, lat='latitude', lon='longitude', color='color',color_discrete_map=color_discrete_map)
    fig.update_layout(mapbox_style='dark', mapbox_accesstoken=mapbox_token)
    fig.update_layout(mapbox={'zoom': 4})
    fig.update_layout(margin={'r': 0, 't': 0, 'l': 0, 'b': 0})
    fig.update_layout(legend={'yanchor':'top','y':0.99,'xanchor':'left','x':0.01})
    fig.update_traces(cluster_enabled=clustering)
    return fig

app = Dash(__name__)
app.layout = dbc.Container([dcc.Loading(dcc.Graph(id='index-map')),
                       html.Br(),
                       dbc.Checkbox(id='clustering',label='Cluster',value=True),
                       dbc.Checkbox(id='filtering',label='Filter',value=False)])

@app.callback(Output('index-map', 'figure'),
              Input('clustering', 'value'),
              Input('filtering', 'value'))
def render_map_extras(clustering,filtering):
    included = sitesDF.iloc[:4] if filtering else sitesDF
    excluded = sitesDF[~sitesDF['name'].isin(list(included['name']))]
    fig = create_map(included,excluded,clustering)
    return fig

app.run_server(debug=True)
1 Like