leaflet-webgl-heatmap

by ursudio

Leaflet plugin for @pyalot's webgl heatmap library.

129 Stars 28 Forks Last release: almost 4 years ago (v0.2.1) MIT License 62 Commits 7 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

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.