Dash dashboard shows blank figure

1
votes

I want to create a map that shows specified locations using Dash. I prepared a script:

import dash
import dash_core_components as dcc
import dash_html_components as html
mapbox_access_token = 'pk.eyJ1IjoiYWxpc2hvYmVpcmkiLCJhIjoiY2ozYnM3YTUxMDAxeDMzcGNjbmZyMmplZiJ9.ZjmQ0C2MNs1AzEBC_Syadg'

app = dash.Dash()
server = app.server

app.layout = html.Div([
dcc.Graph(
    id='simple-map',
    figure=dict(
        data=dict(
            lat=[51.98799603],
            lon=[5.922999562],
            type='scattermapbox',
            marker=dict(size=5, color='white', opacity=0)
        ),
        layout=dict(
            mapbox=dict(
                layers=[],
                accesstoken=mapbox_access_token,
                style='light',
                center=dict(
                    lat=52.370216,
                    lon=-4.895168,
                ),
                pitch=0,
                zoom=2.5
            )
        )
    )
)

])

app.css.append_css({
'external_url': 'https://codepen.io/chriddyp/pen/bWLwgP.css'
})


if __name__ == '__main__':
    app.run_server(debug=True)

However, I am getting this result: result

What am I doing wrong?

1
pythonplotlydashboardplotly-dash

1 Answers

3
votes

The solution is always simpler than it seemed. You have to add brackets to the data and to the marker. 

import dash
import dash_core_components as dcc
import dash_html_components as html
mapbox_access_token = 'pk.eyJ1IjoiYWxpc2hvYmVpcmkiLCJhIjoiY2ozYnM3YTUxMDAxeDMzcGNjbmZyMmplZiJ9.ZjmQ0C2MNs1AzEBC_Syadg'

app = dash.Dash()
server = app.server

app.layout = html.Div([
dcc.Graph(
    id='simple-map',
    figure=dict(
        data=[dict(
            lat=[51.98799603],
            lon=[5.922999562],
            type='scattermapbox',
            marker=[dict(size=5, color='white', opacity=0)]
        )],
        layout=dict(
            mapbox=dict(
                layers=[],
                accesstoken=mapbox_access_token,
                style='light',
                center=dict(
                    lat=52.370216,
                    lon=-4.895168,
                ),
                pitch=0,
                zoom=2.5
            )
        )
    )
)

])

app.css.append_css({
'external_url': 'https://codepen.io/chriddyp/pen/bWLwgP.css'
})


if __name__ == '__main__':
    app.run_server(debug=True)

And the results is: correct result