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

Dash Python
1

Hey guys,

Hoping someone can help as this problem is stopping me progressing my project. I have raise a GitHub issue but hoping someone in the community can advise.

Applying different colors to clustered points via a callback appears to break the figure and raises the following errors in the browser console:

  • Error: Source “source-7f412d-circle” cannot be removed while layer “plotly-trace-layer-7f412d-cluster” is using it.
  • Uncaught (in promise) Error: Mapbox error.

Example code provided below. To recreate the error, toggle the filter checkbox on and off. Additional clustering checkbox shows that the error does not happen if clustering not enabled.

1 Like
2 
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