1.3.0 • Published 4 years ago

@lweller/leaflet-areaselect v1.3.0

Weekly downloads
-
License
MIT
Repository
github
Last release
4 years ago

Leaflet AreaSelect

AreaSelect is a leaflet plugin for letting users select a square area (bounding box), using a resizable centered box on top of the map.

longitude.me

Another similar plugin is leaflet-locationfilter, which solves the same problem but provides a rectangle that is movable and not fixed to the center, but doesn't support keeping the aspect ratio.

Example Code

    // Add it to the map
    var areaSelect = L.areaSelect({width:200, height:300, minWidth:40, minHeight:40, minHorizontalSpacing:40, minVerticalSpacing:100});
    areaSelect.addTo(map);
    
    // Read the bouding box
    var bounds = areaSelect.getBounds();
    
    // Get a callback when the bounds change
    areaSelect.on("change", function() {
        console.log("Bounds:", this.getBounds());
    });
    
    // Set the dimensions of the box
    areaSelect.setDimensions({width: 500, height: 500})

    // And to remove it do:
    //areaSelect.remove();

You can also make it keep the aspect ratio:

    var areaSelect = L.areaSelect({width:200, height:300, keepAspectRatio:true});

If you need the coordinates for all four corners of the bounding box:

    var bboxCoordinates = areaSelect.getBBoxCoordinates();

See it in action

Check out the bundled example, or this JSFiddle where I've set keepAspectRatio:true.

Author

AreaSelect is developed by Jonatan Heyman.

Further improvements made by Lucien Weller.

Change Log

1.2.1

  • Initial Version published to npmjs under spoce lweller

1.3.0

  • Feature: added events to cover the complete resizing cycle (resizsestart, resize, resizeend)
  • Feature: exposed in type definition current dimension of area with getDimensions
  • Fix: extending AreaSelect form Evented in type definition
  • Fix: rendering when area select dimension are bigger than map
  • Fix: position of handles when a scrollbar is display on page

License

MIT License

1.3.0

4 years ago

1.2.1

4 years ago

1.2.0

4 years ago

1.0.0

4 years ago