HeatmapWithTime is visualized in the back of overlay image

[JavierParada]

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 #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

[JavierParada]

The HeatMap is shown behind the image.

[Dakcser]

I quess better late then never. If anybody else has problem with HeatMapWithTime drawing data behind ImageOverlay. Instead of using above mentioned line of HTML code which tries to push heatmap layer foward.

You can instead push ImageOverlay back with code <style>.leaflet-image-layer{z-index:-1 !important}</style> (Index -1 sets image back of the stack).