function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
BB 

How can i resolve this MarkerCluster checkin/ checkout error (leaflet) ?

I have this 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.addOverlay(group1, 'g1');
        control.addOverlay(group3, 'g3');
        control.addOverlay(group2, 'g2);
        control.addOverlay(group4, 'g4'); */
        
         //controlMarkers = L.control.layers(markers, null, { collapsed: true });
         //controlHeatMap = L.control.layers(heatmapLayer, null, { 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);

The prolem 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 is called  from DistanceGrid 

_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

libraries that are imported 
/resource/leaflet/leaflet.js,
/resource/leafletMarkerCluster/Leaflet.markercluster-1.4.1/dist/leaflet.markercluster.js,                 /resource/LeafletFilterCluster/Leaflet.MarkerCluster.LayerSupport-master/src/layersupport.js