Streamlit_folium release button not working


I am trying to implement this example in my app:

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)

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

with c2:

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-folium==0.12.0 also tried the latest version (1)

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)

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

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:
➀ Email:
➀ 100+ FREE Power BI Themes: Download Now


Thank you for trying, but unfortunately it did not work :frowning:

1 Like