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.
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)
