Dash Scattermapbox multiple lines on single layer

Hi all,

I work with road network data which is just a series of lines in a shape file. I convert this to geojson and then place it within a Scattermapbox so I can have a nice shiny map. The geojson file has 18,000 individual lines in it representing the road network. I can load around half of that fairly slow but the whole thing just doesn’t work. I’m suspecting it’s loading each line onto a separate layer and then it’s trying to render 18,000 layers which obviously causes the thing to fail. Is there a method to force all the lines into one layer? I still need to retain the ability (not coded this yet) to hover over and see properties, etc. Colouring lines based on property attributes would be desirable but I can maybe split the geojson file into layers if that’s an issue.

Working code below, it’s a py file which lives within a multi-page app so just got the code for the map below.

import dash_core_components as dcc
import dash_html_components as html
import dash_bootstrap_components as dbc
import plotly.graph_objs as go
import json

with open(‘C:\DataSamples\folder\geojson_file’) as f:
network = json.load(f)

network2 = json.dumps(network)
network3 = network2.replace("’",’"’)
network4 = json.loads(network3)

layout = html.Div([
dbc.Row([
dbc.Col(
html.Div([
dcc.Graph(
id=‘map01’,
figure={
‘data’: [
go.Scattermapbox(
lat= [‘52.4796’],
lon= [’-1.903’],
mode=‘markers’,
marker=go.scattermapbox.Marker(size=14),
)
],
‘layout’: go.Layout(
hovermode=‘closest’,
height=800,
mapbox=dict(
layers=[
dict(
sourcetype=‘geojson’,
source=network4,
type=‘line’,
color=‘blue’,
below = “state-label-sm”
)
], #End of layers
accesstoken=‘token’,
bearing=0,
center=dict(lat=52,lon=-2),
pitch=0,
zoom=4,
style=‘light’
) #End of mapbox
) #End of layout
}
)
]),width=12),
],no_gutters=True), #Row end
])