Is it possible to place size and number limitations in Leaflet.Draw?

Question

This question is directed to Leaflet users (and those who use the Leaflet.draw plugin)...

I'm using Leaflet and would like to allow my user to draw 1--and only 1--single polygon over any area of the map. I would also like to limit the size of that polygon in some way (such as limiting the length of the side for a square or the area covered it covers--preferably specified in degrees so that the set size limits would translate regardless of the zoom level).

My end goal is simply to extract the coordinates of the 4 square vertices or the coordinates covered by the polygon area.

That said, I found the Leaflet.Draw plugin. It is fantastic, however, I need to limit its functionality to my requirements (only 1 polygon drawn at a time and, in particular, the size cannot be drawn too large). Is this possible to do? If so, how?

Regardless of if it is or is not possible, is there a better way to go about doing this?

Answer 1

Can I propose another solution to this issue?

I would limit the number of polygons to one by doing the following:

 map.on('draw:created', function (e) {
    var layer = e.layer;
    if(drawnItems && drawnItems.getLayers().length!==0){
      drawnItems.clearLayers();
    }           
    drawnItems.addLayer(layer);     
 });

I am listening to the draw:created event and determine if there is already a marker. If there is, I remove that marker and place my new one in the desired location. Therefore, one less click for user as they no longer need to delete the previous and one marker rule is always enforced.

If you wanted to allow more than one marker you could do a FIFO delete of the oldest layer.

If you do not want to automatically delete a layer, you could either prompt the user or ignore the request.

Answer 2

That said, I found the Leaflet.Draw plugin. It is fantastic, however, I need to limit its functionality to my requirements (only 1 polygon drawn at a time and, in particular, the size cannot be drawn too large). Is this possible to do? If so, how?

I think you'll need to code it yourself.

I see two possibities:

1. hacking the draw plugin (writing your own code inside the plugin)
2. extending the L.Draw.Polygon class from the draw plugin (see the docs about OOP in Leaflet) to create a costum one

1 is faster, 2 is cleaner. You'll have to choose depending on the size of your project.

Answer 3

I did it without hacking the Leaflet Draw source.

After the controls are added to the map, I place a hidden div inside the controls. Then when a polygon is created I display that div. I used CSS to absolute position it over the controls so the buttons are then "disabled" and CSS to make the buttons look faded. If the polygon is deleted then I hide that div.

Not the best solution, but I works without having to edit the source.

After drawControl is added, I add the hidden div:

$('.leaflet-draw-section:first').append('<div class="leaflet-draw-inner-toolbar" title="Polygon already added"></div>');

Here's the JS to toggle them:

map.on('draw:created', function (e) {
    var type = e.layerType,
        layer = e.layer;

    // keep the polygon on the map
    drawnItems.addLayer(layer);

    // disable the create polygon tools
    $('.leaflet-draw-inner-toolbar').show();
});

map.on('draw:deleted', function(e) {
    // enable the create polygon tools
    $('.leaflet-draw-inner-toolbar').hide();
});

Here's the CSS:

.leaflet-draw-inner-toolbar {
    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.6);
    bottom: 0;
    display: none;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}