Hi, bit of a newbie user here to dash. I’m comfortable with setting up graphs and the like and they seem fine for me. However recently I’ve moved into wanting to display maps. Most maps I see are ‘area’ maps of some sort, whereas I deal with data relating to road networks, so it’s all Linestring polyline shp files. I can import it into Spyder just fine using geopandas but trying to get it to display in Dash with an OSM background is giving me trouble. I’ve pasted code below, it’s probably something really silly! Any help would be appreciated.
The end goal is have the polyline shp/geojson file sitting on top of an OSM map, and displayed in Dash.
import dash_core_components as dcc
import dash_html_components as html
import dash_bootstrap_components as dbc
import pandas as pd
import plotly.graph_objs as go
import geopandas as gpd
import json
#ntisnetwork = gpd.read_file('C:\DataSamples\Links_nmv10\INRIX_Links_nmv10.shp')
#ntisnetwork = ntisnetwork.to_crs({'init': 'epsg:4326'}) #Transforms to WGS84 format
#ntisnetwork.to_file("C:\DataSamples\Links_nmv10\INRIX_Links_nmv10_geoj", driver = "GeoJSON") Transforms shp to json
#ntisnetwork2 = gpd.read_file('C:\DataSamples\Links_nmv10\INRIX_Links_nmv10_geoj')
#ntisnetwork.head
#ntisnetwork2.head
#ntisnetwork.plot()
layout = html.Div([
#Null Checks
#dbc.Row(dbc.Col(html.H3('Traffic Data Validation'))),
dbc.Row([
dbc.Col(
html.Div([
#html.H5('Traffic Data Validation'),
#html.Div(id='app-1-display-value'),
dcc.Graph(
id='map01',
#style={'width': 900,'height': 600},
figure={
'data': [
# =============================================================================
# go.Scattermapbox(
# lat= ['45.5017'],
# lon= ['-73.5673'],
# mode='markers',
# marker=go.scattermapbox.Marker(size=14),
# )
# =============================================================================
],
'layout': go.Layout(
mapbox = dict(
accesstoken = '<code here>',
bearing = 0,
#center = your_center_coordinates,
#style = ''
style = 'open-street-map',
pitch = 0,
#zoom = your_zoom,
layers = [
dict(
type = 'line',
#width = 1,
sourcetype = 'geojson',
source = 'C:\DataSamples\Links_nmv10\INRIX_Links_nmv10',
color = 'cyan',
opacity = 0.8,
#below = "state-label-sm"
)
]
),
margin=dict(l=50,r=50,b=50,t=50),
#height=300,
title='Map Test'
#barmode='stack'
)
}
)
]),width=12),
],no_gutters=True), #Row end
])