Error when adding markers

When our markers have got an updated position we remove them from the cluster group and adds them again in order to “recluster”. A few times we have got an error in _addLayer function saying

TypeError: Cannot read property '_zoom' of undefined

The error ocurred in version v0.4.0-hotfix.1 together with leaflet 0.7.3, Chrome browser. I haven’t figured out exactly what the preconditions are in order to reproduce it in a fiddle, but I tracked it down to the following piece of code in function _addLayer of L.MarkerClusterGroup

if (closest) {
  var parent = closest.__parent;
  if (parent) {
    this._removeLayer(closest, false);
  }

  //Create new cluster with these 2 in it

  var newCluster = new L.MarkerCluster(this, zoom, closest, layer);
  gridClusters[zoom].addObject(newCluster, this._map.project(newCluster._cLatLng, zoom));
  closest.__parent = newCluster;
  layer.__parent = newCluster;

  //First create any new intermediate parent clusters that don't exist
  var lastParent = newCluster;
  for (z = zoom - 1; z > parent._zoom; z--) {
    lastParent = new L.MarkerCluster(this, z, lastParent);
    gridClusters[z].addObject(lastParent, this._map.project(closest.getLatLng(), z));
  }

If closest.__parent is undefined then parent will be undefined. When parent._zoom is used in for loop we get the error.

[ghybs]

I think I get it.

If your marker changed position (coordinates) before you remove it, MCG may be in trouble properly eliminating its references from its internal _gridUnclustered Distance Grid: it reads its (new) coordinates, derives its associated grid (new) index and may not find it there, stopping reference elimination.

Then you are left with a “ghost” in the Distance Grid, even though it is supposed to be removed. In particular, removeLayer() deleted its __parent property.

Then later when you add another marker (or even the same one!), addLayer may find this ghost and try to cluster with it, but it will fail reading properties of the ghost’s __parent.

Now, in MCG version v1.0.0-beta.2.0 and above (actually since Jan 2014 in commit https://github.com/Leaflet/Leaflet.markercluster/commit/27827b5d63317aa7fb6800500984857ca24f16fa of MCG branch compatible with Leaflet 1.0), MCG adds "move" event listener on all markers and automatically handles the removeLayer + addLayer process for you, properly using the old position to avoid creating that “ghost” in Distance Grid.

Therefore, if you are using Leaflet 0.7 with MCG 0.5, you could try removing your marker from MCG before actually moving it, if your application can handle the process that way.

But if you are already using Leaflet 1.0 with MCG 1.0 and the automatic clusters update does not happen, please try to bring more details and to provide a case reproduction so we can dig further.

[thernoff]

Maybe my decision will help someone:

1. I create my marker based on L. Marker, consisting of a normal marker and a circle

var RangeMarker = L.Marker.extend ({
  initialize: function (latlng, options) {
    L.setOptions (this, options);
    this._latlng = L.latLng (latlng);
    if (Math.abs (this.options.precision) && this.options.showRange) {
      this._circle = L.circle (this._latlng, {
          radius: Math.abs (this.options.precision),
            weight: 1
          });
    }
  },
  // .. the rest of the code
});

1. In it, I override the setLatLng method:

setLatLng: function (latlng) {
  var latLng = L.latLng(latlng);
  this._latlng = latLng;

  L.Marker.prototype.setLatLng.call(this, latLng);
  if (this._circle) {
	this._circle.setLatLng(latlng);
  }
  return this;
}

1. Calling this method (that is, when I update the coordinates of the marker) an error occurs:

TypeError: Cannot read property '_zoom' of undefined
    at e._addLayer (MarkerClusterGroup.js: 999)
    at e.addLayer (MarkerClusterGroup.js: 111)
    at e._moveChild (MarkerClusterGroup.js: 707)
    at e._childMarkerMoved (MarkerClusterGroup.js: 694)
    at e.fire (leaflet.js: 5)
    at e.setLatLng (leaflet.js: 5)
    at e.setLatLng (devices-leaflet.js: 587)
    at e.updateMarker (devices-leaflet.js: 617)
    at devices-leaflet.js: 516
    at Array.forEach (<anonymous>)

1. As I understand it, it occurred because of the line: this._latlng = latLng. In leaflet.markercluster-src.js there is a _moveChild method that also has something like this:

_moveChild: function (layer, from, to) {
  layer._latlng = from;
  this.removeLayer(layer);

  layer._latlng = to;
  this.addLayer(layer);
}

1. The error disappeared after I removed this._latlng = latLng from my code.