Skip to content

Commit 3c9f204

Browse files
tombatossalstombatossals
committed
updated center and bounds sync logic
1 parent 2206871 commit 3c9f204

File tree

5 files changed

+99
-66
lines changed

5 files changed

+99
-66
lines changed

‎dist/angular-leaflet-directive.js‎

Lines changed: 38 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -107,11 +107,10 @@
107107
'leafletHelpers',
108108
function ($log, $q, $location, leafletMapDefaults, leafletHelpers) {
109109
var isDefined = leafletHelpers.isDefined, isNumber = leafletHelpers.isNumber, isSameCenterOnMap = leafletHelpers.isSameCenterOnMap, safeApply = leafletHelpers.safeApply, isValidCenter = leafletHelpers.isValidCenter;
110-
var notifyNewCenter = function (scope, attrs, moveend) {
111-
// Notify the bounds if the center has finished moving
112-
if (isDefined(moveend)) {
113-
scope.$broadcast('centerChanged', scope.center);
114-
}
110+
var notifyCenterChangedToBounds = function (scope, map) {
111+
scope.$broadcast('boundsChanged', map.getBounds());
112+
};
113+
var notifyCenterUrlHashChanged = function (scope, attrs) {
115114
if (!isDefined(attrs.urlHashCenter)) {
116115
return;
117116
}
@@ -225,11 +224,13 @@
225224
center.lat,
226225
center.lng
227226
], center.zoom);
227+
notifyCenterChangedToBounds(leafletScope, map);
228228
}, true);
229229
map.whenReady(function () {
230230
mapReady = true;
231231
});
232232
map.on('moveend', function () {
233+
notifyCenterUrlHashChanged(leafletScope, attrs);
233234
//$log.debug("updated center on map...");
234235
if (isSameCenterOnMap(centerModel, map)) {
235236
//$log.debug("same center in model, no need to update again.");
@@ -243,7 +244,6 @@
243244
zoom: map.getZoom(),
244245
autoDiscover: false
245246
};
246-
notifyNewCenter(leafletScope, attrs, true);
247247
});
248248
});
249249
if (centerModel.autoDiscover === true) {
@@ -615,32 +615,45 @@
615615
],
616616
link: function (scope, element, attrs, controller) {
617617
var isDefined = leafletHelpers.isDefined, createLeafletBounds = leafletBoundsHelpers.createLeafletBounds, leafletScope = controller[0].getLeafletScope(), mapController = controller[0], centerController = controller[1];
618+
var emptyBounds = function (bounds) {
619+
if (bounds._southWest.lat === 0 && bounds._southWest.lng === 0 && bounds._northEast.lat === 0 && bounds._northEast.lng === 0) {
620+
return true;
621+
}
622+
return false;
623+
};
618624
mapController.getMap().then(function (map) {
619-
leafletScope.$on('centerChanged', function () {
620-
var mapBounds = map.getBounds();
621-
var newScopeBounds = {
622-
northEast: {
623-
lat: mapBounds.getNorthEast().lat,
624-
lng: mapBounds.getNorthEast().lng
625-
},
626-
southWest: {
627-
lat: mapBounds.getSouthWest().lat,
628-
lng: mapBounds.getSouthWest().lng
629-
}
630-
};
631-
if (!angular.equals(leafletScope.bounds, newScopeBounds)) {
632-
leafletScope.bounds = newScopeBounds;
633-
}
634-
});
635625
centerController.getCenter().then(function () {
626+
leafletScope.$on('boundsChanged', function (event, bounds) {
627+
//$log.debug("updated map bounds...");
628+
if (emptyBounds(bounds)) {
629+
return;
630+
}
631+
var scope = event.currentScope;
632+
var newScopeBounds = {
633+
northEast: {
634+
lat: bounds._northEast.lat,
635+
lng: bounds._northEast.lng
636+
},
637+
southWest: {
638+
lat: bounds._southWest.lat,
639+
lng: bounds._southWest.lng
640+
}
641+
};
642+
if (!angular.equals(scope.bounds, newScopeBounds)) {
643+
//$log.debug("Need to update scope bounds.");
644+
scope.bounds = newScopeBounds;
645+
}
646+
});
636647
map.whenReady(function () {
637-
leafletScope.$watch('bounds', function (newBounds) {
638-
if (!isDefined(newBounds)) {
648+
leafletScope.$watch('bounds', function (bounds) {
649+
//$log.debug("updated bounds...");
650+
if (!isDefined(bounds)) {
639651
$log.error('[AngularJS - Leaflet] Invalid bounds');
640652
return;
641653
}
642-
var leafletBounds = createLeafletBounds(newBounds);
654+
var leafletBounds = createLeafletBounds(bounds);
643655
if (leafletBounds && !map.getBounds().equals(leafletBounds)) {
656+
//$log.debug("Need to update map bounds.");
644657
map.fitBounds(leafletBounds);
645658
}
646659
}, true);

‎dist/angular-leaflet-directive.min.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/directives/bounds.js‎

Lines changed: 33 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -12,35 +12,49 @@ angular.module("leaflet-directive").directive('bounds', function ($log, leafletH
1212
mapController = controller[0],
1313
centerController = controller[1];
1414

15+
var emptyBounds = function(bounds) {
16+
if (bounds._southWest.lat === 0 && bounds._southWest.lng === 0 && bounds._northEast.lat === 0 && bounds._northEast.lng === 0) {
17+
return true;
18+
}
19+
return false;
20+
};
21+
1522
mapController.getMap().then(function(map) {
16-
leafletScope.$on("centerChanged", function() {
17-
var mapBounds = map.getBounds();
18-
var newScopeBounds = {
19-
northEast: {
20-
lat: mapBounds.getNorthEast().lat,
21-
lng: mapBounds.getNorthEast().lng
22-
},
23-
southWest: {
24-
lat: mapBounds.getSouthWest().lat,
25-
lng: mapBounds.getSouthWest().lng
23+
centerController.getCenter().then(function() {
24+
leafletScope.$on("boundsChanged", function(event, bounds) {
25+
//$log.debug("updated map bounds...");
26+
if (emptyBounds(bounds)) {
27+
return;
2628
}
27-
};
29+
var scope = event.currentScope;
30+
var newScopeBounds = {
31+
northEast: {
32+
lat: bounds._northEast.lat,
33+
lng: bounds._northEast.lng
34+
},
35+
southWest: {
36+
lat: bounds._southWest.lat,
37+
lng: bounds._southWest.lng
38+
}
39+
};
2840

29-
if (!angular.equals(leafletScope.bounds, newScopeBounds)) {
30-
leafletScope.bounds = newScopeBounds;
31-
}
32-
});
41+
if (!angular.equals(scope.bounds, newScopeBounds)) {
42+
//$log.debug("Need to update scope bounds.");
43+
scope.bounds = newScopeBounds;
44+
}
45+
});
3346

34-
centerController.getCenter().then(function() {
3547
map.whenReady(function() {
36-
leafletScope.$watch('bounds', function(newBounds) {
37-
if (!isDefined(newBounds)) {
48+
leafletScope.$watch('bounds', function(bounds) {
49+
//$log.debug("updated bounds...");
50+
if (!isDefined(bounds)) {
3851
$log.error('[AngularJS - Leaflet] Invalid bounds');
3952
return;
4053
}
4154

42-
var leafletBounds = createLeafletBounds(newBounds);
55+
var leafletBounds = createLeafletBounds(bounds);
4356
if (leafletBounds && !map.getBounds().equals(leafletBounds)) {
57+
//$log.debug("Need to update map bounds.");
4458
map.fitBounds(leafletBounds);
4559
}
4660
}, true);

‎src/directives/center.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,11 @@ angular.module("leaflet-directive").directive('center',
77
safeApply = leafletHelpers.safeApply,
88
isValidCenter = leafletHelpers.isValidCenter;
99

10-
var notifyNewCenter = function(scope, attrs, moveend) {
11-
// Notify the bounds if the center has finished moving
12-
if (isDefined(moveend)) {
13-
scope.$broadcast("centerChanged", scope.center);
14-
}
10+
var notifyCenterChangedToBounds = function(scope, map) {
11+
scope.$broadcast("boundsChanged", map.getBounds());
12+
};
1513

14+
var notifyCenterUrlHashChanged = function(scope, attrs) {
1615
if (!isDefined(attrs.urlHashCenter)) {
1716
return;
1817
}
@@ -120,13 +119,15 @@ angular.module("leaflet-directive").directive('center',
120119

121120
//$log.debug("updating map center...", center);
122121
map.setView([center.lat, center.lng], center.zoom);
122+
notifyCenterChangedToBounds(leafletScope, map);
123123
}, true);
124124

125125
map.whenReady(function() {
126126
mapReady = true;
127127
});
128128

129129
map.on("moveend", function(/* event */) {
130+
notifyCenterUrlHashChanged(leafletScope, attrs);
130131
//$log.debug("updated center on map...");
131132
if (isSameCenterOnMap(centerModel, map)) {
132133
//$log.debug("same center in model, no need to update again.");
@@ -140,7 +141,6 @@ angular.module("leaflet-directive").directive('center',
140141
zoom: map.getZoom(),
141142
autoDiscover: false
142143
};
143-
notifyNewCenter(leafletScope, attrs, true);
144144
});
145145
});
146146

‎test/unit/boundsDirectiveSpec.js‎

Lines changed: 20 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,10 @@ describe('Directive: bounds', function() {
2828
};
2929
});
3030

31+
afterEach(inject(function($rootScope) {
32+
$rootScope.$apply();
33+
}));
34+
3135
it('updates the map bounds if bounds are provided', function() {
3236
angular.extend(scope, {
3337
bounds: bounds,
@@ -51,7 +55,7 @@ describe('Directive: bounds', function() {
5155

5256
it('allows empty bounds initialization', function(){
5357
angular.extend(scope, {
54-
bound: {},
58+
bounds: {},
5559
center: {}
5660
});
5761
var element = angular.element('<leaflet bounds="bounds" center="center"></leaflet>');
@@ -66,30 +70,32 @@ describe('Directive: bounds', function() {
6670
var mapBounds = map.getBounds();
6771
expect(mapBounds.getSouthWest().lat).toBeCloseTo(0);
6872
expect(mapBounds.getSouthWest().lng).toBeCloseTo(0);
69-
expect(mapBounds.getNorthEast().lat).toBeCloseTo(0);
7073
expect(mapBounds.getNorthEast().lng).toBeCloseTo(0);
7174
});
7275

7376
it('should update map bounds when map initializes', function() {
7477
angular.extend(scope, {
75-
bound: {},
76-
center: {}
78+
bounds: {},
79+
center: { lat: 5 , lng: -3, zoom: 4 }
7780
});
7881
var element = angular.element('<leaflet bounds="bounds" center="center"></leaflet>');
7982
element = $compile(element)(scope);
83+
84+
var map;
85+
leafletData.getMap().then(function(leafletMap) {
86+
map = leafletMap;
87+
});
8088
scope.$digest();
8189

82-
leafletData.getMap().then(function(map) {
83-
var bounds = scope.bounds;
84-
var mapBounds = map.getBounds();
90+
var bounds = scope.bounds;
91+
var mapBounds = map.getBounds();
8592

86-
expect(bounds.northEast).toBeNull();
87-
expect(bounds.southWest).toBeDefined();
93+
expect(bounds.northEast).toBeDefined();
94+
expect(bounds.southWest).toBeDefined();
8895

89-
expect(bounds.northEast.lat).toBe(mapBounds.getNorthEast().lat);
90-
expect(bounds.northEast.lng).toBe(mapBounds.getNorthEast().lng);
91-
expect(bounds.southWest.lat).toBe(mapBounds.getSouthWest().lat);
92-
expect(bounds.southWest.lng).toBe();
93-
});
96+
expect(bounds.northEast.lat).toBe(mapBounds._northEast.lat);
97+
expect(bounds.northEast.lng).toBe(mapBounds._northEast.lng);
98+
expect(bounds.southWest.lat).toBe(mapBounds._southWest.lat);
99+
expect(bounds.southWest.lng).toBe(mapBounds._southWest.lng);
94100
});
95101
});

0 commit comments

Comments
 (0)