Streamlit_folium release button not working

[bruno_castro93]

Summary

I am trying to implement this example in my app:

streamlit folium documentation: Draw Support

But every time I draw a shape, it seems that the mouse gets stuck

Steps to reproduce

Code snippet:

import folium
import streamlit as st
from folium.plugins import Draw

from streamlit_folium import st_folium

m = folium.Map(location=[39.949610, -75.150282], zoom_start=5)
Draw(export=True).add_to(m)

c1, c2 = st.columns(2)
with c1:
    output = st_folium(m, width=700, height=500)

with c2:
    st.write(output)

Expected behavior:

I expect that every time a release the mouse button, the drawing will stop

Actual behavior:

Every time I release the mouse button, the drawing continues.

Debug info

• Streamlit version: 1.31.0
• Python version: 3.10.11
• Using Conda? Conda, PipEnv
• OS version:
• Browser version: Firefox

Requirements file

streamlit==1.31.0
streamlit-folium==0.12.0 also tried the latest version

[sahirmaharaj]

Hello @bruno_castro93,

Here’s an example of how to address the issue using custom JavaScript, though this approach might not directly solve the mouse release problem:

import folium
import streamlit as st
from streamlit_folium import st_folium
from folium.plugins import Draw

m = folium.Map(location=[39.949610, -75.150282], zoom_start=5)
Draw(export=True).add_to(m)

# Attempt to capture and correct mouse events via JavaScript
# This is a simplistic approach and may need adjustments
js = """
<script>
document.addEventListener('mouseup', function() {
    // Custom logic to forcibly stop drawing or reset tool state
});
</script>
"""

st.markdown(js, unsafe_allow_html=True)

result = st_folium(m, width=700, height=500)

Hope this helps!

Kind Regards,
Sahir Maharaj
Data Scientist | AI Engineer

P.S. Lets connect on LinkedIn!

➤ Want me to build your solution? Lets chat about how I can assist!
➤ Join my Medium community of 30k readers! Sharing my knowledge about data science and AI
➤ Website: https://sahirmaharaj.com
➤ Email: sahir@sahirmaharaj.com
➤ 100+ FREE Power BI Themes: Download Now

[bruno_castro93]

Thank you for trying, but unfortunately it did not work

[gis2universe]

Did you fix the problem? I got the same error as above. However, in my case, the page above works fine, but in my code I got a problem. Maybe something in my code conflicts with Draw(). In my case, I used fit_bounds() and Draw() in the code, but after moving fit_bounds() to Draw() declaration, the problem was solved. Even now, I’m not sure why.

[Vladyslav]

Thank you very much for this insight, I would have never guessed. It works correctly with this order:

Draw().add_to(m) # Add Draw plugin first
m.fit_bounds(bounds=[[0, 0], [size[1], size[0]]]) # Fit bounds after adding Draw

[Daciel]

I’m going through he same problem. Did anyone find a solution?

In my case, the release button stops working after click on the marker.

Here it is my code:

import folium
import streamlit as st

from folium.plugins import Draw
from streamlit_folium import st_folium

m = folium.Map(location=[43.72299, 10.396579], zoom_start=13)
Draw(export=True).add_to(m)

folium.Marker(
    location=[43.72299, 10.396579],
    popup="Torre di Pisa"
).add_to(m)

c1, c2 = st.columns(2)
with c1:
    output = st_folium(m, use_container_width=True)

with c2:
    st.write(output)  

[Daciel]

any updates?

[Daciel]

Hey guys,

I found something that worked for me.

I created a virtual enviroment for my application following the step-by-step guide in Conda Cheat Sheet.

Then I set the Python version to 3.12.5 and reinstalled the packages, ensuring the sequence and the versions bellow:

streamlit==1.39.0
folium==0.17.0
Jinja2==3.1.4
branca==0.8.0
geopandas==1.0.1
streamlit-folium==0.18.0