Folium map disappears upon rendering

I am trying to use the following code to render a map, and it disappears upon rendering.

import wget
import pandas as pd
import streamlit as st
import folium
from streamlit_folium import st_folium
from folium.plugins import HeatMap

link_to_data = 'https://raw.githubusercontent.com/dvrob92/SIT720/master/housing_dataset.csv'

df = pd.read_csv(wget.download(link_to_data))

df = df[['housing_age', 'total_rooms', 'total_bedrooms', 'population', 'average_income', 'ocean_proximity', 'house_value', 'latitude', 'longitude']]

st.title("Housing Data Map Viewer")

st.sidebar.header("Filters")

filters = {
    'housing_age': st.sidebar.slider("Housing Age", int(df['housing_age'].min()), int(df['housing_age'].max()), (int(df['housing_age'].min()), int(df['housing_age'].max()))),
    'total_rooms': st.sidebar.slider("Total Rooms", int(df['total_rooms'].min()), int(df['total_rooms'].max()), (int(df['total_rooms'].min()), int(df['total_rooms'].max()))),
    'total_bedrooms': st.sidebar.slider("Total Bedrooms", int(df['total_bedrooms'].min()), int(df['total_bedrooms'].max()), (int(df['total_bedrooms'].min()), int(df['total_bedrooms'].max()))),
    'population': st.sidebar.slider("Population", int(df['population'].min()), int(df['population'].max()), (int(df['population'].min()), int(df['population'].max()))),
    'average_income': st.sidebar.slider("Average Income", float(df['average_income'].min()), float(df['average_income'].max()), (float(df['average_income'].min()), float(df['average_income'].max()))),
    'ocean_proximity': st.sidebar.multiselect("Ocean Proximity", options=df['ocean_proximity'].unique(), default=df['ocean_proximity'].unique()),
}

if st.sidebar.button("Update Map"):
    filtered_df = df.copy()


    filtered_df = filtered_df[(filtered_df['housing_age'] >= filters['housing_age'][0]) & (filtered_df['housing_age'] <= filters['housing_age'][1])]
    filtered_df = filtered_df[(filtered_df['total_rooms'] >= filters['total_rooms'][0]) & (filtered_df['total_rooms'] <= filters['total_rooms'][1])]
    filtered_df = filtered_df[(filtered_df['total_bedrooms'] >= filters['total_bedrooms'][0]) & (filtered_df['total_bedrooms'] <= filters['total_bedrooms'][1])]
    filtered_df = filtered_df[(filtered_df['population'] >= filters['population'][0]) & (filtered_df['population'] <= filters['population'][1])]
    filtered_df = filtered_df[(filtered_df['average_income'] >= filters['average_income'][0]) & (filtered_df['average_income'] <= filters['average_income'][1])]
    filtered_df = filtered_df[filtered_df['ocean_proximity'].isin(filters['ocean_proximity'])]

    if not filtered_df.empty:
        m = folium.Map(location=[filtered_df['latitude'].mean(), filtered_df['longitude'].mean()], zoom_start=6)

        marker_layer = folium.FeatureGroup(name="Markers")
        for _, row in filtered_df.iterrows():
            folium.CircleMarker(
                location=(row['latitude'], row['longitude']),
                radius=3,
                popup=f"Housing Age: {row['housing_age']}<br>Total Rooms: {row['total_rooms']}<br>Total Bedrooms: {row['total_bedrooms']}<br>Population: {row['population']}<br>Average Income: {row['average_income']}<br>House Value: {row['house_value']}<br>Ocean Proximity: {row['ocean_proximity']}",
                color='blue',
                fill=True,
                fill_opacity=0.7
            ).add_to(marker_layer)
        marker_layer.add_to(m)

        heat_data = [[row['latitude'], row['longitude']] for _, row in filtered_df.iterrows()]
        if heat_data:
            heat_layer = HeatMap(heat_data, name="Heatmap")
            heat_layer.add_to(m)

        # Add layer control to toggle between marker and heatmap layers
        folium.LayerControl().add_to(m)

        # Display the map
        st_folium(m, width=700)
    else:
        st.write("No data found for the selected filters.")

Using my own dataset, I actually got it to be stable (even though the map re-renders every time I move it), but when I added heatmap to the code, it disappears immediately upon rendering again.

(Note: I am using housing market dataset in my example for reproducibility. My dataset has lat/lon and some other cols I am filtering on.)

Hi,
Did you find a solution? My app on production is exhibiting same behavior after I upgraded from streamlit version 1.33 to 1.39 , older version ran smoothly without this error.
Temporary workaround is to clear the cache and refresh.

Regards
MMP

@randyzwitch can you please have a look, I am also facing similar issue.

@randyzwitch I am having the same issue. App works with multiple plugins added to a map, but once I add a heatmap (or choropleth), the map renders initially before rapidly fading away upon automatic reruns. Note, I can show the map (with the heatmap plugin added) just fine with components.html; this issue appears isolated to when I try the same with st_folium, which I really need in order to use bi-directional communication. No errors shown on the terminal from which I initiate the app, but from the Chrome developer tools, I see the following errors:

VM66:54 Uncaught ReferenceError: heat_map_ce2c7826e7b299d0b336d3d65621a103 is not defined
    at <anonymous>:54:13
    at index.tsx:411:23
    at async EventTarget.onRender (index.tsx:403:5)
Map.js:1094 Uncaught Error: Map container is already initialized.
    at e._initContainer (Map.js:1094:10)
    at e.initialize (Map.js:136:8)
    at new e (Class.js:24:20)
    at t.map (Map.js:1750:9)
    at <anonymous>:2:29
    at index.tsx:411:23
    at async EventTarget.onRender (index.tsx:403:5)
index.tsx:332 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'getZoom')
    at finalizeOnRender (index.tsx:332:31)
    at index.tsx:420:7
    at async EventTarget.onRender (index.tsx:403:5)
index.tsx:332 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'getZoom')
    at finalizeOnRender (index.tsx:332:31)
    at index.tsx:420:7
    at async EventTarget.onRender (index.tsx:403:5)

Anyone experiencing similar issues? And better yet, anyone come up with a solution?

Sorry no solution yet, I am facing this issue even without any plugins , I created a minimal example to recreate the issue at this URL