Persisting map center in session state?

[kevinpauli]

Hopefully this one is simple but it has me stumped.

I've got a multipage app. When the user pans on the map, navigates away to another page, and navigates back, I'd like the map to render just as they last saw it, rather than resetting. For that purpose, I am storing the map_center in the session_state, and using that when constructing the map. The problem is I'm seeing this strange behavior where it only saves odd numbered pan operations (1st, 3rd, 5th, etc.). For even numbered ones (2nd, 4th, etc.) it doesn't save the change and rather re-renders the previous view.

Minimal example:

import logging

import folium
import streamlit as st
from streamlit_folium import st_folium

logger = logging.getLogger("myapp")

if "map_center" not in st.session_state:
    st.session_state["map_center"] = [0, 0]
    logger.info("Initialized map_center in session state.")

m = folium.Map(
    location=st.session_state["map_center"],
    zoom_start=2,
)
logger.info(f"Map initialized with center: {st.session_state['map_center']}")

map_data = st_folium(m, returned_objects=["center"])
logger.info(f"Map data received: {map_data}")

if map_data and "center" in map_data:
    new_center = [map_data["center"]["lat"], map_data["center"]["lng"]]
    old_center = st.session_state.get("map_center")
    if new_center != old_center:
        st.session_state["map_center"] = new_center
        logger.info(f"Map center changed: {new_center}")
    else:
        logger.info(f"Map center did not change: {new_center}")

Here's the logs.

Load app:

2025-06-24 20:29:51,557 INFO myapp - Initialized map_center in session state.
2025-06-24 20:29:51,562 INFO myapp - Map initialized with center: [0, 0]
2025-06-24 20:29:51,566 INFO myapp - Map data received: {}
2025-06-24 20:29:51,720 INFO myapp - Map initialized with center: [0, 0]
2025-06-24 20:29:51,722 INFO myapp - Map data received: {'center': {'lat': 0, 'lng': 0}}
2025-06-24 20:29:51,722 INFO myapp - Map center did not change: [0, 0]

1st pan: works!

2025-06-24 20:29:58,553 INFO myapp - Map initialized with center: [0, 0]
2025-06-24 20:29:58,557 INFO myapp - Map data received: {'center': {'lat': 6.315298538330033, 'lng': 6.679687500000001}}
2025-06-24 20:29:58,557 INFO myapp - Map center changed: [6.315298538330033, 6.679687500000001]

2nd pan: problem! I actually panned further, but the map data received didn't reflect it, so it brought me back.

2025-06-24 20:30:09,144 INFO myapp - Map initialized with center: [6.315298538330033, 6.679687500000001]
2025-06-24 20:30:09,148 INFO myapp - Map data received: {}
2025-06-24 20:30:09,238 INFO myapp - Map initialized with center: [6.315298538330033, 6.679687500000001]
2025-06-24 20:30:09,240 INFO myapp - Map data received: {'center': {'lat': 6.315298538330033, 'lng': 6.679687500000001}}
2025-06-24 20:30:09,240 INFO myapp - Map center did not change: [6.315298538330033, 6.679687500000001]

3rd pan: works!

2025-06-24 20:30:19,563 INFO myapp - Map initialized with center: [6.315298538330033, 6.679687500000001]
2025-06-24 20:30:19,569 INFO myapp - Map data received: {'center': {'lat': 13.581920900545857, 'lng': 15.117187500000002}}
2025-06-24 20:30:19,569 INFO myapp - Map center changed: [13.581920900545857, 15.117187500000002]

4th pan: problem! My pan didn't take, it snapped me back to where I was after the 3rd pan.

2025-06-24 20:30:28,096 INFO myapp - Map initialized with center: [13.581920900545857, 15.117187500000002]
2025-06-24 20:30:28,101 INFO myapp - Map data received: {}
2025-06-24 20:30:28,177 INFO myapp - Map initialized with center: [13.581920900545857, 15.117187500000002]
2025-06-24 20:30:28,179 INFO myapp - Map data received: {'center': {'lat': 13.581920900545857, 'lng': 15.117187500000002}}
2025-06-24 20:30:28,179 INFO myapp - Map center did not change: [13.581920900545857, 15.117187500000002]

Navigate away and back, it has lost the 4th pan entirely, it takes me back to where it was after the 3rd pan

2025-06-24 20:30:43,798 INFO myapp - Map initialized with center: [13.581920900545857, 15.117187500000002]
2025-06-24 20:30:43,803 INFO myapp - Map data received: {}
2025-06-24 20:30:43,884 INFO myapp - Map initialized with center: [13.581920900545857, 15.117187500000002]
2025-06-24 20:30:43,887 INFO myapp - Map data received: {'center': {'lat': 13.581920900545857, 'lng': 15.117187500000002}}
2025-06-24 20:30:43,887 INFO myapp - Map center did not change: [13.581920900545857, 15.117187500000002]

[hansthen]

You need to use the on_change callback to st_folium. Something like this should work:

import folium
import streamlit as st
from streamlit_folium import st_folium

st.set_page_config(
    layout="wide"
)

left, right = st.columns(2)

st.session_state.setdefault("center", [0,0])

def on_change():
    if "center" in st.session_state.map:
        map_data = st.session_state.map
        new_center = [map_data["center"]["lat"], map_data["center"]["lng"]]
        st.session_state["center"] = new_center

with left:
    m = folium.Map(
        location=st.session_state.center,
        zoom_start=2,
    )
    map_data = st_folium(
        m,
        key="map",
        returned_objects=["center"],
        on_change=on_change
    )

with right:
    st.write(map_data)