[Polylines] Init polylines directive

Author: Chris Boden

src/controllers/angulargmMapController.js

@@ -7,7 +7,7 @@
 (function () {
   angular.module('AngularGM').
 
-  controller('angulargmMapController', 
+  controller('angulargmMapController',
     ['$scope', '$element', 'angulargmUtils', 'angulargmDefaults',
     'angulargmContainer',
 
@@ -27,7 +27,7 @@
     consts.precision = 3;
 
 
-    /* 
+    /*
      * Construct a new controller for the gmMap directive.
      * @param {angular.Scope} $scope
      * @param {angular.element} $element
@@ -42,7 +42,7 @@
       mapDiv.attr('id', mapId);
 
       var config = this._getConfig($scope, gMDefaults);
-      
+
       // 'private' properties
       this._map = this._createMap(mapId, mapDiv, config, gMContainer, $scope);
       this._markers = {};
@@ -63,13 +63,13 @@
              return this._map.getCenter();
            },
           set: function(center) {
-            if (hasNaN(center)) 
+            if (hasNaN(center))
               throw 'center contains null or NaN';
             var changed = !latLngEqual(this.center, center);
             if (changed) {
               this._map.panTo(center);
             }
-          } 
+          }
         },
 
         'zoom': {
@@ -78,7 +78,7 @@
             return this._map.getZoom();
           },
           set: function(zoom) {
-            if (!(zoom != null && !isNaN(zoom))) 
+            if (!(zoom != null && !isNaN(zoom)))
               throw 'zoom was null or NaN';
             var changed = this.zoom !== zoom;
             if (changed) {
@@ -95,7 +95,7 @@
           set: function(bounds) {
             var numbers = !hasNaN(bounds.getSouthWest()) &&
                           !hasNaN(bounds.getNorthEast());
-            if (!numbers) 
+            if (!numbers)
               throw 'bounds contains null or NaN';
 
             var changed = !(boundsEqual(this.bounds, bounds));
@@ -152,20 +152,20 @@
       return map;
     };
 
-        
+
     // Set up listeners to update this.dragging
     this._initDragListeners = function() {
       var self = this;
       this.addMapListener('dragstart', function () {
         self.dragging = true;
       });
-      
+
       this.addMapListener('idle', function () {
         self.dragging = false;
       });
-      
+
       this.addMapListener('drag', function() {
-        self.dragging = true;   
+        self.dragging = true;
       });
     };
 
@@ -179,12 +179,12 @@
       var self = this;
       angular.forEach(scopeIds, function(scopeId) {
         self.forEachMarkerInScope(scopeId, function(marker, hash) {
-          self.removeMarkerByHash(scopeId, hash);  
+          self.removeMarkerByHash(scopeId, hash);
         });
       });
     };
 
-    
+
     /**
      * Alias for google.maps.event.addListener(map, event, handler)
      * @param {string} event an event defined on google.maps.Map
@@ -204,7 +204,7 @@
      * @ignore
      */
     this.addMapListenerOnce = function(event, handler) {
-      google.maps.event.addListenerOnce(this._map, 
+      google.maps.event.addListenerOnce(this._map,
           event, handler);
     };
 
@@ -269,15 +269,25 @@
       if (this.hasMarker(scopeId, position.lat(), position.lng())) {
         return false;
       }
-      
+
       var hash = position.toUrlValue(this.precision);
       if (this._markers[scopeId] == null) {
           this._markers[scopeId] = {};
       }
       this._markers[scopeId][hash] = marker;
       marker.setMap(this._map);
       return true;
-    };      
+    };
+
+    this.addPolyline = function(scopeId, polylineOptions) {
+      var opts = {};
+      angular.extend(opts, polylineOptions);
+
+      // check each lat/lng
+      var polyline = new angulargmDefaults.polylineConstructor(opts);
+      polyline.setMap(this._map);
+      return true;
+    }
 
 
     /**
@@ -311,7 +321,7 @@
       } else {
         return null;
       }
-    };  
+    };
 
 
     /**

src/directives/gmPolylines.js

@@ -0,0 +1,102 @@
+'use strict';
+
+// lines
+// lat/lng per
+// Stroke opts: colour, opacity, weight
+
+(function () {
+
+  angular.module('AngularGM').
+
+  directive('gmPolylines', ['$parse', '$compile', '$timeout', '$log', 'angulargmUtils',
+    function ($parse, $compile, $timeout, $log, angulargmUtils) {
+    /** aliases */
+    var latLngEqual = angulargmUtils.latLngEqual;
+    var objToLatLng = angulargmUtils.objToLatLng;
+    var getEventHandlers = angulargmUtils.getEventHandlers;
+
+    function link(scope, element, attrs, controller) {
+      // check attrs
+      if (!('gmObjects' in attrs)) {
+        throw 'gmObjects attribute required';
+      } else if (!('gmGetCoords' in attrs)) {
+        throw 'gmGetCoords attribute required';
+      }
+
+      var handlers = getEventHandlers(attrs); // map events -> handlers
+
+      // fn for updating polylines from objects
+      var updatePolylines = function(scope, objects) {
+          console.log('updating lines?', objects);
+
+          var objectHash = {};
+
+          angular.forEach(objects, function(object, i) {
+            var coords = scope.gmGetCoords({object: object});
+            var lineLatLngs = [];
+            var hash = '';
+
+            angular.forEach(coords, function(latlng, j) {
+              var position = objToLatLng(latlng);
+              if (null === position) {
+                  $log.warn('Unable to generate lat/lng from ', latlng);
+                  return;
+              }
+
+              lineLatLngs.push(position);
+              hash += position.toUrlValue(controller.precision);
+            });
+
+            var polylineOptions = scope.gmGetPolylineOptions({object: object});
+            objectHash[hash] = object;
+
+            // check if the polyline exists first
+            {
+              var options = {};
+              angular.extend(options, polylineOptions, {path: lineLatLngs});
+
+              controller.addPolyline(scope.$id, options);
+            }
+          });
+      }
+
+      // remove 'orphaned' polylines
+
+      scope.$watch('gmObjects().length', function(newValue, oldValue) {
+        if (newValue != null && newValue !== oldValue) {
+            updatePolylines(scope, scope.gmObjects());
+        }
+      });
+
+      scope.$watch('gmObjects', function(newValue, oldValue) {
+        if (newValue != null && newValue !== oldValue) {
+            updatePolylines(scope, scope.gmObjects());
+        }
+      });
+
+      // watch gmEvents
+
+      scope.$on('gmPolylinesRedraw', function(event, objectsName) {
+        if (objectsName == null || objectsName === attrs.gmObjects) {
+          updatePolylines(scope);
+          updatePolylines(scope, scope.gmObjects());
+        }
+      });
+
+      $timeout(angular.bind(null, updatePolylines, scope, scope.gmObjects()));
+    }
+
+    return {
+      restrict: 'AE',
+      priority: 100,
+      scope: {
+        gmObjects: '&',
+        gmGetCoords: '&',
+        gmGetPolylineOptions: '&',
+        gmEvents: '&'
+      },
+      require: '^gmMap',
+      link: link
+    };
+  }]);
+})();