Empty Mapbox when using Plotly-Dash

Viewed 723

I am using Mapbox with Plotly to draw some points on a map, this works fine locally. Locally I am using Jupyter Notebooks and the map with the points loads as expected.

But when trying to incorporate within Dash, I just get an empty box. The data points seem to be there, but the map is not rendered. What is the issue here? Below is what I see.

enter image description here

import pandas as pd
import plotly.express as px
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import plotly.offline as offline
import plotly.graph_objs as go
import chart_studio.plotly as py


#-----------------------------------------------------------------------------
# DATA LOAD

protests = pd.read_csv (r'https://raw.githubusercontent.com/dhairavc/Test/main/Protests.csv', encoding= 'unicode_escape')
map_token = "pk.eyJ1IjoiYWxpc2hvYmVpcmkiLCJhIjoiY2ozYnM3YTUxMDAxeDMzcGNjbmZyMmplZiJ9.ZjmQ0C2MNs1AzEBC_Syadg"


#----------------------------------------------------------------------------
#ALL PROTESTS

style4 = "mapbox://styles/mapbox/light-v10"

data = [go.Scattermapbox(
            lat = protests["Latitude"],
            lon = protests["Longitude"],
            mode = 'markers',
            marker = dict(
            size = 8,
            color = 'red',
            opacity = .3)
)]

layout = go.Layout(autosize=False,
                   mapbox=dict(accesstoken = map_token,
                   bearing= 10,
                   pitch = 50,
                   zoom = 10,
                   center = dict(lat=40.721319, lon=-73.987130),
                   style = style4),
                   width = 1000,
                   height = 900,
)

protests_fig = dict(data = data, layout=layout)
#------------------------------------------------------------------------------



app = dash.Dash(__name__)


# ------------------------------------------------------------------------------
# App layout
app.layout = html.Div(children=[
    
    html.Div([
        html.H1(children='Hello Dash'),

        html.Div(children='''
            Dash: A web application framework for Python.
        '''),

        dcc.Graph(
            id='graph2',
            figure = protests_fig
        ),  
    ]),
])



# ------------------------------------------------------------------------------
if __name__ == '__main__':
    app.run_server(debug=False, use_reloader=False)
0 Answers
Related