Add option to wrap values via Leaflet functionality (#276)

* Add option to wrap values via Leaflet functionality

* Add example demonstrating wrap longitude

* Fix formatting

Author: randyzwitch

examples/test_wrap_longitude.py

@@ -0,0 +1,56 @@
+"""
+Test script to demonstrate the wrap_longitude parameter.
+
+Pan the map around the world (past the dateline) and observe how
+the longitude values change with wrap_longitude enabled vs disabled.
+"""
+
+import folium
+import streamlit as st
+
+from streamlit_folium import st_folium
+
+st.set_page_config(layout="wide")
+st.title("Test: wrap_longitude parameter")
+
+st.markdown("""
+**Instructions:** Pan the map to the left or right past the international dateline
+(keep going past 180° or -180°). Watch how the center longitude and bounds change.
+
+- **Without wrapping:** Longitude values can exceed -180/180 (e.g., -200, 250)
+- **With wrapping:** Longitude values stay within -180 to 180
+""")
+
+col1, col2 = st.columns(2)
+
+with col1:
+    st.subheader("wrap_longitude=False (default)")
+    m1 = folium.Map(location=[0, 170], zoom_start=2)
+    result1 = st_folium(
+        m1, key="map1", wrap_longitude=False, height=400, use_container_width=True
+    )
+
+    if result1:
+        st.write("**Center:**", result1.get("center"))
+        bounds1 = result1.get("bounds")
+        if bounds1:
+            sw = bounds1.get("_southWest", {})
+            ne = bounds1.get("_northEast", {})
+            st.write(f"**SW lng:** {sw.get('lng')}")
+            st.write(f"**NE lng:** {ne.get('lng')}")
+
+with col2:
+    st.subheader("wrap_longitude=True")
+    m2 = folium.Map(location=[0, 170], zoom_start=2)
+    result2 = st_folium(
+        m2, key="map2", wrap_longitude=True, height=400, use_container_width=True
+    )
+
+    if result2:
+        st.write("**Center:**", result2.get("center"))
+        bounds2 = result2.get("bounds")
+        if bounds2:
+            sw = bounds2.get("_southWest", {})
+            ne = bounds2.get("_northEast", {})
+            st.write(f"**SW lng:** {sw.get('lng')}")
+            st.write(f"**NE lng:** {ne.get('lng')}")

streamlit_folium/__init__.py

@@ -216,6 +216,7 @@ def st_folium(
     debug: bool = False,
     render: bool = True,
     on_change: Callable | None = None,
+    wrap_longitude: bool = False,
 ):
     """Display a Folium object in Streamlit, returning data as user interacts
     with app.
@@ -268,6 +269,10 @@ def st_folium(
         Disabling this may improve performance as you can cache the rendering step.
         *Note* if this is disabled and the map is not rendered elsewhere the map
         will be missing attributes
+    wrap_longitude: bool
+        If True, normalize longitude values to be within -180 to 180 degrees.
+        This is useful when panning around the world causes longitude values to
+        exceed the standard bounds.
     Returns
     -------
     dict
@@ -443,6 +448,7 @@ def _on_change():
         css_links=css_links,
         js_links=js_links,
         on_change=_on_change,
+        wrap_longitude=wrap_longitude,
     )
 
 

streamlit_folium/frontend/src/index.tsx

@@ -29,6 +29,7 @@ type GlobalData = {
   last_layer_control: any
   height: any
   selected_layers: Record<string, { name: string; url: string }>
+  wrap_longitude: boolean
 }
 
 declare global {
@@ -56,18 +57,31 @@ function updateComponentValue(map: any) {
   let previous_data = global_data.previous_data
   let bounds = map.getBounds()
   let zoom = map.getZoom()
+  let center = map.getCenter()
+  const wrapLng = global_data.wrap_longitude
+
+  // Use Leaflet's built-in wrapLatLng and wrapLatLngBounds if wrapping is enabled
+  const wrapLatLng = (latlng: any) => {
+    if (!latlng || !wrapLng) return latlng
+    return map.wrapLatLng(latlng)
+  }
+  const wrapBounds = (b: any) => {
+    if (!b || !wrapLng) return b
+    return map.wrapLatLngBounds(b)
+  }
+
   let _data = {
-    last_clicked: global_data.lat_lng_clicked,
-    last_object_clicked: global_data.last_object_clicked,
+    last_clicked: wrapLatLng(global_data.lat_lng_clicked),
+    last_object_clicked: wrapLatLng(global_data.last_object_clicked),
     last_object_clicked_tooltip: global_data.last_object_clicked_tooltip,
     last_object_clicked_popup: global_data.last_object_clicked_popup,
     all_drawings: global_data.all_drawings,
     last_active_drawing: global_data.last_active_drawing,
-    bounds: bounds,
+    bounds: wrapBounds(bounds),
     zoom: zoom,
     last_circle_radius: global_data.last_circle_radius,
     last_circle_polygon: global_data.last_circle_polygon,
-    center: map.getCenter(),
+    center: wrapLatLng(center),
     selected_layers: Object.values(global_data.selected_layers)
   }
 
@@ -282,6 +296,7 @@ async function onRender(event: Event) {
   const return_on_hover: boolean = data.args["return_on_hover"]
   const layer_control: string = data.args["layer_control"]
   const pixelated: boolean = data.args["pixelated"]
+  const wrap_longitude: boolean = data.args["wrap_longitude"] ?? false
 
   // load scripts
   const loadScripts = async () => {
@@ -417,7 +432,8 @@ async function onRender(event: Event) {
         last_feature_group: null,
         last_layer_control: null,
         selected_layers: {},
-        height: height
+        height: height,
+        wrap_longitude: wrap_longitude
       }
       if (script.indexOf("map_div2") !== -1) {
         parent_div?.classList.remove("single")