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?

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?

• javascript
• drag-and-drop
• leaflet

4 Answers 4

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

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.

You can use the Leaflet Draw plugin and enable/disable editing on the circle marker.

circleMarker.editing.enable();
circleMarker.editing.disable();

If you're using TypeScript, you can use

circleMarker['editing'].enable();
circleMarker['editing'].disable();

This lets you edit the circle marker effectively letting you drag the circle marker around.

And for drag events, you can refer to draw events in Leaflet.Draw.Event.js.

You can subscribe to map events like this:

map.on('draw:editmove', (event) => {
    // Do something
});

Or, directly subscribe to circleMarker events (editstart, editdrag, edit) like this:

circleMarker.on('editdrag', (event) => {
    // Do something
});

Another approach is to track the mouse location via Map mousemove event, and put a custom marker on top of the mouse position (make it invisible if you want with opacity: 0), then capture the marker's drag events and link them to the circle or other none draggable ponent. Demo project.