✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
⚡️ Concerned about the grid? Kyle Baranko teaches how to predicting peak loads using XGBoost. Register for the August webinar!

Dash not rendering figures with custom mapbox styles

I’m having a hard time making dash render mapbox figures that use a custom mapbox style

By “custom mapbox style” I mean using a mapbox url like this:

fig.update_layout(
    mapbox=dict(
        style='mapbox://styles/username/...',
    ...

If I check the devtools console, i see a mapbox error and other undefined errors but no actual error messages :confused:

Here is a self-contained example, using datasets provided by plotly-express. Note, it requires passing a custom style ID to test out (which you can easily make on mapbox studio)

import plotly.graph_objects as go
import plotly.express as px

MAPBOX_ACCESSTOKEN = '...'

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

fig = go.Figure(go.Choroplethmapbox(
    geojson=geojson,
    locations=df['district_id'],
    z=df['Bergeron'],
    zmin=0,
    zmax=df.Bergeron.max(),
    below='water'
))

fig.update_layout(
    mapbox=dict(
        accesstoken=MAPBOX_ACCESSTOKEN,
#         style='streets',  # works
#         style = 'mapbox://styles/srepho/cjttho6dl0hl91fmzwyicqkzf',  # works
#         style="mapbox://styles/grisaitis/...",  # never works
        zoom=10,
        center=dict(lat=45.48, lon=-73.60),
    ),
)
fig.update_layout(margin={"r":0,"t":0,"l":0,"b":0})

# fig.show()  # always works

import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash()
app.layout = html.Div([
    dcc.Graph(figure=fig, style={'height': '100vh'})
])

app.run_server(debug=True, use_reloader=False)

Any help would be greatly appreciated!