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

ursudio
134 Stars 28 Forks MIT License 62 Commits 2 Opened issues

Description

Leaflet plugin for @pyalot's webgl heatmap library.

Services available

!
?

Need anything else?

Contributors list

# 44,729
HTML
Shell
tour
leaflet
23 commits
# 459,652
imagery
heatmap
Shell
CSS
2 commits
# 86,357
golang
angular...
Compose...
bot-fra...
1 commit

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

Screenshot

Installation

via npm:

bash
npm install leaflet-webgl-heatmap 

Usage

Set up your map

var base = L.tileLayer( tileURL );
var map = L.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

heatmap.setData(dataPoints)
.

Add heatmap to map

map.addLayer( heatmap );

Options

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

Methods

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

License

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