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')
.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?

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.drawControl.options.circleMarker);

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:


Feature: new option "draggable" for circle, circleMarker, polygon , Using Leaflet v1.0.3 it's possible to drag Markers by its option so for other point features like Circles, circleMarkers, points of polygons or polylines. to host and review code, manage projects, and build software together. I would like to make draggable barcharts from R leaflet plugin minicharts in shiny project. As I understood charts are made on basis of circleMarker. It is Path in terms of leaflet and it can be

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.

Creating draggable circle in Leaflet?, To make a circle draggable, you can add an event listener with a method for mousedown and one for click (from what I've seen, Leaflet doesn't support mouseup for Path layers). Inside the mousedown event, add a function to get the position of the circle from the current mouse position. I want to drag my marker and then the circle to appear where i left the marker. But i cant get it done. I cant understand why the previous circle disappears but the new one isnt appearing. here

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


If you're using TypeScript, you can use


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

Leaflet Plugin: how to make circle marker draggable on touch , Leaflet Plugin: how to make circle marker draggable on touch screens too? - events. Could I possibly create a style function which creates two circlemarker for each feature with the lower circle being shifted and opaque. I could just duplicate the layer. But how can I apply a shift to a layer or a circlemarker? At the moment I just add a second layer with a lat/lon shift to the elements based on the zoom level.

Leaflet 1.0 Draggable Circle (works on mobile), HTML preprocessors can make writing HTML more powerful or convenient. 23. map.removeEventListener('mousemove');. 24. }); ! 999px. +-. Leaflet� Returns a GeoJSON representation of the circle marker (as a GeoJSON Point Feature). setLatLng(<LatLng> latLng) this: Sets the position of a circle marker to a new location. getLatLng LatLng: Returns the current geographical position of the circle marker. setRadius(<Number> radius) this: Sets the radius of a circle marker. Units are in pixels

Documentation - Leaflet, Path; Polyline; Polygon; Rectangle; Circle; CircleMarker; SVG; Canvas Map. The central class of the API — it is used to create a map on a page and manipulate it. L.Marker is used to display clickable/draggable icons on the map . Extends� This lets you define ther circleMarker as draggable. L.circleMarker(latlng,{ draggable: true }, and by then by placing layer.on('dragend' in my onEachFeature function I was able to capture the circleMarker coordinates and place them in textboxes, where I can use PHP to write them the new coords back to my database. Problem solved.

This documentation is has been transcribed from the original README.MD to jsdoc's or natural docs style for use with Leafdoc.If you identify a typo or have a suggestion for this documentation, please feel free toedit the js comment blocks in the src directory, build with 'jake docs' and submit a pull request.