Search code examples
htmldictionarygeojsonfolium

Folium TimestampedGeoJson Flashing All Values at Once Instead of Over Given Time Period


I'm trying to plot a path over a set time period using TimestampedGeoJson in folium and I've got just about everything down except that when I run the code and get into the html map, I see the first data point and then all the other points flash up. It seems like the 1600 or so other longitude/latitude pairs are attributed to only one other time value - even though there are the same number of all of these values. Right now it looks like this: Single small black dot in starting location at starting time And after it plots what is supposed to be the next point, it jumps to: All points plotted in very next time stamp

Essentially it seems like the first point is ok - it plots the first longitude/latitude pair at the first time value, but then it just takes all the remaining long/lat pairs and plots them in one moment at the last time value for some reason.

Here is the code block I am working with to create the geojson structure and then add that data to my map.

data = json.load(open("test2.json"))
my_map = folium.Map(starting_coords, zoom_start = 13)
TimestampedGeoJson({
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [d["lon"], d["lat"]],
            },
            "properties": {
                "style": {"color" : ''},
                "icon": "circle",
                "iconstyle":{
                    "fillOpacity": 0.8,
                    "stroke": "true",
                    "radius": 2
                },
                "times": [d["aoe"]]
            }
        } for d in data
    ]
}).add_to(my_map)

my_map.save("test.html")
webbrowser.open("test.html")

test2.json looks like this (just as an example, the actual file has 1600 or so entries):

[
    {
        "lat": 37.79185,
        "lon": -122.4159,
        "aoe": 1695149258521.0

    },
    {
        "lat": 37.79185,
        "lon": -122.4159,
        "aoe": 1695149293569.0
    },
    {
        "lat": 37.7911,
        "lon": -122.41661,
        "aoe": 1695149375911.0
    },
    {
        "lat": 37.79064,
        "lon": -122.42045,
        "aoe": 1695149446910.0
    }
]

I've tried changing around quotes and double quotes based on errors I've been getting and the code above at least doesn't give me any errors in VSC. But obviously it's still flashing at once all the values that I want coming up individually.

So is there some error I'm not seeing or something to do differently so that instead of having everything come up at once, each point is displayed one at a time according to the appropriate time stamp?


Solution

  • So it turns out the reason all values are displayed at once is because of the default step size of the TimestampedGeoJson function. By default it is set to 1 day steps so if your data is dealing with timestamps all recorded on the same day, everything will appear at once as soon as you start the program. To fix this, you just need to define the step size at the bottom of your function like this:

    data = json.load(open("test2.json"))
    
    my_map = folium.Map(starting_coords, zoom_start = 13)
    TimestampedGeoJson({
        "type": "FeatureCollection",
        "features": [
            {
                "type": "Feature",
                "geometry": {
                    "type": "Point",
                    "coordinates": [d["lon"], d["lat"]],
                },
                "properties": {
                    "style": {"color" : ''},
                    "icon": "circle",
                    "iconstyle":{
                        "fillOpacity": 0.8,
                        "stroke": "true",
                        "radius": 5
                    },
                    "times": [d["times"]]
                }
            } for d in data
        ]
    },
    loop = False, period = 'PT10S').add_to(my_map)
    
    my_map.save("test.html")
    webbrowser.open("test.html")
    

    Here you can see at the bottom the period = 'PT10S' line, which tells the function that you want your step size to be 10 seconds - meaning every time the slider advances, it will do so by 10 seconds instead of the default 1 day. You could do PT1H or PT1M for hours or minutes as well.