Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Error with st_folium and not with folium_static #139

Open
Javier-Jimenez99 opened this issue Aug 14, 2023 · 8 comments
Open

Error with st_folium and not with folium_static #139

Javier-Jimenez99 opened this issue Aug 14, 2023 · 8 comments

Comments

@Javier-Jimenez99
Copy link

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

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

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
Copy link
Collaborator

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

@Javier-Jimenez99
Copy link
Author

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
Copy link

@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
Copy link

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
Copy link

mrgeorge commented Sep 7, 2023

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:
image

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

@IndigoWizard
Copy link

@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
Copy link

mrgeorge commented Sep 7, 2023

@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
Copy link
Contributor

JonDHo commented Dec 12, 2023

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants