Add on-zoom and on-reposition callbacks

Andrew Sullivan · Andrew Sullivan · commit 9bd0b24d2fb0 · 2014-08-09T16:32:42.000-07:00
Using scope['someCallbackMethodName']() seems very kludgy, but since
we're purposefully not using isolate scope, we can't pass methods
directly into our directive scope, so we're using the "callback" attrs
as essentially keys to the methods on the parent scope.
diff --git a/dist/angular-mapbox.js b/dist/angular-mapbox.js
@@ -56,6 +56,18 @@ angular.module('angularMapbox').directive('mapbox', function($compile, $q) {
         var group = new L.featureGroup(scope.markers);
         scope.map.fitBounds(group.getBounds());
       };
+
+      if(attrs.onReposition) {
+        scope.map.on('dragend', function() {
+          scope[attrs.onReposition](scope.map.getBounds());
+        });
+      }
+
+      if(attrs.onZoom) {
+        scope.map.on('zoomend', function() {
+          scope[attrs.onZoom](scope.map.getBounds());
+        });
+      }
     },
     template: '<div class="angular-mapbox-map" ng-transclude></div>',
     controller: function($scope) {
diff --git a/examples/example-app.js b/examples/example-app.js
@@ -69,4 +69,14 @@ angularMapboxExample.controller('demoController', function($scope) {
       }
     ]
   };
+
+  $scope.mapMovedCallback = function(bounds) {
+    console.log('You repositioned the map to:');
+    console.log(bounds);
+  };
+
+  $scope.mapZoomedCallback = function(bounds) {
+    console.log('You zoomed the map to:');
+    console.log(bounds);
+  };
 });
diff --git a/examples/index.html b/examples/index.html
@@ -8,8 +8,16 @@
   <link rel="stylesheet" href="../lib/MarkerCluster.Default.css" />
 </head>
 <body ng-app="angular-mapbox-example" ng-controller="demoController">
-  <mapbox map-id="licyeus.i9pkgkg8" lat="47.643569" lng="-122.329453">
-    <marker ng-repeat="market in farmersMarkets | filter: filterTerm" lat="{{market.coords.lat}}" lng="{{market.coords.lng}}" color="teal" icon="grocery">
+  <mapbox map-id="licyeus.i9pkgkg8"
+          lat="47.643569"
+          lng="-122.329453"
+          on-reposition="mapMovedCallback"
+          on-zoom="mapZoomedCallback">
+    <marker ng-repeat="market in farmersMarkets | filter: filterTerm"
+            lat="{{market.coords.lat}}"
+            lng="{{market.coords.lng}}"
+            color="teal"
+            icon="grocery">
       <h1>{{market.name}}</h1>
       <p>{{market.times}}</p>
     </marker>
diff --git a/src/directives/mapbox.js b/src/directives/mapbox.js
@@ -30,6 +30,18 @@ angular.module('angularMapbox').directive('mapbox', function($compile, $q) {
         var group = new L.featureGroup(scope.markers);
         scope.map.fitBounds(group.getBounds());
       };
+
+      if(attrs.onReposition) {
+        scope.map.on('dragend', function() {
+          scope[attrs.onReposition](scope.map.getBounds());
+        });
+      }
+
+      if(attrs.onZoom) {
+        scope.map.on('zoomend', function() {
+          scope[attrs.onZoom](scope.map.getBounds());
+        });
+      }
     },
     template: '<div class="angular-mapbox-map" ng-transclude></div>',
     controller: function($scope) {
