Using maxBounds to stop panning in Leaflet with angular-leaflet-directive

Question

Now that I have my AngularJS application running, I'm trying to restrict LeafletJS map panning as described in this Mapbox document. The issue is that I am using angular-leaflet-directive and my existing code is written to create the map using the leaflet directive in my AngularJS template. So the existing map is defined in this fashion:

<leaflet id="mymap" markers="markers" center="center" width="100%" height="380px"></leaflet>

How do I getBounds() and setMaxBounds() in a situation like this, where I never explicitly did a call to new L.map('leaflet', {...}))?

Answer 1

bounds and maxBounds properties could be set via angular-leaflet-directive using maxBounds and bounds directives respectively, for example:

<leaflet markers="markers" maxbounds="boundsInfo" bounds="boundsInfo"></leaflet>

where bounds should be specified in the following format:

$scope.boundsInfo = {'northEast': {'lat': 40.774, 'lng': -74.125},'southWest': {'lat': 40.712, 'lng': -74.227}};

Example

angular.module("demoapp", ["leaflet-directive"])
    .controller("CustomizedMarkersController", ['$scope','leafletData', function ($scope, leafletData) {

       
        $scope.boundsInfo = {'northEast': {'lat': 40.774, 'lng': -74.125},'southWest': {'lat': 40.712, 'lng': -74.227}};
        $scope.markers = [];

        leafletData.getMap().then(function (map) {
         
            console.log(map.getBounds());
        });

    }]);

.angular-leaflet-map {
    width: 640px;
    height: 480px;
}

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script type="text/javascript" src="https://code.angularjs.org/1.2.2/angular.js"></script>
<script type="text/javascript" src="https://tombatossals.github.io/angular-leaflet-directive/dist/angular-leaflet-directive.js"></script>
<script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script>

<div ng-app="demoapp" ng-controller="CustomizedMarkersController">
    <leaflet markers="markers" maxbounds="boundsInfo" bounds="boundsInfo" maxZoom="19" minZoom="10"></leaflet>
</div>