@jerry2021
Yes, you can plot networks on Mapbox. Here is an example that is likely be posted twice, because I suppose I answered a similar question some time ago:
import networkx as nx
import plotly.graph_objs as go
G = nx.read_gpickle('divvy.pkl') #https://github.com/empet/Datasets/blob/master/divvy.pkl
G_new = G.copy()
for n1, n2, d in G.edges(data=True):
#print(d['count'])
if d['count'] < 400:
G_new.remove_edge(n1, n2)
#Extract data to define the `scattermapbox` trace for graph nodes:
node_data = list(G_new.nodes(data=True))
ids = [nl[0] for nl in node_data]
lats = [nl[1]['latitude'] for nl in node_data]
lons = [nl[1]['longitude'] for nl in node_data]
dpcapacity = [nl[1]['dpcapacity'] for nl in node_data]
tooltips = [f"{nl[1]['name']}<br>dpcapacity: {nl[1]['dpcapacity']}" for nl in node_data]
#Define the dict for the graph layout (i.e. node geographic locations):
pos = {id: [lo, la] for id, lo, la in zip(ids, lons, lats)}
#Get the map center:
x_center = (min(lons) + max(lons))/2
y_center = (min(lats) + max(lats))/2
fig= go.Figure(go.Scattermapbox( #trace for nodes
lat= lats,
lon=lons,
mode='markers',
text=tooltips,
marker=dict(size=8,
color= dpcapacity,
colorscale='matter'
),
showlegend=False,
hoverinfo='text'
))
edge_list = list(G_new.edges(data=True))
pl_edges = [(item[0], item[1]) for item in edge_list]
#Define the coordinates of the edge ends as `'MultiLineString'` data type, see https://en.wikipedia.org/wiki/GeoJSON
coords=[]
for e in pl_edges:
coords.append([ [pos[e[0]][0], pos[e[0]][1]], [pos[e[1]][0], pos[e[1]][1]] ])
#mapbox_access_token = 'my_token'
#Define the Mapbox layers representing the graph edges:
layers = [dict(sourcetype = 'geojson',
source={"type": "Feature",
"geometry": {"type": "MultiLineString",
"coordinates": coords}
},
color= 'red',
type = 'line',
line=dict(width=1.5),
)]
#mapboxt = open(".mapbox_token").read().rstrip() #my mapbox_access_token must be set only for special mapbox style
fig.update_layout(title_text="Graph on map", title_x=0.5,
font=dict(family='Balto', color='black'),
autosize=False,
width=850,
height=1200,
hovermode='closest',
mapbox=dict(#accesstoken=mapbox_access_token,
layers=layers,
bearing=0,
center=dict(lat=y_center,
lon=x_center+0.01),
pitch=0,
zoom=11.5,
style='open-street-map'
),
margin=dict(t=150)
)
The above nework is not very interesting, but from this example you can learn how are defined its edges as mapbox layers.
If you are interested in edges following geographical paths, then you must install osmnx
: https://github.com/gboeing/osmnx . In this plot https://chart-studio.plotly.com/~empet/15041 the red and blue path are plotted following the (lon, lat) provided by osmnx.
See also: https://chart-studio.plotly.com/~empet/15000.