Skip to content

ursudio/leaflet-webgl-heatmap

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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:

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