WIP: move event handlers to client code

examples/pages/misc_examples.py

@@ -70,4 +70,6 @@
 
 with st.echo():
     # call to render Folium map in Streamlit
-    st_folium(m, width=2000, height=500, returned_objects=[], debug=True)
+    data = st_folium(m, width=2000, height=500, debug=True)
+
+st.write(data)

streamlit_folium/__init__.py

@@ -16,6 +16,8 @@
 import streamlit.components.v1 as components
 from jinja2 import UndefinedError
 
+from .event_handlers import click, move
+
 # Create a _RELEASE constant. We'll set this to False while we're developing
 # the component, and True when we're ready to package and distribute it.
 _RELEASE = True
@@ -297,6 +299,11 @@ def st_folium(
 
     folium_map.render()
 
+    folium_map.on(
+        click=click,
+        move=move,
+    )
+
     # we need to do this before _get_map_string, because
     # _get_map_string alters the folium structure
     html = _get_html(folium_map)

streamlit_folium/event_handlers/__init__.py

@@ -0,0 +1,16 @@
+# WIP
+from folium import JsCode
+
+click = JsCode("""
+    function onMapClick(e) {
+        const global_data = window.__GLOBAL_DATA__
+        global_data.lat_lng_clicked = e.latlng
+        debouncedUpdateComponentValue(window.map)
+        }
+""")
+
+move = JsCode("""
+    function onMapMove(e) {
+        debouncedUpdateComponentValue(window.map)
+    }
+""")

streamlit_folium/frontend/src/index.tsx

@@ -40,15 +40,10 @@ declare global {
     feature_group: any
     layer_control: any
     Streamlit: any
+    debouncedUpdateComponentValue: any
   }
 }
 
-function onMapClick(e: any) {
-  const global_data = window.__GLOBAL_DATA__
-  global_data.lat_lng_clicked = e.latlng
-  debouncedUpdateComponentValue(window.map)
-}
-
 let debouncedUpdateComponentValue = debounce(updateComponentValue, 250)
 
 function updateComponentValue(map: any) {
@@ -90,10 +85,6 @@ function updateComponentValue(map: any) {
   }
 }
 
-function onMapMove(e: any) {
-  debouncedUpdateComponentValue(window.map)
-}
-
 function extractContent(s: string) {
   var span = document.createElement("span")
   span.innerHTML = s
@@ -215,11 +206,12 @@ function getPixelatedStyles(pixelated: boolean) {
   return styles
 }
 window.Streamlit = Streamlit;
+window.debouncedUpdateComponentValue = debouncedUpdateComponentValue;
 
 window.initComponent = (map: any, return_on_hover: boolean) => {
   const global_data = window.__GLOBAL_DATA__
-  map.on("click", onMapClick)
-  map.on("moveend", onMapMove)
+  // map.on("click", onMapClick)
+  // map.on("moveend", onMapMove)
   for (let key in map._layers) {
     let layer = map._layers[key]
     if (layer && layer["_url"] && layer["wmsParams"] && layer["wmsParams"]["layers"]) {