examples/0112-basic-maxbounds-pad-example.html

<!DOCTYPE html>
<html ng-app="demoapp">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../bower_components/angular/angular.min.js"></script>
    <script src="../bower_components/leaflet/dist/leaflet.js"></script><script src="../bower_components/angular-simple-logger/dist/index.js"></script>
    <script src="../dist/angular-leaflet-directive.js"></script>
    <link rel="stylesheet" href="../bower_components/leaflet/dist/leaflet.css" />
    <script>
        var app = angular.module("demoapp", ["leaflet-directive"]);
        app.controller("BasicMaxBoundsPadController", ["$scope", "leafletBoundsHelpers", function($scope, leafletBoundsHelpers) {

            var maxbounds = leafletBoundsHelpers.createBoundsFromArray([
                [37.8866, -79.4877],
                [39.7230, -74.9863]
            ]);


            maxbounds.pad = 1.0;

            angular.extend($scope, {
                bounds: maxbounds,
                center: {
                    lat: 37.8866,
                    lng: -79-4877,
                    zoom: 4
                },
                layers: {
                    baselayers: {
                        xyz: {
                            name: 'OpenStreetMap (XYZ)',
                            url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
                            type: 'xyz'
                        }
                    },
                    overlays: {}
                },
                markers: {
                    northeast: {
                        lat: 39.7230,
                        lng: -74.9863,
                        focus: true,
                        title: "Northeast",
                    },
                    southwest: {
                        lat: 37.8866,
                        lng: -79.4877,
                        title: "Southwest",
                    }
                },
                maxbounds: maxbounds
            });
        }]);
    </script>
</head>

<body ng-controller="BasicMaxBoundsPadController">
    <leaflet center="center" layers="layers" markers="markers" maxbounds="maxbounds" width="100%" height="480px"></leaflet>
    <h1>Extend Maxbounds with Pad</h1>
    <p>You can extend maxbounds with a pad property. <a href=http://leafletjs.com/reference.html#latlngbounds-pad>Pad</a> is a percentage by which the latLngBounds will be extended.</p>
    <pre ng-bind="maxbounds | json"></pre>
    <pre ng-bind="markers | json"></pre>
</body>

</html>