javascriptdrag-and-dropleaflet

How to make a leaflet circleMarker draggable?


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?


Solution

  • 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();