Folium HeatMapWithTime html file generated is blank

Question

I created a self-contained code to create a HeatMapWithTime map but it shows up as a blank file. This code is run on Jupyter and the output is a 14KB file and I've tried to open it in Chrome, Safari, Firefox but it is still blank.

import folium
import pandas as pd
import numpy as np
from folium.plugins import HeatMapWithTime

# Generate dummy data
latitudes = np.random.uniform(low=45.523, high=45.524, size=50)
longitudes = np.random.uniform(low=-122.675, high=-122.676, size=50)
times = np.sort(np.random.uniform(low=1580000000, high=1600000000, size=50))
data = {'latitude': latitudes, 'longitude': longitudes, 'time': times}

# Create a pandas dataframe from the dummy data
df = pd.DataFrame(data)
df['time'] = pd.to_datetime(df['time'], unit='s')

# Create a base map
map = folium.Map(location=[45.523, -122.675], zoom_start=13)

# Create a heat map with timeline
HeatMapWithTime(data=df[['latitude', 'longitude', 'time']].values.tolist(),
                           index=df['time'].dt.strftime("%Y-%m-%d %H:%M:%S"),
                           auto_play=True,
                           max_opacity=0.8).add_to(map)

# Save the map to an html file
map.save("heatmap_with_timeline.html")

Folium version: 0.14.0 Python version: 3.9.12

Answer 1

To begin with, the target data for the heatmap is time-series data in date format. The sample data itself was raw data, but it was converted to date format. Also, I think the index of the time animation of the heatmap also needs to be in list format. Finally, the sample data is a latitude/longitude and heatmap value for one time series. Since this folium heatmap is a densitiy heatmap, multiple groups of data may be necessary. To create the data to draw the heatmap, utilizing your sample data, I have added an array of 50 latitude/longitude and heatmap values for each time series index in a loop process for 50 indexes. For data structures and examples, please refer to the following references. HeatMapWithTime Plugin

import folium
import pandas as pd
import numpy as np
from folium.plugins import HeatMapWithTime

# Generate dummy data
times = np.sort(np.random.uniform(low=1580000000, high=1600000000, size=50))

data = []
for i in range(len(times)):
    latitudes = np.random.uniform(low=45.423, high=45.524, size=50)
    longitudes = np.random.uniform(low=-122.575, high=-122.676, size=50)
    value = np.random.uniform(0.0, 20.0, 50)
    row = []
    for lat, lon ,v in zip(latitudes,longitudes,value):
        row.append([lat, lon, v])
    data.append(row)

index_time = pd.to_datetime(times, unit='s')
index_time = index_time.strftime("%Y-%m-%d %H:%M:%S").tolist()

# Create a base map
m = folium.Map(location=[45.523, -122.675], tiles="stamentoner", zoom_start=11)

# Create a heat map with timeline
hm = HeatMapWithTime(data,
                           index=index_time,
                           auto_play=True,
                           max_opacity=0.8)
hm.add_to(m)
# Save the map to an html file
#map.save("heatmap_with_timeline.html")
m