HeatmapWithTime is visualized in the back of overlay image

[JavierParada]

HeatMapWithTime is visualized in the back of the overlay image, even after including in my html.

According to https://github.com/python-visualization/folium/issues/1201, including this 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).