Using Leaflet (instead of Folium) in Streamlit to return coordinates on map click

While @randyzwitch has produced a very appreciated Streamlit component for Folium, it’s hard to add any interactivity with the map and send results back into Streamlit.

I feel this is a use case that is more easily addressed by building your own custom Streamlit component over Leaflet. You lose the map building in Python, but you gain full access to the Javascript map interactivity, and I do believe rebuilding all the map elements in Leaflet/JS using data passed from Python is easy enough.

So here is a very quick & dirty implementation of a Streamlit component with Leaflet map where map click returns a value to your Python script :

It also doesn’t use the Streamlit component React template, nor react-leaflet. Yup it’s plain Typescript from the reactless template!

Feel free to take inspiration/fork/reuse/have fun



Another great work, and a nice example on how to use the reactless template! Love it!

Whoa. This is awesome. Are you gonna get it on the gallery?

I actually wanted to build it with Parcel instead of using the reactless webpack template for a lighter build tool chain, but everything kinda broke in the middle :sweat_smile: I’ll try again for another prototype

1 Like

Thanks :blush: hmmm if I also add Python data as Leaflet popups to select, and clean the code and configuration a bit, I will consider it :dizzy:

I disagree that it’s hard, just that no one has added a spec for it yet :laughing:

1 Like