Leaflet Heatbin

MOVED TO: https://bitbucket.csiro.au/projects/ONACI/repos/le
Alternatives To Leaflet Heatbin
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
3 years ago23October 11, 20186mitPython
A package for parallelizing the fit and flexibly scoring of sklearn machine learning models, with visualization routines.
a day ago29otherJulia
Generic Mapping Tools Library Wrapper for Julia
6 years ago7mitCoffeeScript
Grid visualization of Gravatars for an organization
13a month agoMarch 25, 20186otherJulia
Julia package for writing VTK XML files
Popo127214 years ago9October 05, 2018JavaScript
PoPo is the grid layout tool, the best choice for runtime layout.
3 days ago20October 01, 20214eupl-1.2JavaScript
visualization of gridded statistics
3 years ago23apache-2.0JavaScript
Kibana mapping visualization
2 years ago6otherR
Generates a visualization of binary classifier performance as a grid of diagonstic plots with just one function call
22 years ago7April 23, 2021R
create meme
2 years ago6January 27, 2021mitJavaScript
Leaflet plugin for Visualizing Discrete Global Grid Systems
Alternatives To Leaflet Heatbin
Select To Compare

Alternative Project Comparisons

leaflet-heatbin NPM version NPM Downloads

ALPHA plugin for heatmap.js to add heatmaps to leaflet.


This is an enhanced version of leaflet-heatmap that provides greater control over how data points are grouped to create a heatmap.


Most heatmaps provide little control over how data is grouped beyond a pixel radius.

For many use-cases that is not enough - we often need to know exactly what data is in each cluster.


This plugin provides two ways of doing this better, you can either:

  1. Define the radius in meters instead of pixels; and/or
  2. Define a grid of cells which are used for value binning.

cell binning example

// 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*
  // plus any options from heatmap.js core
  radius: 20,
  useLocalExtrema: true,
  onExtremaChange: function(data) {
const layer = L.heatBin(options);

meter radius example

// define options
const options = {
  fixedRadius: true,
  radiusMeters: 100
const layer = L.heatBin(options);

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.

const points = [
    lat:   '<lat>',
    lng:   '<lng>'',
    value: 10,
    uid:   '<uid>' // optional

install, use

npm install leaflet-heatbin --save

This plugin has external dependencies:

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

public 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


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 to true to see the grid at work:



MIT License (MIT)

Popular Visualization Projects
Popular Grid Projects
Popular User Interface Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Leaflet Plugin