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.
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 I’ll try again for another prototype
Looks great and is something I was looking for!! So took it as some great inspriration
Started my own component using the react template, and included the leaflet draw functionality to return the coordinates of drawn layers to python.
I’m very new to react and frontend development. When I draw a polyline an set the component value with the polyline coordinates I get two errors:
TypeError: destroy is not a function
TypeError: props.leaflet is undefined.
The coordinates are displayed however below the map.
I think that has something to do with React Hooks and the component lifecycle as it’s reloaded when the component value is returned. I tried using useEffect hook, but without any luck at the moment. Should I save the map state? Any ideas or pointers in what direction I should be looking?
I forked your projet to GitHub - andfanilo/streamlit-leaflet and converted to React hooks everywhere (if you want to check ), and I’m seeing the same bug as you.
I’m not sure if it comes from you or the react-leaflet-draw plugin though like you say, it seems the EditControl component tries to access a map inside its own prop that has somewhat been removed after the Streamlit.setComponentValue call (if you comment the setComponentValue everything works…btw if you comment and uncomment it, you see An effect function must not return anything besides a function, which is used for clean-up. You returned: false appear, so maybe we need to move the setComponentValue elsewhere, like in the React Leaflet map events?), but I don’t see in their source code how to preserve the component in a React ref for example to prevent it from unmounting/remounting. I tried fixing a key but it doesn’t help. Also tried implementing the FeatureGroup ref from their example but no luck either.
So yeah I have no concrete advice yet…but I’ll dig in more too on my side, hopefully we’ll find something.
Thanks for the fork and showing how you would use react hooks, very usefull . Good point on the react leaflet map events, was already looking at it this morning. I also saw the other error you mentioned. Have a feeling it’s caused when selecting the draw features.
I’ll keep playing around with this in following days to see if I can make some progress!
I’ll try again for another prototype
hmmm if I also add Python data as Leaflet popups to select, and clean the code and configuration a bit, I will consider it 
), and I’m seeing the same bug as you.
like you say, it seems the