Custom Mapbox Studio style in Dash

Dash Python
1

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
2

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
3

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.

4

@chriddyp Any solution to this? Would be great!

2 Likes
5

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.

6

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.

7

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

1 Like
8

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

Thanks.

9

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?

10

@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!

11

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
12

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?

13

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

14

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.