2

I'm trying to load lot's of marker on a leaflet map

With this method : 

L.marker([item.latitude, item.longitude]).addTo(this.map);

I loop for at least 100 markers and the map become really laggy after that.

Is there a way to optimize a map on which I want to display lot's of markers ?

cartant
  • 57,105
  • 17
  • 163
  • 197
An-droid
  • 6,433
  • 9
  • 48
  • 93
  • Have you tried: https://stackoverflow.com/questions/17371039/how-to-add-markers-bulk-in-leaflet ? If that doesn't help, my guess is you just need to break down and cluster them. – Z. Bagley Sep 22 '17 at 11:57
  • In this example he use clustering, in my case I want to display all the markers. When I load the page with more that let's say 100-300 markers the page freeze for 30sec :/ would there be a way to prevent this freeze and lazy load the markers ? – An-droid Sep 22 '17 at 12:07
  • I used to use leaflet a lot, but had to limit the markers to 50. I ended up swapping to google maps for a project simply because I could display 150 markers w/o problems. Leaflet is just heavy in general as far as I'm aware. – Z. Bagley Sep 22 '17 at 12:14
  • Have you tried `preferCanvas` map option and Circle Markers? See https://stackoverflow.com/questions/43015854/large-dataset-of-markers-or-dots-in-leaflet/43019740#43019740 – ghybs Sep 22 '17 at 13:21

2 Answers2

1

I've used ngx-leaflet-markercluster with ngx-leaflet successfully to display 4000 markers. The plug-in uses a combination of cluster markers and regular markers that dynamically appear at certain zoom levels.

The plugin also spiderfy markers that have the same coordinates.

It works well with Angular 8.

ngx-leaflet-markercluster uses leaflet.markercluster and looks like this:

enter image description here

KTCO
  • 2,115
  • 23
  • 21
  • 1
    For reference, by default the cluster icons are _not_ draen on a canvas, but are Leaflet DivIcon Markers. But you can change them by whatever you want with the `iconCreateFunction` option. – ghybs Aug 22 '19 at 18:53
  • @ghybs thank you for correcting me :-) Yes, the cluster markers are DIVs by default. I have updated my answer. – KTCO Aug 22 '19 at 19:54
0

Clustering the markers is the best way to handle performance issues, in my opinion. Since that's no solution in your case, you can improve the performance by putting all the markers in one layer first and adding that single layer to your map, instead of adding all markers to the map individually.

You can compare the performance here:

Example adding grouped to map: http://jsfiddle.net/HarolddP/g12vj3mt/2/

Example adding individually to map: http://jsfiddle.net/HarolddP/euz7f6o2/

Suggested improvement:

    var map = L.map('map').setView([51.5, -0.09], 3);    
    var markers = [];
    for (var i=0; i<500; i++){
      lat = ..; lng = ..;
      marker = new L.marker([lat, lng]);
      markers.push(marker);
     }
    markerGroup = L.layerGroup(markers);
    markerGroup.addTo(map);

Another suggested solution is to add only the markers to the map that are in the boundary of your view.

As you can imagine, the performance also depends on what kind of markers you are using. Are they big in size? As you can see in the examples, the 500 standard leaflet markers are still performing quite well (at my machine).

Harold
  • 68
  • 3