Latency using markercluster with 15K points

[vadvv]

I'm having a problem clustering a large number of points (my current set is 40K+ points, but I've even gone down to about 15K points). It takes very long to cluster, and then when zooming in/out it takes similar time for the layer to render. Most of the time the browser (in my case Chrome) asks to kill the tab.

I should add that to overcome this, I had decided to show the data as a heat map until a zoom level is reached, after which I thought I could show the cluster, but that didn't seem to help either and resulted in the same delay.

These are my layerOptions:
layerOptions: {
"chunkedLoading": true,
"showCoverageOnHover": false,
"removeOutsideVisibleBounds": true,
"chunkProgress": updateProgressBar
}

I see that there's a leafletjs example that clusters 50K points pretty gracefully:
http://leaflet.github.io/Leaflet.markercluster/example/marker-clustering-realworld.50000.html

Here's a fiddle demonstrating the behavior:
http://jsfiddle.net/redgis/BLW4p/

[JaumeFigueras]

Hi,
angular adds overhead that slows down markerclusters. One possibility to improve the behaviour is to disable not needed events so they are not propagated.
You can look at the map events selection example.

[vadvv]

Thanks for the suggestion.
I've tried disabling broadcast of ALL events (too chatty), but it had a negligible effect on performance.
http://jsfiddle.net/BLW4p/1/

[goldalworming]

paging the display..don't display all at one time..

[fwitzke]

You can try disabling the watches on individual markers. The syntax is like:

<leaflet markers="markers" watch-markers="no"></leaflet>

Also, I think some events currently cannot be disabled from the directive, so even tough you disabled some, it's still broadcasting other events that you probably don't need. You would need to either remove them manually from the code or implement this feature

[JaumeFigueras]

Also you can disable marker events, not noly map events.

[JohnLindahlTech]

For me it was a pretty good performance boost just to switch from "broadcast" to "emit" in the:
eventBroadcast.map.logic attached to eventBroadcast-directive.

[cachiconato]

I've changed the broadcast to emit and also the biggest bottleneck was a watch on the markers array, I changed this logic and seems to be much better.

http://jsfiddle.net/a67mggf0/

[johntyree]

Is there something else going on here? I only have about 200 markers and basically zero other logic and I see a massive performance difference between this directive and handwritten JS.

Here is the original of my app: http://john.bitsurge.net/bikeracks/ http://github.com/johntyree/bikeracks
And the port to Angular: http://john.bitsurge.net/bikeracks-angular/ http://github.com/johntyree/bikeracks-angular

Obviously there's some refactoring to be done but that shouldn't affect anything.

[johntyree]

Possibly related (for my problem at least) is #473.

Presumably leaflet is optimized for mobile viewing. leaflet-directive is not doing it for whatever reason.

[pmusaraj]

@cachiconato's solution worked for me. I think that these tweaks should be applied to the examples with many markers, because they are quite sluggish even on desktop browsers.

[cachiconato]

I'll send a pull request soon with my changes.

[tombatossals]

Fantastic changes @cachiconato, please send the PR whenever you want. I have applied your optimizations to the markers-clustering-10000.html example:

http://tombatossals.github.io/angular-leaflet-directive/examples/markers-clustering-10000.html

[nmccready]

This issue was moved to angular-ui/ui-leaflet#19

[tombatossals]

I'm going to rework&redesign angular-leaflet-directive to be compatible with Leaflet v1.0. It will mantain almost all its functionality, and will be compatible with the current features of the directive, but I must start from a fresh point, so I'm going to close this issue. If you think it must be worked with the new version, please reopen it.