Add support for getting all drawn objects on the map (#32)

* Add support for getting all drawn objects on the map (more testing needed)

* Remove unused variable

* Set RELEASE to True

.gitignore

@@ -73,4 +73,6 @@ package-lock.json
 .vscode/
 
 .direnv/
-.envrc
+.envrc
+
+.streamlit/

examples/draw_support.py

@@ -0,0 +1,14 @@
+import folium
+import streamlit as st
+from folium.plugins import Draw
+from streamlit_folium import st_folium
+
+"# Try drawing some objects and then clicking on them"
+
+m = folium.Map(location=[39.949610, -75.150282], zoom_start=5)
+
+Draw(export=False).add_to(m)
+
+output = st_folium(m, width=500, height=500)
+
+st.sidebar.write(output)

setup.py

@@ -2,7 +2,7 @@
 
 setuptools.setup(
     name="streamlit_folium",
-    version="0.6.0alpha3",
+    version="0.6.0alpha4",
     author="Randy Zwitch",
     author_email="randy@streamlit.io",
     description="Render Folium objects in Streamlit",

streamlit_folium/__init__.py

@@ -6,7 +6,6 @@
 import folium
 import folium.plugins
 import streamlit.components.v1 as components
-from folium.utilities import normalize
 from jinja2 import UndefinedError
 
 
@@ -119,6 +118,9 @@ def st_folium(
         m_id = get_full_id(fig)
         leaflet = leaflet.replace(m_id, "map_div")
 
+    # Get rid of the annoying popup
+    leaflet = leaflet.replace("alert(coords);", "")
+
     component_value = _component_func(
         fig=leaflet,
         id=m_id,
@@ -145,10 +147,10 @@ def generate_leaflet_string(m: folium.MacroElement, nested: bool = True) -> str:
         # Add the script for map2
         leaflet += "\n" + generate_leaflet_string(m.m2, nested=nested)
         # Add the script that syncs them together
-        leaflet += normalize(m._template.module.script(m))
+        leaflet += m._template.module.script(m)
         return leaflet
 
-    leaflet = normalize(m._template.module.script(m))
+    leaflet = m._template.module.script(m)
 
     if not nested:
         return leaflet

streamlit_folium/frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "streamlit_folium",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "private": true,
   "dependencies": {
     "@testing-library/jest-dom": "^5.16.2",
@@ -14,6 +14,7 @@
     "event-target-shim": "^5.0.1",
     "hoist-non-react-statics": "^3.3.2",
     "leaflet": "^1.7.1",
+    "leaflet-draw": "^1.0.2",
     "leaflet.sync": "^0.2.4",
     "react-scripts": "^4.0.0",
     "streamlit-component-lib": "^1.3.0",
@@ -43,6 +44,7 @@
   },
   "homepage": ".",
   "devDependencies": {
+    "@types/leaflet-draw": "^1.0.5",
     "@types/underscore": "^1.11.4"
   }
 }

streamlit_folium/frontend/public/index.html

@@ -11,6 +11,8 @@
   <script src="https://cdn.jsdelivr.net/npm/leaflet@1.7.1/dist/leaflet.js"></script>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.7.1/dist/leaflet.css">
   <script src="https://cdn.jsdelivr.net/gh/jieter/Leaflet.Sync/L.Map.Sync.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.js"></script>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.css">
   <style>
     .float-container {
       padding: 20px;

streamlit_folium/frontend/src/index.tsx

@@ -7,6 +7,8 @@ type GlobalData = {
   map: any;
   lat_lng_clicked: any;
   last_object_clicked: any;
+  last_active_drawing: any,
+  all_drawings: any,
   bounds: any;
 };
 
@@ -41,6 +43,8 @@ function onRender(event: Event): void {
     Streamlit.setComponentValue({
       last_clicked: global_data.lat_lng_clicked,
       last_object_clicked: global_data.last_object_clicked,
+      all_drawings: global_data.all_drawings,
+      last_active_drawing: global_data.last_active_drawing,
       bounds: bounds,
     })
   }
@@ -49,9 +53,27 @@ function onRender(event: Event): void {
     debouncedUpdateComponentValue()
   }
 
+  function onDraw(e: any) {
+    return onLayerClick(e);
+  }
+
   function onLayerClick(e: any) {
     const global_data = __GLOBAL_DATA__;
     global_data.last_object_clicked = e.latlng;
+    if (e.layer.toGeoJSON) {
+      global_data.last_active_drawing = e.layer.toGeoJSON();
+    }
+    if (e.target._layers) {
+      let details = []
+      let layers = e.target._layers;
+      for (let key in layers) {
+        let layer = layers[key];
+        if (layer.toGeoJSON) {
+          details.push(layer.toGeoJSON());
+        }
+      }
+      global_data.all_drawings = details;
+    }
     debouncedUpdateComponentValue()
   }
 
@@ -81,6 +103,8 @@ function onRender(event: Event): void {
             bounds: map_div.getBounds(),
             lat_lng_clicked: null,
             last_object_clicked: null,
+            all_drawings: null,
+            last_active_drawing: null,
         };`;
         let replaced = fig + set_global_data;
         render_script.innerHTML = replaced;
@@ -95,6 +119,10 @@ function onRender(event: Event): void {
           let layer = map._layers[key];
           layer.on("click", onLayerClick)
         }
+        debugger;
+        map.on('draw:created', onDraw);
+        //map.on('draw:edited', onDraw);
+
         Streamlit.setFrameHeight()
         updateComponentValue();
       }