I'm a beginner in Leaflet and I have the draw control added for polygon drawing:

var drawControl = new L.Control.Draw({
draw: {
    marker: false,
    polyline: false,
    rectangle: false,
    circle: false,
    circlemarker: false,
    polygon: {
        icon: new L.DivIcon({
            iconSize: new L.Point(10, 10),
            className: 'leaflet-div-icon leaflet-editing-icon'
        shapeOptions: { color: 'white', opacity: 0.3, fillOpacity: 0.5, weight: map.getZoom() > 16 ? (75 / Math.pow(2, 19 - map.getZoom())) : 20 },
        allowIntersection: false,
        drawError: { color: 'orange', timeout: 1000 },
        showArea: true,
        metric: false,

The line weight is based on map zoom. Is there a possibility to add a circle radius around my mouse icon (it's a cross icon) only when I'm drawing a polygon, but to resize depending on the map zoom?


1 Answer 1


One possible way to do this would be to create L.circleMarker, put it on map at the draw:drawstart event, change its position at the mousemove event and remove it at the draw:created event.

Relevant parts of the code could then look something like this:

  var circle = L.circleMarker([0, 0], {radius: 20});

  map.on('draw:drawstart', function (event) {
  map.on('draw:created', function (event) {

  map.on('mousemove', function(evt) {
  map.on('zoomend', function(evt) {
    var newRadius =  // some formula based on map.getZoom() value

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.