HeatmapWithTime is visualized in the back of overlay image

HeatMapWithTime is visualized in the back of the overlay image, even after including <style>.leaflet-heatmap-layer{z-index:300 !important}</style> in my html.

According to https://github.com/python-visualization/folium/issues/1201, including this <style>.leaflet-heatmap-layer{z-index:300 !important}</style> in my html should bring the Heatmap to the front. However, that did not work.

My map looks like this:

Basemap

m = folium.Map([35, 41], tiles='stamentoner', zoom_start=6)

Land Use Changes

folium.raster_layers.ImageOverlay(
image=dataimage,
bounds=[[ymin, xmin], [ymax, xmax]],
colormap = lambda x: (x, x, x),
name= 'MODIS Transitions 2009 vs. 2017',
opacity=.8,
zindex=1,
overlay=False,
mercator_project=True).add_to(m)

UCDP HeatMap

hm = HeatMapWithTime(data=list(data.values()), # coordinates
index=list(data.keys()), # years
name = 'UCDP events',
radius=10,
auto_play=False,
max_opacity=1).add_to(m)

folium.LayerControl().add_to(m)
m.save('html/index.html')

My html header is attached:
index.txt

Commencez par examiner le fichier index.txt joint et reproduire la carte en utilisant l’exemple HeatMapWithTime et ImageOverlay de l’issue. Suivez la manière dont ces couches sont rendues et ordonnées dans le html enregistré, puis vérifiez que la heatmap apparaît devant l’overlay tout en veillant à ce que LayerControl et la configuration existante de la carte continuent de fonctionner.