Error with st_folium and not with folium_static

[Javier-Jimenez99]

I have seen that the recommended function is st_folium but it doesn't render my map well. This is what happends:

The height is too low and if I change the height parameter it does nothing. This is the error from the browser console:

On the other hand, I have tryed it using folium_static and it works, but there are some features from st_folium that I would like to use. I don't know if some of you have faced this problem before.

[blackary]

Could you share the code you're using to create the map?

[Javier-Jimenez99]

This is the main function used to create the map:

    map = folium.Map(
        location=[lat_mid, lon_mid],
        zoom_start=4,
        tiles=None,
    )

    polylines = create_polylines(
        lats, lons, ts, routes_names, routes_colors, add_circles, circle_rate
    )

    if add_circles:
        polylines, circles = polylines

    for polyline in polylines:
        polyline.add_to(map)

    # Is not refactor because it is important to keep the order
    if add_circles:
        for circle in circles:
            circle.add_to(map)

    if markers_lats is not None and markers_lons is not None:
        markers = create_markers(
            markers_lats, markers_lons, markers_names, markers_colors
        )
        for marker in markers:
            marker.add_to(map)

    if wms_date is not None:
        pd_date = pd.to_datetime(wms_date.astype(str))

        # CURRENTS
        currents = wms_layer(
            "https://nrt.cmems-du.eu/thredds/wms/cmems_mod_glo_phy-cur_anfc_0.083deg_P1D-m",
            "sea_water_velocity",
            "boxfill/occam",
            pd_date.strftime("%Y-%m-%dT12:00:00.000Z"),
            "Currents",
            "0,2",
        ).add_to(map)

        # WAVES
        waves = wms_layer(
            "https://nrt.cmems-du.eu/thredds/wms/cmems_mod_glo_wav_anfc_0.083deg_PT3H-i",
            "VHM0",
            "boxfill/occam",
            pd_date.strftime("%Y-%m-%dT12:00:00.000Z"),
            "Waves Height",
        ).add_to(map)

        # WIND
        wind = wms_layer(
            "https://nrt.cmems-du.eu/thredds/wms/cmems_obs-wind_glo_phy_nrt_l4_0.125deg_PT1H",
            "wind",
            "boxfill/occam",
            pd_date.strftime("%Y-%m-%dT12:00:00.000Z"),
            "Wind speed",
            "0,20",
        ).add_to(map)

        folium.plugins.GroupedLayerControl(
            {"Weather Data": [currents, waves, wind]}
        ).add_to(map)

    front_map = folium.TileLayer(
        LIGHT_MAP if theme == "light" else DARK_MAP,
        attr="GreenNavigation",
        control=False,
        name="Light Map",
    )

    front_map.add_to(map)
    map.keep_in_front(front_map)

    return map

There are other functions that creates polylines and markers, but they are really simples.

[IndigoWizard]

@Javier-Jimenez99 @blackary
Sometimes the layer control folium.LayerControl(collapsed=False).add_to(m) can cause the issue when using st_folium().

But to be honest, it's kind of messy, in my case I'm working with DualMap (used for comparaison purpose) and it's a total mess when using st_folium(); some cases both maps show up, some case the layer control don't show up, sometimes the maps don't show up like in this case you are displaying. I use folium_static() instead (and it doesn't help with responsivity and height in Streamlit) probably gonna open 2 or 3 issues related to DualMap, st_folium() and responsive height sizing.

[IndigoWizard]

Using st_folium() allows me to have some control over the height of the DualMap but it doen't render correctly and in most case the map don't work.
I'm using folium_static() to render the map (it renders + the layer control) but the height is preset and I have no control over it (wether I set it up in the function e.g: height=800 or I use injected CSS, in whichcase it is so difficult to target the right elements and it's messy when it comes to responsivity)

[mrgeorge]

I have a similar issue with folium_static rendering a SideBySideLayers map correctly and st_folium not showing the output.

Code sample:

import folium
import streamlit as st
from streamlit_folium import folium_static, st_folium

# temp fix for folium.plugins.SideBySideLayers
# see https://github.com/python-visualization/folium/issues/1730
class FixedSideBySideLayers(folium.plugins.SideBySideLayers):
    default_js = [
        (
            "leaflet.sidebyside",
            "https://cdn.jsdelivr.net/gh/digidem/[email protected]/leaflet-side-by-side.min.js",
        ),
    ]

m = folium.Map()
tl1 = folium.TileLayer('openstreetmap').add_to(m)
tl2 = folium.TileLayer('stamentoner').add_to(m)
sbs = FixedSideBySideLayers(tl1, tl2).add_to(m)

st.markdown('folium_static')
folium_static(m)

st.markdown('st_folium')
st_folium(m)

Output:

It would be desirable to have this work in st_folium to use features like use_container_width.

[IndigoWizard]

@mrgeorge Beside the rendering, does the slider work correctly? I tried it through geemap/leafmap and personally found it's a pain, the mouse grabs both the Map (as in panning) and the slider, so it's not good to use. I see you're injecting js through cdn, how does this work and is it smooth? does it work for multiple layers within a map (or does it spawn multiple sliders on top of each other?)
Sorry for the so many questions but I've been strugguling with build the feature in my project IndigoWizard/NDVI-Viewer#15

[mrgeorge]

@IndigoWizard I was seeing the same issue with the mouse grabbing the map with folium v0.14.0 but with the temporary fix described here the slider works as intended (in a jupyter notebook or in streamlit with folium_static, but not with st_folium). I haven't tested multiple layers yet.

[JonDHo]

Any update on this? The workaround mentioned above (python-visualization/folium#1730) works fine for folium_static, but that is very limiting as it doesn't return any data and isn't responsive. When used with st_folium, there is the following console error: L.control.sideBySide is not a function and the map doesn't render correctly as shown above. I am using streamlit-nightly builds.