I'm doing some tests with an HTML map in conjunction with Leaflet. Server side I have a Ruby Sinatra app serving json markers fetched by a MySQL table. What are the best practices working with 2k-5k and potentially more markers?
- Load all the markers in the first place and then delegate everything to Leaflet.markercluster.
- Load the markers every time the map viewport change, sending southWest & northEast points to the server, elaborate the clipping server side and then sync the marker buffer client side with the server-fetched entries (what I'm doing right now).
- A mix of the two above approaches.
Thanks, Luca
Few months has passed since I originally posted the question and I made it through!
As @Brett DeWoody correctly noted the right approach is to be strictly related to the number od DOM elements on the screen (I'm referring mainly to markers). The more the merrier if you device is faster (CPU especially). Since the app I was developing has both desktop and tablet as target devices, CPU was a relevant factor just like the marker-density of different geo-areas.
I decided to separate DBase querying/fetching and map representation/displaying. Basically the user adjusts controls/inputs to filter the whole dataset, afterwards records are fetched and Leaflet.markercluster does the job of representation. When a filter is modified the cycle starts over. User can choose the map zoom level of clusterization depending on their CPU power.
In my particular scenario the above mentioned represented the best approach (verified by console.time). I found that viewport optimisation was good for lower marker-density areas (a pity).
Hope it may be helpful.
Cheers, Luca
Try options and optimize when you see issues rather than optimizing early. You can probably get away with just Leaflet.markercluster unless your markers have lots of data attached to them.
来源：https://stackoverflow.com/questions/21795319/best-practices-for-handling-thousands-of-markers-with-leaflet