st_folium cannot support folium.plugins.TimestampedGeoJson

[peterlovei]

While folium_static renders the map properly with timestamped geojson data on it, st_folium fails with the following error code: "Cannot compute bounds of non-embedded GeoJSON." I did only change the map rendering mechanism between two runs, and I was able to reproduce the problem multiple times.

[randyzwitch]

Hi @lpeti69 -

Please provide both code and sample data so that we can try to understand the issue.

Best, Randy

[peterlovei]

Hi Randy, sure!

I changed the GeoJson to the example one provided on the folium page:

I no longer receive the error code, however the map still does not render. Screenshot attached of the error.

import folium
from streamlit_folium import (
    st_folium,
    folium_static
)

m = folium.Map(location=[35.68159659061569, 139.76451516151428], zoom_start=16)

# Lon, Lat order.
lines = [
    {
        "coordinates": [
            [139.76451516151428, 35.68159659061569],
            [139.75964426994324, 35.682590062684206],
        ],
        "dates": ["2017-06-02T00:00:00", "2017-06-02T00:10:00"],
        "color": "red",
    },
    {
        "coordinates": [
            [139.75964426994324, 35.682590062684206],
            [139.7575843334198, 35.679505030038506],
        ],
        "dates": ["2017-06-02T00:10:00", "2017-06-02T00:20:00"],
        "color": "blue",
    },
    {
        "coordinates": [
            [139.7575843334198, 35.679505030038506],
            [139.76337790489197, 35.678040905014065],
        ],
        "dates": ["2017-06-02T00:20:00", "2017-06-02T00:30:00"],
        "color": "green",
        "weight": 15,
    },
    {
        "coordinates": [
            [139.76337790489197, 35.678040905014065],
            [139.76451516151428, 35.68159659061569],
        ],
        "dates": ["2017-06-02T00:30:00", "2017-06-02T00:40:00"],
        "color": "#FFFFFF",
    },
]

features = [
    {
        "type": "Feature",
        "geometry": {
            "type": "LineString",
            "coordinates": line["coordinates"],
        },
        "properties": {
            "times": line["dates"],
            "style": {
                "color": line["color"],
                "weight": line["weight"] if "weight" in line else 5,
            },
        },
    }
    for line in lines
]

folium.plugins.TimestampedGeoJson(
    {
        "type": "FeatureCollection",
        "features": features,
    },
    period="PT1M",
    add_last_point=True,
).add_to(m)
st_folium_map = st_folium(
    m, 
    width=1280, 
    height=720
)

Best, Peter

[peterlovei]

Update: I discovereed that original error ValueError: Cannot compute bounds of non-embedded GeoJSON. was due to the first argument passed to folium.plugins.TimestampedGeoJson. (Although it did not cause error before with using solely folium)

NO ERROR

folium.plugins.TimestampedGeoJson(
    {"type": "FeatureCollection", "features": features},
    period="P1M",
    add_last_point=True,
    auto_play=False,
    loop=False,
    max_speed=1,
    loop_button=True,
    date_options="YYYY/MM/DD",
    time_slider_drag_update=True,
    duration="P2M",
).add_to(m)

ERROR

folium.plugins.TimestampedGeoJson(
    features,
    period="P1M",
    add_last_point=True,
    auto_play=False,
    loop=False,
    max_speed=1,
    loop_button=True,
    date_options="YYYY/MM/DD",
    time_slider_drag_update=True,
    duration="P2M",
).add_to(m)

However, I still face the map loading problem (with st_folium), only static maps are rendered.