1

The problem is that when i check out on overlay and after i check in again i receive this error:

Uncaught TypeError: Cannot read property 'x' of undefined throws at dist/leaflet.markercluster.js:1:25696 TypeError: Cannot read property 'x' of undefined at L.DistanceGrid._sqDist (DistanceGrid.js:114)
at L.DistanceGrid.getNearObject (DistanceGrid.js:94) at e._addLayer (MarkerClusterGroup.js:974) at eval (MarkerClusterGroup.js:249)
at e.addLayers (MarkerClusterGroup.js:283) at e.addLayers (layersupport.js:99) at e.onAdd (layersupport.js:517) at e._layerAdd (leaflet.js:5) at e.whenReady (leaflet.js:5) at e.addLayer (leaflet.js:5)

I saw that this function from DistanceGrid(is in leaflet library) which is called when i check in on the overlay 

_sqDist: function (p, p2) {
      var dx = p2.x - p.x,
          dy = p2.y - p.y;
      return dx * dx + dy * dy;
  }

And when i checked in is p is somehow undefined. Im struggling with this error for a long period already. Maybe you have some suggestion

Markers are defined for the groups and they are properly displayed the issue is only with check in check out. Once i check them out the clusters dissapear as they should and once i checked in i receive that error mentioned before instead of showing clusters back on the map

Here is the controller code:

JS controller: 
var map = L.map('map', {zoomControl: true, tap: false, preferCanvas:true})
var group1,group2,group3,group4;
var myRenderer = L.canvas({ padding: 0.5 });
 var markers = L.markerClusterGroup.layerSupport( { 
        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) });
            }
});

 group1 = L.layerGroup(),
       group2 = L.layerGroup(),
      group3 = L.layerGroup(),
       group4 = L.layerGroup(),

    markers.checkIn([group1, group2, group3, group4]);

    var overlayMaps = {
        "g1": group1,
        "g2": group2,
        "g3":group3,
        "g4":group4
    };
    var control = L.control.layers(null, overlayMaps, { collapsed: true });


    control.addTo(map);

    group1.addTo(map); // Adding to map or to AutoMCG are now equivalent.
    group2.addTo(map);
    group3.addTo(map);
    group4.addTo(map);

 markers.addTo(map);

PS: I dont know how to give a workable version since this a salesforce app

1
  • 2
    Please provide a runnable MCVE for this. Apr 22, 2019 at 8:05

2 Answers 2

1

It is possible that the chunkedLoading option is not well handled by the Leaflet.markercluster.layerSupport plugin.

I am not sure why you need to "checkout" and "checkin" regularly? Are you rather referring to using the Layers Control to remove / add your overlay?

Otherwise, if you "only" need a solution to use Leaflet.markercluster with the Layers Control, you can give a try to the simpler plugin Leaflet.FeatureGroup.SubGroup, although if chunkedLoading is the reason for the issue, it would probably also be the same with that plugin.

1
  • I solved that with subgroup. One thing that i realised using that is, if you create a new subgroup you always need to specify the array of markers at the creation otherwise when you check out at the check in nothing will be displayed EX: var group1 = L.featureGroup.subGroup(parent,group1Array); . Also no need for layout support in this case. And yes im removing and adding the layers @ghybs. Thank you everyone for helping me make the information clear and give me a good solution
    – cUser
    Apr 24, 2019 at 13:04
1

I resolve the issue by adding all the vertices together, I created an array that contains all the vertices and then added them using the function addLayers

  const folders = 800;
  for (let index = 0; index < folders; index++) {
    const folder = this.createFolder();
    this.folders.push(folder);
  }
  this.clustersFeature.addLayers(this.folders);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.