Wednesday, October 8, 2014

An Introduction to Leaflet, Part III: Comparing Heatmap Plugins

A great advantage and disadvantage of free and open source GIS (FOSS GIS) is the variety of options out there.  In this post, we will take a look at four different heatmap plugins for Leaflet.  If you want to skip to the final product, visit:
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:
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.
Overall Impressions

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:

See also:
Leanpub: Leaflet Tips and Tricks
A related post in Stackoverflow

No comments:

Post a Comment