Support html siblings to the map (#83)

setup.py

@@ -2,7 +2,7 @@
 
 setuptools.setup(
     name="streamlit_folium",
-    version="0.6.14",
+    version="0.6.15",
     author="Randy Zwitch",
     author_email="[email protected]",
     description="Render Folium objects in Streamlit",

streamlit_folium/__init__.py

@@ -114,6 +114,16 @@ def st_folium(
 
     leaflet = generate_leaflet_string(fig)
 
+    children = list(fig.get_root()._children.values())
+
+    html = ""
+    if len(children) > 1:
+        for child in children[1:]:
+            try:
+                html += child._template.module.html() + "\n"
+            except Exception:
+                pass
+
     # Replace the folium generated map_{random characters} variables
     # with map_div and map_div2 (these end up being both the assumed)
     # div id where the maps are inserted into the DOM, and the names of
@@ -152,7 +162,8 @@ def bounds_to_dict(bounds_list: List[List[float]]) -> Dict[str, Dict[str, float]
         bounds = [[None, None], [None, None]]
 
     component_value = _component_func(
-        fig=leaflet,
+        script=leaflet,
+        html=html,
         id=m_id,
         key=generate_js_hash(leaflet, key),
         height=height,

streamlit_folium/frontend/src/index.tsx

@@ -104,9 +104,10 @@ function onRender(event: Event): void {
   // Get the RenderData from the event
   const data = (event as CustomEvent<RenderData>).detail
 
-  const fig: string = data.args["fig"]
+  const script: string = data.args["script"]
   const height: number = data.args["height"]
   const width: number = data.args["width"]
+  const html: string = data.args["html"]
 
   if (!window.map) {
     // Only run this if the map hasn't already been created (and thus the global
@@ -121,7 +122,7 @@ function onRender(event: Event): void {
       div1.style.height = `${height}px`
       div1.style.width = `${width}px`
 
-      if (fig.indexOf("document.getElementById('export')") !== -1) {
+      if (script.indexOf("document.getElementById('export')") !== -1) {
         let a = document.createElement("a")
         a.href = "#"
         a.id = "export"
@@ -146,8 +147,11 @@ function onRender(event: Event): void {
       // The folium-generated script creates a variable called "map_div", which
       // is the actual Leaflet map.
       render_script.innerHTML =
-        fig + `window.map = map_div; window.initComponent(map_div);`
+        script + `window.map = map_div; window.initComponent(map_div);`
       document.body.appendChild(render_script)
+      const html_div = document.createElement("div")
+      html_div.innerHTML = html
+      document.body.appendChild(html_div)
     }
   }
 }