WIP: move event handlers to client code

First step, move (some of) the event handlers to python code.

Author: hansthen

streamlit_folium/__init__.py

@@ -18,7 +18,7 @@
 
 # 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
+_RELEASE = False
 
 
 if not _RELEASE:
@@ -297,6 +297,21 @@ def st_folium(
 
     folium_map.render()
 
+    folium_map.on(
+        click=folium.JsCode("""
+            function onMapClick(e) {
+                const global_data = window.__GLOBAL_DATA__
+                global_data.lat_lng_clicked = e.latlng
+                debouncedUpdateComponentValue(window.map)
+            }
+        """),
+        move=folium.JsCode("""
+            function onMapMove(e) {
+                debouncedUpdateComponentValue(window.map)
+            }
+        """),
+    )
+
     # we need to do this before _get_map_string, because
     # _get_map_string alters the folium structure
     html = _get_html(folium_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"]) {