Leaflet – Add Circle Around Mouse Icon on Draw

Question

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?

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) {
    circle.addTo(map);
  });
  map.on('draw:created', function (event) {
    circle.removeFrom(map);
  }

  map.on('mousemove', function(evt) {
    circle.setLatLng(evt.latlng);
  });
  map.on('zoomend', function(evt) {
    var newRadius =  // some formula based on map.getZoom() value
    circle.setRadius(newRadius);
  });