Slowness detected with 50,000 Pins on Latest Chrome(74.0.3729)

[kaleemullah]

• I'm reporting a bug, not asking for help
• I'm sure this is a Leaflet.MarkerCluster code issue, not an issue with my own code nor with the framework I'm using (Cordova, Ionic, Angular, React…)
• I've searched through the issues to make sure it's not yet reported

---

How to reproduce

• Browser (with version) I'm using: Chrome (Version 74.0.3729.131 (Official Build) (64-bit))
• OS/Platform (with version) I'm using: macOS(10.14.4)

Just visit the official url, with 50,000 items, on aforementioned chrome version(which is latest):
https://leaflet.github.io/Leaflet.markercluster/example/marker-clustering-realworld.50000.html

What behaviour I'm expecting and which behaviour I'm seeing

Show map and load data in few seconds but it's taking around 2 mins to show map and then load pins. However on safari, it's loading in ~10 secs.

Minimal example reproducing the issue

• this example is as simple as possible
• this example does not rely on any third party code

[mirko77]

Same issue here. All of a sudden our maps with ~50.000 markers takes ages to load in Chrome 74.

Example: https://five.epicollect.net/project/campaign-education

Works fine in other browsers and previous versions of Chrome.

We tested (on a Mac)

• Opera
• Safari
• Firefox
• Chrome 73

Any suggestions? Can we help somehow? @danzel

[tetedacier]

I've been working on a workaround lately.

The idea is that instead of adding all markers in one step, I've splitted my markers in group of 2000 and add them one after the other using MarkerClusterGroup.addLayer.

Instead of spending for 20 second in clusters creations, it goes down to 660 ms for an input of 16000 markers.

[mirko77]

@tetedacier so you are adding multiple layers, one per each group? Is it not what addLayers and the chunked option does already? We used to add 50.000+ markers in a few seconds.

The thing is everything has always worked fine until Chrome 74, so I wonder what they changed in the browser to cause this 50x slowness compared to before

[mathiaslaramee]

It seems that the addLayers function is having trouble with the new version of chrome. Try to iterate over your markers and add them one by one as @tetedacier said with addLayer. Fixed my issues with 70k markers.

[kaleemullah]

so yeah trick is to add markers one-by-one instead of a big chunk at once.

[mathiaslaramee]

I dont think this should be closed though - the issue still persists with addLayers which is supposed to handle this kind of functionality .. I guess?

[mirko77]

I would not close this either, addLayers() does not work as it should. There are some reasons that function was recommended I guess.

Is there any chance to fix that function instead of applying workaround??

If that is not possible, the docs and the 50K example needs to be updated.

[kaleemullah]

@mirko77 @mathiaslaramee Agreed, I opened it already :)

[danzel]

This sounds like a chrome bug.
I recommend someone raises an issue with them, or see if there is an already existing one.

[mirko77]

This sounds like a chrome bug.
I recommend someone raises an issue with them, or see if there is an already existing one.

I would do that but what do I report? We will have to look for the Javascript native functions in addLayers() that do not work as they should and build a fiddle for the Chrome guys.

[mirko77]

Javascript changes in Chrome 74, do anything ring a bell?
https://v8.dev/blog/v8-release-74

[rahulmahadik]

var cnt = 1
for (var i = 0; i < addressPoints.length; i++) {
			var a = addressPoints[i];
			var title = a[2];
			var marker = L.marker(L.latLng(a[0], a[1]), { title: title });
			marker.bindPopup(title);
			markerList.push(marker);
			cnt++
			if(cnt == 100){
			markers.addLayers(markerList);
		    map.addLayer(markers);
			markerList = [];
			cnt=1
			}
			
		}
		
		markers.addLayers(markerList);
		    map.addLayer(markers);
			markerList = [];

Using this approach i loaded 1 lac markers in 5 sec

[mirko77]

@rahulmahadik that is still using addLayers() ?

[rahulmahadik]

@rahulmahadik that is still using addLayers() ?

I posted the example code and screenshot

[mirko77]

@rahulmahadik that is still using addLayers() ?

I posted the example code and screenshot

The issue is on:
Chrome (Version 74.0.3729.131 (Official Build) (64-bit))
macOS(10.14.4)

Are you using the above Chrome version/Mac version? If not, your example is not relevant. There are not any issues on other Chrome versions.

[rahulmahadik]

@rahulmahadik that is still using addLayers() ?

I posted the example code and screenshot

The issue is on:
Chrome (Version 74.0.3729.131 (Official Build) (64-bit))
macOS(10.14.4)

Are you using the above Chrome version/Mac version? If not, your example is not relevant. There are not any issues on other Chrome versions.

I'm using Chrome Version 74.0.3729.169 (Official Build) (64-bit)

[tetedacier]

I digged this issue deeper, since my split strategy stopped to be effective at 100.000 markers.

It seems that all the time is spent inside the hasLayers method.

I'm preparing a PR with a modified version of addLayers which doesn't call the hasLayer method since when I'm initially loading the markers, this method just consume time and allways return false.

[mirko77]

I digged this issue deeper, since my split strategy stopped to be effective at 100.000 markers.

It seems that all the time is spent inside the hasLayers method.

I'm preparing a PR with a modified version of addLayers which doesn't call the hasLayer method since when I'm initially loading the markers, this method just consume time and allways return false.

@tetedacier is hasLayers() called in the addLayer() methos as well?

[tetedacier]

@mirko77, Yes it is the same.

[petrot]

My clustering code was slow too... But when I change the process order, the problem goes away:

• Create cluster
• Add the EMPTY cluster to the map
• Add markers to the cluster

In this way, there is no lagging. So, add markers to the cluster AFTER the cluster has been added to the map. Maybe it helps.

[mathiaslaramee]

What @petrot writes seems to work successfully for me as well.
Adding the MarkerClusterGroup to the map first and then adding my 70k CircleMarkers with addLayers seems to work just as before.