"move" event has oldLatLng in Marker but not in Circle Marker

• I’m reporting a bug, not asking for help; support questions like “How can I do X with Leaflet?” will be closed (use Stack Overflow or gis.stackexchange.com for questions)
• I’ve looked at the documentation to make sure the behaviour is documented and expected
• I’m sure this is a Leaflet code issue, not an issue with my own code nor with the framework I’m using (Cordova, Ionic, Angular, React…)**
• I’ve searched through the issues to make sure it’s not yet reported

**The error is a result of a combination of react and leaflet and leaflet-markercluster, but the original source of the error is leaflet UPDATE: it’s reproducible with just leaflet

How to reproduce

• Leaflet version I’m using: 1.3.1
• Browser (with version) I’m using: Chrome 67.0.3396.99
• OS/Platform (with version) I’m using: macOS 10.12.6

What behaviour I’m expecting and which behaviour I’m seeing

Expect: setLatLng should work for CircleMarkers like it does for Markers Reality: setLatLng leads to undefined errors

I originally experienced the error using the marker cluster plugin, but it’s reproducible without it. Related issue: https://github.com/YUzhva/react-leaflet-markercluster/issues/31

Error stack trace in leaflet-markercluster:

leaflet-src.js:1658 Uncaught TypeError: Cannot read property 'lat' of undefined
    at Object.project (leaflet-src.js:1658)
    at Object.latLngToPoint (leaflet-src.js:1497)
    at NewClass.project (leaflet-src.js:3931)
    at NewClass._removeFromGridUnclustered (leaflet.markercluster-src.js:690)
    at NewClass._removeLayer (leaflet.markercluster-src.js:738)
    at NewClass.removeLayer (leaflet.markercluster-src.js:181)
    at NewClass._moveChild (leaflet.markercluster-src.js:713)
    at NewClass._childMarkerMoved (leaflet.markercluster-src.js:703)
    at NewClass.fire (leaflet-src.js:592)
    at NewClass.setLatLng (leaflet-src.js:7843)

The problem is that e.oldLatLng is undefined here in leaflet-markercluster:

_childMarkerMoved: function (e) {
		if (!this._ignoreMove && !e.target.__dragStart) {
			var isPopupOpen = e.target._popup && e.target._popup.isOpen();

			this._moveChild(e.target, e.oldLatLng, e.latlng);

			if (isPopupOpen) {
				e.target.openPopup();
			}
		}
	},

How is this a leaflet issue? When you fire a move end it seems to expect both a ‘from’ (oldLatLng) and a ‘to’ (latlng).

This is what setLatLng looks like for vanilla Markers:

setLatLng: function (latlng) {
		var oldLatLng = this._latlng;
		this._latlng = toLatLng(latlng);
		this.update();
		return this.fire('move', {oldLatLng: oldLatLng, latlng: this._latlng});
	}

and this is what it looks like for CircleMarkers:

setLatLng: function (latlng) {
		this._latlng = toLatLng(latlng);
		this.redraw();
		return this.fire('move', {latlng: this._latlng});
	},

It doesn’t set oldLatLng, so it’s undefined when the move event fires.

Changing CircleMarker’s setLatLng to this fixes the issue:

setLatLng: function (latlng) {
		var oldLatLng = this._latlng;
		this._latlng = toLatLng(latlng);
		this._update();
		return this.fire('move', {oldLatLng: oldLatLng, latlng: this._latlng});
	},

Minimal example reproducing the issue

• this example is as simple as possible
• this example does not rely on any third party code

~~https://codepen.io/mmacquarrie/pen/VBMRva~~ UPDATE: https://codepen.io/mmacquarrie/pen/ajqKZW

1. Open the browser console
2. Click on the marker
3. View error in browser console.

[Nadhum]

This is still an ongoing problem. I faced the same issue when using CircleMarker with react-leaflet-markercluster. I fixed this creating a custom wrapper and overriding setLatLng of L.CircleMarker. Here is the code if anyone wants to check it.

import { CircleMarker as LeafletCircleMarker } from 'leaflet'
import { withLeaflet, Path } from 'react-leaflet';

LeafletCircleMarker.include({
  setLatLng: function (latlng) {
    const oldLatLng = this._latlng;
    this._update();
    return this.fire('move', {oldLatLng: oldLatLng, latlng: this._latlng});
  },
})

class CircleMarker extends Path {
  createLeafletElement({ position, leaflet, ...options }) {
    return new LeafletCircleMarker(position, options);
  }

  updateLeafletElement(fromProps, { position, radius }) {
    if (position !== fromProps.position) {
      this.leafletElement.setLatLng(position);
    }
    if (radius !== fromProps.radius) {
      this.leafletElement.setRadius(radius);
    }
  }
}

export default withLeaflet(CircleMarker);

[jwmann]

And update on this? I’m also getting the error specifically with CircleMarkers. If I switch to a regular marker, it works fine.