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?
4 Answers
Reset to default 1I 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.