0

I have 50k accounts that i have to display on a map as markers. Everything is fine if i call only for maximum 20k accounts but for a larger number of accounts page become unresponsive. I figure out that it take too long to go through all the array of objects. But i don't know how can I optimise the code more.

The elements that are in the loop are not really affect the traverse of the loop. I run it without anything in it and it still takes same amount of time till become unresponsive. The problem is that it has too many element.

Update: i use markerCluster to cluster all the markers. I use canvas in order to be rendered quicker. Also i read that addLayers is better than addLayer and thats why i use a normal list to add all elements and only after to add it in the markerClusterGroup. Map is automatically updated because if i add the markersGroup even if in the first place is empty any modification to the group will be noticed by the map (it has a watcher by default).

When i tested i just saw that the for is too slow. Map is from leaflet

Thank you in advance 

var map = L.map('map', {zoomControl: true, tap: false, preferCanvas:true});
    var accounts = event.getParam('accounts');

    var markerList = [];
    //create a group of markers in order to have control over markers from map
    var myRenderer = L.canvas({ padding: 0.5 }); 
    var markers = L.markerClusterGroup( { 
        chunkedLoading: true,
        renderer: myRenderer,
        iconCreateFunction: function  (cluster) {
        var childCount = cluster.getChildCount();

        var c = ' marker-cluster-';
        if (childCount < 10) {
            c += 'small';
        } 
        else if (childCount < 100) {
            c += 'medium';
        } 
            else {
                c += 'large';
            }

        return new L.DivIcon({ html: '<div><span>' + childCount + '</span></div>', 
                              className: 'marker-cluster' + c, iconSize: new L.Point(40, 40) });
      }
    });

     map.addLayer(markers);


    var markerColor;


    var marker_blue =  helper.initMarkers ('/resource/markers/markers/marker_blue.png',[30, 40], [22, 44], [-5, -43]);

    markerColor = marker_blue;

    for (var i=0, len = accounts.length; i<len; i++) {

        var account = accounts[i];
        var latLng = [account.Latitude, account.Longitude];
        var marker = L.marker(latLng, {icon:markerColor},{account: account},{renderer: myRenderer});

        markerList.push(marker);

    }


        markers.addLayers(markerList);
cUser
  • 392
  • 8
  • 25
  • 5
    do you really need to put 50k markers at once? maybe group them into clusters and render individual only when zoomed/expanded – dfsq Feb 07 '19 at 13:13
  • 8
    IMO the problem is not traversing 50k elements in an array. JS can handle it easily. The problem comes from 50k HTML elements the browser has to display and repaint. That's why [markers clusters](https://developers.google.com/maps/documentation/javascript/marker-clustering) were invented – Jeremy Thille Feb 07 '19 at 13:14
  • I updated the code to make it more clear – cUser Feb 07 '19 at 13:24
  • 1
    Have you seen [the demo of 50000](https://leaflet.github.io/Leaflet.markercluster/example/marker-clustering-realworld.50000.html)? Might be able to get some pointers from their code. – James Thorpe Feb 07 '19 at 13:29
  • In your example all your markers seem to have the same position, only the account is different. – HMR Feb 07 '19 at 13:30
  • @JamesThorpe i will try it . Oh this is the one i used as a example i just noticed :)) – cUser Feb 07 '19 at 13:36
  • @HMR the code is updated now, sorry :( . I am not to good at trying to make myself understand by others :( – cUser Feb 07 '19 at 13:37

0 Answers0