Suppose styling of feature group objects by rendering feature group before generating js

Author: blackary

examples/pages/geojson_styles.py

@@ -0,0 +1,37 @@
+import folium
+import geopandas as gpd
+import shapely
+import streamlit as st
+
+from streamlit_folium import st_folium
+
+st.title("GeoJSON Styling")
+
+START_LOCATION = [37.7934347109497, -122.399077892527]
+START_ZOOM = 18
+
+wkt = (
+    "POLYGON ((-122.399077892527 37.7934347109497, -122.398922660838 "
+    "37.7934544916178, -122.398980265018 37.7937266504805, -122.399133972495 "
+    "37.7937070646238, -122.399077892527 37.7934347109497))"
+)
+polygon_ = shapely.wkt.loads(wkt)
+gdf = gpd.GeoDataFrame(geometry=[polygon_]).set_crs(epsg=4326)
+
+style_parcels = {"fillColor": "red", "fillOpacity": 0.2}
+
+polygon_folium = folium.GeoJson(data=gdf, style_function=lambda x: style_parcels)
+
+map = folium.Map(
+    location=START_LOCATION, zoom_start=START_ZOOM, tiles="OpenStreetMap", max_zoom=21
+)
+fg = folium.FeatureGroup(name="Parcels")
+fg = fg.add_child(polygon_folium)
+
+st_folium(
+    map,
+    width=800,
+    height=450,
+    feature_group_to_add=fg,
+    debug=True,
+)

streamlit_folium/__init__.py

@@ -10,6 +10,7 @@
 import branca
 import folium
 import folium.plugins
+import streamlit as st
 import streamlit.components.v1 as components
 from jinja2 import UndefinedError
 
@@ -153,6 +154,7 @@ def _get_feature_group_string(
 ) -> str:
     feature_group_to_add._id = "feature_group"
     feature_group_to_add.add_to(map)
+    feature_group_to_add.render()
     feature_group_string = generate_leaflet_string(
         feature_group_to_add, base_id="feature_group"
     )
@@ -180,6 +182,7 @@ def st_folium(
     feature_group_to_add: folium.FeatureGroup | None = None,
     return_on_hover: bool = False,
     use_container_width: bool = False,
+    debug: bool = False,
 ):
     """Display a Folium object in Streamlit, returning data as user interacts
     with app.
@@ -218,6 +221,9 @@ def st_folium(
     use_container_width: bool
         If True, set the width of the map to the width of the current container.
         This overrides the `width` parameter.
+    debug: bool
+        If True, print out the html and javascript code used to render the map with
+        st.code
     Returns
     -------
     dict
@@ -298,6 +304,17 @@ def bounds_to_dict(bounds_list: List[List[float]]) -> Dict[str, Dict[str, float]
             map=folium_map,
         )
 
+    if debug:
+        with st.expander("Show generated code"):
+            st.info("HTML:")
+            st.code(html)
+            st.info("Main Map Leaflet js:")
+            st.code(leaflet)
+
+            if feature_group_string is not None:
+                st.info("Feature group js:")
+                st.code(feature_group_string)
+
     component_value = _component_func(
         script=leaflet,
         html=html,

tests/test_frontend.py

@@ -234,3 +234,9 @@ def test_responsiveness(page: Page):
     assert new_bbox["width"] > initial_bbox["width"] + 300
 
     page.set_viewport_size({"width": 2000, "height": 2000})
+
+
+def test_geojson_styles(page: Page):
+    page.get_by_role("link", name="geojson styles").click()
+    page.get_by_role("button", name="Show generated code").click()
+    expect(page.get_by_text('"fillOpacity"')).to_be_visible()