to see the final comparison.
We will take a look at four different plugins listed on Leaflet's plugin page:
 |
| Screenshot of the comparison site: http://webmapexamples.net/leaflet/heatmap/heatcompare.html |
I used QGIS to generate 500 random points within the state of New Hampshire.
Each plugin references point data and intensity/weight values in slightly different way. For the three plugins I got to work, here are how points should be formatted.
- Heatmap.js: [{lat: , lng: , count: },...
- HeatCanvas: [0,0, 1] point at 0,0 with count 1
- Leaflet-div-heatmap: [{lat: , long: , value: },...
- WebGL Heatmap: N/A
Performance: Heatmap.js was fastest. (Although I did not have a chance to use WebGL Heatmap. HeatCanvas was slowest rendering.
Ease of Use: Heatmap.js was the clear winner! Leaflet-div-heatmap required more knowledge of JavaScript and I ended up editing the actual plugin code. WebGL required understanding that!
Documentation: Heatmap.js and HeatCanvas were good. For Heatmap js be sure to visit the website separate from github. Leaflet-div-heatmap had poor documentation.
Other considerations: I couldn't quite get the WebGL plugin to work - when adding point data. However, I was able to get a demo working and be able to interactively change density using my mouse with another *.html file. However, WebGL does boast performance for large datasets, so I may return to it a later date. The Leaflet-div-heatmap uses sort of collect events/morph feature, so it is different from the rest, be sure to zoom in on the map. This will become clearer when you try it... Also don't forget to check out each plugin and their array of options!
Heatmap Comparison webpage:
http://webmapexamples.net/leaflet/heatmap/heatcompare.html
See also:
Leaflet.heat
SimpleHeat
Leanpub: Leaflet Tips and Tricks
A related post in Stackoverflow
No comments:
Post a Comment