javascriptleafletcartographyleaflet-geoman

Is there any way to limit the size of the circle while it is being drawn in leaflet-geoman?


As you may know, in leaflet-geoman there's a function called "drawCircle" that can let you draw a circle having a pivot in the center and expanding the radius with the mouse. For my usage, I wanted to limit that feature WHILE the circle it's being dragged, because for now all I do is check that the circle isn't too big AFTER the pm:create event.

This is what I'm doing now:

       if (e.layer.getRadius() > 400) {
            attivaToast("Circle is too big!", "error", "#e74c3c");
            map.removeLayer(e.layer)
            return;
        }

And this is what I want, but I can't do:

map.on('pm:someCircleDragEvent' e=> checkCircleSize(e));

If you have any ideas, thanks in advance.

PS: I don't want to use Leaflet.draw or other plugins.


Solution

  • For a fast fix you can call:

    map.pm.Draw.Circle._syncCircleRadius = function _syncCircleRadius() {
        var A = this._centerMarker.getLatLng();
    
        var B = this._hintMarker.getLatLng();
    
        var distance = A.distanceTo(B);
        if(distance < 500){
            this._layer.setRadius(distance);
        }
      }
    

    This is a nice idea, I will implement it in leaflet-geoman 👍