Re-worked the bidirectional sync of data between the map and the scop…

…e center property, and implemented test cases for that
tombatossals · May 12, 2013 · ed6298a · ed6298a
1 parent fd3994c
commit ed6298a
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 73 deletions.
diff --git a/src/angular-leaflet-directive.js b/src/angular-leaflet-directive.js
@@ -23,91 +23,34 @@ leafletDirective.directive("leaflet", ["$http", "$log", function ($http, $log) {
                 scope.map = map;
             }
 
-            var maxZoom = scope.maxZoom || 12;
-            var point = new L.LatLng(0, 0);
-
-            map.setView(point, 1);
+            // Set initial view
+            map.setView([0, 0], 1);
 
             // Set tile layer
             var tilelayer = scope.tilelayer || 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
+            var maxZoom = scope.maxZoom || 12;
             L.tileLayer(tilelayer, { maxZoom: maxZoom }).addTo(map);
 
-            // Manage map bounds
-            if (attrs.bounds) {
-                scope.bounds = map.getBounds();
-                map.on('moveend',function(s){
-                    scope.$apply(function (s) {
-                        s.bounds = map.getBounds();
-                    });
-                });
-            }
-
             // Manage map center events
-            if (attrs.center !== undefined && scope.center !== undefined) {
+            if (attrs.center && scope.center) {
 
-                if (scope.center.lat !== undefined && scope.center.lng !== undefined && scope.center.zoom !== undefined) {
+                if (scope.center.lat && scope.center.lng && scope.center.zoom) {
                     map.setView(new L.LatLng(scope.center.lat, scope.center.lng), scope.center.zoom);
-                }
-
-                if (scope.center.autoDiscover === true) {
+                } else if (scope.center.autoDiscover === true) {
                     map.locate({ setView: true, maxZoom: maxZoom });
                 }
 
-                // Listen for map drags
-                var dragging_map = false;
-                map.on("dragstart", function(e) {
-                    dragging_map = true;
-                });
-
-                map.on("drag", function (e) {
+                map.on("dragend", function(e) {
                     scope.$apply(function (s) {
                         s.center.lat = map.getCenter().lat;
                         s.center.lng = map.getCenter().lng;
+                        s.center.zoom = map.getZoom();
                     });
                 });
 
-                map.on("dragend", function(e) {
-                    dragging_map= false;
-                });
-
-                if (scope.center.lng !== undefined && scope.center.lat !== undefined) {
-                    scope.$watch("center.lng", function (newValue, oldValue) {
-                        if (dragging_map) return;
-                        map.setView(new L.LatLng(map.getCenter().lat, newValue), map.getZoom());
-                    });
-
-                    scope.$watch("center.lat", function (newValue, oldValue) {
-                        if (dragging_map) return;
-                        map.setView(new L.LatLng(newValue, map.getCenter().lng), map.getZoom());
-                    });
-                }
-
-                // Manage zoom events
-                var zooming_map = false;
-                map.on("zoomstart", function (e) {
-                    zooming_map = true;
-                });
-
-                // Listen for zoom on DOM
-                scope.$watch("center.zoom", function (newValue, oldValue) {
-                    if (zooming_map || !newValue) return;
-                    if (!scope.$$phase) {
-                        map.setZoom(newValue);
-//                        scope.$apply(function (s) {
-//                            s.bounds = map.getBounds();
-//                        });
-                    }
-                });
-
-                map.on("zoomend", function (e) {
-                    if (scope.center === undefined || scope.center.zoom === undefined) return;
-                    if (!scope.$$phase) {
-                        scope.$apply(function (s) {
-                            s.center.zoom = map.getZoom();
-                        });
-                        zooming_map = false;
-                    }
-                });
+                scope.$watch("center", function (center, oldValue) {
+                    map.setView([center.lat, center.lng], center.zoom);
+                }, true);
             }
 
             if (attrs.markers !== undefined) {
@@ -207,7 +150,7 @@ leafletDirective.directive("leaflet", ["$http", "$log", function ($http, $log) {
                         }
                     }
                     polyline.setLatLngs(latlngs);
-		        }, true);
+                }, true);
 
                 scope.$watch("path.weight", function(weight) {
                     polyline.setStyle({

diff --git a/test/unit/directivesSpec.js b/test/unit/directivesSpec.js
@@ -25,7 +25,7 @@ describe('Directive: leaflet', function() {
         });
     });
 
-    it('should update the map center if changed the scope properties', function() {
+    it('should update the map center if the initial center scope properties are set', function() {
         inject(function($rootScope, $compile) {
             var center = {
                 lat: 0.966,
@@ -36,10 +36,32 @@ describe('Directive: leaflet', function() {
             var element = angular.element('<leaflet center="center" map="map"></leaflet>');
             element = $compile(element)($rootScope);
             var map = element.scope().map;
-            $rootScope.$digest();
             expect(map.getZoom()).toEqual(center.zoom);
-            expect(map.getCenter().lat).toBeCloseTo(center.lat);
-            expect(map.getCenter().lng).toBeCloseTo(center.lng);
+            expect(map.getCenter().lat).toBeCloseTo(0.966);
+            expect(map.getCenter().lng).toBeCloseTo(2.02);
         });
     });
+
+    it('should update the map center if the scope center properties changes', function() {
+        inject(function($rootScope, $compile) {
+            var center = {
+                lat: 0.966,
+                lng: 2.02,
+                zoom: 4
+            }
+            angular.extend($rootScope, { center: center });
+            var element = angular.element('<leaflet center="center" map="map"></leaflet>');
+            element = $compile(element)($rootScope);
+            var map = element.scope().map;
+            center.lat = 2.02;
+            center.lng = 4.04;
+            center.zoom = 8;
+            $rootScope.$watch(function() {
+                expect(map.getCenter().lat).toBeCloseTo(2.02);
+                expect(map.getCenter().lng).toBeCloseTo(4.04);
+                expect(map.getZoom()).toEqual(8);
+            });
+        });
+    });
+
 });