Real-time updating map using leaflet.js

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

Something like this:

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:

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

1 Like

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.