https://github.com/ursudio/leaflet-webgl-heatmap
Leaflet plugin for @pyalot's webgl heatmap library.
https://github.com/ursudio/leaflet-webgl-heatmap
heatmap leaflet-plugins webgl-heatmap-leaflet webgl-heatmap-library
Last synced: 5 months ago
JSON representation
Leaflet plugin for @pyalot's webgl heatmap library.
- Host: GitHub
- URL: https://github.com/ursudio/leaflet-webgl-heatmap
- Owner: ursudio
- License: mit
- Created: 2013-11-07T20:49:33.000Z (almost 12 years ago)
- Default Branch: master
- Last Pushed: 2017-06-28T18:44:14.000Z (over 8 years ago)
- Last Synced: 2025-04-12T13:50:53.915Z (6 months ago)
- Topics: heatmap, leaflet-plugins, webgl-heatmap-leaflet, webgl-heatmap-library
- Language: JavaScript
- Homepage: https://ursudio.github.io/leaflet-webgl-heatmap/
- Size: 868 KB
- Stars: 147
- Watchers: 11
- Forks: 30
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
WebGL Heatmap Leaflet Plugin
============================
[](https://travis-ci.org/ursudio/leaflet-webgl-heatmap)
A Leaflet plugin for [@pyalot](https://github.com/pyalot)'s [webgl heatmap library](https://github.com/pyalot/webgl-heatmap).
As [@pyalot](https://github.com/pyalot) explains in his post, [High Performance JS heatmaps](http://codeflow.org/entries/2013/feb/04/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](http://ursudio.github.io/leaflet-webgl-heatmap/)
## Installation
via npm:
```bash
npm install leaflet-webgl-heatmap
```
## Usage
### Set up your map
```javascript
var base = L.tileLayer( tileURL );
var map = L.map('mapid', {
layers : [base],
center : [44.65, -63.57],
zoom: 12
});
```
### Initialize Heatmap
```javascript
var heatmap = new L.webGLHeatmap({
size: diameter-in-meters
});
```
OR in pixels (doesn't scale with zoom levels):
```javascript
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]...]`
```javascript
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
```javascript
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