Heatmap crashes with latest leaflet version 0.7 about heatmap.js HOT 11 CLOSED

to fix it replace _createTileProto in heatmap-leaflet.js with:

_createTile: function () {
    var tile = L.DomUtil.create('div', 'leaflet-tile');

    var tileSize = this.options.tileSize;
    tile.style.width = tileSize+"px";
    tile.style.height = tileSize+"px";
    tile.width = tileSize;
    tile.height = tileSize;

    tile.onselectstart = tile.onmousemove = L.Util.falseFn;
    return tile;
},

from heatmap.js.

This works very nicely. Thanks! Sadly the seaming issue (#79) remains.

from heatmap.js.

Jup.. this works for me. Thanks.

But get some small "bug" when I reproduce the example from the heatmap js page.
Using leaflet 0.7.2

When zooming in/out then the previous heatmap images linger for a while before being removed.
They are on top of each other.. for a second or so.
Is it possible to flush it somehow? Force a cleanup?

It's not happening on the example page that is using older leaflet.

from heatmap.js.

@msgoloborodov trick made the heatmap finally render after a day of trying to figure out how to make it work.

I do have a problem with tiles not merging correctly. Any thoughts?

from heatmap.js.

@dwa012 You probably don't have padding on the tiles. Each tile is rendering the points within it, but not the edges of the ones just outside it. That's a guess though. Looks like something I came across once or twice. Good luck.

from heatmap.js.

Seaming problem here too. All the time. I suspect this plugin renders itself too early, i.e., while map tiles are still being fetched.

from heatmap.js.

@bozdoz I am playing with the tile padding using the fix from @msgoloborodov

tile.style.padding = 10+"px";

I played with quite a few numbers. Not really fixing the seeming issue. Am I on the right track?

from heatmap.js.

Pretty sure it needs the same padding as the size of the points.

from heatmap.js.

That is the size of the blob being drawn? I am not a GIS guy and trying to get this to work for a project for a client.

Should this be in the _createTile function or in the _draw function?

from heatmap.js.

Padding should already exist on line 199. Do you have options.radius.absolute set to true, or false? That could help too.

from heatmap.js.

I have

var heatmapLayer = L.TileLayer.heatMap({
            // radius could be absolute or relative
            // absolute: radius in meters, relative: radius in pixels
            radius: { value: 1500   , absolute: true },
            //radius: { value: 20, absolute: false },
            visible: true,
            opacity: 0.8,
            gradient: {
                0.45: "rgb(0,0,255)",
                0.55: "rgb(0,255,255)",
                0.65: "rgb(0,255,0)",
                0.95: "yellow",
                1.0: "rgb(255,0,0)"
            }
        });

I was looking at that line, but was unsure of how to modify it in a way that makes sense.

from heatmap.js.