How to make a leaflet circleMarker draggable?

Question

Using leaflet, I created a L.circleMarker and I want it to be draggable:

var marker = L.circleMarker(new L.LatLng(48.94603, 2.25912), {
    draggable: true
})
.bindPopup('Circle marker draggable')
.addTo(map)
.on('dragstart', onMarkerDragStart)
.on('dragend', onMarkerDragEnd);

Unfortunately, I don't get any call of onMarkerDragStart/End functions when I drag the marker. However, if we use L.marker instead of L.circleMarker, it works.

So, does anyone know how to make the L.circleMarker draggable?

Answer 1

I forked the Leaflet.draw plugin to support circle markers. You can get it here

I enable the drawing like this:

drawCircleMarker: function () {
            this.currentHandler = new L.Draw.CircleMarker(this.map, this.drawControl.options.circleMarker);
            this.currentHandler.enable();
        },

You will need to hook up to the map's draw:created event in order to get the layer that was added.

To enable dragging, simply take that layer that was added and enable editing on it like this:

pathToEdit.editing.enable();

Answer 2

As you can see in the specification for L.CircleMarker, L.Circle and L.Path which it extends from, there is simply no drag for a CircleMarker. The option you now have is to use a custom L.Icon for L.Marker. Here is an example of custom icons taken from the Leaflet site.

Another option is to use this polydrag plugin, but it's developed against an early version of Leaflet (0.4.2) and isn't being maintained. You could always take a look at that source and roll your own.