1

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?

0

1 Answer 1

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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