Repository: randyzwitch/streamlit-folium (language: python)

Issue:
Build more impressive example
To really reinforce how streamlit-folium works, it'd be great to have a more robust example. Something that shows advanced functionality from Folium, integration of Streamlit widgets to control the output, etc.

https://github.com/randyzwitch/streamlit-folium/blob/master/examples/streamlit_folium_example.py


Discussion / hints:
This example may help: https://github.com/randyzwitch/streamlit-folium/issues/4
https://github.com/randyzwitch/streamlit-folium/pull/5
I just created some examples using leafmap. Check this out: https://share.streamlit.io/giswqs/leafmap-streamlit/app.py
Hi @giswqs - 

I'm not sure I'm understanding, since leafmap is a different library? Or are you offering to make these same examples but in Folium?

Best,
Randy
Leafmap has multiple plotting backends, including folium, ipyleaflet, heremap, and kepler.gl. Most streamlit examples I posted use the folium plotting backends, so they are certainly applicable to streamlit-folium. Leafmap simply makes it easier to use folium. You can achieve the same thing by folium only but many more lines of code.

Fix patch:
diff --git a/examples/requirements.txt b/examples/requirements.txt
index b2bbeae..1b85e90 100644
--- a/examples/requirements.txt
+++ b/examples/requirements.txt
@@ -1,3 +1,3 @@
 streamlit==1.8.1
-streamlit-folium>=0.5
-requests
+streamlit-folium>=0.6.7
+requests
\ No newline at end of file
diff --git a/examples/streamlit_app.py b/examples/streamlit_app.py
index 81a097f..2160121 100644
--- a/examples/streamlit_app.py
+++ b/examples/streamlit_app.py
@@ -1,43 +1,92 @@
 import streamlit as st
+import streamlit_folium
 
 st.set_page_config(page_title="streamlit-folium documentation")
 
+page = st.sidebar.radio(
+    "Select page", ["Home", "Bi-directional data model"], index=0
+)
+
 "# streamlit-folium"
 
-with st.echo():
+if page == "Home":
+    "streamlit-folium integrates two great open-source projects in the Python ecosystem: [Streamlit](https://streamlit.io) and [Folium](https://python-visualization.github.io/folium/)!"
+
+    """
+    Currently, there are two functions defined:
+
+    - `st_folium()`: a bi-directional Component, taking a Folium/Branca object and plotting to the Streamlit app. Upon mount/interaction with the Streamlit app, st_folium() returns a Dict with selected information including the bounding box and items clicked on
+
+    - `folium_static()`: takes a folium.Map, folium.Figure, or branca.element.Figure object and displays it in a Streamlit app.
+    
+    _Note: `folium_static()` is based on the `_repr_html()` representation created in Folium. This function should be a strict subset the of functionality of the newer `st_folium()` function._ 
+    
+    It is recommended that users switch to `st_folium()` as soon as possible, as `folium_static()` will likely be deprecated. If there is a reason why `folium_static()` needs to remain, please leave a [GitHub issue](https://github.com/randyzwitch/streamlit-folium/issues) describing your use-case.
+    """
 
-    import streamlit as st
-    from streamlit_folium import folium_static
-    import folium
-    import branca
 
-    page = st.radio(
-        "Select map type", ["Single map", "Dual map", "Branca figure"], index=0
-    )
+    "---"
+    "### Basic `st_folium()` Example"
 
-    # center on Liberty Bell, add marker
-    if page == "Single map":
+    with st.echo():
+
+        import streamlit as st
+        from streamlit_folium import st_folium
+        import folium
+    
+        # center on Liberty Bell, add marker
         m = folium.Map(location=[39.949610, -75.150282], zoom_start=16)
-        tooltip = "Liberty Bell"
         folium.Marker(
-            [39.949610, -75.150282], popup="Liberty Bell", tooltip=tooltip
+            [39.949610, -75.150282], 
+            popup="Liberty Bell", 
+            tooltip="Liberty Bell"
         ).add_to(m)
 
-    elif page == "Dual map":
-        m = folium.plugins.DualMap(location=[39.949610, -75.150282], zoom_start=16)
-        tooltip = "Liberty Bell"
+        # call to render Folium map in Streamlit
+        st_data = st_folium(m, width = 725)
+
+elif page == "Bi-directional data model":
+    """   
+    On its own, Folium is limited to _display-only_ visualizations; the Folium API generates the proper [leaflet.js](https://leafletjs.com/) specification,
+    as HTML and displays it. Some interactivity is provided (depending on how the Folium API is utilized), but the biggest drawback
+    is that the interactivity from the visualization isn't passed back to Python, and as such, you can't make full use of the functionality
+    provided by the leaflet.js library.
+
+    `streamlit-folium` builds upon the convenient [Folium API](https://python-visualization.github.io/folium/modules.html)
+    for building geospatial visualizations by adding a _bi-directional_ data transfer functionality. This not only allows for increased interactivity between
+    the web browser and Python, but also the use of larger datasets through intelligent querying.
+
+    ### Bi-directional data model
+
+    If we take a look at the example from the Home page, it might seem trivial. We define a single point with a marker and pop-up and display it: 
+    """
+    with st.echo():
+
+        import streamlit as st
+        from streamlit_folium import st_folium
+        import folium
+    
+        # center on Liberty Bell, add marker
+        m = folium.Map(location=[39.949610, -75.150282], zoom_start=16)
         folium.Marker(
-            [39.949610, -75.150282], popup="Liberty Bell", tooltip=tooltip
+            [39.949610, -75.150282], 
+            popup="Liberty Bell", 
+            tooltip="Liberty Bell"
         ).add_to(m)
 
-    elif page == "Branca figure":
-        m = branca.element.Figure()
-        fm = folium.Map(location=[39.949610, -75.150282], zoom_start=16)
-        tooltip = "Liberty Bell"
-        folium.Marker(
-            [39.949610, -75.150282], popup="Liberty Bell", tooltip=tooltip
-        ).add_to(fm)
-        m.add_child(fm)
+        # call to render Folium map in Streamlit
+        st_data = st_folium(m, width = 725)
+
+    """
+    But behind the scenes, a lot more is happening _by default_. The return value of `st_folium` is set to 
+    `st_data`, and within this Python variable is information about what is being displayed on the screen:
+    """
+
+    with st.expander("Expand to see data returned to Python"):
+        st_data
 
-    # call to render Folium map in Streamlit
-    folium_static(m)
+    """
+    As the user interacts with the data visualization, the values for `bounds` are constantly updating, along
+    with `zoom`. With these values available in Python, we can now limit queries based on bounding box, change
+    the marker size based on the `zoom` value and much more!
+    """
\ No newline at end of file


Test patch:
diff --git a/tests/visual_baseline/test_basic/first_test/baseline.png b/tests/visual_baseline/test_basic/first_test/baseline.png
index 8337555..ec243fb 100644
Binary files a/tests/visual_baseline/test_basic/first_test/baseline.png and b/tests/visual_baseline/test_basic/first_test/baseline.png differ
diff --git a/tests/visual_baseline/test_basic/first_test/latest.png b/tests/visual_baseline/test_basic/first_test/latest.png
deleted file mode 100644
index 8337555..0000000
Binary files a/tests/visual_baseline/test_basic/first_test/latest.png and /dev/null differ
diff --git a/tests/visual_baseline/test_basic/first_test/tags_level_1.txt b/tests/visual_baseline/test_basic/first_test/tags_level_1.txt
index 8e026e8..baae6fc 100644
--- a/tests/visual_baseline/test_basic/first_test/tags_level_1.txt
+++ b/tests/visual_baseline/test_basic/first_test/tags_level_1.txt
@@ -1,1 +1,1 @@
-[["noscript"], ["div"], ["div"], ["div"], ["div"], ["div"], ["header"], ["div"], ["div"], ["span"], ["button"], ["svg"], ["path"], ["div"], ["section"], ["div"], ["div"], ["div"], ["div"], ["div"], ["div"], ["h1"], ["div"], ["a"], ["svg"], ["path"], ["path"], ["span"], ["div"], ["div"], ["div"], ["div"], ["div"], ["button"], ["svg"], ["rect"], ["path"], ["pre"], ["div"], ["code"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["div"], ["div"], ["label"], ["div"], ["label"], ["div"], ["div"], ["input"], ["div"], ["label"], ["div"], ["div"], ["input"], ["div"], ["label"], ["div"], ["div"], ["input"], ["div"], ["div"], ["iframe"], ["div"], ["div"], ["div"], ["div"], ["footer"], ["a"], ["div"], ["script"], ["script"], ["script"]]
\ No newline at end of file
+[["noscript"], ["div"], ["div"], ["div"], ["div"], ["div"], ["header"], ["div"], ["div"], ["span"], ["button"], ["svg"], ["path"], ["div"], ["section"], ["div"], ["div"], ["button"], ["svg"], ["path"], ["div"], ["div"], ["div"], ["div"], ["div"], ["label"], ["div"], ["label"], ["div"], ["div"], ["input"], ["div"], ["label"], ["div"], ["div"], ["input"], ["div"], ["div"], ["div"], ["div"], ["div"], ["div"], ["button"], ["svg"], ["path"], ["section"], ["div"], ["div"], ["div"], ["div"], ["div"], ["div"], ["h1"], ["div"], ["a"], ["svg"], ["path"], ["path"], ["span"], ["div"], ["div"], ["div"], ["p"], ["a"], ["a"], ["div"], ["div"], ["div"], ["p"], ["ul"], ["li"], ["p"], ["code"], ["li"], ["p"], ["code"], ["p"], ["em"], ["code"], ["code"], ["code"], ["p"], ["code"], ["code"], ["code"], ["a"], ["div"], ["div"], ["div"], ["hr"], ["div"], ["div"], ["div"], ["h3"], ["div"], ["a"], ["svg"], ["path"], ["path"], ["span"], ["code"], ["div"], ["div"], ["div"], ["div"], ["div"], ["button"], ["svg"], ["rect"], ["path"], ["pre"], ["div"], ["code"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["span"], ["div"], ["iframe"], ["div"], ["div"], ["div"], ["div"], ["footer"], ["a"], ["div"], ["script"], ["script"], ["script"]]
\ No newline at end of file
diff --git a/tests/visual_baseline/test_basic/first_test/tags_level_2.txt b/tests/visual_baseline/test_basic/first_test/tags_level_2.txt
index e39e591..46bbc79 100644
--- a/tests/visual_baseline/test_basic/first_test/tags_level_2.txt
+++ b/tests/visual_baseline/test_basic/first_test/tags_level_2.txt
@@ -1,1 +1,1 @@
-[["noscript", []], ["div", ["id"]], ["div", ["class"]], ["div", ["class"]], ["div", ["tabindex"]], ["div", ["class"]], ["header", ["class", "data-testid", "tabindex"]], ["div", ["class", "data-testid"]], ["div", ["class", "data-testid"]], ["span", ["aria-expanded", "aria-haspopup", "id"]], ["button", ["class", "kind"]], ["svg", ["aria-hidden", "class", "color", "fill", "focusable", "viewbox", "xmlns"]], ["path", ["d"]], ["div", ["class", "data-layout", "data-testid"]], ["section", ["class", "tabindex"]], ["div", ["class", "style"]], ["div", ["style"]], ["div", ["class", "data-testid", "width"]], ["div", ["class", "data-stale", "width"]], ["div", ["class", "style"]], ["div", ["class", "data-testid"]], ["h1", ["id"]], ["div", ["class"]], ["a", ["class", "href"]], ["svg", ["fill", "height", "stroke", "stroke-linecap", "stroke-linejoin", "stroke-width", "viewbox", "width", "xmlns"]], ["path", ["d"]], ["path", ["d"]], ["span", ["class"]], ["div", ["class", "data-stale", "width"]], ["div", ["class", "style"]], ["div", ["class", "data-testid"]], ["div", ["class"]], ["div", ["class"]], ["button", ["class", "data-clipboard-text", "style", "title"]], ["svg", ["fill", "height", "stroke", "stroke-linecap", "stroke-linejoin", "stroke-width", "viewbox", "width", "xmlns"]], ["rect", ["height", "rx", "ry", "width", "x", "y"]], ["path", ["d"]], ["pre", ["class"]], ["div", ["style"]], ["code", ["class", "style"]], ["span", ["class"]], ["span", []], ["span", ["class"]], ["span", []], ["span", []], ["span", ["class"]], ["span", []], ["span", ["class"]], ["span", []], ["span", []], ["span", ["class"]], ["span", []], ["span", []], ["span", ["class"]], ["span", []], ["span", []], ["span", ["class"]], ["span", []], ["span", ["class"]], ["span", []], ["span", ["class"]], ["span", []], ["span", []], ["span", ["class"]], ["span", ["class"]], ["span", []], ["span", ["class"]], ["span", ["class"]], ["span", ["class"]], ["span", []], ["span", ["class"]], ["span", ["class"]], ["span", []], ["span", ["class"]], ["span", ["class"]], ["span", ["class"]], ["span", []], ["span", ["class"]], ["span", ["class"]], ["span", []], ["span", []], ["span", ["class"]], ["span", []], ["span", []], ["span", ["class"]], ["span", []], ["span", []], ["span", ["class"]], ["span", []], ["span", ["class"]], ["span", []], ["span", ["class"]], ["span", ["class"]], ["span", []], ["span", []], ["span", ["class"]], ["span", []], ["span", ["class"]], ["span", []], ["span", ["class"]], ["span", []], ["span", ["class"]], ["span", ["class"]], ["span", ["class"]], ["span", ["class"]], ["span", []], ["span", ["class"]], ["span", ["class"]], ["span", ["class"]], ["span", ["class"]], ["span", []], ["span", ["class"]], ["span", ["class"]], ["span", ["class"]], ["span", []], ["span", []], ["span", ["class"]], ["span", []], ["span", ["class"]], ["span", []], ["span", []], ["span", ["class"]], ["span", []], ["span", ["class"]], ["span", []], ["span", []], ["span", ["class"]], ["span", ["class"]], ["span", ["class"]], ["span", []], ["span", ["class"]], ["span", ["class"]], ["span", ["class"]], ["span", ["class"]], ["span", []], ["span", ["class"]], ["span", ["class"]], ["span", ["class"]], ["span", []], ["span", ["class"]], ["span", []], ["span", []], ["span", ["class"]], ["span", ["class"]], ["span", []], ["span", ["class"]], ["span", []], ["span", ["class"]], ["span", []], ["span", []], ["span", ["class"]], ["span", []], ["span", ["class"]], ["span", []], ["span", ["class"]], ["span", ["class"]], ["span", []], ["span", []], ["span", ["class"]], ["span", []], ["span", ["class"]], ["span", []], ["span", ["class"]], ["span", []], ["span", ["class"]], ["span", []], ["span", ["class"]], ["span", ["class"]], ["span", ["class"]], ["span", ["class"]], ["span", []], ["span", ["class"]], ["span", ["class"]], ["span", ["class"]], ["span", ["class"]], ["span", []], ["span", ["class"]], ["span", ["class"]], ["span", ["class"]], ["span", []], ["span", []], ["span", ["class"]], ["span", []], ["span", ["class"]], ["span", []], ["span", []], ["span", ["class"]], ["span", []], ["span", ["class"]], ["span", []], ["span", []], ["span", ["class"]], ["span", ["class"]], ["span", ["class"]], ["span", []], ["span", ["class"]], ["span", ["class"]], ["span", ["class"]], ["span", ["class"]], ["span", []], ["span", ["class"]], ["span", ["class"]], ["span", ["class"]], ["span", []], ["span", ["class"]], ["span", []], ["span", []], ["span", ["class"]], ["span", ["class"]], ["span", []], ["span", ["class"]], ["span", []], ["span", ["class"]], ["span", []], ["span", []], ["span", ["class"]], ["span", []], ["span", ["class"]], ["span", []], ["span", ["class"]], ["span", ["class"]], ["span", []], ["span", []], ["span", ["class"]], ["span", []], ["span", ["class"]], ["span", []], ["span", ["class"]], ["span", []], ["span", ["class"]], ["span", ["class"]], ["span", []], ["span", []], ["span", ["class"]], ["span", []], ["span", ["class"]], ["span", []], ["span", ["class"]], ["span", []], ["span", ["class"]], ["span", ["class"]], ["span", ["class"]], ["span", ["class"]], ["span", []], ["span", ["class"]], ["span", ["class"]], ["span", ["class"]], ["span", ["class"]], ["span", []], ["span", ["class"]], ["span", ["class"]], ["span", ["class"]], ["span", []], ["span", []], ["span", ["class"]], ["span", []], ["span", ["class"]], ["span", []], ["span", []], ["span", ["class"]], ["span", []], ["span", ["class"]], ["span", []], ["span", []], ["span", ["class"]], ["span", ["class"]], ["span", ["class"]], ["span", []], ["span", ["class"]], ["span", ["class"]], ["span", ["class"]], ["span", ["class"]], ["span", []], ["span", ["class"]], ["span", ["class"]], ["span", ["class"]], ["span", []], ["span", ["class"]], ["span", []], ["span", []], ["span", ["class"]], ["span", ["class"]], ["span", []], ["span", ["class"]], ["span", []], ["span", ["class"]], ["span", []], ["span", []], ["span", ["class"]], ["span", []], ["span", ["class"]], ["span", []], ["span", ["class"]], ["span", []], ["span", []], ["span", ["class"]], ["span", []], ["span", []], ["span", ["class"]], ["span", []], ["span", ["class"]], ["div", ["class", "data-stale", "width"]], ["div", ["class", "style"]], ["label", ["class"]], ["div", ["class", "role"]], ["label", ["class", "data-baseweb"]], ["div", ["class"]], ["div", ["class"]], ["input", ["checked", "class", "name", "tabindex", "type", "value"]], ["div", ["class"]], ["label", ["class", "data-baseweb"]], ["div", ["class"]], ["div", ["class"]], ["input", ["class", "name", "tabindex", "type", "value"]], ["div", ["class"]], ["label", ["class", "data-baseweb"]], ["div", ["class"]], ["div", ["class"]], ["input", ["class", "name", "tabindex", "type", "value"]], ["div", ["class"]], ["div", ["class", "data-stale", "width"]], ["iframe", ["allow", "height", "sandbox", "scrolling", "srcdoc", "style", "title", "width"]], ["div", ["class"]], ["div", ["class"]], ["div", ["style"]], ["div", ["class"]], ["footer", ["class"]], ["a", ["class", "href"]], ["div", ["class"]], ["script", []], ["script", ["src"]], ["script", ["src"]]]
\ No newline at end of file
+[["noscript", []], ["div", ["id"]], ["div", ["class"]], ["div", ["class"]], ["div", ["tabindex"]], ["div", ["class"]], ["header", ["class", "data-testid", "tabindex"]], ["div", ["class", "data-testid"]], ["div", ["class", "data-testid"]], ["span", ["aria-expanded", "aria-haspopup", "id"]], ["button", ["class", "kind"]], ["svg", ["aria-hidden", "class", "color", "fill", "focusable", "viewbox", "xmlns"]], ["path", ["d"]], ["div", ["class", "data-layout", "data-testid"]], ["section", ["aria-expanded", "class", "data-testid"]], ["div", ["class"]], ["div", ["class"]], ["button", ["class", "kind"]], ["svg", ["aria-hidden", "class", "color", "fill", "focusable", "viewbox", "xmlns"]], ["path", ["d"]], ["div", ["class", "style"]], ["div", ["style"]], ["div", ["class", "data-testid", "width"]], ["div", ["class", "data-stale", "width"]], ["div", ["class", "style"]], ["label", ["class"]], ["div", ["class", "role"]], ["label", ["class", "data-baseweb"]], ["div", ["class"]], ["div", ["class"]], ["input", ["checked", "class", "name", "tabindex", "type", "value"]], ["div", ["class"]], ["label", ["class", "data-baseweb"]], ["div", ["class"]], ["div", ["class"]], ["input", ["class", "name", "tabindex", "type", "value"]], ["div", ["class"]], ["div", ["class"]], ["div", ["class"]], ["div", ["style"]], ["div", ["class"]], ["div", ["class"]], ["button", ["class", "kind"]], ["svg", ["aria-hidden", "class", "color", "fill", "focusable", "viewbox", "xmlns"]], ["path", ["d"]], ["section", ["class", "tabindex"]], ["div", ["class", "style"]], ["div", ["style"]], ["div", ["class", "data-testid", "width"]], ["div", ["class", "data-stale", "width"]], ["div", ["class", "style"]], ["div", ["class", "data-testid"]], ["h1", ["id"]], ["div", ["class"]], ["a", ["class", "href"]], ["svg", ["fill", "height", "stroke", "stroke-linecap", "stroke-linejoin", "stroke-width", "viewbox", "width", "xmlns"]], ["path", ["d"]], ["path", ["d"]], ["span", ["class"]], ["div", ["class", "data-stale", "width"]], ["div", ["class", "style"]], ["div", ["class", "data-testid"]], ["p", []], ["a", ["href", "rel", "target"]], ["a", ["href", "rel", "target"]], ["div", ["class", "data-stale", "width"]], ["div", ["class", "style"]], ["div", ["class", "data-testid"]], ["p", []], ["ul", []], ["li", []], ["p", []], ["code", []], ["li", []], ["p", []], ["code", []], ["p", []], ["em", []], ["code", []], ["code", []], ["code", []], ["p", []], ["code", []], ["code", []], ["code", []], ["a", ["href", "rel", "target"]], ["div", ["class", "data-stale", "width"]], ["div", ["class", "style"]], ["div", ["class", "data-testid"]], ["hr", []], ["div", ["class", "data-stale", "width"]], ["div", ["class", "style"]], ["div", ["class", "data-testid"]], ["h3", ["id"]], ["div", ["class"]], ["a", ["class", "href"]], ["svg", ["fill", "height", "stroke", "stroke-linecap", "stroke-linejoin", "stroke-width", "viewbox", "width", "xmlns"]], ["path", ["d"]], ["path", ["d"]], ["span", ["class"]], ["code", []], ["div", ["class", "data-stale", "width"]], ["div", ["class", "style"]], ["div", ["class", "data-testid"]], ["div", ["class"]], ["div", ["class"]], ["button", ["class", "data-clipboard-text", "style", "title"]], ["svg", ["fill", "height", "stroke", "stroke-linecap", "stroke-linejoin", "stroke-width", "viewbox", "width", "xmlns"]], ["rect", ["height", "rx", "ry", "width", "x", "y"]], ["path", ["d"]], ["pre", ["class"]], ["div", ["style"]], ["code", ["class", "style"]], ["span", ["class"]], ["span", []], ["span", ["class"]], ["span", []], ["span", []], ["span", ["class"]], ["span", []], ["span", ["class"]], ["span", []], ["span", []], ["span", ["class"]], ["span", []], ["span", []], ["span", ["class"]], ["span", []], ["span", []], ["span", ["class"]], ["span", []], ["span", ["class"]], ["span", []], ["span", ["class"]], ["span", []], ["span", ["class"]], ["span", ["class"]], ["span", ["class"]], ["span", ["class"]], ["span", []], ["span", ["class"]], ["span", ["class"]], ["span", ["class"]], ["span", ["class"]], ["span", []], ["span", ["class"]], ["span", ["class"]], ["span", ["class"]], ["span", []], ["span", []], ["span", ["class"]], ["span", []], ["span", ["class"]], ["span", []], ["span", []], ["span", ["class"]], ["span", ["class"]], ["span", ["class"]], ["span", []], ["span", ["class"]], ["span", ["class"]], ["span", ["class"]], ["span", ["class"]], ["span", []], ["span", []], ["span", ["class"]], ["span", ["class"]], ["span", ["class"]], ["span", []], ["span", []], ["span", ["class"]], ["span", ["class"]], ["span", []], ["span", []], ["span", ["class"]], ["span", ["class"]], ["span", []], ["span", ["class"]], ["span", []], ["span", ["class"]], ["span", []], ["span", []], ["span", ["class"]], ["span", []], ["span", []], ["span", ["class"]], ["span", []], ["span", ["class"]], ["span", []], ["span", ["class"]], ["span", []], ["span", ["class"]], ["span", []], ["span", ["class"]], ["span", ["class"]], ["div", ["class", "data-stale", "width"]], ["iframe", ["allow", "height", "sandbox", "scrolling", "src", "title", "width"]], ["div", ["class"]], ["div", ["class"]], ["div", ["style"]], ["div", ["class"]], ["footer", ["class"]], ["a", ["class", "href"]], ["div", ["class"]], ["script", []], ["script", ["src"]], ["script", ["src"]]]
\ No newline at end of file
diff --git a/tests/visual_baseline/test_basic/first_test/tags_level_3.txt b/tests/visual_baseline/test_basic/first_test/tags_level_3.txt
index ae06b16..af5f9d4 100644
--- a/tests/visual_baseline/test_basic/first_test/tags_level_3.txt
+++ b/tests/visual_baseline/test_basic/first_test/tags_level_3.txt
@@ -1,1 +1,1 @@
-[["noscript", []], ["div", [["id", "root"]]], ["div", [["class", []]]], ["div", [["class", ["withScreencast"]]]], ["div", [["tabindex", "-1"]]], ["div", [["class", ["stApp", "css-fg4pbf", "eczokvf0"]]]], ["header", [["class", ["css-1jkb0cp", "e8zbici2"]], ["data-testid", "stHeader"], ["tabindex", "-1"]]], ["div", [["class", ["css-fk4es0", "e8zbici1"]], ["data-testid", "stDecoration"]]], ["div", [["class", ["css-r698ls", "e8zbici0"]], ["data-testid", "stToolbar"]]], ["span", [["aria-expanded", "false"], ["aria-haspopup", "true"], ["id", "MainMenu"]]], ["button", [["class", ["css-9s5bis", "edgvbvh3"]], ["kind", "header"]]], ["svg", [["aria-hidden", "true"], ["class", ["e1fb0mya0", "css-1xfuh55", "ex0cdmw0"]], ["color", "inherit"], ["fill", "currentColor"], ["focusable", "false"], ["viewbox", "0 0 8 8"], ["xmlns", "http://www.w3.org/2000/svg"]]], ["path", [["d", "M0 1v1h8V1H0zm0 2.97v1h8v-1H0zm0 3v1h8v-1H0z"]]], ["div", [["class", ["appview-container", "css-1wrcr25", "egzxvld4"]], ["data-layout", "narrow"], ["data-testid", "stAppViewContainer"]]], ["section", [["class", ["main", "css-1v3fvcr", "egzxvld3"]], ["tabindex", "0"]]], ["div", [["class", ["block-container", "css-12oz5g7", "egzxvld2"]], ["style", "position: relative;"]]], ["div", [["style", "overflow: visible; width: 0px; display: flex; flex-direction: column; flex: 1 1 0%;"]]], ["div", [["class", ["css-1n76uvr", "e1tzin5v0"]], ["data-testid", "stVerticalBlock"], ["width", "704"]]], ["div", [["class", ["element-container", "css-1hynsf2", "e1tzin5v3"]], ["data-stale", "false"], ["width", "704"]]], ["div", [["class", ["stMarkdown"]], ["style", "width: 704px;"]]], ["div", [["class", ["css-nlntq9", "e16nr0p33"]], ["data-testid", "stMarkdownContainer"]]], ["h1", [["id", "streamlit-folium"]]], ["div", [["class", ["css-zt5igj", "e16nr0p32"]]]], ["a", [["class", ["css-eczf16", "e16nr0p31"]], ["href", "#streamlit-folium"]]], ["svg", [["fill", "none"], ["height", "18"], ["stroke", "currentColor"], ["stroke-linecap", "round"], ["stroke-linejoin", "round"], ["stroke-width", "2"], ["viewbox", "0 0 24 24"], ["width", "18"], ["xmlns", "http://www.w3.org/2000/svg"]]], ["path", [["d", "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"]]], ["path", [["d", "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"]]], ["span", [["class", ["css-10trblm", "e16nr0p30"]]]], ["div", [["class", ["element-container", "css-1hynsf2", "e1tzin5v3"]], ["data-stale", "false"], ["width", "704"]]], ["div", [["class", ["stMarkdown"]], ["style", "width: 704px;"]]], ["div", [["class", ["css-nlntq9", "e16nr0p33"]], ["data-testid", "stMarkdownContainer"]]], ["div", [["class", ["stCodeBlock", "css-4zfol6", "e10mrw3y0"]]]], ["div", [["class", ["css-xjsf0x", "e10mrw3y1"]]]], ["button", [["class", ["css-aivdhp", "e10mrw3y2"]], ["data-clipboard-text", "import streamlit as st\nfrom streamlit_folium import folium_static\nimport folium\nimport branca\n\npage = st.radio(\n    \"Select map type\", [\"Single map\", \"Dual map\", \"Branca figure\"], index=0\n)\n\n# center on Liberty Bell, add marker\nif page == \"Single map\":\n    m = folium.Map(location=[39.949610, -75.150282], zoom_start=16)\n    tooltip = \"Liberty Bell\"\n    folium.Marker(\n        [39.949610, -75.150282], popup=\"Liberty Bell\", tooltip=tooltip\n    ).add_to(m)\n\nelif page == \"Dual map\":\n    m = folium.plugins.DualMap(location=[39.949610, -75.150282], zoom_start=16)\n    tooltip = \"Liberty Bell\"\n    folium.Marker(\n        [39.949610, -75.150282], popup=\"Liberty Bell\", tooltip=tooltip\n    ).add_to(m)\n\nelif page == \"Branca figure\":\n    m = branca.element.Figure()\n    fm = folium.Map(location=[39.949610, -75.150282], zoom_start=16)\n    tooltip = \"Liberty Bell\"\n    folium.Marker(\n        [39.949610, -75.150282], popup=\"Liberty Bell\", tooltip=tooltip\n    ).add_to(fm)\n    m.add_child(fm)\n\n# call to render Folium map in Streamlit\nfolium_static(m)"], ["style", "top: 0px; right: 0px;"], ["title", "Copy to clipboard"]]], ["svg", [["fill", "none"], ["height", "16"], ["stroke", "currentColor"], ["stroke-linecap", "round"], ["stroke-linejoin", "round"], ["stroke-width", "2"], ["viewbox", "0 0 24 24"], ["width", "16"], ["xmlns", "http://www.w3.org/2000/svg"]]], ["rect", [["height", "13"], ["rx", "2"], ["ry", "2"], ["width", "13"], ["x", "9"], ["y", "9"]]], ["path", [["d", "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"]]], ["pre", [["class", ["css-1qcggol", "e10mrw3y3"]]]], ["div", [["style", "background-color: transparent;"]]], ["code", [["class", ["language-python"]], ["style", "white-space: pre;"]]], ["span", [["class", ["token", "token", "keyword"]]]], ["span", []], ["span", [["class", ["token", "token", "keyword"]]]], ["span", []], ["span", []], ["span", [["class", ["token", "token", "keyword"]]]], ["span", []], ["span", [["class", ["token", "token", "keyword"]]]], ["span", []], ["span", []], ["span", [["class", ["token", "token", "keyword"]]]], ["span", []], ["span", []], ["span", [["class", ["token", "token", "keyword"]]]], ["span", []], ["span", []], ["span", [["class", ["token", "token", "operator"]]]], ["span", []], ["span", [["class", ["token", "token", "punctuation"]]]], ["span", []], ["span", [["class", ["token", "token", "punctuation"]]]], ["span", []], ["span", []], ["span", [["class", ["token", "token", "string"]]]], ["span", [["class", ["token", "token", "punctuation"]]]], ["span", []], ["span", [["class", ["token", "token", "punctuation"]]]], ["span", [["class", ["token", "token", "string"]]]], ["span", [["class", ["token", "token", "punctuation"]]]], ["span", []], ["span", [["class", ["token", "token", "string"]]]], ["span", [["class", ["token", "token", "punctuation"]]]], ["span", []], ["span", [["class", ["token", "token", "string"]]]], ["span", [["class", ["token", "token", "punctuation"]]]], ["span", [["class", ["token", "token", "punctuation"]]]], ["span", []], ["span", [["class", ["token", "token", "operator"]]]], ["span", [["class", ["token", "token", "number"]]]], ["span", []], ["span", []], ["span", [["class", ["token", "token", "punctuation"]]]], ["span", []], ["span", []], ["span", [["class", ["token", "token", "comment"]]]], ["span", []], ["span", []], ["span", [["class", ["token", "token", "keyword"]]]], ["span", []], ["span", [["class", ["token", "token", "operator"]]]], ["span", []], ["span", [["class", ["token", "token", "string"]]]], ["span", [["class", ["token", "token", "punctuation"]]]], ["span", []], ["span", []], ["span", [["class", ["token", "token", "operator"]]]], ["span", []], ["span", [["class", ["token", "token", "punctuation"]]]], ["span", []], ["span", [["class", ["token", "token", "punctuation"]]]], ["span", []], ["span", [["class", ["token", "token", "operator"]]]], ["span", [["class", ["token", "token", "punctuation"]]]], ["span", [["class", ["token", "token", "number"]]]], ["span", [["class", ["token", "token", "punctuation"]]]], ["span", []], ["span", [["class", ["token", "token", "operator"]]]], ["span", [["class", ["token", "token", "number"]]]], ["span", [["class", ["token", "token", "punctuation"]]]], ["span", [["class", ["token", "token", "punctuation"]]]], ["span", []], ["span", [["class", ["token", "token", "operator"]]]], ["span", [["class", ["token", "token", "number"]]]], ["span", [["class", ["token", "token", "punctuation"]]]], ["span", []], ["span", []], ["span", [["class", ["token", "token", "operator"]]]], ["span", []], ["span", [["class", ["token", "token", "string"]]]], ["span", []], ["span", []], ["span", [["class", ["token", "token", "punctuation"]]]], ["span", []], ["span", [["class", ["token", "token", "punctuation"]]]], ["span", []], ["span", []], ["span", [["class", ["token", "token", "punctuation"]]]], ["span", [["class", ["token", "token", "number"]]]], ["span", [["class", ["token", "token", "punctuation"]]]], ["span", []], ["span", [["class", ["token", "token", "operator"]]]], ["span", [["class", ["token", "token", "number"]]]], ["span", [["class", ["token", "token", "punctuation"]]]], ["span", [["class", ["token", "token", "punctuation"]]]], ["span", []], ["span", [["class", ["token", "token", "operator"]]]], ["span", [["class", ["token", "token", "string"]]]], ["span", [["class", ["token", "token", "punctuation"]]]], ["span", []], ["span", [["class", ["token", "token", "operator"]]]], ["span", []], ["span", []], ["span", [["class", ["token", "token", "punctuation"]]]], ["span", [["class", ["token", "token", "punctuation"]]]], ["span", []], ["span", [["class", ["token", "token", "punctuation"]]]], ["span", []], ["span", [["class", ["token", "token", "punctuation"]]]], ["span", []], ["span", []], ["span", [["class", ["token", "token", "keyword"]]]], ["span", []], ["span", [["class", ["token", "token", "operator"]]]], ["span", []], ["span", [["class", ["token", "token", "string"]]]], ["span", [["class", ["token", "token", "punctuation"]]]], ["span", []], ["span", []], ["span", [["class", ["token", "token", "operator"]]]], ["span", []], ["span", [["class", ["token", "token", "punctuation"]]]], ["span", []], ["span", [["class", ["token", "token", "punctuation"]]]], ["span", []], ["span", [["class", ["token", "token", "punctuation"]]]], ["span", []], ["span", [["class", ["token", "token", "operator"]]]], ["span", [["class", ["token", "token", "punctuation"]]]], ["span", [["class", ["token", "token", "number"]]]], ["span", [["class", ["token", "token", "punctuation"]]]], ["span", []], ["span", [["class", ["token", "token", "operator"]]]], ["span", [["class", ["token", "token", "number"]]]], ["span", [["class", ["token", "token", "punctuation"]]]], ["span", [["class", ["token", "token", "punctuation"]]]], ["span", []], ["span", [["class", ["token", "token", "operator"]]]], ["span", [["class", ["token", "token", "number"]]]], ["span", [["class", ["token", "token", "punctuation"]]]], ["span", []], ["span", []], ["span", [["class", ["token", "token", "operator"]]]], ["span", []], ["span", [["class", ["token", "token", "string"]]]], ["span", []], ["span", []], ["span", [["class", ["token", "token", "punctuation"]]]], ["span", []], ["span", [["class", ["token", "token", "punctuation"]]]], ["span", []], ["span", []], ["span", [["class", ["token", "token", "punctuation"]]]], ["span", [["class", ["token", "token", "number"]]]], ["span", [["class", ["token", "token", "punctuation"]]]], ["span", []], ["span", [["class", ["token", "token", "operator"]]]], ["span", [["class", ["token", "token", "number"]]]], ["span", [["class", ["token", "token", "punctuation"]]]], ["span", [["class", ["token", "token", "punctuation"]]]], ["span", []], ["span", [["class", ["token", "token", "operator"]]]], ["span", [["class", ["token", "token", "string"]]]], ["span", [["class", ["token", "token", "punctuation"]]]], ["span", []], ["span", [["class", ["token", "token", "operator"]]]], ["span", []], ["span", []], ["span", [["class", ["token", "token", "punctuation"]]]], ["span", [["class", ["token", "token", "punctuation"]]]], ["span", []], ["span", [["class", ["token", "token", "punctuation"]]]], ["span", []], ["span", [["class", ["token", "token", "punctuation"]]]], ["span", []], ["span", []], ["span", [["class", ["token", "token", "keyword"]]]], ["span", []], ["span", [["class", ["token", "token", "operator"]]]], ["span", []], ["span", [["class", ["token", "token", "string"]]]], ["span", [["class", ["token", "token", "punctuation"]]]], ["span", []], ["span", []], ["span", [["class", ["token", "token", "operator"]]]], ["span", []], ["span", [["class", ["token", "token", "punctuation"]]]], ["span", []], ["span", [["class", ["token", "token", "punctuation"]]]], ["span", []], ["span", [["class", ["token", "token", "punctuation"]]]], ["span", [["class", ["token", "token", "punctuation"]]]], ["span", []], ["span", []], ["span", [["class", ["token", "token", "operator"]]]], ["span", []], ["span", [["class", ["token", "token", "punctuation"]]]], ["span", []], ["span", [["class", ["token", "token", "punctuation"]]]], ["span", []], ["span", [["class", ["token", "token", "operator"]]]], ["span", [["class", ["token", "token", "punctuation"]]]], ["span", [["class", ["token", "token", "number"]]]], ["span", [["class", ["token", "token", "punctuation"]]]], ["span", []], ["span", [["class", ["token", "token", "operator"]]]], ["span", [["class", ["token", "token", "number"]]]], ["span", [["class", ["token", "token", "punctuation"]]]], ["span", [["class", ["token", "token", "punctuation"]]]], ["span", []], ["span", [["class", ["token", "token", "operator"]]]], ["span", [["class", ["token", "token", "number"]]]], ["span", [["class", ["token", "token", "punctuation"]]]], ["span", []], ["span", []], ["span", [["class", ["token", "token", "operator"]]]], ["span", []], ["span", [["class", ["token", "token", "string"]]]], ["span", []], ["span", []], ["span", [["class", ["token", "token", "punctuation"]]]], ["span", []], ["span", [["class", ["token", "token", "punctuation"]]]], ["span", []], ["span", []], ["span", [["class", ["token", "token", "punctuation"]]]], ["span", [["class", ["token", "token", "number"]]]], ["span", [["class", ["token", "token", "punctuation"]]]], ["span", []], ["span", [["class", ["token", "token", "operator"]]]], ["span", [["class", ["token", "token", "number"]]]], ["span", [["class", ["token", "token", "punctuation"]]]], ["span", [["class", ["token", "token", "punctuation"]]]], ["span", []], ["span", [["class", ["token", "token", "operator"]]]], ["span", [["class", ["token", "token", "string"]]]], ["span", [["class", ["token", "token", "punctuation"]]]], ["span", []], ["span", [["class", ["token", "token", "operator"]]]], ["span", []], ["span", []], ["span", [["class", ["token", "token", "punctuation"]]]], ["span", [["class", ["token", "token", "punctuation"]]]], ["span", []], ["span", [["class", ["token", "token", "punctuation"]]]], ["span", []], ["span", [["class", ["token", "token", "punctuation"]]]], ["span", []], ["span", []], ["span", [["class", ["token", "token", "punctuation"]]]], ["span", []], ["span", [["class", ["token", "token", "punctuation"]]]], ["span", []], ["span", [["class", ["token", "token", "punctuation"]]]], ["span", []], ["span", []], ["span", [["class", ["token", "token", "comment"]]]], ["span", []], ["span", []], ["span", [["class", ["token", "token", "punctuation"]]]], ["span", []], ["span", [["class", ["token", "token", "punctuation"]]]], ["div", [["class", ["element-container", "css-1hynsf2", "e1tzin5v3"]], ["data-stale", "false"], ["width", "704"]]], ["div", [["class", ["row-widget", "stRadio"]], ["style", "width: 704px;"]]], ["label", [["class", ["css-qrbaxs", "effi0qh3"]]]], ["div", [["class", ["st-b4", "st-ba", "st-bb", "st-bc", "st-bd", "st-be"]], ["role", "radiogroup"]]], ["label", [["class", ["st-bf", "st-b4", "st-bg", "st-bd", "st-as", "st-at", "st-bh", "st-bi", "st-bj", "st-av", "st-aw", "st-ay", "st-ax"]], ["data-baseweb", "radio"]]], ["div", [["class", ["st-bg", "st-bk", "st-bl", "st-bm", "st-bn", "st-bo", "st-az", "st-b4", "st-bp", "st-bq", "st-br", "st-bs", "st-bt", "st-bu", "st-bv", "st-bw", "st-bx", "st-by", "st-b2", "st-bz"]]]], ["div", [["class", ["st-c0", "st-bl", "st-bm", "st-bn", "st-bo", "st-c1", "st-b2", "st-bz", "st-c2"]]]], ["input", [["checked", ""], ["class", ["st-b0", "st-an", "st-c3", "st-as", "st-c4", "st-at", "st-c5", "st-c6", "st-c7", "st-c8", "st-bh", "st-c9"]], ["name", ""], ["tabindex", "0"], ["type", "radio"], ["value", "0"]]], ["div", [["class", ["st-bw", "st-ca", "st-cb", "st-ae", "st-af", "st-ag", "st-ah", "st-ai", "st-aj"]]]], ["label", [["class", ["st-bf", "st-b4", "st-bg", "st-bd", "st-as", "st-at", "st-bh", "st-bi", "st-bj", "st-av", "st-aw", "st-ay", "st-ax"]], ["data-baseweb", "radio"]]], ["div", [["class", ["st-bg", "st-cc", "st-bl", "st-bm", "st-bn", "st-bo", "st-az", "st-b4", "st-bp", "st-bq", "st-br", "st-bs", "st-bt", "st-bu", "st-bv", "st-bw", "st-bx", "st-by", "st-b2", "st-bz"]]]], ["div", [["class", ["st-cd", "st-bl", "st-bm", "st-bn", "st-bo", "st-ce", "st-b2", "st-bz", "st-cf"]]]], ["input", [["class", ["st-b0", "st-an", "st-c3", "st-as", "st-c4", "st-at", "st-c5", "st-c6", "st-c7", "st-c8", "st-bh", "st-c9"]], ["name", ""], ["tabindex", "-1"], ["type", "radio"], ["value", "1"]]], ["div", [["class", ["st-bw", "st-ca", "st-cb", "st-ae", "st-af", "st-ag", "st-ah", "st-ai", "st-aj"]]]], ["label", [["class", ["st-bf", "st-b4", "st-bg", "st-bd", "st-as", "st-at", "st-bh", "st-bi", "st-bj", "st-av", "st-aw", "st-ay", "st-ax"]], ["data-baseweb", "radio"]]], ["div", [["class", ["st-bg", "st-cc", "st-bl", "st-bm", "st-bn", "st-bo", "st-az", "st-b4", "st-bp", "st-bq", "st-br", "st-bs", "st-bt", "st-bu", "st-bv", "st-bw", "st-bx", "st-by", "st-b2", "st-bz"]]]], ["div", [["class", ["st-cd", "st-bl", "st-bm", "st-bn", "st-bo", "st-ce", "st-b2", "st-bz", "st-cf"]]]], ["input", [["class", ["st-b0", "st-an", "st-c3", "st-as", "st-c4", "st-at", "st-c5", "st-c6", "st-c7", "st-c8", "st-bh", "st-c9"]], ["name", ""], ["tabindex", "-1"], ["type", "radio"], ["value", "2"]]], ["div", [["class", ["st-bw", "st-ca", "st-cb", "st-ae", "st-af", "st-ag", "st-ah", "st-ai", "st-aj"]]]], ["div", [["class", ["element-container", "css-1hynsf2", "e1tzin5v3"]], ["data-stale", "false"], ["width", "704"]]], ["iframe", [["allow", "accelerometer; ambient-light-sensor; autoplay; battery; camera; document-domain; encrypted-media; fullscreen; geolocation; gyroscope; layout-animations; legacy-image-formats; magnetometer; microphone; midi; oversized-images; payment; picture-in-picture; publickey-credentials-get; sync-xhr; usb; vr ; wake-lock; xr-spatial-tracking"], ["height", "510"], ["sandbox", ["allow-forms", "allow-modals", "allow-popups", "allow-popups-to-escape-sandbox", "allow-same-origin", "allow-scripts", "allow-downloads"]], ["scrolling", "no"], ["srcdoc", "<!DOCTYPE html>\n<head>    \n    <meta http-equiv=\"content-type\" content=\"text/html; charset=UTF-8\" />\n    \n        <script>\n            L_NO_TOUCH = false;\n            L_DISABLE_3D = false;\n        </script>\n    \n    <style>html, body {width: 100%;height: 100%;margin: 0;padding: 0;}</style>\n    <style>#map {position:absolute;top:0;bottom:0;right:0;left:0;}</style>\n    <script src=\"https://cdn.jsdelivr.net/npm/leaflet@1.6.0/dist/leaflet.js\"></script>\n    <script src=\"https://code.jquery.com/jquery-1.12.4.min.js\"></script>\n    <script src=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js\"></script>\n    <script src=\"https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.js\"></script>\n    <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/leaflet@1.6.0/dist/leaflet.css\"/>\n    <link rel=\"stylesheet\" href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css\"/>\n    <link rel=\"stylesheet\" href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css\"/>\n    <link rel=\"stylesheet\" href=\"https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css\"/>\n    <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css\"/>\n    <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/gh/python-visualization/folium/folium/templates/leaflet.awesome.rotate.min.css\"/>\n    \n            <meta name=\"viewport\" content=\"width=device-width,\n                initial-scale=1.0, maximum-scale=1.0, user-scalable=no\" />\n            <style>\n                #map_a7f48bdc136f9b6c594989989b8c753f {\n                    position: relative;\n                    width: 100.0%;\n                    height: 100.0%;\n                    left: 0.0%;\n                    top: 0.0%;\n                }\n            </style>\n        \n</head>\n<body>    \n    \n            <div class=\"folium-map\" id=\"map_a7f48bdc136f9b6c594989989b8c753f\" ></div>\n        \n</body>\n<script>    \n    \n            var map_a7f48bdc136f9b6c594989989b8c753f = L.map(\n                \"map_a7f48bdc136f9b6c594989989b8c753f\",\n                {\n                    center: [39.94961, -75.150282],\n                    crs: L.CRS.EPSG3857,\n                    zoom: 16,\n                    zoomControl: true,\n                    preferCanvas: false,\n                }\n            );\n\n            \n\n        \n    \n            var tile_layer_ae3542eb25210e60618a8b78c15a9f75 = L.tileLayer(\n                \"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\",\n                {\"attribution\": \"Data by \\u0026copy; \\u003ca href=\\\"http://openstreetmap.org\\\"\\u003eOpenStreetMap\\u003c/a\\u003e, under \\u003ca href=\\\"http://www.openstreetmap.org/copyright\\\"\\u003eODbL\\u003c/a\\u003e.\", \"detectRetina\": false, \"maxNativeZoom\": 18, \"maxZoom\": 18, \"minZoom\": 0, \"noWrap\": false, \"opacity\": 1, \"subdomains\": \"abc\", \"tms\": false}\n            ).addTo(map_a7f48bdc136f9b6c594989989b8c753f);\n        \n    \n            var marker_4fb1a5ae9b249f608e10e00c97459a33 = L.marker(\n                [39.94961, -75.150282],\n                {}\n            ).addTo(map_a7f48bdc136f9b6c594989989b8c753f);\n        \n    \n        var popup_5aee9aeae48882d22bb5fd99cd3dc851 = L.popup({\"maxWidth\": \"100%\"});\n\n        \n            var html_602a2b93691e3185440811bc5e42950c = $(`<div id=\"html_602a2b93691e3185440811bc5e42950c\" style=\"width: 100.0%; height: 100.0%;\">Liberty Bell</div>`)[0];\n            popup_5aee9aeae48882d22bb5fd99cd3dc851.setContent(html_602a2b93691e3185440811bc5e42950c);\n        \n\n        marker_4fb1a5ae9b249f608e10e00c97459a33.bindPopup(popup_5aee9aeae48882d22bb5fd99cd3dc851)\n        ;\n\n        \n    \n    \n            marker_4fb1a5ae9b249f608e10e00c97459a33.bindTooltip(\n                `<div>\n                     Liberty Bell\n                 </div>`,\n                {\"sticky\": true}\n            );\n        \n</script>"], ["style", "overflow: hidden;"], ["title", "st.iframe"], ["width", "700"]]], ["div", [["class", ["resize-triggers"]]]], ["div", [["class", ["expand-trigger"]]]], ["div", [["style", "width: 737px; height: 1843px;"]]], ["div", [["class", ["contract-trigger"]]]], ["footer", [["class", ["css-1q1n0ol", "egzxvld0"]]]], ["a", [["class", ["css-1vbd788", "egzxvld1"]], ["href", "//streamlit.io"]]], ["div", [["class", []]]], ["script", []], ["script", [["src", "./static/js/5.7ed33730.chunk.js"]]], ["script", [["src", "./static/js/main.d8e12ea6.chunk.js"]]]]
\ No newline at end of file
+[["noscript", []], ["div", [["id", "root"]]], ["div", [["class", []]]], ["div", [["class", ["withScreencast"]]]], ["div", [["tabindex", "-1"]]], ["div", [["class", ["stApp", "css-fg4pbf", "eczokvf0"]]]], ["header", [["class", ["css-1jkb0cp", "e8zbici2"]], ["data-testid", "stHeader"], ["tabindex", "-1"]]], ["div", [["class", ["css-fk4es0", "e8zbici1"]], ["data-testid", "stDecoration"]]], ["div", [["class", ["css-r698ls", "e8zbici0"]], ["data-testid", "stToolbar"]]], ["span", [["aria-expanded", "false"], ["aria-haspopup", "true"], ["id", "MainMenu"]]], ["button", [["class", ["css-9s5bis", "edgvbvh3"]], ["kind", "header"]]], ["svg", [["aria-hidden", "true"], ["class", ["e1fb0mya0", "css-1xfuh55", "ex0cdmw0"]], ["color", "inherit"], ["fill", "currentColor"], ["focusable", "false"], ["viewbox", "0 0 8 8"], ["xmlns", "http://www.w3.org/2000/svg"]]], ["path", [["d", "M0 1v1h8V1H0zm0 2.97v1h8v-1H0zm0 3v1h8v-1H0z"]]], ["div", [["class", ["appview-container", "css-1wrcr25", "egzxvld4"]], ["data-layout", "narrow"], ["data-testid", "stAppViewContainer"]]], ["section", [["aria-expanded", "true"], ["class", ["css-1lcbmhc", "e1fqkh3o3"]], ["data-testid", "stSidebar"]]], ["div", [["class", ["css-1adrfps", "e1fqkh3o2"]]]], ["div", [["class", ["css-gr05f0", "e1fqkh3o1"]]]], ["button", [["class", ["css-9s5bis", "edgvbvh3"]], ["kind", "header"]]], ["svg", [["aria-hidden", "true"], ["class", ["e1fb0mya0", "css-1xfuh55", "ex0cdmw0"]], ["color", "inherit"], ["fill", "currentColor"], ["focusable", "false"], ["viewbox", "0 0 8 8"], ["xmlns", "http://www.w3.org/2000/svg"]]], ["path", [["d", "M1.41 0L0 1.41l.72.72L2.5 3.94.72 5.72 0 6.41l1.41 1.44.72-.72 1.81-1.81 1.78 1.81.69.72 1.44-1.44-.72-.69-1.81-1.78 1.81-1.81.72-.72L6.41 0l-.69.72L3.94 2.5 2.13.72 1.41 0z"]]], ["div", [["class", ["block-container", "css-128j0gw", "egzxvld2"]], ["style", "position: relative;"]]], ["div", [["style", "overflow: visible; width: 0px; display: flex; flex-direction: column; flex: 1 1 0%;"]]], ["div", [["class", ["css-1pd56a0", "e1tzin5v0"]], ["data-testid", "stVerticalBlock"], ["width", "304"]]], ["div", [["class", ["element-container", "css-1p1nwyz", "e1tzin5v3"]], ["data-stale", "false"], ["width", "304"]]], ["div", [["class", ["row-widget", "stRadio"]], ["style", "width: 304px;"]]], ["label", [["class", ["css-qrbaxs", "effi0qh3"]]]], ["div", [["class", ["st-b4", "st-bb", "st-bc", "st-bd", "st-be", "st-bf"]], ["role", "radiogroup"]]], ["label", [["class", ["st-bg", "st-b4", "st-bh", "st-be", "st-as", "st-at", "st-bi", "st-bj", "st-bk", "st-av", "st-aw", "st-ay", "st-ax"]], ["data-baseweb", "radio"]]], ["div", [["class", ["st-bh", "st-bl", "st-bm", "st-bn", "st-bo", "st-bp", "st-az", "st-b4", "st-bq", "st-br", "st-bs", "st-bt", "st-bu", "st-bv", "st-bw", "st-bx", "st-by", "st-bz", "st-b2", "st-c0"]]]], ["div", [["class", ["st-c1", "st-bm", "st-bn", "st-bo", "st-bp", "st-c2", "st-b2", "st-c0", "st-c3"]]]], ["input", [["checked", ""], ["class", ["st-b0", "st-an", "st-c4", "st-as", "st-c5", "st-at", "st-c6", "st-c7", "st-c8", "st-c9", "st-bi", "st-ca"]], ["name", ""], ["tabindex", "0"], ["type", "radio"], ["value", "0"]]], ["div", [["class", ["st-bx", "st-cb", "st-cc", "st-ae", "st-af", "st-ag", "st-ah", "st-ai", "st-aj"]]]], ["label", [["class", ["st-bg", "st-b4", "st-bh", "st-be", "st-as", "st-at", "st-bi", "st-bj", "st-bk", "st-av", "st-aw", "st-ay", "st-ax"]], ["data-baseweb", "radio"]]], ["div", [["class", ["st-bh", "st-cd", "st-bm", "st-bn", "st-bo", "st-bp", "st-az", "st-b4", "st-bq", "st-br", "st-bs", "st-bt", "st-bu", "st-bv", "st-bw", "st-bx", "st-by", "st-bz", "st-b2", "st-c0"]]]], ["div", [["class", ["st-ce", "st-bm", "st-bn", "st-bo", "st-bp", "st-cf", "st-b2", "st-c0", "st-cg"]]]], ["input", [["class", ["st-b0", "st-an", "st-c4", "st-as", "st-c5", "st-at", "st-c6", "st-c7", "st-c8", "st-c9", "st-bi", "st-ca"]], ["name", ""], ["tabindex", "-1"], ["type", "radio"], ["value", "1"]]], ["div", [["class", ["st-bx", "st-cb", "st-cc", "st-ae", "st-af", "st-ag", "st-ah", "st-ai", "st-aj"]]]], ["div", [["class", ["resize-triggers"]]]], ["div", [["class", ["expand-trigger"]]]], ["div", [["style", "width: 305px; height: 83px;"]]], ["div", [["class", ["contract-trigger"]]]], ["div", [["class", ["css-1xwcnzt", "e1fqkh3o0"]]]], ["button", [["class", ["css-9s5bis", "edgvbvh3"]], ["kind", "header"]]], ["svg", [["aria-hidden", "true"], ["class", ["e1fb0mya0", "css-1xfuh55", "ex0cdmw0"]], ["color", "inherit"], ["fill", "currentColor"], ["focusable", "false"], ["viewbox", "0 0 8 8"], ["xmlns", "http://www.w3.org/2000/svg"]]], ["path", [["d", "M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z"]]], ["section", [["class", ["main", "css-1v3fvcr", "egzxvld3"]], ["tabindex", "0"]]], ["div", [["class", ["block-container", "css-12oz5g7", "egzxvld2"]], ["style", "position: relative;"]]], ["div", [["style", "overflow: visible; width: 0px; display: flex; flex-direction: column; flex: 1 1 0%;"]]], ["div", [["class", ["css-1n76uvr", "e1tzin5v0"]], ["data-testid", "stVerticalBlock"], ["width", "704"]]], ["div", [["class", ["element-container", "css-1hynsf2", "e1tzin5v3"]], ["data-stale", "false"], ["width", "704"]]], ["div", [["class", ["stMarkdown"]], ["style", "width: 704px;"]]], ["div", [["class", ["css-nlntq9", "e16nr0p33"]], ["data-testid", "stMarkdownContainer"]]], ["h1", [["id", "streamlit-folium"]]], ["div", [["class", ["css-zt5igj", "e16nr0p32"]]]], ["a", [["class", ["css-eczf16", "e16nr0p31"]], ["href", "#streamlit-folium"]]], ["svg", [["fill", "none"], ["height", "18"], ["stroke", "currentColor"], ["stroke-linecap", "round"], ["stroke-linejoin", "round"], ["stroke-width", "2"], ["viewbox", "0 0 24 24"], ["width", "18"], ["xmlns", "http://www.w3.org/2000/svg"]]], ["path", [["d", "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"]]], ["path", [["d", "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"]]], ["span", [["class", ["css-10trblm", "e16nr0p30"]]]], ["div", [["class", ["element-container", "css-1hynsf2", "e1tzin5v3"]], ["data-stale", "false"], ["width", "704"]]], ["div", [["class", ["stMarkdown"]], ["style", "width: 704px;"]]], ["div", [["class", ["css-nlntq9", "e16nr0p33"]], ["data-testid", "stMarkdownContainer"]]], ["p", []], ["a", [["href", "https://streamlit.io"], ["rel", ["noopener", "noreferrer"]], ["target", "_blank"]]], ["a", [["href", "https://python-visualization.github.io/folium/"], ["rel", ["noopener", "noreferrer"]], ["target", "_blank"]]], ["div", [["class", ["element-container", "css-1hynsf2", "e1tzin5v3"]], ["data-stale", "false"], ["width", "704"]]], ["div", [["class", ["stMarkdown"]], ["style", "width: 704px;"]]], ["div", [["class", ["css-nlntq9", "e16nr0p33"]], ["data-testid", "stMarkdownContainer"]]], ["p", []], ["ul", []], ["li", []], ["p", []], ["code", []], ["li", []], ["p", []], ["code", []], ["p", []], ["em", []], ["code", []], ["code", []], ["code", []], ["p", []], ["code", []], ["code", []], ["code", []], ["a", [["href", "https://github.com/randyzwitch/streamlit-folium/issues"], ["rel", ["noopener", "noreferrer"]], ["target", "_blank"]]], ["div", [["class", ["element-container", "css-1hynsf2", "e1tzin5v3"]], ["data-stale", "false"], ["width", "704"]]], ["div", [["class", ["stMarkdown"]], ["style", "width: 704px;"]]], ["div", [["class", ["css-nlntq9", "e16nr0p33"]], ["data-testid", "stMarkdownContainer"]]], ["hr", []], ["div", [["class", ["element-container", "css-1hynsf2", "e1tzin5v3"]], ["data-stale", "false"], ["width", "704"]]], ["div", [["class", ["stMarkdown"]], ["style", "width: 704px;"]]], ["div", [["class", ["css-nlntq9", "e16nr0p33"]], ["data-testid", "stMarkdownContainer"]]], ["h3", [["id", "basic-st-folium-example"]]], ["div", [["class", ["css-zt5igj", "e16nr0p32"]]]], ["a", [["class", ["css-eczf16", "e16nr0p31"]], ["href", "#basic-st-folium-example"]]], ["svg", [["fill", "none"], ["height", "18"], ["stroke", "currentColor"], ["stroke-linecap", "round"], ["stroke-linejoin", "round"], ["stroke-width", "2"], ["viewbox", "0 0 24 24"], ["width", "18"], ["xmlns", "http://www.w3.org/2000/svg"]]], ["path", [["d", "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"]]], ["path", [["d", "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"]]], ["span", [["class", ["css-10trblm", "e16nr0p30"]]]], ["code", []], ["div", [["class", ["element-container", "css-1hynsf2", "e1tzin5v3"]], ["data-stale", "false"], ["width", "704"]]], ["div", [["class", ["stMarkdown"]], ["style", "width: 704px;"]]], ["div", [["class", ["css-nlntq9", "e16nr0p33"]], ["data-testid", "stMarkdownContainer"]]], ["div", [["class", ["stCodeBlock", "css-4zfol6", "e10mrw3y0"]]]], ["div", [["class", ["css-xjsf0x", "e10mrw3y1"]]]], ["button", [["class", ["css-aivdhp", "e10mrw3y2"]], ["data-clipboard-text", "import streamlit as st\nfrom streamlit_folium import st_folium\nimport folium\n\n# center on Liberty Bell, add marker\nm = folium.Map(location=[39.949610, -75.150282], zoom_start=16)\nfolium.Marker(\n    [39.949610, -75.150282], \n    popup=\"Liberty Bell\", \n    tooltip=\"Liberty Bell\"\n).add_to(m)\n\n# call to render Folium map in Streamlit\nst_data = st_folium(m, width = 725)"], ["style", "top: 0px; right: 0px;"], ["title", "Copy to clipboard"]]], ["svg", [["fill", "none"], ["height", "16"], ["stroke", "currentColor"], ["stroke-linecap", "round"], ["stroke-linejoin", "round"], ["stroke-width", "2"], ["viewbox", "0 0 24 24"], ["width", "16"], ["xmlns", "http://www.w3.org/2000/svg"]]], ["rect", [["height", "13"], ["rx", "2"], ["ry", "2"], ["width", "13"], ["x", "9"], ["y", "9"]]], ["path", [["d", "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"]]], ["pre", [["class", ["css-1qcggol", "e10mrw3y3"]]]], ["div", [["style", "background-color: transparent;"]]], ["code", [["class", ["language-python"]], ["style", "white-space: pre;"]]], ["span", [["class", ["token", "token", "keyword"]]]], ["span", []], ["span", [["class", ["token", "token", "keyword"]]]], ["span", []], ["span", []], ["span", [["class", ["token", "token", "keyword"]]]], ["span", []], ["span", [["class", ["token", "token", "keyword"]]]], ["span", []], ["span", []], ["span", [["class", ["token", "token", "keyword"]]]], ["span", []], ["span", []], ["span", [["class", ["token", "token", "comment"]]]], ["span", []], ["span", []], ["span", [["class", ["token", "token", "operator"]]]], ["span", []], ["span", [["class", ["token", "token", "punctuation"]]]], ["span", []], ["span", [["class", ["token", "token", "punctuation"]]]], ["span", []], ["span", [["class", ["token", "token", "operator"]]]], ["span", [["class", ["token", "token", "punctuation"]]]], ["span", [["class", ["token", "token", "number"]]]], ["span", [["class", ["token", "token", "punctuation"]]]], ["span", []], ["span", [["class", ["token", "token", "operator"]]]], ["span", [["class", ["token", "token", "number"]]]], ["span", [["class", ["token", "token", "punctuation"]]]], ["span", [["class", ["token", "token", "punctuation"]]]], ["span", []], ["span", [["class", ["token", "token", "operator"]]]], ["span", [["class", ["token", "token", "number"]]]], ["span", [["class", ["token", "token", "punctuation"]]]], ["span", []], ["span", []], ["span", [["class", ["token", "token", "punctuation"]]]], ["span", []], ["span", [["class", ["token", "token", "punctuation"]]]], ["span", []], ["span", []], ["span", [["class", ["token", "token", "punctuation"]]]], ["span", [["class", ["token", "token", "number"]]]], ["span", [["class", ["token", "token", "punctuation"]]]], ["span", []], ["span", [["class", ["token", "token", "operator"]]]], ["span", [["class", ["token", "token", "number"]]]], ["span", [["class", ["token", "token", "punctuation"]]]], ["span", [["class", ["token", "token", "punctuation"]]]], ["span", []], ["span", []], ["span", [["class", ["token", "token", "operator"]]]], ["span", [["class", ["token", "token", "string"]]]], ["span", [["class", ["token", "token", "punctuation"]]]], ["span", []], ["span", []], ["span", [["class", ["token", "token", "operator"]]]], ["span", [["class", ["token", "token", "string"]]]], ["span", []], ["span", []], ["span", [["class", ["token", "token", "punctuation"]]]], ["span", [["class", ["token", "token", "punctuation"]]]], ["span", []], ["span", [["class", ["token", "token", "punctuation"]]]], ["span", []], ["span", [["class", ["token", "token", "punctuation"]]]], ["span", []], ["span", []], ["span", [["class", ["token", "token", "comment"]]]], ["span", []], ["span", []], ["span", [["class", ["token", "token", "operator"]]]], ["span", []], ["span", [["class", ["token", "token", "punctuation"]]]], ["span", []], ["span", [["class", ["token", "token", "punctuation"]]]], ["span", []], ["span", [["class", ["token", "token", "operator"]]]], ["span", []], ["span", [["class", ["token", "token", "number"]]]], ["span", [["class", ["token", "token", "punctuation"]]]], ["div", [["class", ["element-container", "css-1hynsf2", "e1tzin5v3"]], ["data-stale", "false"], ["width", "704"]]], ["iframe", [["allow", "accelerometer; ambient-light-sensor; autoplay; battery; camera; document-domain; encrypted-media; fullscreen; geolocation; gyroscope; layout-animations; legacy-image-formats; magnetometer; microphone; midi; oversized-images; payment; picture-in-picture; publickey-credentials-get; sync-xhr; usb; vr ; wake-lock; xr-spatial-tracking"], ["height", "700"], ["sandbox", ["allow-forms", "allow-modals", "allow-popups", "allow-popups-to-escape-sandbox", "allow-same-origin", "allow-scripts", "allow-downloads"]], ["scrolling", "no"], ["src", "http://localhost:8501/component/streamlit_folium.st_folium/index.html?streamlitUrl=http%3A%2F%2Flocalhost%3A8501%2F"], ["title", "streamlit_folium.st_folium"], ["width", "704"]]], ["div", [["class", ["resize-triggers"]]]], ["div", [["class", ["expand-trigger"]]]], ["div", [["style", "width: 737px; height: 1981px;"]]], ["div", [["class", ["contract-trigger"]]]], ["footer", [["class", ["css-1q1n0ol", "egzxvld0"]]]], ["a", [["class", ["css-1vbd788", "egzxvld1"]], ["href", "//streamlit.io"]]], ["div", [["class", []]]], ["script", []], ["script", [["src", "./static/js/5.7ed33730.chunk.js"]]], ["script", [["src", "./static/js/main.d8e12ea6.chunk.js"]]]]
\ No newline at end of file