Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

Leaflet support #27

Closed
ffleandro opened this Issue Aug 23, 2012 · 32 comments

Comments

Projects
None yet
5 participants
Contributor

ffleandro commented Aug 23, 2012

It would be great if there was also support for Leaflet maps.
I was trying to implement it myself, but I'm really out my league here.
There is already a heatmap project for Leaflet, however I really like this one and I was already sucessfully using it on Google Maps.

Is anyone interested in this?

Owner

pa7 commented Aug 23, 2012

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

Contributor

ffleandro commented Aug 24, 2012

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.

Contributor

domoritz commented Aug 29, 2012

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?

Contributor

ffleandro commented Aug 29, 2012

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.

Contributor

ffleandro commented Aug 29, 2012

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

Contributor

domoritz commented Aug 29, 2012

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.

Contributor

ffleandro commented Aug 29, 2012

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.

Contributor

domoritz commented Aug 29, 2012

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 ;-)

Contributor

ffleandro commented Aug 29, 2012

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

Contributor

ffleandro commented Aug 29, 2012

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.

Contributor

domoritz commented Aug 29, 2012

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

Owner

pa7 commented Aug 29, 2012

@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 ?

Contributor

ffleandro commented Aug 29, 2012

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.

Contributor

ffleandro commented Aug 29, 2012

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

Contributor

ffleandro commented Aug 29, 2012

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

Contributor

domoritz commented Aug 29, 2012

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

Contributor

ffleandro commented Aug 29, 2012

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.

Contributor

domoritz commented Sep 2, 2012

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

Contributor

domoritz commented Sep 3, 2012

@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?

Contributor

ffleandro commented Sep 3, 2012

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

Contributor

ffleandro commented Sep 3, 2012

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.

@ffleandro ffleandro closed this Sep 3, 2012

Contributor

domoritz commented Sep 4, 2012

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.

mravey commented Sep 20, 2012

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)

Contributor

domoritz commented Sep 20, 2012

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?

mravey commented Sep 20, 2012

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}]
Contributor

domoritz commented Sep 20, 2012

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

mravey commented Sep 20, 2012

Thank you it works well !

Contributor

domoritz commented Sep 20, 2012

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

PP10 commented Jun 26, 2013

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

Contributor

domoritz commented Jun 27, 2013

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

PP10 commented Jun 27, 2013

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

Thanks. @domoritz

Contributor

domoritz commented Jun 27, 2013

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment