feat(markers,paths,geojson,watchOptions): More flexible watch options and more

watch-options has been expanded to include paths and redesigned to handle
more types of watching. `markersWatchOptions` and `geojsonWatchOptions` are no
longer supported. Instead, this direcitve now supports the `watch-options`
attribute, which takes an object that contains the watch options for each
map element type:

```
watchOptions = {
    markers: <markerWatchOptions>,
    geojson: <geojsonWatchOptions>,
    paths: <pathsWatchOptions>
}
```

The watch options for these map element types looks like:

```
{
    type: <watchTypes>,
    individual: {
        type: <watchTypes>
    }
}
```

`<watchTypes>` can be one of:
-`watch`: `$scope.$watch` with no deep watch on the object
-`watchDeep`: `$scope.$watch` with a deep watch on the object
-`watchCollection`: `$scope.$watchCollection` on the object
-`none`: Do not watch the collection

I've removed support for the directive attributes `watch-markers` and
`watch-paths`. While these make sense when set to false, it's ambiguous
how they should function when set to `true`, especially when combined
with `watch-options`.

There are some other minor fixes in this commit (fixing breaking examples,
and another small bug).

BREAKING CHANGE: `markersWatchOptions`, `geojsonWatchOptions`, `watch-markers`,
and `watch-paths` are no longer supported. The format of the watch options has
also changed.

Before:

```
<leaflet defaults='defaults' markers-watch-options='markerWatchOptions'>
```

After:

```
<leaflet defaults='defaults' watch-options='watchOptions'>

<script>
    $scope.watchOptions = {
        markers: <watchOptions>
    }
</script>
```

The same can be said for `geojson`.

WatchOptions. `shouldWatch` and `isDeep` are no longer supported, but the
same behaviour can be achieved:

`shouldWatch: true`, `isDeep: true` = `type = 'watchDeep'`
`shouldWatch: true`, `isDeep: false` = `type = 'watch'`
`shouldWatch: false`, `isDeep: false` = `type = 'none'`
`shouldWatch: false`, `isDeep: true` = `type = 'none'`

Furthermore,

Before:

```
<leaflet watch-markers='false'>
```

After:

```
<leaflet watch-options='watchOptions'>

<script>
$scope.watchOptions = {
    markers: {
        type: 'none',
        individual: {
            type: 'none'
        }
    }
};
</script>
```

`watch-paths='false'` can be achieved in a similar manner.

Author: cgat

dist/ui-leaflet.js

@@ -96,7 +96,13 @@ Markers watches
 Every marker you add to the map is watched for changes by default, so a change in a marker property will be reflected on the map directly. This feature can be disabled if you don't need to dynamic modification of markers and prefer better performance. This is the command used to disable markers watchers:
 
 ```
-<leaflet markers="markers" watch-markers="false"></leaflet>
+<leaflet markers="markers" watch-options='watchOptions'></leaflet>
+```
+
+where:
+
+```
+scope.watchOptions = { markers: { type: 'none', individual: { type: 'none' } } };
 ```
 
 By default the markers will be watched, so we can change its properties dynamically, like in [this demo](http://angular-ui.github.io/ui-leaflet/examples/markers-update-example.html).

dist/ui-leaflet.min.js

@@ -9,7 +9,7 @@
     <link rel="stylesheet" href="../bower_components/leaflet/dist/leaflet.css" />
     <script>
         var app = angular.module("demoapp", ['ui-leaflet']);
-        app.controller("BasicDoubleMapEventsController", [ "$scope", "$log", "leafletData", "leafletEvents", function($scope, $log, leafletData, leafletEvents) {
+        app.controller("BasicDoubleMapEventsController", [ "$scope", "$log", "leafletData", "leafletMapEvents", function($scope, $log, leafletData, leafletMapEvents) {
             angular.extend($scope, {
                 london: {
                     lat: 51.505,
@@ -30,12 +30,12 @@
 
             $scope.events = {
                 map: {
-                    enable: leafletEvents.getAvailableMapEvents(),
+                    enable: leafletMapEvents.getAvailableMapEvents(),
                     logic: 'emit'
                 }
             };
 
-            var mapEvents = leafletEvents.getAvailableMapEvents();
+            var mapEvents = leafletMapEvents.getAvailableMapEvents();
             for (var k in mapEvents) {
                 var eventName = 'leafletDirectiveMap.' + mapEvents[k];
                 $scope.$on(eventName, function(event){

dist/ui-leaflet.min.no-header.js

@@ -17,6 +17,14 @@
                 defaults: {
                     scrollWheelZoom: false
                 },
+                watchOptions: {
+                    paths: {
+                        type: 'watch',
+                        individual: {
+                            type: 'none'
+                        }
+                    }
+                },
                 //restrict map panning for this region
                 maxbounds: {
                     northEast: {
@@ -50,15 +58,19 @@
 
             //bind locationGrid to zoom level
             $scope.$watch("centroid.zoom", function (zoom) {
+                var tempPaths;
                 if (zoom <= 3) {
                     //clear path object
                     $scope.paths = {};
 
+                    //make new paths
+                    tempPaths = {};
+
                     //get location data and initialize leaflet circles
                     LocationDataService.getLocationsTenGrid().then(function (res) {
                         angular.forEach(res.data, function (value, key) {
                             if (value.lat !== null && value.lon !== null) {
-                                $scope.paths['circle' + key] = {
+                                tempPaths['circle' + key] = {
                                     type: 'circle',
                                     className: 'testClass',
                                     fillColor: 'DarkSlateGray',
@@ -73,6 +85,7 @@
                                 };
                             }
                         });
+                        $scope.paths = tempPaths;
                     }, function (error) {
                         console.log('An error occured!', error);
                     });
@@ -81,11 +94,14 @@
                     //clear path object
                     $scope.paths = {};
 
+                    //make new paths
+                    tempPaths = {};
+
                     //get location data and initialize leaflet circles
                     LocationDataService.getLocationsZeroOneGrid().then(function (res) {
                         angular.forEach(res.data, function (value, key) {
                             if (value.lat !== null && value.lon !== null) {
-                                $scope.paths['circle' + key] = {
+                                tempPaths['circle' + key] = {
                                     type: 'circle',
                                     className: 'testClass',
                                     fillColor: 'DarkSlateGray',
@@ -100,6 +116,7 @@
                                 };
                             }
                         });
+                        $scope.paths = tempPaths;
                     }, function (error) {
                         console.log('An error occured!', error);
                     });
@@ -141,7 +158,7 @@
     </script>
   </head>
   <body ng-controller="Paths3000ItemsController">
-      <leaflet watch-paths="false" lf-center="centroid" maxbounds="maxbounds" layers="layers" paths="paths" defaults="defaults" width="100%" height="480px"></leaflet>
+      <leaflet watch-options="watchOptions" lf-center="centroid" maxbounds="maxbounds" layers="layers" paths="paths" defaults="defaults" width="100%" height="480px"></leaflet>
       <h1>3000 items in a map performance</h1>
   </body>
 </html>

dist/ui-leaflet_dev_mapped.js

@@ -9,7 +9,7 @@
     <link rel="stylesheet" href="../bower_components/leaflet/dist/leaflet.css" />
     <script>
         var app = angular.module("demoapp", ['ui-leaflet']);
-        app.controller("MarkersDelayedEventsController", ["$scope", "leafletEvents", function($scope, leafletEvents){
+        app.controller("MarkersDelayedEventsController", ["$scope", "leafletMarkerEvents", function($scope, leafletMarkerEvents){
             angular.extend($scope, {
                 london: {
                     lat: 51.505,
@@ -40,12 +40,12 @@
 
             $scope.events = {
                 markers: {
-                    enable: leafletEvents.getAvailableMarkerEvents(),
+                    enable: leafletMarkerEvents.getAvailableEvents(),
                 }
             };
 
             $scope.eventDetected = "No events yet...";
-            var markerEvents = leafletEvents.getAvailableMarkerEvents();
+            var markerEvents = leafletMarkerEvents.getAvailableEvents();
             for (var k in markerEvents){
                 var eventName = 'leafletDirectiveMarker.' + markerEvents[k];
                 $scope.$on(eventName, function(event, args){

dist/ui-leaflet_dev_mapped.js.map

@@ -9,7 +9,7 @@
     <link rel="stylesheet" href="../bower_components/leaflet/dist/leaflet.css"/>
     <script>
     var app = angular.module("demoapp", ['ui-leaflet']);
-    app.controller("MixedMarkersNestedEventsController", ["$scope", "leafletEvents", function ($scope, leafletEvents) {
+    app.controller("MixedMarkersNestedEventsController", ["$scope", "leafletMarkerEvents", function ($scope, leafletMarkerEvents) {
         $scope.map = {
             show: true
         };
@@ -53,12 +53,12 @@
 
         $scope.events = {
             markers: {
-                enable: leafletEvents.getAvailableMarkerEvents()
+                enable: leafletMarkerEvents.getAvailableEvents()
             }
         };
 
         $scope.eventDetected = "No events yet...";
-        var markerEvents = leafletEvents.getAvailableMarkerEvents();
+        var markerEvents = leafletMarkerEvents.getAvailableEvents();
         for (var k in markerEvents) {
             var eventName = 'leafletDirectiveMarker.' + markerEvents[k];
             $scope.$on(eventName, function (event, args) {

doc/markers-attribute.md

@@ -33,12 +33,12 @@
             });
         }, 4000);
         angular.extend($scope, {
-            markersWatchOptions: {
-                doWatch: false,
-                isDeep: false,
-                individual: {
-                    doWatch: false,
-                    isDeep: false
+            watchOptions: {
+                markers: {
+                    type: 'none',
+                    individual: {
+                        type: 'none'
+                    }
                 }
             },
             center: {
@@ -160,7 +160,7 @@
         markers="markers"
         layers="layers"
         markers-nested="true"
-        markers-watch-options="markersWatchOptions"
+        watch-options="watchOptions"
         height="480px" width="100%">
     </leaflet>
     <h1>Overlays with nested markers no watchers example</h1>

examples/0118-basic-double-map-events-example.html

@@ -127,7 +127,7 @@ var app = angular.module('webapp');
                 });
             };
         }]);
-        app.controller("BasicDoubleMapEventsController", [ "$scope", "$log", "leafletData", "leafletEvents", function($scope, $log, leafletData, leafletEvents) {
+        app.controller("BasicDoubleMapEventsController", [ "$scope", "$log", "leafletData", "leafletMapEvents", function($scope, $log, leafletData, leafletMapEvents) {
             angular.extend($scope, {
                 london: {
                     lat: 51.505,
@@ -147,11 +147,11 @@ var app = angular.module('webapp');
             });
             $scope.events = {
                 map: {
-                    enable: leafletEvents.getAvailableMapEvents(),
+                    enable: leafletMapEvents.getAvailableMapEvents(),
                     logic: 'emit'
                 }
             };
-            var mapEvents = leafletEvents.getAvailableMapEvents();
+            var mapEvents = leafletMapEvents.getAvailableMapEvents();
             for (var k in mapEvents) {
                 var eventName = 'leafletDirectiveMap.' + mapEvents[k];
                 $scope.$on(eventName, function(event){
@@ -3232,7 +3232,7 @@ var app = angular.module('webapp');
                 },
             });
         } ]);
-        app.controller("MarkersDelayedEventsController", ["$scope", "leafletEvents", function($scope, leafletEvents){
+        app.controller("MarkersDelayedEventsController", ["$scope", "leafletMarkerEvents", function($scope, leafletMarkerEvents){
             angular.extend($scope, {
                 london: {
                     lat: 51.505,
@@ -3261,11 +3261,11 @@ var app = angular.module('webapp');
             };
             $scope.events = {
                 markers: {
-                    enable: leafletEvents.getAvailableMarkerEvents(),
+                    enable: leafletMarkerEvents.getAvailableEvents(),
                 }
             };
             $scope.eventDetected = "No events yet...";
-            var markerEvents = leafletEvents.getAvailableMarkerEvents();
+            var markerEvents = leafletMarkerEvents.getAvailableEvents();
             for (var k in markerEvents){
                 var eventName = 'leafletDirectiveMarker.' + markerEvents[k];
                 $scope.$on(eventName, function(event, args){
@@ -4058,12 +4058,12 @@ var app = angular.module('webapp');
             });
         }, 4000);
         angular.extend($scope, {
-            markersWatchOptions: {
-                doWatch: false,
-                isDeep: false,
-                individual: {
-                    doWatch: false,
-                    isDeep: false
+            watchOptions: {
+                markers: {
+                    type: 'none'
+                    individual: {
+                        type: 'none'
+                    }
                 }
             },
             center: {
@@ -4196,7 +4196,7 @@ var app = angular.module('webapp');
                 console.log(data);
             });
         }]);
-    app.controller("MixedMarkersNestedEventsController", ["$scope", "leafletEvents", function ($scope, leafletEvents) {
+    app.controller("MixedMarkersNestedEventsController", ["$scope", "leafletMarkerEvents", function ($scope, leafletMarkerEvents) {
         $scope.map = {
             show: true
         };
@@ -4238,11 +4238,11 @@ var app = angular.module('webapp');
         };
         $scope.events = {
             markers: {
-                enable: leafletEvents.getAvailableMarkerEvents()
+                enable: leafletMarkerEvents.getAvailableEvents()
             }
         };
         $scope.eventDetected = "No events yet...";
-        var markerEvents = leafletEvents.getAvailableMarkerEvents();
+        var markerEvents = leafletMarkerEvents.getAvailableEvents();
         for (var k in markerEvents) {
             var eventName = 'leafletDirectiveMarker.' + markerEvents[k];
             $scope.$on(eventName, function (event, args) {

examples/0303-paths-3000-items-example.html

@@ -1,4 +1,4 @@
-        app.controller("BasicDoubleMapEventsController", [ "$scope", "$log", "leafletData", "leafletEvents", function($scope, $log, leafletData, leafletEvents) {
+        app.controller("BasicDoubleMapEventsController", [ "$scope", "$log", "leafletData", "leafletMapEvents", function($scope, $log, leafletData, leafletMapEvents) {
             angular.extend($scope, {
                 london: {
                     lat: 51.505,
@@ -18,11 +18,11 @@
             });
             $scope.events = {
                 map: {
-                    enable: leafletEvents.getAvailableMapEvents(),
+                    enable: leafletMapEvents.getAvailableMapEvents(),
                     logic: 'emit'
                 }
             };
-            var mapEvents = leafletEvents.getAvailableMapEvents();
+            var mapEvents = leafletMapEvents.getAvailableMapEvents();
             for (var k in mapEvents) {
                 var eventName = 'leafletDirectiveMap.' + mapEvents[k];
                 $scope.$on(eventName, function(event){

examples/0514-markers-delayed-events.html

@@ -1,4 +1,4 @@
-        app.controller("MarkersDelayedEventsController", ["$scope", "leafletEvents", function($scope, leafletEvents){
+        app.controller("MarkersDelayedEventsController", ["$scope", "leafletMarkerEvents", function($scope, leafletMarkerEvents){
             angular.extend($scope, {
                 london: {
                     lat: 51.505,
@@ -27,11 +27,11 @@
             };
             $scope.events = {
                 markers: {
-                    enable: leafletEvents.getAvailableMarkerEvents(),
+                    enable: leafletMarkerEvents.getAvailableEvents(),
                 }
             };
             $scope.eventDetected = "No events yet...";
-            var markerEvents = leafletEvents.getAvailableMarkerEvents();
+            var markerEvents = leafletMarkerEvents.getAvailableEvents();
             for (var k in markerEvents){
                 var eventName = 'leafletDirectiveMarker.' + markerEvents[k];
                 $scope.$on(eventName, function(event, args){

examples/0604-mixed-markers-nested-events-example.html

@@ -21,12 +21,12 @@
             });
         }, 4000);
         angular.extend($scope, {
-            markersWatchOptions: {
-                doWatch: false,
-                isDeep: false,
-                individual: {
-                    doWatch: false,
-                    isDeep: false
+            watchOptions: {
+                markers: {
+                    type: 'none'
+                    individual: {
+                        type: 'none'
+                    }
                 }
             },
             center: {

examples/0605-mixed-overlays-markers-nested-no-watch-example.html

@@ -1,4 +1,4 @@
-    app.controller("MixedMarkersNestedEventsController", ["$scope", "leafletEvents", function ($scope, leafletEvents) {
+    app.controller("MixedMarkersNestedEventsController", ["$scope", "leafletMarkerEvents", function ($scope, leafletMarkerEvents) {
         $scope.map = {
             show: true
         };
@@ -40,11 +40,11 @@
         };
         $scope.events = {
             markers: {
-                enable: leafletEvents.getAvailableMarkerEvents()
+                enable: leafletMarkerEvents.getAvailableEvents()
             }
         };
         $scope.eventDetected = "No events yet...";
-        var markerEvents = leafletEvents.getAvailableMarkerEvents();
+        var markerEvents = leafletMarkerEvents.getAvailableEvents();
         for (var k in markerEvents) {
             var eventName = 'leafletDirectiveMarker.' + markerEvents[k];
             $scope.$on(eventName, function (event, args) {

examples/js/controllers.js

@@ -2,7 +2,7 @@ angular.module('ui-leaflet')
 .directive('geojson', function (leafletLogger, $rootScope, leafletData, leafletHelpers,
     leafletWatchHelpers, leafletDirectiveControlsHelpers,leafletIterators, leafletGeoJsonEvents) {
     var _maybeWatch = leafletWatchHelpers.maybeWatch,
-        _watchOptions = leafletHelpers.watchOptions,
+        _defaultWatchOptions = leafletHelpers.watchOptions,
         _extendDirectiveControls = leafletDirectiveControlsHelpers.extend,
         hlp = leafletHelpers,
         $it = leafletIterators;
@@ -21,7 +21,13 @@ angular.module('ui-leaflet')
                 _hasSetLeafletData = false;
 
             controller.getMap().then(function(map) {
-                var watchOptions = leafletScope.geojsonWatchOptions || _watchOptions;
+                var watchOptions;
+                 if(leafletScope.watchOptions && leafletScope.watchOptions.geojson) {
+                    watchOptions = leafletScope.watchOptions.geojson;
+                 }
+                 else {
+                    watchOptions = _defaultWatchOptions;
+                 }
 
                 var _hookUpEvents = function(geojson, maybeName){
                     var onEachFeature;

examples/js/controllers/BasicDoubleMapEventsController.js

@@ -18,8 +18,7 @@ angular.module('ui-leaflet', ['nemLogging']).directive('leaflet',
             controls       : '=',
             decorations    : '=',
             eventBroadcast : '=',
-            markersWatchOptions : '=',
-            geojsonWatchOptions : '='
+            watchOptions   : '='
         },
         transclude: true,
         template: '<div class="angular-leaflet-map"><div ng-transclude></div></div>',