I was just wondering if there are any plans to upgrade this plugin to work with Leaflet 1.0.0?

Getting this error, it works with 0.7.7 as expected.

...able()},whenReady:function(t,e){return this._loaded?t.call(e||this,{target:this}...```

Hi thank you for your work ! It is really beautiful.

I wanna define my own color scale base on the intensity of each point.

Is this possible ?

how to import and create a new layer?
any examples on that?
using leaflet.js 1.5.1

When i use heatmap on the tablet or mobile with touchscreen, i can't drag it with a swipe.

Is this possible?

I think this will be more intuitive with the Leaflet code (animating zoom-ins, not having to refresh as much...).

Can we get onStart and onEnd events? In cases where a user's machine is under load or perhaps there are
millions of points, the heatmap takes a bit longer to render. Being able to open a loading modal would be nice for users.

Hello, im trying to use your plugin on an ionic app thats using leaflet.js and openstreetmap. I am getting an error:

TypeError: Cannot read property 'extend' of undefined

Could you help me with this?

On https://github.com/ursudio/webgl-heatmap-leaflet/blob/master/js/webgl-heatmap-leaflet.js#L1-L5

You have Creative Commons, but the overall repository is MIT. Can you clarify if you're truly using creative commons for this one file and the rest of the project is MIT licensed?

There is no js files

$ npm install leaflet-webgl-heatmap --save 
[email protected] /home/example
└── [email protected]

$ ls node_modules/leaflet-webgl-heatmap/
LICENSE.md  package.json  README.md

I would like to be able to redraw a heatmap tilelayer. Not sure why it's not working, I was expeting the redraw method to be available.
example:

heatmap = new L.TileLayer.WebGLHeatMap({
size: heatmapSize,
});

After some event ...
heatmap.redraw();
...

I am getting: "heatmap.redraw is not a function"

I want the heatmap to update without zooming, looking at the source it seems I should be able to call update() but this fails

map.heatmap = new L.TileLayer.WebGLHeatMap({
        size: 3000, 
        autoresize: true,
        opacity: 0.8
 });

map.heatmap.update();

Uncaught TypeError: Cannot read property '_resizeRequest' of undefined

It seems like the scope of this inside of _plot is causing some issues.

I am trying to find a way to create a dynamic legend for layers that are rendered with the heatmap plugin.
Maybe this is a feature request.
Is there a way to capture the WebGL canvas color attributes so that I can build a legend?

webgl-heatmap.js has method
imageData.data.set(new Uint8ClampedArray([0, 0, 0, 0, 255, 255, 255, 255, 0, 0, 0, 0, 255, 255, 255, 255]));

which fails in IE and Android browsers because this object is not supported
http://compatibility.shwups-cms.ch/de/home?&property=Uint8ClampedArray.

On Feb 2, Leaflet introduced a change to Renderer.js' onRemove() function that calls this._destroyContainer();. You can see the commit detail here. I think the authors assumed that plugins would inherit from SVG or Canvas rather than Renderer directly, as Renderer does not have a _destroyContainer function (but the two subclasses each have one).

At that point (I believe), plugins inheriting from Renderer began to fail when onRemove() is called. In any case, that's what started happening to me when I upgraded Leaflet to 1.1.0. I was able to resolve the problem by adding the following code to src/leaflet-webgl-heatmap.js (copied mostly verbatim from Leaflet's Canvas.js current source code, although I had to call "L.DomUtil" and "L.DomEvent" as Leaflet has since removed calls to L in its modules) and then running "gulp build":

_destroyContainer: function () {
    delete this._ctx;
    L.DomUtil.remove(this._container);
    L.DomEvent.off(this._container);
    delete this._container;
},

I am using this plugin in an Angular2 project, so I am not sure if folks using JavaScript rather than TypeScript are seeing this (the plugin failed with a TypeError).

I'm posting this code rather than making a PR as I'm not sure this is the right long term fix. Maybe the plugin should inherit from L.Canvas?

Hope this helps someone!

when i create heatmap, there is a error "window.createWebGLHeatmap is not a function". how to fix it>

I have tried to run the example on my map but I get the following error in Chrome:

webgl-heatmap-leaflet.js:143 Uncaught ReferenceError: options is not defined
at _scalepx (webgl-heatmap-leaflet.js:143)
at e.draw (webgl-heatmap-leaflet.js:111)
at e._update (webgl-heatmap-leaflet.js:84)
at e.s (leaflet.js:5)
at e.fire (leaflet.js:5)
at e.invalidateSize (leaflet.js:5)
at e. (leaflet.js:5)

seems that the scope is not correct but I don't know why it works on your page and not in my one. Here's my code:

var mymap = L.map('mapid').setView([48.7807626,9.0017757], 9);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw', {
maxZoom: 18,
id: 'mapbox.streets'
}).addTo(mymap);

var heatmap = L.webGLHeatmap({
size: 50,
units: 'px',
alphaRange: 0.4
});
var dataPoints = [
[50.880509986, -114.081560859],
[50.880509986, -114.081560859],
[50.880509986, -114.081560859],
[44.53666687, -64.243164062],
[44.639999389, -63.613998413],
[44.676998138, -63.612499237],
[44.679332733, -63.610500335],
[50.970165252, -114.06916809],
[34.104833333, -118.323],
[50.579812463, -113.872800754],
[51.055080414, -114.056716919],
[44.648111204, -63.577139396],
[44.642322778, -63.579243422],
[44.643284609, -63.568868637],
[44.64246, -63.578947],
[44.718542104, -63.683588477],
[44.718418471, -63.683593422],
[44.718461344, -63.683637427],
[44.718412771, -63.683782686],
[44.718390978, -63.683674224],
[44.718426894, -63.683400638],
[44.718389102, -63.683563615],
[44.643199507, -63.568366686],
[44.718326605, -63.683847729],
[44.7157814, -63.686402518],
[44.718411484, -63.683636892],
[44.718421013, -63.683612197],
[44.718408703, -63.683583046],
[44.718479198, -63.683512285],
[44.718442462, -63.683621787],
[44.70944854, -63.693567955],
[44.718409395, -63.683602933],
[44.718338801, -63.684254335],
[44.718401488, -63.683540924],
[44.718386997, -63.683626363],
[44.718386997, -63.683626363],
[44.718386997, -63.683626363],
[44.717759553, -63.677263503],
[44.642686, -63.578319],
[44.718392151, -63.683523433],
[44.718386997, -63.683626363],
[44.718355229, -63.683762904],
[44.718500027, -63.683851836],
[44.718399905, -63.683797438],
[44.718426224, -63.683320424],
[44.647744146, -63.575160526],
[44.642261709, -63.579683304],
[44.649856, -63.586578],
[44.647437, -63.580284],
[44.718402168, -63.683638014],
[44.718503631, -63.68352226],
[44.718453507, -63.683740692],
[44.718406694, -63.683453947],
[44.718592538, -63.683768395],
[44.718500529, -63.68364891],
[44.718374717, -63.683847142],
[44.718296221, -63.683787212],
[44.718322533, -63.683521553],
[44.718461344, -63.683620161],
[44.718429676, -63.683640406],
[44.71843339, -63.683663914],
[44.718477647, -63.683813028],
[44.718398396, -63.683542209],
[44.718504084, -63.683465428],
[44.718575212, -63.683621166],
[44.718387784, -63.683589918],
[44.718244917, -63.683892581],
[44.718385838, -63.683624545],
[44.718397606, -63.683539988],
[44.718408668, -63.683616944],
[44.718401751, -63.683572637],
[44.718407164, -63.683572267],
[44.718424391, -63.683666915],
[44.718339513, -63.683889806],
[44.718404213, -63.683593903],
[44.718376712, -63.683603459],
[44.718365334, -63.683625158],
[44.718406172, -63.683623469],
[44.718357136, -63.683653095],
[44.71841303, -63.683625434],
[44.718367131, -63.683636757],
[44.718337501, -63.683804059],
[44.718377546, -63.683478126],
[44.718491649, -63.68370368],
[44.718393032, -63.683595266],
[44.718385449, -63.683592853]
];
heatmap.setData(dataPoints);
heatmap.multiply(2);
mymap.addLayer(heatmap);

Hello.

I made an integration with leaflet, the purpose of the overall integration is to print a heatmap that will mark the points located on a ground overlay (this overlay is referred from a kml file) . the problem is that the heatmap is shown behind the overlay layer thus not showing the needed information.

Small tip, you may want to update the leaflet version you are using to something more recent.

Hello,

how could I have a fixed size spot (in pixel) so when I zoom the heatmap are refresh and show me a more detailled aspect.
I don't want that when I zoom, I want that

EDIT : reformulated my issue

Hi,

first of all: great lib.

In your example I get the following error:

(index):190 Uncaught TypeError: L.TileLayer.WebGLHeatMap is not a constructor

see:

how many points can you add to the heatmap?

On https://github.com/ursudio/webgl-heatmap-leaflet/blob/master/js/webgl-heatmap-leaflet.js#L1-L5

You have Creative Commons, but the overall repository is MIT. Can you clarify if you're truly using creative commons for this one file and the rest of the project is MIT licensed?

for example:
The thermal map of the temperature (-50℃ ~40℃) corresponds to the color: blue-white to red

@ursudio @bozdoz

It would be nice if this library was compatible with L.CRS.Simple coordinates. It looks like the heatmap scales with lat/long somehow so it doesnt really work too well. See image below. (I am using for indoor mapping) The code for the three points is below as well.

heatmap = new L.TileLayer.WebGLHeatMap(
{
size:1000000
opacity:0.7
alphaRange:0.001
gradientTexture:false
}
)

  heatmap.addDataPoint(50,0,100)
  heatmap.addDataPoint(0,0,100)
  heatmap.addDataPoint(70,0,100)