fix(features): Reworked 'maxBounds' attribute with new maxbounds-exam…

…ple.html
tombatossals · Dec 27, 2013 · e60a152 · e60a152
1 parent ea836c3
commit e60a152
Show file tree

Hide file tree

Showing 7 changed files with 96 additions and 20 deletions.
diff --git a/dist/angular-leaflet-directive.js b/dist/angular-leaflet-directive.js
@@ -965,9 +965,11 @@ angular.module("leaflet-directive").directive('maxbounds', function ($log, leafl
 
             controller.getMap().then(function(map) {
                 leafletScope.$watch("maxBounds", function (maxBounds) {
+                    // Unset any previous maxbounds
+                    map.setMaxBounds();
+                    map.fire("zoomlevelschange");
+
                     if (!isValidBounds(maxBounds)) {
-                        // Unset any previous maxbounds
-                        map.setMaxBounds();
                         return;
                     }
                     map.setMaxBounds( [
@@ -1112,7 +1114,6 @@ angular.module("leaflet-directive").factory('leafletMapDefaults', function (leaf
 
             var mapDefaults = {
                 maxZoom: d.maxZoom,
-                minZoom: d.minZoom,
                 keyboard: d.keyboard,
                 dragging: d.dragging,
                 zoomControl: d.zoomControl,
@@ -1123,6 +1124,10 @@ angular.module("leaflet-directive").factory('leafletMapDefaults', function (leaf
                 crs: d.crs
             };
 
+            if (isDefined(d.minZoom)) {
+                mapDefaults.minZoom = d.minZoom;
+            }
+
             if (isDefined(d.zoomAnimation)) {
                 mapDefaults.zoomAnimation = d.zoomAnimation;
             }

diff --git a/dist/angular-leaflet-directive.min.js b/dist/angular-leaflet-directive.min.js
diff --git a/examples/maxbounds-example.html b/examples/maxbounds-example.html
@@ -10,19 +10,47 @@
     <![endif]-->
     <script>
         angular.module("demoapp", ["leaflet-directive"]);
-        function DemoController($scope) {
-            angular.extend($scope, {
-                maxBounds: {
+        function DemoController($scope, leafletData) {
+            $scope.regions = {
+                london: {
+                    northEast: {
+                        lat: 51.51280224425956,
+                        lng: -0.11681556701660155
+                    },
                     southWest: {
-                        lat: 47.49632829382891,
-                        lng: 15.459823608398438
+                        lat: 51.50211782162702,
+                        lng: -0.14428138732910156
+                    }
+                },
+                lisbon: {
+                    southWest: {
+                        lat: 38.700247900602726,
+                        lng: -9.165430068969727
                     },
                     northEast: {
-                        lat: 47.40346162477753,
-                        lng: 15.240097045898438
+                        lat: 38.72703673982525,
+                        lng: -9.110498428344725
                     }
+                },
+                warszawa: {
+                    southWest: {
+                        lat: 52.14823737817847,
+                        lng: 20.793685913085934
+                    },
+                    northEast: {
+                        lat: 52.31645452105213,
+                        lng: 21.233139038085938
+                    }
+                }
+            };
+
+            angular.extend($scope, {
+                maxBounds: {},
+                defaults: {
+                    minZoom: 4
                 }
             });
+
         };
     </script>
     <style>
@@ -33,6 +61,13 @@
     </style>
   </head>
   <body ng-controller="DemoController">
-    <leaflet maxBounds="maxBounds"></leaflet>
+    <form>
+        <button ng-click="maxBounds=regions.london">London region</button>
+        <button ng-click="maxBounds=regions.lisbon">Lisbon region</button>
+        <button ng-click="maxBounds=regions.warszawa">Warszawa region</button>
+        <button ng-click="maxBounds={}">Unset maxbounds</button>
+    </form>
+
+    <leaflet maxBounds="maxBounds" defaults="defaults"></leaflet>
   </body>
 </html>
diff --git a/src/directives/maxBounds.js b/src/directives/maxBounds.js
@@ -12,9 +12,11 @@ angular.module("leaflet-directive").directive('maxbounds', function ($log, leafl
 
             controller.getMap().then(function(map) {
                 leafletScope.$watch("maxBounds", function (maxBounds) {
+                    // Unset any previous maxbounds
+                    map.setMaxBounds();
+                    map.fire("zoomlevelschange");
+
                     if (!isValidBounds(maxBounds)) {
-                        // Unset any previous maxbounds
-                        map.setMaxBounds();
                         return;
                     }
                     map.setMaxBounds( [

diff --git a/src/services/leafletMapDefaults.js b/src/services/leafletMapDefaults.js
@@ -51,7 +51,6 @@ angular.module("leaflet-directive").factory('leafletMapDefaults', function (leaf
 
             var mapDefaults = {
                 maxZoom: d.maxZoom,
-                minZoom: d.minZoom,
                 keyboard: d.keyboard,
                 dragging: d.dragging,
                 zoomControl: d.zoomControl,
@@ -62,6 +61,10 @@ angular.module("leaflet-directive").factory('leafletMapDefaults', function (leaf
                 crs: d.crs
             };
 
+            if (isDefined(d.minZoom)) {
+                mapDefaults.minZoom = d.minZoom;
+            }
+
             if (isDefined(d.zoomAnimation)) {
                 mapDefaults.zoomAnimation = d.zoomAnimation;
             }

diff --git a/test/e2e/06-maxbounds-example.js b/test/e2e/06-maxbounds-example.js
@@ -0,0 +1,31 @@
+'use strict';
+
+describe('Loading bounds-example.html', function() {
+
+    var ptor, driver;
+    beforeEach(function() {
+        ptor = protractor.getInstance();
+        browser.get('maxbounds-example.html');
+        driver = ptor.driver;
+    });
+
+    it('should update the bounds values in the input if clicked the zoom control', function() {
+        ptor.wait(function() {
+            return ptor.isElementPresent(by.css('img.leaflet-tile-loaded'));
+        });
+
+        expect(element(by.model("bounds.southWest.lat")).getAttribute("value")).toBe("51.508074696286876");
+        expect(element(by.model("bounds.southWest.lng")).getAttribute("value")).toBe("-0.08960723876953125");
+        expect(element(by.model("bounds.northEast.lat")).getAttribute("value")).toBe("51.509410211532874");
+        expect(element(by.model("bounds.northEast.lng")).getAttribute("value")).toBe("-0.08617401123046874");
+
+        element(by.xpath('.//*[@title="Zoom out"]')).click().then(function() {
+            ptor.sleep(400);
+            expect(element(by.model("bounds.southWest.lat")).getAttribute("value")).toBe("51.507406923983446");
+            expect(element(by.model("bounds.southWest.lng")).getAttribute("value")).toBe("-0.0913238525390625");
+            expect(element(by.model("bounds.northEast.lat")).getAttribute("value")).toBe("51.510077954475555");
+            expect(element(by.model("bounds.northEast.lng")).getAttribute("value")).toBe("-0.0844573974609375");
+        });
+
+    });
+});
diff --git a/test/unit/maxBoundsDirectiveSpec.js b/test/unit/maxBoundsDirectiveSpec.js
@@ -27,12 +27,12 @@ describe('Directive: leaflet', function() {
             },
             maxBounds: {
                 southWest: {
-                    lat: 47.200,
-                    lng: 15.200
+                    lat: 52.14823737817847,
+                    lng: 20.793685913085934
                 },
                 northEast: {
-                    lat: 47.200,
-                    lng: 15.200
+                    lat: 52.31645452105213,
+                    lng: 21.233139038085938
                 }
             }
         });