Merge branch 'map-pool'

Author: Allen Kim

controllers/map-controller.js

@@ -7,14 +7,13 @@
   var Attr2MapOptions;
 
   var __MapController = function(
-      $scope, $element, $attrs, $parse, _Attr2MapOptions_, NgMap
+      $scope, $element, $attrs, $parse, _Attr2MapOptions_, NgMap, NgMapPool
     ) {
     Attr2MapOptions = _Attr2MapOptions_;
     var vm = this;
 
     vm.mapOptions; /** @memberof __MapController */
     vm.mapEvents;  /** @memberof __MapController */
-    vm.ngMapDiv;   /** @memberof __MapController */
 
     /**
      * Add an object to the collection of group
@@ -55,7 +54,10 @@
       if (obj.map) {
         var objs = obj.map[groupName];
         for (var name in objs) {
-          objs[name] === obj && (delete objs[name]);
+          if (objs[name] === obj) {
+            google.maps.event.clearInstanceListeners(obj);
+            delete objs[name];
+          }
         }
 
         /* delete from map */
@@ -107,7 +109,7 @@
      * @param {String} group name of group e.g., markers
      */
     vm.objectChanged = function(group) {
-      if (
+      if ( vm.map &&
         (group == 'markers' || group == 'customMarkers') &&
         vm.map.zoomToIncludeMarkers == 'auto'
       ) {
@@ -125,11 +127,11 @@
      */
     vm.initializeMap = function() {
       var mapOptions = vm.mapOptions,
-          mapEvents = vm.mapEvents,
-          ngMapDiv = vm.ngMapDiv;
+          mapEvents = vm.mapEvents;
 
       var lazyInitMap = vm.map; //prepared for lazy init
-      vm.map = new google.maps.Map(ngMapDiv, {});
+      vm.map = NgMapPool.getMapInstance($element[0]);
+      NgMap.setStyle($element[0]);
 
       // set objects for lazyInit
       if (lazyInitMap) {
@@ -209,10 +211,6 @@
     vm.mapOptions = mapOptions;
     vm.mapEvents = mapEvents;
 
-    // create html <div> for map
-    vm.ngMapDiv = NgMap.getNgMapDiv($element[0]);
-    $element.append(vm.ngMapDiv);
-
     if (options.lazyInit) { // allows controlled initialization
       vm.map = {id: $attrs.id}; //set empty, not real, map
       NgMap.addMap(vm);
@@ -221,12 +219,13 @@
     }
 
     $element.bind('$destroy', function() {
+      NgMapPool.returnMapInstance(vm.map);
       NgMap.deleteMap(vm);
     });
   }; // __MapController
 
   __MapController.$inject = [
-    '$scope', '$element', '$attrs', '$parse', 'Attr2MapOptions', 'NgMap'
+    '$scope', '$element', '$attrs', '$parse', 'Attr2MapOptions', 'NgMap', 'NgMapPool'
   ];
   angular.module('ngMap').controller('__MapController', __MapController);
 })();

services/ng-map-pool.js

@@ -0,0 +1,56 @@
+(function() {
+  'use strict';
+  var mapInstances = [];
+  var $window, $document;
+
+  var add = function(el) {
+    var mapDiv = $document.createElement("div");
+    mapDiv.style.width = "100%";
+    mapDiv.style.height = "100%";
+    el.appendChild(mapDiv);
+    var map = new $window.google.maps.Map(mapDiv, {});
+    mapInstances.push(map);
+    return map;
+  };
+
+  var find = function(el) { //jshint ignore:line
+    var notInUseMap;
+    for (var i=0; i<mapInstances.length; i++) {
+      var map = mapInstances[i];
+      if (!map.inUse) {
+        var mapDiv = map.getDiv();
+        el.appendChild(mapDiv);
+        notInUseMap = map;
+        break;
+      }
+    }
+    return notInUseMap;
+  };
+
+  var getMapInstance = function(el) {
+    var map = find(el);
+    if (!map) {
+      map = add(el);
+    }
+    map.inUse = true;
+    return map;
+  };
+
+  var returnMapInstance = function(map) {
+    map.inUse = false;
+  };
+
+  var NgMapPool = function(_$document_, _$window_) {
+    $document = _$document_[0], $window = _$window_;
+
+    return {
+      mapInstances: mapInstances,
+      getMapInstance: getMapInstance,
+      returnMapInstance: returnMapInstance
+    };
+  };
+  NgMapPool.$inject = [ '$document', '$window' ];
+
+  angular.module('ngMap').factory('NgMapPool', NgMapPool);
+
+})();

services/ng-map.js

@@ -11,6 +11,18 @@
 
   var mapControllers = {};
 
+  var getStyle = function(el, styleProp) {
+    var y;
+    if (el.currentStyle) {
+      y = el.currentStyle[styleProp];
+    } else if ($window.getComputedStyle) {
+      y = $document.defaultView.
+        getComputedStyle(el, null).
+        getPropertyValue(styleProp);
+    }
+    return y;
+  };
+
   /**
    * @memberof NgMap
    * @function initMap
@@ -62,8 +74,10 @@
    * @returns promise
    */
   var addMap = function(mapCtrl) {
-    var len = Object.keys(mapControllers).length;
-    mapControllers[mapCtrl.map.id || len] = mapCtrl;
+    if (mapCtrl.map) {
+      var len = Object.keys(mapControllers).length;
+      mapControllers[mapCtrl.map.id || len] = mapCtrl;
+    }
   };
 
   /**
@@ -73,62 +87,9 @@
    */
   var deleteMap = function(mapCtrl) {
     var len = Object.keys(mapControllers).length - 1;
-    delete mapControllers[mapCtrl.map.id || len];
-  };
-
-  /**
-   * @memberof NgMap
-   * @function getStyle
-   * @param {HTMLElemnet} el html element
-   * @param {String} styleProp style property name e.g. 'display'
-   * @returns value of property
-   */
-  var getStyle = function(el, styleProp) {
-    var y;
-    if (el.currentStyle) {
-      y = el.currentStyle[styleProp];
-    } else if ($window.getComputedStyle) {
-      y = $document.defaultView.
-        getComputedStyle(el, null).
-        getPropertyValue(styleProp);
-    }
-    return y;
-  };
-
-  /**
-   * @memberof NgMap
-   * @function getNgMapDiv
-   * @param {HTMLElemnet} el html element
-   * @returns map DIV elemnt
-   * @desc
-   * create a new `div` inside map tag, so that it does not touch map element
-   * and disable drag event for the elmement
-   */
-  var getNgMapDiv = function(ngMapEl) {
-    var el = $document.createElement("div");
-    var defaultStyle = ngMapEl.getAttribute('default-style');
-    el.style.width = "100%";
-    el.style.height = "100%";
-
-    //if style is not given to the map element, set display and height
-    if (defaultStyle == "true") {
-        ngMapEl.style.display = 'block';
-        ngMapEl.style.height = '300px';
-    } else {
-      if (getStyle(ngMapEl, 'display') != "block") {
-        ngMapEl.style.display = 'block';
-      }
-      if (getStyle(ngMapEl, 'height').match(/^(0|auto)/)) {
-        ngMapEl.style.height = '300px';
-      }
-    }
-
-    // disable drag event
-    el.addEventListener('dragstart', function (event) {
-      event.preventDefault();
-      return false;
-    });
-    return el;
+    var mapId = mapCtrl.map.id || len;
+    delete mapCtrl.map;
+    delete mapControllers[mapId];
   };
 
   /**
@@ -193,9 +154,30 @@
     };
   };
 
+  /**
+   * @memberof NgMap
+   * @function getMap
+   * @param {Hash} options optional, e.g., {id: 'foo, timeout: 5000}
+   * @returns promise
+   */
+  var setStyle = function(el) {
+    //if style is not given to the map element, set display and height
+    var defaultStyle = el.getAttribute('default-style');
+    if (defaultStyle == "true") {
+      el.style.display = 'block';
+      el.style.height = '300px';
+    } else {
+      if (getStyle(el, 'display') != "block") {
+        el.style.display = 'block';
+      }
+      if (getStyle(el, 'height').match(/^(0|auto)/)) {
+        el.style.height = '300px';
+      }
+    }
+  };
+
   angular.module('ngMap').provider('NgMap', function() {
     var defaultOptions = {};
-    var useTinfoilShielding = false;
 
     /**
      * @memberof NgMap
@@ -233,8 +215,7 @@
         deleteMap: deleteMap,
         getMap: getMap,
         initMap: initMap,
-        getStyle: getStyle,
-        getNgMapDiv: getNgMapDiv,
+        setStyle: setStyle,
         getGeoLocation: getGeoLocation,
         observeAndSet: observeAndSet
       };

spec/services/ng-map-pool-spec.js

@@ -0,0 +1,54 @@
+describe('NgMapPool', function() {
+  'use strict';
+   var scope, $window, NgMapPool;
+
+   beforeEach(module('ngMap', function($provide) { //jshint ignore:line
+   }));
+
+   beforeEach(inject(function ($rootScope, _NgMapPool_, _$window_) {
+     scope = $rootScope;
+     NgMapPool = _NgMapPool_, $window = _$window_;
+     $window.google = {
+       maps: {
+         Map: function() {
+          this.getDiv = function() {};
+         }
+       }
+     };
+   }));
+
+  describe("#getMapInstance #returnMapInstance", function() {
+    it('it should create a new map instance and return', function() {
+      var el = {
+        style: {},
+        appendChild: function(){},
+        getAttribute: function() {return "true";},
+        currentStyle: {}
+      };
+      var map1, map2, map3;
+      expect(NgMapPool.mapInstances.length).toEqual(0);
+      map1 = NgMapPool.getMapInstance(el);
+      expect(NgMapPool.mapInstances.length).toEqual(1);
+      expect(map1.inUse).toEqual(true);
+      map2 = NgMapPool.getMapInstance(el);
+      expect(NgMapPool.mapInstances.length).toEqual(2);
+      expect(map2.inUse).toEqual(true);
+      map3 = NgMapPool.getMapInstance(el);
+      expect(NgMapPool.mapInstances.length).toEqual(3);
+      expect(map3.inUse).toEqual(true);
+
+      NgMapPool.returnMapInstance(map1);
+      NgMapPool.returnMapInstance(map2);
+      expect(NgMapPool.mapInstances.length).toEqual(3);
+      expect(map1.inUse).toEqual(false);
+      expect(map2.inUse).toEqual(false);
+      expect(map3.inUse).toEqual(true);
+
+      var map4 = NgMapPool.getMapInstance(el);
+      var map5 = NgMapPool.getMapInstance(el);
+      expect(map1).toEqual(map4);
+      expect(map2).toEqual(map5);
+    });
+  });
+
+});