feat: add leaflet-show option to help with hidden maps

The idea is to help with hiddden place like with ng-show/ng-hide div. What you have to know is if
your map has been initialized in an hidden place it will be broken once you display the container.
You must fix it and this option help you for that. Put an expression that is evaluated to true when
the container is visible.

Author: toutpt

src/index.js

@@ -7,14 +7,19 @@ export default angular.module('angular-leaflet', [])
 /**
  * This component provide a default leaflet map initialized with id='map'
  * if no id has been provided.
+ * 
+ * If you want to initialize you map in an hidden place (for example a tab)
+ * you can use leaflet-show option and put the display condition so the component
+ * will fix the leaflet map object. leaflet-show is not required.
  * @usage
-    <leaflet on-map-initialized="$ctrl.onMapInitialized(map)"></leaflet>
+    <leaflet leaflet-show="displayMap" on-map-initialized="$ctrl.onMapInitialized(map)"></leaflet>
 */
 .component('leaflet', {
     template: '<div></div>',
     controller: controller,
     bindings: {
-        onMapInitialized: '&'
+        onMapInitialized: '&',
+        leafletShow: '<'
     }
 })
 

src/index.spec.js

@@ -2,6 +2,7 @@
 /*global ngDescribe:false */
 /*global it:false */
 /*global expect:false */
+/*global spyOn:false */
 
 ngDescribe({
     modules: 'angular-leaflet',
@@ -58,6 +59,15 @@ ngDescribe({
             var maxBounds = map.options.maxBounds.toBBoxString();
             expect(maxBounds).toBe('-1.652756,47.143496,-1.461868,47.296462');
         });
+        it('should fix if initialized in hidden stuff', function () {
+            spyOn(deps.leafletService, 'fixHiddenLeaflet');
+            expect(deps.leafletService.fixHiddenLeaflet).not.toHaveBeenCalled();
+            var controller = deps.element.isolateScope().$ctrl;
+            controller.$onChanges({leafletShow: {currentValue: false}});
+            expect(deps.leafletService.fixHiddenLeaflet).not.toHaveBeenCalled();
+            controller.$onChanges({leafletShow: {currentValue: true}});
+            expect(deps.leafletService.fixHiddenLeaflet).toHaveBeenCalled();
+        });
     }
 
 });

src/leaflet.controller.js

@@ -31,7 +31,14 @@ class LeafletCtrl {
         this.leafletService.data[this.mapid] = map;
         this.leafletService.updateMapFromSettings(map);
         this.onMapInitialized({map: map});
+        this.map = map;
     }
+    $onChanges(changesObj) {
+        if (changesObj.leafletShow.currentValue && this.map) {
+            this.leafletService.fixHiddenLeaflet(this.map);
+        }
+    }
+
 }
 
 LeafletCtrl.$inject = ['$element', 'leafletService'];

src/leaflet.service.js

@@ -102,6 +102,20 @@ class LeafletService {
             L.control.layers(baselayers, overlays).addTo(map);
         }
     }
+    /**
+     * If your leaflet map object is initialized in an hidden place
+     * like in a tab, you can just call this function once the container
+     * is visible.
+     * This is used by the directive with it's leaflet-show condition
+     * Found on stackoverflow: http://stackoverflow.com/questions/10762984/leaflet-map-not-displayed-properly-inside-tabbed-panel
+     */
+    fixHiddenLeaflet(map) {
+        L.Util.requestAnimFrame(
+            map.invalidateSize,
+            map, !1,
+            map._container
+        );
+    }
 }
 LeafletService.$inject = ['$compile'];
 export default LeafletService;

src/leaflet.service.spec.js

@@ -2,6 +2,7 @@
 /*global ngDescribe:false */
 /*global it:false */
 /*global expect:false */
+/*global spyOn:false */
 
 
 ngDescribe({
@@ -69,6 +70,13 @@ ngDescribe({
             expect(isApplyed).toBe(false);
 
         });
+        it('should fixHiddenLeaflet call L.utils stuff', function () {
+            var map = {};
+            spyOn(L.Util, 'requestAnimFrame');
+            deps.leafletService.fixHiddenLeaflet(map);
+            expect(L.Util.requestAnimFrame).toHaveBeenCalled();
+        });
+
     }
 
 });