search

python-visualization / folium

Python Data. Leaflet.js Maps.
https://python-visualization.github.io/folium/
MIT License
6.94k stars 2.23k forks source link

HeatmapWithTime is visualized in the back of overlay image #1400

Open JavierParada opened 4 years ago

JavierParada commented 4 years ago

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 commented 4 years ago
Screen Shot 2020-10-20 at 1 19 46 PM

The HeatMap is shown behind the image.

Dakcser commented 1 year ago

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).

Sieppaa