TODAY learn how to bring Drag & Drop to Dash with Dashboard Engine. 🌠 Sign up for the live event!

Custom Mapbox Studio style in Dash

Hi.

I know in Mapbox you can change between the default styles (dark, light, streets etc) via the style parameter.

However, I’d like to use a custom map created in Mapbox studio. The map has a style URL in the form of:

mapbox://styles/{username}/{styleID}

I did the following…

        mapbox = dict(
        accesstoken = mapbox_access_token,
        style = 'styleID',
    )

…but it doesn’t seem to work, which is strange because it works fine in the plotly editor when I upload the map’s json.

Any ideas?

2 Likes

Hi @chriddyp. We still didn’t manage to solve this. Not sure if you’ve had any experience of integrating a custom map?

2 Likes

Also having trouble using a mapbox style. I tried different style URLs from the Mapbox editor, or using the styleID, but can’t get it to work.

@chriddyp Any solution to this? Would be great!

2 Likes

So I think you need to pass in the full mapbox url rather then just the style id.

   mapbox = dict(
    accesstoken = mapbox_access_token,
    style = 'mapbox://styles/srepho/cjttho6dl0hl91fmzwyicqkzf'
)

This worked for me.

Strange, Srepho’s style works for me when I copy it, however my own don’t seem to work well. I need to press the Reset View, and then zoom for my own styles to load, and they don’t seem to load fully.

Same problem here. Srepho’s style works, but not my own style. Can you solve this?

1 Like

@srepho did you set any special configuration in your style? I can’t understand why your style works, but not other styles.

Thanks.

Hey, so ive come across the same problem right now. @srepho Your style works,but mine also wont work until i press Reset View and even then its not as i have configured. Has anyone found the solution yet? Or ist on Mapbox´s side?

@srepho’s solution works for me too.

By follow-up problem is changing this to read from a json file stored on my local machine rather than the url from Mapbox studio.

So the following works:

mapbox_access_token = ...
mapbox_style = 'mapbox://styles/...'

    layout = dict(
        autosize=True,
        height=1000,
        font=dict(color='black'),
        titlefont=dict(color='black', size='14'),
        margin=dict(l=35, r=35, b=35, t=45),
        hovermode="closest",
        mapbox=dict(
            accesstoken=mapbox_access_token,
            style=mapbox_style,
            center=dict(lon=list(get_depot_lat_long(from_depot).lon)[0],
                        lat=list(get_depot_lat_long(from_depot).lat)[0]),
            zoom=7
        )
    )

But after downloading the zip from Mapbox studio, un-zipping, checking the filepath to my ‘.json’ file and using the following logic instead, it no longer works:

import json
with open(path_to_map_style_json, 'r') as read_file:
    map_style = json.load(read_file)

layout = dict(
        autosize=True,
        height=1000,
        font=dict(color='black'),
        titlefont=dict(color='black', size='14'),
        margin=dict(l=35, r=35, b=35, t=45),
        hovermode="closest",
        mapbox=dict(
            accesstoken=mapbox_access_token,
            # style=mapbox_style,
            center=dict(lon=list(get_depot_lat_long(from_depot).lon)[0],
                        lat=list(get_depot_lat_long(from_depot).lat)[0]),
            zoom=7,
            layers=dict(
                sourcetype='geojson',
                source=map_style
            )
        )
    )

Any advice much appreciated!

hi @lnkirkham! layers need to be a list, not a dict.

change

            layers=dict(
                sourcetype='geojson',
                source=map_style
            )

to

            layers=[dict(
                sourcetype='geojson',
                source=map_style
            )]
1 Like

i also can’t make custom styles show up in dash graphs.

  • works fine in jupyter with fig.show()
  • does not work with dash.
    • tried @seferoezcan’s suggestion of “reset view”
    • tried zooming as @troystory89 did
    • tried downloading the style from Mapbox Studio as a zip, unzipping, and passing the json as a new mapbox layer (as @lnkirkham did)
    • none of this ^^ worked
  • @srepho’s style does work with dash

i wonder if this is an issue on mapbox’s end. i’ve found that styles sometimes “break” after i make major edits.

here’s a self-contained example:

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)  # Turn off reloader if inside Jupyter

I use jupyter… maybe this has something to do with it?

i just tried outside jupyter (as a standalone script). no dice.

tbh, for a decent map u either have to use the leaflet package or hackaround urself with react and react-map-gl. Thats what im doing atleast.