How to approach limiting the size of a rectangle?

[jziggas]

I'm wondering if anyone else has tried this before as Googling didn't show much. My project uses the rectangle polygon from Leaflet.draw as a bounding box to search within an area of interest on a map. I'd like to be able to place a limit on how large the size of a rectangle can become (whether it is by specifying a real unit of area such as 1000 miles or by hooking into something and calculating area myself). But I'm not even sure how to approach this or if it is even possible to stop a polygon from reaching a certain size while being drawn. Any thoughts?

[germanjoey]

#651 basically does this. I recommend applying it yourself, or at the portions related to bounds. With it, just set map's maxbounds after hooking into drawstart and L.Draw will force all drawn or edited shapes to remain in that box.

If you'd like to enforce other sorts of size limits, such as by subarea, you might need to modify L.Draw.Rectangle and L.Edit.Rectangle yourself. It would be a pretty similar modification though.

[jziggas]

... just set map's maxbounds ...

I'm not trying to restrict what the user can view inside the map though, just the size of the bounding box within the map. Unless I'm misunderstanding something?

[ddproxy]

You need a listener while drawing the rectangle to check it's size on each change and perform operations I the geometry while drawing.

It would be easier if you only have one drawn geometry at a time, but the events exist. https://leaflet.github.io/Leaflet.draw/docs/leaflet-draw-latest.html#l-draw-event

[jziggas]

Thanks. Yeah we only allow one rectangle (and no other polygons) to exist on the map at any time. Does an event actually fire as the rectangle is being sized or just when drawing has started (or saved)? What would stop the rectangle from being drawn beyond a certain size?

[germanjoey]

During edit mode, the event fires continuously as a rectangle is being resized. However, during draw mode, the event only fires once the rectangle has finished drawing. I think ddproxy is suggesting that you use an event to check the size/area of your rectangle after it has been created, and then resize it to your constraints.

What I was suggesting was that you hook onto drawstart and set maxbounds, and then remove it on drawstop. However, that would only work if you were drawing squares I guess. That's why I think what you really want to do is do what I had done for maxbounds in #651, but instead for an arbitrary bounds that is calculated on the fly based on the shape's area.

[jziggas]

I guess I'm not understanding when you are saying to use maxBounds. My understanding of maxBounds is the one in the Leaflet docs that is restricting the view of the map:

When this option is set, the map restricts the view to the given geographical bounds, bouncing the user back if the user tries to pan outside the view. To set the restriction dynamically, use setMaxBounds method.

Is this what you're talking about or something different?

[germanjoey]

That's right. If you look at #651, there's code there that will also force any drawn shapes to respect that boundary. This is similar to what you want. My suggestion is that you modify that code to use your own criteria (e.g. require a bounding box that has an upper limit on area, or whatever you want) instead of simply using the map's maxbounds.

[jziggas]

Ah okay. I will have to look into the code of your PR then. Thanks for clarifying.