Hi everyone, I’m trying to plot a real time map of DC Metro’s Orange, Silver and Blue Line
My map code is made using plotly and I used px.scatter_map() to initialise the map, and go.Scattermap() to add traces.
However, st.plotly_chart() just displays a blank graph instead of displaying the map.
Using fig.show() displays the map correctly.
Thanks in advance!
Locally-run app
Streamlit version: 1.39.0
Python version: 3.11.1
Here’s the code snippet:
def initialize_map(line):
stations = line.stations
fig = px.scatter_map(stations, lat = stations.stop_lat, lon=stations.stop_lon)
# Set layout for Mapbox
fig.update_layout(
autosize=True,
hovermode='closest',
map=dict(
bearing=0,
center=dict(
lat=38.92,
lon=-77.07
),
pitch=0,
zoom=10,
style='light'
),
showlegend=False,
margin={"r":0,"t":0,"l":0,"b":0} # Remove default margins
)
st.plotly_chart(fig)
return fig
def plot(line, direction):
fig = initialize_map(line)
def plot_stations(line, direction):
fig.add_trace(go.Scattermap(
lat=line.stations.stop_lat,
lon=line.stations.stop_lon,
mode='markers+text+lines',
marker=go.scattermap.Marker(size=9, color=line.name.lower()), # Specify a color explicitly
text=line.stations.station_name,
textfont=dict(size=8, color="black", family="Open Sans Bold")
))
if direction:
cur = line.stations.iloc[0]
fig.add_trace(go.Scattermap(
lat=[cur.stop_lat],
lon=[cur.stop_lon],
mode='markers+text',
text="Destination: ",
textfont=dict(size=11, color="black", family="Open Sans Bold"),
marker=dict(size=20, symbol= "circle-stroked", color="red")
))
else:
cur = line.stations.iloc[-1]
fig.add_trace(go.Scattermap(
lat=[cur.stop_lat],
lon=[cur.stop_lon],
mode='markers+text',
text="Destination",
textfont=dict(size=11, color="black", family="Open Sans Bold"),
marker=dict(size=20, symbol= "circle-stroked", color="red")
))
def plot_trains(line, direction):
trains = line.trains
trains = trains[trains["vehicle.trip.directionId"]==direction]
stopped_trains = trains[trains["vehicle.currentStatus"]=="STOPPED_AT"]
trains = trains[trains["vehicle.currentStatus"]!="STOPPED_AT"]
#For stopped trains
fig.add_trace(go.Scattermap(
lat=stopped_trains["vehicle.position.latitude"],
lon=stopped_trains["vehicle.position.longitude"],
mode='markers',
text=stopped_trains["vehicle.currentStatus"]+" "+stopped_trains["station_name"],
marker=dict(size= 16, symbol= "rail-metro")
))
#For trains in transit
lat = trains["vehicle.position.latitude"]
lon = trains["vehicle.position.longitude"]
if direction:
fig.add_trace(go.Scattermap(
lat=lat,
lon=lon,
mode='markers',
text=trains["vehicle.currentStatus"]+" "+trains["next_station_name_1"],
marker=dict(size= 16, symbol= "rail-metro")
))
else:
fig.add_trace(go.Scattermap(
lat=lat,
lon=lon,
mode='markers',
text=trains["vehicle.currentStatus"]+" "+trains["next_station_name_0"],
hoverinfo=['skip'],
marker=dict(size= 16, symbol= "rail-metro")
))
plot_stations(line, direction)
plot_trains(line, direction)
st.plotly_chart(fig)
linechoice = st.selectbox("Select metro line", ("Orange [Vienna Fairfax-GMU to New Carrolton]", "Silver [Ashburn to Largo]", "Blue [Franconia-Springfield to Largo]"), index=0)
if 'line' not in st.session_state:
st.session_state.line = orangeline
if linechoice == "Orange [Vienna Fairfax-GMU to New Carrolton]":
st.session_state.line = orangeline
elif linechoice == "Silver [Ashburn to Largo]":
st.session_state.line = silverline
else:
st.session_state.line = blueline
if 'direction' not in st.session_state:
st.session_state.direction = 1
if st.button("Switch Direction"):
st.session_state.direction = 1 if st.session_state.direction == 0 else 0
plot(st.session_state.line, st.session_state.direction)
st.write(orangeline.stations)
if st.button("Refresh Data"):
feed_rt, predictions = get()
st.success("Data refreshed successfully!")
