Need help with leaflet-webgl-heatmap?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

134 Stars 31 Forks MIT License 62 Commits 2 Opened issues


Leaflet plugin for @pyalot's webgl heatmap library.

Services available


Need anything else?

Contributors list

WebGL Heatmap Leaflet Plugin

MIT License   Leaflet   Build Status

A Leaflet plugin for @pyalot's webgl heatmap library.

As @pyalot explains in his post, High Performance JS heatmaps, sometimes there is a need to be able to draw hundreds of thousands of data points to a map (and not have your browser crash due to lag).

We used his library to create a WebGL alternative to Leaflet's existing heatmap plugins.

See the example



via npm:

npm install leaflet-webgl-heatmap 


Set up your map

var base = L.tileLayer( tileURL );
var map ='mapid', {
    layers : [base],
    center : [44.65, -63.57],
    zoom: 12 

Initialize Heatmap

var heatmap = new L.webGLHeatmap({
    size: diameter-in-meters

OR in pixels (doesn't scale with zoom levels):

var heatmap = new L.webGLHeatmap({
    size: diameter-in-pixels,
    units: 'px'

Add Data

You should have an array of arrays in format:

[[lat, lng]...]
or be explicit with the point intensities:
[[lat, lng, intensity]...]
var dataPoints = [[44.6674, -63.5703, 37], [44.6826, -63.7552, 34], [44.6325, -63.5852, 41], [44.6467, -63.4696, 67], [44.6804, -63.487, 64], [44.6622, -63.5364, 40], [44.603, - 63.743, 52]];

With this you can add the whole dataset with


Add heatmap to map

map.addLayer( heatmap );


  • size (in meters or pixels)
  • units (m or px)
  • opacity (for the canvas element)
  • gradientTexture (image url or image)
  • alphaRange (adjust transparency by changing to value between 0 and 1)


  • multiply (alter the intensity values of all points by a given number)


  • MIT: see mit-license

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.