Latency using markercluster with 15K points

[nmccready]

From @vadvv on May 19, 2014 15:12

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/

Copied from original issue: tombatossals/angular-leaflet-directive#371

[nmccready]

From @JaumeFigueras on May 20, 2014 9:27

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.

[nmccready]

From @vadvv on May 20, 2014 21:36

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/

[nmccready]

From @goldalworming on May 21, 2014 3:29

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

[nmccready]

From @fwitzke on May 23, 2014 0:29

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

[nmccready]

From @JaumeFigueras on May 23, 2014 8:21

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

[nmccready]

From @JohnPhoto on July 25, 2014 7:23

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.

[nmccready]

From @cachiconato on August 20, 2014 13:45

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/

[nmccready]

From @johntyree on September 14, 2014 16:54

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.

[nmccready]

From @johntyree on September 15, 2014 3:21

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.

[nmccready]

From @pmusaraj on December 11, 2014 3:21

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

[nmccready]

From @cachiconato on December 11, 2014 3:31

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

[nmccready]

From @tombatossals on December 11, 2014 14:26

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

[coolblades]

i checked the 10000 markers clustering example both on ui-leaflet and angular-leaflet-directive the latency is so bad on IE11/Windows 7, that it never return the result, have to stop the js after waiting minutes for it to render. Even with 1000 markers, it was very slow too on IE11/windows 7. Chrome has no issue, and Firefox is sluggish but did finish.

So is the problem fixed (it seems to say so at least in the example), but I am not seeing the result. What am I missing?

Thanks!

[nmccready]

This is issue is still open therefore that is your answer.

There are probably a few problems.

• cloning of individual marker to keep digests down but this is also slow
• the marker cluster plugin is known to not be as good as Prune Clusterer