Leaflet support about heatmap.js HOT 32 CLOSED

I'm also curious about whether there is enough demand for such a plugin for heatmap.js :) Thanks for opening the issue

from heatmap.js.

No problem.
Regardless of the feedback this thread will receive I believe this should be something to implement.
Leaflet is gaining a lot of users and it's a really versatile and fast map library. The best I've used so far.

It supports Canvas Tile Layer and there is already a usage example of this feature (in the project I posted above).

I'll gladly help in whatever I can, for instance setting up a leaflet demo and prepare everything to insert the heatmap layer.

from heatmap.js.

I just started at https://github.com/domoritz/heatmap.js. It's in an early stage and still has some problems but you can already use the demo. @ffleandro if you know how to use the Canvas Tile Layer, can you build a basic plugin structure?

from heatmap.js.

I haven't done anything with Canvas Tile Layer, just been scooping around for examples and documentation.
But from what I see, you've already created the basic structure for it. It's not working though.
In the working example where you just use a Tile Layer, it's taking too long to draw the heatmap. Do you know why this is happening?
It looks very good so far.

from heatmap.js.

I was looking at the HeatCanvas code and he uses the same approach you're using. Not the Canvas Tile Layer.

from heatmap.js.

I'm building two versions. The first draws a heatmap over the whole map. It works but is, as you said, slow because the whole heatmap has to be redrawn when you move the map. The first version in inspired by the code from HeatCanvas which is why it looks similar. However, I've noticed that my version is already quite fast.

The whole drawing would be much faster if I were using the tile layers instead of the previous approach. I started experimenting a little bit with it but haven't been successful yet. However, I just started yesterday so give me some time ;-)

There could be a problem with the edges of a tile, though. I'm not sure whether the heatmap is drawn correctly if points are outside the canvas itself.

from heatmap.js.

How are you doing on the L.TileLayer.Canvas?
Although it is a nice thing to have, it's not crucial. I've found out that it's not a problem from your implementation that the drawing is slow. It's a problem with the heatmap.js library.
I pulled your code and tested in my project and everything was drawing really fast (almost instantaneously). In your demo it takes a few seconds to draw/redraw.

The heatmap.js file I'm using was a mix of some of the pull requests that were pending on the main repository a few months ago. Supposedly it was corrected on this commit but I'm still experiencing a lot of lag. I'll dig a little bit more on this after lunch.

from heatmap.js.

That's great. I actually worked on it for only a few hours so I'm really happy that it is already usable. I'll have a look at the L.TileLayer.Canvas this evening but there are some other things that I'm working on at the moment. So if you want to experiment with it, go ahead ;-)

from heatmap.js.

It's really awesome so far :)
Thanks for the help.

from heatmap.js.

When I first started using this project I was very noob on using git, so I don't have anymore the repo logs of what I did.
I believe I merged some commits from @prodrigestivill and @lukasberns, but I have no way of knowing exactly what I did.

All I have is the resulting heatmap.js file, which works really good with all map examples (including this new leaflet addition).
Using the heatmap.js on @pa7 repository, this new leaflet example takes too long to draw/redraw.

Perhaps someone that knows this code better could take a look at it? I'll put the file on this branch just in case.

from heatmap.js.

I don't have any speed problems. Do you have problems with the demo page or your own data? Which browser do you use?

from heatmap.js.

@ffleandro are you using the current heatmap.js file from the src folder? I pushed several performance improvements lately and I'd be curious whether it is still slow for you ?

from heatmap.js.

Really?
I just run the leaflet.html in the demos folder, with no modifications.
I'm experiencing a lag of 2 or 3 seconds on each draw/redraw.
I'm using Chrome v21.

from heatmap.js.

@pa7
Yes, I'm using the code as it is in @domoritz fork.
It has all the latest commits from your branch.

from heatmap.js.

Just tested it on Safari and got the same 2/3 second lag.

from heatmap.js.

@ffleandro You are right chrome is much slower that firefox. I'll try to get the tile version running which will hopefully fix that.

from heatmap.js.

I just tried with Firefox and it runs really faster. So if in Chrome and Safari runs slowly, perhaps there is some incompatibility with webkit (since both of them use it).

@domoritz The L.TileLayer.Canvas could help, but I think there is another problem in here, since the gmaps and openlayer examples run ok in Safari and Chrome.

from heatmap.js.

@ffleandro I have a new version with tile layers. It's super fast. Have a try.

from heatmap.js.

@ffleandro Can you confirm that everything looks fine? If yes, I will send a pull request.

It would be awesome, if you could compare your dataset to the google maps implementation and especially take a look at the edges (you can enable the debug mode to see the edges). How large is your dataset?

from heatmap.js.

@domoritz Sorry, I was offline this weekend. I'm taking a look at it right now.
The demo is working really good.
Now i'm gonna test with my dataset and let you know if everything looks good.

from heatmap.js.

Everything ok. I tested it in my example with 8771 data points dynamically loaded with jQuery from a PostGIS database.
It still takes a bit to draw (1 or 2 seconds) but I think that's normal taking into the account the dataset.

from heatmap.js.

Actually, the display is broken. The problem occurs as predicted on the edges of a tile. There is an issue with heatmap.js which is that you cannot add points outside the canvas. So imagine there is a point in the tile left to the current on which we have a point that influences the display of the current tile.

In the example below x could affect the display of the tile on the right.

 _________
|  x |    |
|____|____|

I added a padding some time ago but heatmap.js itself ignores the points outside the canvas.

from heatmap.js.

I tried to use the plugin for leaflet but it takes a very long time to display a small data set (20 entries), what do I have to do to improve the performance ? (I followed the example I found here : https://github.com/pa7/heatmap.js/blob/master/demo/maps_heatmap_layer/leaflet.html)

from heatmap.js.

Hi, great that you give it a try. In my example I have a few hundred points and it is quite fast. Have you tried a different browser?

The plugin is still in a very experimental stage but should work in most cases. I'm happy to help you with your data set. Can you send me a link to your map?

from heatmap.js.

Here is my code displaying the heatmap

displayHeatmap: () ->
        @map.fitBounds @bounds

        heatmapLayer = L.TileLayer.heatMap
            radius: 20
            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)"

        heatmapLayer.addData @points

        overlayMaps =
            'Heatmap': heatmapLayer

        controls = L.control.layers null, overlayMaps, {collapsed: false}

        @map.addLayer heatmapLayer

        controls.addTo @map

and here is my dataset

[{"lat":32.38012,"lon":-86.30063,"value":64827.221999999965},{"lat":33.44826,"lon":-112.07577,"value":60461.394},{"lat":38.57906,"lon":-121.49101,"value":65174.2255},{"lat":39.74001,"lon":-104.9923,"value":73575.09249999998},{"lat":41.76331,"lon":-72.67408,"value":43751.64050000002},{"lat":39.15803,"lon":-75.52473,"value":36342.51449999996},{"lat":30.43977,"lon":-84.28065,"value":61424.52449999996},{"lat":41.69,"lon":44.8088,"value":54692.794000000016},{"lat":43.60698,"lon":-116.19341,"value":79430.249},{"lat":39.80105,"lon":-89.6436,"value":54506.68200000004},{"lat":38.9767,"lon":-76.48993,"value":114643.89550000001},{"lat":42.73194,"lon":-84.55225,"value":39260.07499999999},{"lat":40.81362,"lon":-96.70774,"value":58266.14600000005},{"lat":40.21787,"lon":-74.7594,"value":35991.92400000006},{"lat":35.69168,"lon":-105.93796,"value":35386.331000000006},{"lat":40.71455,"lon":-74.00712,"value":112099.25550000003},{"lat":35.78551,"lon":-78.64267,"value":86088.31950000009},{"lat":39.96196,"lon":-83.00298,"value":66357.51950000002},{"lat":-26.083385,"lon":30.119055,"value":70693.3375},{"lat":30.2676,"lon":-97.74298,"value":52496.23849999994},{"lat":40.76004,"lon":-111.88822,"value":66946.41100000008},{"lat":-22.37362,"lon":-45.12082,"value":53308.65850000001},{"lat":38.89037,"lon":-77.03196,"value":41894.447499999995},{"lat":43.07295,"lon":-89.38669,"value":26352.547999999977}]

from heatmap.js.

It works pretty fast for me on Firefox and Chrome. Try this: https://dl.dropbox.com/u/12770094/heatmap.js/demo/maps_heatmap_layer/leaflet.html

from heatmap.js.

Thank you it works well !

from heatmap.js.

I didn't change anything, except for the data ;-)

from heatmap.js.

I was wondering how I improve performance when loading points. for example 50000 points. I made the examples with 1000 points and perfect the heat map display but with more points is slow. Pleas help me! I forgot to mention I'm working with leaflet

from heatmap.js.

@PP10 Can you say what exactly is slow? It it the rendering, moving, redrawing?

from heatmap.js.

in redrawing, as I said only happens when I have thousands of points, to be exact 50000.

Thanks. @domoritz

from heatmap.js.

Can you try your example without leaflet. If it is a performance problem with the heatmap then the only thing that will help is to only use all points when you are zoomed in and create an approximated version that you load when you are not zoomed in. The leaflet layer should be able to handle a lot of points because of the quad tree. The only issue might be the memory.

Hope this helps.

from heatmap.js.