Image overlay from st_folium disappears

[minio999]

Hi,

I recently encountered a bug relating to feature groups with st_folium. I am trying to visualize data on a map using Folium Image Overlay that's added to a feature group with the feature_group_to_add flag inside st_folium. I am also using the Draw Plugin to select an area of interest using markers.

At first, the image overlay is shown, but after the next interaction with the data, the overlay disappears (only inside the st_folium object, as iteration over the children of the feature group and map shows that the feature group is attached as well as the image overlay is attached to the feature group).

Here is my code:

"""
Main module for webpage
"""
import streamlit as st
from streamlit_folium import st_folium
import folium

from sat_webpage.components import (
    get_button,
    get_ndvi_plot,
    prepare_ndvi_data,
    get_np_array_from_image,
    get_coordinates,
    create_map,
    add_image_layer,
    get_min_max_lon_lat
)

API_URL = "http://localhost:8000"

def main():
    """
    Main function to create Streamlit app.
    """

    # Map isn't disapearning, but image still does
    # Initialize map object
    geo_map = create_map()

    # Initialize feature_group and add image layer if it's
    # Saved in state
    feature_group = folium.FeatureGroup(name='NDVI')
    if 'image_layer' in st.session_state:
        print("Image layer added")
        feature_group.add_child(st.session_state['image_layer'])

    st.write(st.session_state)

    # Initialize st folium object
    st_data = st_folium(
        geo_map,
        feature_group_to_add=feature_group,
        width=725
    )

    st.button("Reset", type="primary")

    # Logic for getting NDVI data on button clicked
    if get_button():
        coordinates_list = get_coordinates(st_data)
        st.write(coordinates_list)

        xarray_ndvi, image_bytes = prepare_ndvi_data(coordinates_list, API_URL)

        np_image = get_np_array_from_image(image_bytes)
        st.write("NP IMAGE")
        st.write(np_image)

        _ = get_ndvi_plot(xarray_ndvi)

        min_lat, min_lon, max_lat, max_lon = get_min_max_lon_lat(coordinates_list)

        # Create layer and add it to the state
        layer = add_image_layer(np_image,  min_lat, min_lon, max_lat, max_lon)
        st.session_state['image_layer'] = layer
        st.rerun()

if __name__ == "__main__":
    main()

There is layer creation:

def add_image_layer(
        image_array: np.array,
        min_lat: float,
        min_lon: float,
        max_lat: float,
        max_lon: float
    ):
    """
    Doc string to be added
    """
    layer = folium.raster_layers.ImageOverlay(
            name = "NDVI Layer",
            image=image_array,
            bounds = [[min_lat, min_lon], [max_lat, max_lon]],
            opacity = 0.8,
            colormap = plt.get_cmap('RdYlGn', 10),
            zindex=1
    )
    # print("Image Layer Addeed")
    return layer

Here is a sample np.array data to visualize (in CSV file provided below) with parameters needed for the add_image_layer function:
sample_data.csv
52.209711 20.988178 52.216547 21.017704 -> parameters provided in the order of values inside the add_image_layer function.

I am using streamlit==1.34.0 and streamlit-folium == 0.20.0

As I have been stuck with this issue for a while now, I suspect it might be a problem with streamlit-folium itself. If you identify any issues with my code, I would greatly appreciate your assistance.d

[Navxihziq]

I have encountered a similar issue when specifying feature_group_to_add. The feature group of Marker objects has a tendency to disappear momentarily after the map is rendered. Refreshing the tab sometimes resolves the problem.

I tried running the frontend code on my machine, and there is a chance the following error will appear:

I looked into the Leaflet code where the error occurs. It tries to check whether the render box of the newly created Marker intersects with the _pxBounds. In the intersect function, the bounds.max appears to be undefined.

Problem resolved after rolling back to version 0.19. Could be related to #181 as well!