Real-time updating map using leaflet.js

Using Streamlit
1

I would like to show a real-time map updating when new streaming data is coming in.

Something like this:

image
image1096Ă—685 143 KB

Other sources:

Is it possible e.g. with leaflet? I think Streamlit is not yet flexible enough to handle this kind of Use Case.

I am thankful for any hint or advice :slight_smile:

2

Hi @Danielse -

Have you tried using streamlit-folium? That will get you the map part, and then you just need to work on the streaming part. Depending on exactly how you need to do it, it could be as easy as using the .add_rows functionality to update the app every time a dataframe updates, or you might need to use something like asyncio.

Best,
Randy

2 Likes
3

Thank you very much for your answer! Folium has a variety of visualization capabilities to plot historical data. But it has no option to generate a live visualization updating itself. Even when updating a static map with a single point, I see a short visual interruption.

Thats why I thought it’s necessary to dig deeper into Folium which is pure leaflet.js Javascript code (Leaflet - a JavaScript library for interactive maps). Is there a way to embed code like this? Pure leaflet would be able to do realtime maps.

streamlit-folium has another disadvantage. The maps cannot be stored in session state. After a random click there is a re-execution of building the map when it’s pulled from session state.

4

Did you ever find a way to live update without the short visual interruption? I am trying to draw a path using dots from A to B

2 Likes
5

By the way, seems like this is possible now: Way to not rerender/persist the map on rerun · Issue #91 · randyzwitch/streamlit-folium · GitHub

6

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.