Support grouped layer control (#151)

examples/pages/grouped_layer_control.py

@@ -0,0 +1,34 @@
+import folium
+import streamlit as st
+from folium.plugins import GroupedLayerControl
+
+from streamlit_folium import st_folium
+
+st.set_page_config(
+    page_title="streamlit-folium documentation: Grouped Layer Control",
+    page_icon=":pencil:",
+    layout="wide",
+)
+
+st.title("streamlit-folium: Grouped Layer Control")
+
+m = folium.Map([40.0, 70.0], zoom_start=6)
+
+fg1 = folium.FeatureGroup(name="g1")
+fg2 = folium.FeatureGroup(name="g2")
+fg3 = folium.FeatureGroup(name="g3")
+folium.Marker([40, 74]).add_to(fg1)
+folium.Marker([38, 72]).add_to(fg2)
+folium.Marker([40, 72]).add_to(fg3)
+m.add_child(fg1)
+m.add_child(fg2)
+m.add_child(fg3)
+
+folium.LayerControl(collapsed=False).add_to(m)
+
+GroupedLayerControl(
+    groups={"groups1": [fg1, fg2]},
+    collapsed=False,
+).add_to(m)
+
+st_folium(m)

setup.py

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

streamlit_folium/frontend/public/index.html

@@ -50,6 +50,7 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-locatecontrol/0.66.2/L.Control.Locate.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Leaflet.VectorGrid.bundled.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-groupedlayercontrol/0.6.1/leaflet.groupedlayercontrol.min.js"></script>
 
     <link
       rel="stylesheet"
@@ -147,6 +148,10 @@
       rel="stylesheet"
       href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"
     />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/leaflet-groupedlayercontrol/0.6.1/leaflet.groupedlayercontrol.min.css"
+    />
     <style>
       .single > :nth-child(1) {
         width: 100%;

tests/test_frontend.py

@@ -242,3 +242,13 @@ def test_geojson_styles(page: Page):
 
     page.get_by_text("Show generated code").click()
     expect(page.get_by_text('"fillOpacity"')).to_be_visible()
+
+
+def test_grouped_layer_control(page: Page):
+    page.get_by_role("link", name="grouped layer control").click()
+    page.frame_locator('iframe[title="streamlit_folium\\.st_folium"]').locator(
+        "label"
+    ).filter(has_text="g2").click()
+    page.frame_locator('iframe[title="streamlit_folium\\.st_folium"]').get_by_label(
+        "g2"
+    ).check()