Suppose styling of feature group objects by rendering feature group b…

…efore generating js (#147)

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

* Bump version

* add geopandas

* Click twice

* Click text

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,
+)

requirements.txt

@@ -1,4 +1,5 @@
 streamlit>=1.13.0
 folium>=0.13
 jinja2
-branca
+branca
+geopandas

setup.py

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

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/requirements.txt

@@ -2,4 +2,5 @@ streamlit>1.11.1
 pytest>=7.1.2
 folium>=0.13
 pytest-playwright
-pytest-rerunfailures
+pytest-rerunfailures
+geopandas

tests/test_frontend.py

@@ -234,3 +234,11 @@ 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("link", name="geojson styles").click()
+
+    page.get_by_text("Show generated code").click()
+    expect(page.get_by_text('"fillOpacity"')).to_be_visible()