I am trying to create a geojson choropleth map with another scatter layer on top of it.
I am having an issue where chrome will crash if I use a complete geojson to create the map. GeoJson has 3000 points and might be the reason as I am having no issues with 100-200 points.
This is my code.
app = dash.Dash(__name__, external_scripts=external_js,
external_stylesheets=external_css)
app.layout = html.Div(
children=[
create_header("Geo Map with zoom"),
html.Div(
children=[
html.Div(create_dropdowns(), className='row'),
html.Div(create_content(), className='row'),
]
)
],
className='container',
style={'font_family':theme['font-family']}
)
@app.callback(
Output('graph-geo', 'figure'),
[Input('dropdown-store', 'value')]
)
#def zoom(store):
# if store == "All":
# zoom = 5
# else:
# zoom = regions[store]['Zoom']
# return zoom
def _update_graph(store):
text= df_stores_list["store_name"].astype(str).tolist()
layout = dict(
title = 'Mapbox Choropleth<br>Sales',
# autosize=True,
hovermode='closest',
height=800,
font=dict(family=theme['font-family']),
# margin=dict(l=0, r=0, t=45, b=10),
mapbox=dict(
accesstoken=MAPBOX_KEY,
bearing = 0,
center=dict(
lat = store_data[store]['lat'],
lon = store_data[store]['lon'],
),
layers=[dict(sourcetype = 'geojson',
source =geojson[k],
color = "plum",
opacity = 0.6,
type = "fill",
below = "water"
) for k in range(200)
],
pitch=0,
zoom = store_data[store]['Zoom'],
# style= 'dark'
),
)
data = [dict(
type="scattermapbox",
lat = df_stores_list["store_lat"].values,
lon= df_stores_list["store_lng"].values,
mode='markers',
marker = dict(
size=12,
color="darkblue",
opacity=1
),
text=text,
hoverinfo="text"
)]
figure = go.Figure(data=data, layout=layout)
return figure
if __name__ == "__main__":
app.run_server(debug=False)
Is there anyway I can load the whole geojson without crashing chrome?