diff --git a/setup.py b/setup.py index 060df4c..e8a1f57 100644 --- a/setup.py +++ b/setup.py @@ -2,7 +2,7 @@ setuptools.setup( name="streamlit_folium", - version="0.6.14", + version="0.6.15", author="Randy Zwitch", author_email="randy@streamlit.io", description="Render Folium objects in Streamlit", diff --git a/streamlit_folium/__init__.py b/streamlit_folium/__init__.py index 635e64e..1cb4f91 100644 --- a/streamlit_folium/__init__.py +++ b/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, diff --git a/streamlit_folium/frontend/src/index.tsx b/streamlit_folium/frontend/src/index.tsx index 6b24604..b1d3ff5 100644 --- a/streamlit_folium/frontend/src/index.tsx +++ b/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).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) } } }