Dash display Linestring geojson / shp file

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

Hi dweben,

I am also running into the same problem, when I am trying to plot linestrings on plotly. Could you please let me know if you found a solution.

Thanks in advance!

Hey guys, I just answered a similar question in this topic, feel free to check if this answers your questions.

Cheers

1 Like

Hey Guys, have had similar issue in the past with this and took a while to get working properly.

For the geojson file:

  1. manipulate file to get list of list/tuple of each lat and lon point for each shape (ie [(lat, lon), (lat, lon)])
    1a. I used recursion to loop through json/dict iterables to till I find a float and then add to them to a list to form structure above
  2. For each geojson file or in my case city/county/province I get a new json/dict with the center as a key with lat and lon as the value and the structure that was extracted with the method described above under a ‘shape’ in the dict/json

For loading in the map:
NOTE: the colour of the regions are set by values the user inputs, some of the steps may not be relevant to your use case

  1. In the call back I create a new dictionary for each region in the selection by the user to create a colour relative to the other choices the user has made and imported the shape and name for each of the regions that were selected by the user
  2. The makeup of this dictionary and my code to create isis as follows (NOTE: keys are exact as they are what is interpreted in the ‘layers’ option in the mapbox layout
    #layer for each color to be added to map
    ireland_layers=[]
    market_shares=[]
    for i in choice:
        market_share=float(data.query('{}=="{}"'.format(region.lower(),i))['market_share'])
        #mabox layered details, ie the imported geo json shapes
        county_layer=dict(
            type = "fill",
            sourcetype = "geojson",
            source = details[i]['shape'],
            color=set_colour(market_share),
            opacity = 0.8,
            below = "state-label-sm"
        )
        ireland_layers.append(county_layer)
        market_shares.append(market_share)
  1. Once those layers are generated, I then create a go.Layout object (as you have above) and set the layers key in that object/dict to the ireland_layers list that was defined above

Hope this helps! took me a while to get working and figure it all out

Thank you so much !! @RenaudLN