Leafet heatmap that provides binning of values using formally defined grid cells
ALPHA plugin for heatmap.js to add heatmaps to leaflet.
For many use-cases that is not enough - we often need to know exactly what data is in each cluster.
1. Define the radius in meters instead of pixels; and/or
2. Define a grid of cells which are used for value binning.
javascript
// define options
const options = {
heatBin: {
enabled: true,
cellSizeKm: 0.25, // e.g. bin values into 250m grid cells
maxFactor: 0.8, // heatmap max value will be multiplied by maxFactor
showBinGrid: false // a debugging option, plots the binning grid on the map*
staticMax: 100 // define a fixed number to use for scale max, default false
minThreshold: 10 // ignore heatbin cells below this value, default false
},
// plus any options from heatmap.js core
radius: 20,
useLocalExtrema: true,
onExtremaChange: function(data) {
console.log(data);
},
pane: 'myCustomPane' // name of an existing leaflet pane to add the layer to, default: 'overlayPane'
};
const layer = L.heatBin(options);
layer.setData(myData);
`meter radius example
`javascript
// define options
const options = {
fixedRadius: true,
radiusMeters: 100
};
const layer = L.heatBin(options);
layer.setData(myData);
`data format
Essentially the same as vanilla
heatmap.js, with the addition of an optional param:
uid.
When uid is specified and heatBin is enabled, a data point is only counted once per cell, per uid.`javascript
const points = [
{
lat: '',
lng: '',
value: 10,
uid: '' // optional
}
]
`install, use
npm install leaflet-heatbin --saveThis plugin has external dependencies:
- heatmap.js
- turf
To use this plugin, you either need to:
- load these dependencies yourself (prior to loading
leaflet-heatbin); or
- use the standalone version with dependencies bundled, in dist/leaflet-heatbin-standalone.jspublic methods
|method|params|description|
|---|---|---|
|
isActive||check if the particle layer is currently active on the map|
|setData|data: {Object}|update the layer with new data object|
|update||update the layer/trigger redraw|
|getLatLngBounds|data: {Object}, optional|Returns leaflet LatLngBounds of supplied, or layer data|
|getGridInfo||Get information about the grid used for binning|binning?
When binning is enabled, a grid of cells is generated using
turf, which is then used to cluster data points by grid cell indices.If you're interested to see how your data is being gridded, you can set the
showBinGrid`