search

manubb / Leaflet.PixiOverlay

Bring Pixi.js power to Leaflet maps
MIT License
463 stars 85 forks source link

How to draw efficiently one million markers? #12

Closed AndersonSchmidt closed 6 years ago

AndersonSchmidt commented 6 years ago

This is the json with the points that I was trying to load: (Don't forget to change the file to .json) communes.txt

manubb commented 6 years ago

Can you have a look at this and tell me if the problem occurs?

AndersonSchmidt commented 6 years ago

Hey, first of all, thanks for your help. Yes, it's working very well. I saw that the problem is that I was using the "French Cities" example, and when I use the "US" example like you used in the link that you sent, the page loads really fast. But I still have some troubles. I need to load 500.000 points in that area. I changed the code to not animate the size of the points(now, each point has a static size) and it worked, the page loads and it's "usable". But I need to get better performance, cause the page still "lagging". Do you know how to get better performance, maybe by deleting some process of the code?

manubb commented 6 years ago

In order to get better performance, you need to decrease the number of drawn pixels. This can be done by scaling down markers in low zoom levels (where many markers are drawn). You can have a look at this demo where one million markers are displayed with a good user experience. (It is using PIXI.ParticleContainer. Note however that it has some bug when using with doubleBuffering option that will be fixed soon. See this PR.)

AndersonSchmidt commented 6 years ago

That's it!! It's working!