Folium: HeatMapWithTime can not work

[wangchenwc]

Please add a code sample or a nbviewer link, copy-pastable if possible

# Your code here
HeatMapWithTime can not work
version python:3.7.4

Problem description

https://nbviewer.jupyter.org/github/python-visualization/folium/blob/master/examples/HeatMapWithTime.ipynb
this demo can not work

Expected Output

Output of folium.__version__

'0.10.0'

[Vulmest]

I have been using the HeatMapWithTime for awhile and it recently failed as well, here the console when loading up the HTML page:

Uncaught ReferenceError: nezasa is not defined
at leaflet.timedimension.min.js:18
at leaflet.timedimension.min.js:18
HMwTime.html:41 Uncaught TypeError: Cannot read property 'Layer' of undefined
at HMwTime.html:41
HMwTime.html:483 Uncaught TypeError: L.timeDimension is not a function
at HMwTime.html:483

EDIT:
I am also using the workaround to create additional HeatMapWithTime layers done by @Conengmo in https://github.com/python-visualization/folium/issues/1062

[farisnanosoft]

Got the same error for HeatMapWithTime.
The javascript web link inside the html file are placed by folium leaflet.
Looks like there was recent update to leaflet timedimension.

https://rawcdn.githack.com/socib/Leaflet.TimeDimension/master/dist/leaflet.timedimension.min.js
_Leaflet TimeDimension v1.1.1 - 2019-11-05_

Replace with below url in the html to fix the issue.
https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet.timedimension.min.js

[Conengmo]

Thanks for looking into this @farisnanosoft. If fixing the version of Leaflet Timedimension to v1.1.0 fixes the issue, then let's do that for now. Do you want to make a PR?

[wangchenwc]

Got the same error for HeatMapWithTime.
The javascript web link inside the html file are placed by folium leaflet.
Looks like there was recent update to leaflet timedimension.

https://rawcdn.githack.com/socib/Leaflet.TimeDimension/master/dist/leaflet.timedimension.min.js
_Leaflet TimeDimension v1.1.1 - 2019-11-05_

Replace with below url in the html to fix the issue.
https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet.timedimension.min.js

em，How to operate？

[Conengmo]

Link to a related issue on the TimeDimension repo: https://github.com/socib/Leaflet.TimeDimension/issues/181

[wangchenwc]

Got the same error for HeatMapWithTime.
The javascript web link inside the html file are placed by folium leaflet.
Looks like there was recent update to leaflet timedimension.
https://rawcdn.githack.com/socib/Leaflet.TimeDimension/master/dist/leaflet.timedimension.min.js
_Leaflet TimeDimension v1.1.1 - 2019-11-05_
Replace with below url in the html to fix the issue.
https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet.timedimension.min.js

em，How to operate？

oh, i fix it, replace /user/py3/lib/python3.7/site-packages/folium/plugins/heat_map_withtime.py leaflet.timedimension.min.js url

[joselinceron]

I am a beginner in python. How can I fix this problem. Thanks

[joselinceron]

thanks farisnanosoft it works

[Conengmo]

I looked into this a bit. The developer of TimeDimension gave a suggestion in https://github.com/socib/Leaflet.TimeDimension/issues/181, that the iso8601-js-period lib has to be loaded before loading TimeDimension. This is also listed in their basic usage example. Strange enough we were not loading that lib in our heatmap with time plugin. Adding that lib seems to solve this issue. I don't know why it worked with TimeDimension v1.1.0 without it. But I'd prefer if we can keep up with changes in TimeDimension.

[Conengmo]

Could somebody please verify that the change in https://github.com/python-visualization/folium/pull/1228 indeed solves the issue for them? I already tested but would be nice to get someone else to confirm it before we close this.

[bielfrontera]

Hi @Conengmo!
Yes, the change in #1228 should solve the problem.
The library iso8601-js-period was being loaded in the other two plugins with TimeDimension (TimestampedGeoJson and TimestampedWmsTileLayers) but not in HeatMapWithTime.
and now it needs iso8601-js-period
HeatMapWithTime was working with v1.1.0 because it doesn't need iso8601-js-period (it does not parse any time period, it uses an array of times). However, in v1.1.1 we have changed how the library is packaged (see https://github.com/socib/Leaflet.TimeDimension/pull/129 ) and now it checks for the dependencies when loading the library.

[farisnanosoft]

Could somebody please verify that the change in #1228 indeed solves the issue for them? I already tested but would be nice to get someone else to confirm it before we close this.

Hi @Conengmo,

Yes it works.

[Conengmo]

Thanks for checking! I merged the fix so master should now be good. We'll do a patch release soon, but first I want to check #1227.

Thanks @bielfrontera for the info. Good that we're up to date with TimeDimension's requirements now.

[farisnanosoft]

@Conengmo,

Although it works, below error is thrown loading iso8601-js-period lib before timedimension
Uncaught Error: Map container is already initialized.
at i._initContainer (leaflet.js:5)
at initialize (leaflet.js:5)
at new i (leaflet.js:5)
at Object.t.map (leaflet.js:5)

[ruojiruoji]

Got the same error for HeatMapWithTime.
The javascript web link inside the html file are placed by folium leaflet.
Looks like there was recent update to leaflet timedimension.
https://rawcdn.githack.com/socib/Leaflet.TimeDimension/master/dist/leaflet.timedimension.min.js
_Leaflet TimeDimension v1.1.1 - 2019-11-05_
Replace with below url in the html to fix the issue.
https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet.timedimension.min.js

em，How to operate？

oh, i fix it, replace /user/py3/lib/python3.7/site-packages/folium/plugins/heat_map_withtime.py leaflet.timedimension.min.js url

I did the exactly the same thing, but I still can't solve the issue... I also add the following before the timedimension.min.js :

    figure.header.add_child(
        JavascriptLink('https://rawcdn.githack.com/nezasa/iso8601-js-period/master/iso8601.min.js'),  # noqa
        name='iso8601')

[Conengmo]

We just released v0.10.1 which should fix this issue.

[ying951]

I have been using the HeatMapWithTime on Apr 18, but it failed on Apr 19 after I install imageio and ffmpeg. The web page shows nothing without base map. I don't kown if it's becuase I accidentally update it? I then uninstalled all the newly installed plugins but still couldn't solve this problem.
I used farisnanosoft's method to replace the URL for leaflet.timedimension.min.js. The slider appeared but still no heatmap.
I also try to visit the URL: https://rawcdn.githack.com/nezasa/iso8601-js-period/master/iso8601.min.js and https://rawcdn.githack.com/python-visualization/folium/master/folium/templates/pa7_hm.min.js, none of them can be accessed.
My python version is 3.6.9. Please help me and gvie a solution.

[yumaloop]

sed -e \
's/https:\/\/rawcdn.githack.com\/socib\/Leaflet.TimeDimension\/master\/dist\/leaflet.timedimension.min.js \
/https:\/\/cdn.jsdelivr.net\/npm\/[email protected]\/dist\/leaflet.timedimension.min.js/g' \
source.html > target.html