mohsen-angular-leaflet-directive/doc/lf-maxbounds.md

angular-leaflet-directive - An AngularJS directive to easily interact with Leaflet maps

'lf-maxbounds' Documentation
============================

This sub-directive needs the **leaflet** main directive, so it is normally used as an attribute of the *leaflet* tag, like this:

```
<leaflet lf-maxbounds="maxbounds"></leaflet>
```

The functionality will be to limit the panning of the rendered map to the bounds set inside the _maxbounds_ object. It's not a bidirectional relationship, only the changes made to our _maxbounds_ object on the controller scope will affect the map, but no vice versa.

```
$scope.maxbounds = {
    southWest: {
        lat:51.508742458803326,
        lng: -0.087890625
    },
    northEast: {
        lat:51.508742458803326,
        lng:-0.087890625
    }

}
```

Defining the bounds is a little complex, so we have a helper which will allow us to be more concise on the definition making use of and array with two arrays with to values inside (lat, lng). To use it, we must make use of the _leafletBoundsHelpers_ service on our controller. For example:

```
app.controller("DemoController", [ "$scope", "leafletBoundsHelpers", function($scope, leafletBoundsHelpers) {
    var maxbounds = leafletBoundsHelpers.createBoundsFromArray([
         [ 51.508742458803326, -0.087890625 ],
         [ 51.508742458803326, -0.087890625 ]
    ]);
    angular.extend($scope, {
        maxbounds: maxbounds
    });
});
```

And that's all, we can see how the map is affected when we change the _maxbounds_ scope values, like [this example](http://tombatossals.github.io/angular-leaflet-directive/examples/0106-basic-maxbounds-example.html).