Skip to content

Leaflet plugin for letting users select an area of the map using a rectangle, and get the bounding box

Notifications You must be signed in to change notification settings

heyman/leaflet-areaselect

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

63 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Leaflet AreaSelect npm version

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, keepAspectRatio:false});
    areaSelect.addTo(map);
    
    // Read the bounding 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();

To make it keep the aspect ratio:

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

To set the selected area (not compatible with keepAspectRatio:true):

    areaSelect.setBounds([{lat:59.2272559, lng:17.7606917}, {lat:59.4402838, lng:18.2000673}]);

See it in action

Check out the bundled example.

Author

AreaSelect is developed by Jonatan Heyman.

License

MIT License

About

Leaflet plugin for letting users select an area of the map using a rectangle, and get the bounding box

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published