@asymmetrik/ngx-leaflet - npm Package Compare versions

Comparing version 8.0.0 to 8.1.0

CHANGES.md

 # Changelog
 
+## 8.0
+Support for Angular.io 10.
+
+## 8.1
+Added call to Map.remove in OnDestroy handler.
+This should ensure that any outstanding event handlers are cleaned up.
+Added demo example for adding/removing maps dynamically. 
+
+
 ## 7.0
@@ -4,0 +13,0 @@ Support for Angular.io 9. 🎉

dist/bundles/ngx-leaflet.umd.js

@@ -1,2 +0,2 @@
-/* @license @asymmetrik/ngx-leaflet - 8.0.0 - Copyright Asymmetrik, Ltd. 2007-2020 - All Rights Reserved. + */
+/* @license @asymmetrik/ngx-leaflet - 8.1.0 - Copyright Asymmetrik, Ltd. 2007-2020 - All Rights Reserved. + */
 (function (global, factory) {
@@ -64,2 +64,3 @@ typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('leaflet')) :
             this.onMapZoomEnd = new core.EventEmitter();
+            this.mapEventHandlers = {};
             // Nothing here
@@ -131,2 +132,6 @@ }
         };
+        LeafletDirective.prototype.ngOnDestroy = function () {
+            // If this directive is destroyed, the map is too
+            this.map.remove();
+        };
         LeafletDirective.prototype.getMap = function () {
@@ -140,18 +145,22 @@ return this.map;
             var _this = this;
+            var registerEventHandler = function (eventName, handler) {
+                _this.mapEventHandlers[eventName] = handler;
+                _this.map.on(eventName, handler);
+            };
             // Add all the pass-through mouse event handlers
-            this.map.on('click', function (e) { return LeafletUtil.handleEvent(_this.zone, _this.onClick, e); });
-            this.map.on('dblclick', function (e) { return LeafletUtil.handleEvent(_this.zone, _this.onDoubleClick, e); });
-            this.map.on('mousedown', function (e) { return LeafletUtil.handleEvent(_this.zone, _this.onMouseDown, e); });
-            this.map.on('mouseup', function (e) { return LeafletUtil.handleEvent(_this.zone, _this.onMouseUp, e); });
-            this.map.on('mouseover', function (e) { return LeafletUtil.handleEvent(_this.zone, _this.onMouseOver, e); });
-            this.map.on('mouseout', function (e) { return LeafletUtil.handleEvent(_this.zone, _this.onMouseOut, e); });
-            this.map.on('mousemove', function (e) { return LeafletUtil.handleEvent(_this.zone, _this.onMouseMove, e); });
-            this.map.on('zoomstart', function (e) { return LeafletUtil.handleEvent(_this.zone, _this.onMapZoomStart, e); });
-            this.map.on('zoom', function (e) { return LeafletUtil.handleEvent(_this.zone, _this.onMapZoom, e); });
-            this.map.on('zoomend', function (e) { return LeafletUtil.handleEvent(_this.zone, _this.onMapZoomEnd, e); });
-            this.map.on('movestart', function (e) { return LeafletUtil.handleEvent(_this.zone, _this.onMapMoveStart, e); });
-            this.map.on('move', function (e) { return LeafletUtil.handleEvent(_this.zone, _this.onMapMove, e); });
-            this.map.on('moveend', function (e) { return LeafletUtil.handleEvent(_this.zone, _this.onMapMoveEnd, e); });
+            registerEventHandler('click', function (e) { return LeafletUtil.handleEvent(_this.zone, _this.onClick, e); });
+            registerEventHandler('dblclick', function (e) { return LeafletUtil.handleEvent(_this.zone, _this.onDoubleClick, e); });
+            registerEventHandler('mousedown', function (e) { return LeafletUtil.handleEvent(_this.zone, _this.onMouseDown, e); });
+            registerEventHandler('mouseup', function (e) { return LeafletUtil.handleEvent(_this.zone, _this.onMouseUp, e); });
+            registerEventHandler('mouseover', function (e) { return LeafletUtil.handleEvent(_this.zone, _this.onMouseOver, e); });
+            registerEventHandler('mouseout', function (e) { return LeafletUtil.handleEvent(_this.zone, _this.onMouseOut, e); });
+            registerEventHandler('mousemove', function (e) { return LeafletUtil.handleEvent(_this.zone, _this.onMouseMove, e); });
+            registerEventHandler('zoomstart', function (e) { return LeafletUtil.handleEvent(_this.zone, _this.onMapZoomStart, e); });
+            registerEventHandler('zoom', function (e) { return LeafletUtil.handleEvent(_this.zone, _this.onMapZoom, e); });
+            registerEventHandler('zoomend', function (e) { return LeafletUtil.handleEvent(_this.zone, _this.onMapZoomEnd, e); });
+            registerEventHandler('movestart', function (e) { return LeafletUtil.handleEvent(_this.zone, _this.onMapMoveStart, e); });
+            registerEventHandler('move', function (e) { return LeafletUtil.handleEvent(_this.zone, _this.onMapMove, e); });
+            registerEventHandler('moveend', function (e) { return LeafletUtil.handleEvent(_this.zone, _this.onMapMoveEnd, e); });
             // Update any things for which we provide output bindings
-            this.map.on('zoomend moveend', function () {
+            var outputUpdateHandler = function () {
                 var zoom = _this.map.getZoom();
@@ -170,3 +179,5 @@ if (zoom !== _this.zoom) {
                 }
-            });
+            };
+            registerEventHandler('moveend', outputUpdateHandler);
+            registerEventHandler('zoomend', outputUpdateHandler);
         };
@@ -332,3 +343,8 @@ /**
         LeafletLayerDirective.prototype.ngOnDestroy = function () {
-            this.layer.remove();
+            if (null != this.layer) {
+                // Unregister the event handlers
+                this.removeLayerEventListeners(this.layer);
+                // Remove the layer from the map
+                this.layer.remove();
+            }
         };
@@ -343,2 +359,3 @@ LeafletLayerDirective.prototype.ngOnChanges = function (changes) {
                     if (null != p_1) {
+                        _this.removeLayerEventListeners(p_1);
                         p_1.remove();
@@ -355,5 +372,11 @@ }
             var _this = this;
-            l.on('add', function (e) { return LeafletUtil.handleEvent(_this.zone, _this.onAdd, e); });
-            l.on('remove', function (e) { return LeafletUtil.handleEvent(_this.zone, _this.onRemove, e); });
+            this.onAddLayerHandler = function (e) { return LeafletUtil.handleEvent(_this.zone, _this.onAdd, e); };
+            l.on('add', this.onAddLayerHandler);
+            this.onRemoveLayerHandler = function (e) { return LeafletUtil.handleEvent(_this.zone, _this.onRemove, e); };
+            l.on('remove', this.onRemoveLayerHandler);
         };
+        LeafletLayerDirective.prototype.removeLayerEventListeners = function (l) {
+            l.off('add', this.onAddLayerHandler);
+            l.off('remove', this.onRemoveLayerHandler);
+        };
         LeafletLayerDirective.decorators = [
@@ -360,0 +383,0 @@ { type: core.Directive, args: [{

dist/bundles/ngx-leaflet.umd.min.js

@@ -1,2 +0,2 @@
-/* @license @asymmetrik/ngx-leaflet - 8.0.0 - Copyright Asymmetrik, Ltd. 2007-2020 - All Rights Reserved. + */
-(function(global,factory){typeof exports==="object"&&typeof module!=="undefined"?factory(exports,require("@angular/core"),require("leaflet")):typeof define==="function"&&define.amd?define(["exports","@angular/core","leaflet"],factory):(global=typeof globalThis!=="undefined"?globalThis:global||self,factory(global.ngxLeaflet={},global.ng.core,global.L))})(this,function(exports,core,leaflet){"use strict";var LeafletUtil=function(){function LeafletUtil(){}LeafletUtil.mapToArray=function(map){var toReturn=[];for(var k in map){if(map.hasOwnProperty(k)){toReturn.push(map[k])}}return toReturn};LeafletUtil.handleEvent=function(zone,eventEmitter,event){if(0<eventEmitter.observers.length){zone.run(function(){eventEmitter.emit(event)})}};return LeafletUtil}();var LeafletDirective=function(){function LeafletDirective(element,zone){this.element=element;this.zone=zone;this.DEFAULT_ZOOM=1;this.DEFAULT_CENTER=leaflet.latLng(38.907192,-77.036871);this.DEFAULT_FPZ_OPTIONS={};this.fitBoundsOptions=this.DEFAULT_FPZ_OPTIONS;this.panOptions=this.DEFAULT_FPZ_OPTIONS;this.zoomOptions=this.DEFAULT_FPZ_OPTIONS;this.zoomPanOptions=this.DEFAULT_FPZ_OPTIONS;this.options={};this.mapReady=new core.EventEmitter;this.zoomChange=new core.EventEmitter;this.centerChange=new core.EventEmitter;this.onClick=new core.EventEmitter;this.onDoubleClick=new core.EventEmitter;this.onMouseDown=new core.EventEmitter;this.onMouseUp=new core.EventEmitter;this.onMouseMove=new core.EventEmitter;this.onMouseOver=new core.EventEmitter;this.onMouseOut=new core.EventEmitter;this.onMapMove=new core.EventEmitter;this.onMapMoveStart=new core.EventEmitter;this.onMapMoveEnd=new core.EventEmitter;this.onMapZoom=new core.EventEmitter;this.onMapZoomStart=new core.EventEmitter;this.onMapZoomEnd=new core.EventEmitter}LeafletDirective.prototype.ngOnInit=function(){var _this=this;this.zone.runOutsideAngular(function(){_this.map=leaflet.map(_this.element.nativeElement,_this.options);_this.addMapEventListeners()});if(null!=this.center&&null!=this.zoom){this.setView(this.center,this.zoom)}if(null!=this.fitBounds){this.setFitBounds(this.fitBounds)}if(null!=this.maxBounds){this.setMaxBounds(this.maxBounds)}if(null!=this.minZoom){this.setMinZoom(this.minZoom)}if(null!=this.maxZoom){this.setMaxZoom(this.maxZoom)}this.doResize();this.mapReady.emit(this.map)};LeafletDirective.prototype.ngOnChanges=function(changes){if(changes["zoom"]&&changes["center"]&&null!=this.zoom&&null!=this.center){this.setView(changes["center"].currentValue,changes["zoom"].currentValue)}else if(changes["zoom"]){this.setZoom(changes["zoom"].currentValue)}else if(changes["center"]){this.setCenter(changes["center"].currentValue)}if(changes["fitBounds"]){this.setFitBounds(changes["fitBounds"].currentValue)}if(changes["maxBounds"]){this.setMaxBounds(changes["maxBounds"].currentValue)}if(changes["minZoom"]){this.setMinZoom(changes["minZoom"].currentValue)}if(changes["maxZoom"]){this.setMaxZoom(changes["maxZoom"].currentValue)}};LeafletDirective.prototype.getMap=function(){return this.map};LeafletDirective.prototype.onResize=function(){this.delayResize()};LeafletDirective.prototype.addMapEventListeners=function(){var _this=this;this.map.on("click",function(e){return LeafletUtil.handleEvent(_this.zone,_this.onClick,e)});this.map.on("dblclick",function(e){return LeafletUtil.handleEvent(_this.zone,_this.onDoubleClick,e)});this.map.on("mousedown",function(e){return LeafletUtil.handleEvent(_this.zone,_this.onMouseDown,e)});this.map.on("mouseup",function(e){return LeafletUtil.handleEvent(_this.zone,_this.onMouseUp,e)});this.map.on("mouseover",function(e){return LeafletUtil.handleEvent(_this.zone,_this.onMouseOver,e)});this.map.on("mouseout",function(e){return LeafletUtil.handleEvent(_this.zone,_this.onMouseOut,e)});this.map.on("mousemove",function(e){return LeafletUtil.handleEvent(_this.zone,_this.onMouseMove,e)});this.map.on("zoomstart",function(e){return LeafletUtil.handleEvent(_this.zone,_this.onMapZoomStart,e)});this.map.on("zoom",function(e){return LeafletUtil.handleEvent(_this.zone,_this.onMapZoom,e)});this.map.on("zoomend",function(e){return LeafletUtil.handleEvent(_this.zone,_this.onMapZoomEnd,e)});this.map.on("movestart",function(e){return LeafletUtil.handleEvent(_this.zone,_this.onMapMoveStart,e)});this.map.on("move",function(e){return LeafletUtil.handleEvent(_this.zone,_this.onMapMove,e)});this.map.on("moveend",function(e){return LeafletUtil.handleEvent(_this.zone,_this.onMapMoveEnd,e)});this.map.on("zoomend moveend",function(){var zoom=_this.map.getZoom();if(zoom!==_this.zoom){_this.zoom=zoom;LeafletUtil.handleEvent(_this.zone,_this.zoomChange,zoom)}var center=_this.map.getCenter();if(null!=center||null!=_this.center){if((null==center||null==_this.center)&&center!==_this.center||(center.lat!==_this.center.lat||center.lng!==_this.center.lng)){_this.center=center;LeafletUtil.handleEvent(_this.zone,_this.centerChange,center)}}})};LeafletDirective.prototype.doResize=function(){var _this=this;this.zone.runOutsideAngular(function(){_this.map.invalidateSize({})})};LeafletDirective.prototype.delayResize=function(){if(null!=this.resizeTimer){clearTimeout(this.resizeTimer)}this.resizeTimer=setTimeout(this.doResize.bind(this),200)};LeafletDirective.prototype.setView=function(center,zoom){if(this.map&&null!=center&&null!=zoom){this.map.setView(center,zoom,this.zoomPanOptions)}};LeafletDirective.prototype.setZoom=function(zoom){if(this.map&&null!=zoom){this.map.setZoom(zoom,this.zoomOptions)}};LeafletDirective.prototype.setCenter=function(center){if(this.map&&null!=center){this.map.panTo(center,this.panOptions)}};LeafletDirective.prototype.setFitBounds=function(latLngBounds){if(this.map&&null!=latLngBounds){this.map.fitBounds(latLngBounds,this.fitBoundsOptions)}};LeafletDirective.prototype.setMaxBounds=function(latLngBounds){if(this.map&&null!=latLngBounds){this.map.setMaxBounds(latLngBounds)}};LeafletDirective.prototype.setMinZoom=function(zoom){if(this.map&&null!=zoom){this.map.setMinZoom(zoom)}};LeafletDirective.prototype.setMaxZoom=function(zoom){if(this.map&&null!=zoom){this.map.setMaxZoom(zoom)}};LeafletDirective.decorators=[{type:core.Directive,args:[{selector:"[leaflet]"}]}];LeafletDirective.ctorParameters=function(){return[{type:core.ElementRef},{type:core.NgZone}]};LeafletDirective.propDecorators={fitBoundsOptions:[{type:core.Input,args:["leafletFitBoundsOptions"]}],panOptions:[{type:core.Input,args:["leafletPanOptions"]}],zoomOptions:[{type:core.Input,args:["leafletZoomOptions"]}],zoomPanOptions:[{type:core.Input,args:["leafletZoomPanOptions"]}],options:[{type:core.Input,args:["leafletOptions"]}],mapReady:[{type:core.Output,args:["leafletMapReady"]}],zoom:[{type:core.Input,args:["leafletZoom"]}],zoomChange:[{type:core.Output,args:["leafletZoomChange"]}],center:[{type:core.Input,args:["leafletCenter"]}],centerChange:[{type:core.Output,args:["leafletCenterChange"]}],fitBounds:[{type:core.Input,args:["leafletFitBounds"]}],maxBounds:[{type:core.Input,args:["leafletMaxBounds"]}],minZoom:[{type:core.Input,args:["leafletMinZoom"]}],maxZoom:[{type:core.Input,args:["leafletMaxZoom"]}],onClick:[{type:core.Output,args:["leafletClick"]}],onDoubleClick:[{type:core.Output,args:["leafletDoubleClick"]}],onMouseDown:[{type:core.Output,args:["leafletMouseDown"]}],onMouseUp:[{type:core.Output,args:["leafletMouseUp"]}],onMouseMove:[{type:core.Output,args:["leafletMouseMove"]}],onMouseOver:[{type:core.Output,args:["leafletMouseOver"]}],onMouseOut:[{type:core.Output,args:["leafletMouseOut"]}],onMapMove:[{type:core.Output,args:["leafletMapMove"]}],onMapMoveStart:[{type:core.Output,args:["leafletMapMoveStart"]}],onMapMoveEnd:[{type:core.Output,args:["leafletMapMoveEnd"]}],onMapZoom:[{type:core.Output,args:["leafletMapZoom"]}],onMapZoomStart:[{type:core.Output,args:["leafletMapZoomStart"]}],onMapZoomEnd:[{type:core.Output,args:["leafletMapZoomEnd"]}],onResize:[{type:core.HostListener,args:["window:resize",[]]}]};return LeafletDirective}();var LeafletDirectiveWrapper=function(){function LeafletDirectiveWrapper(leafletDirective){this.leafletDirective=leafletDirective}LeafletDirectiveWrapper.prototype.init=function(){};LeafletDirectiveWrapper.prototype.getMap=function(){return this.leafletDirective.getMap()};return LeafletDirectiveWrapper}();var LeafletLayerDirective=function(){function LeafletLayerDirective(leafletDirective,zone){this.zone=zone;this.onAdd=new core.EventEmitter;this.onRemove=new core.EventEmitter;this.leafletDirective=new LeafletDirectiveWrapper(leafletDirective)}LeafletLayerDirective.prototype.ngOnInit=function(){this.leafletDirective.init()};LeafletLayerDirective.prototype.ngOnDestroy=function(){this.layer.remove()};LeafletLayerDirective.prototype.ngOnChanges=function(changes){var _this=this;if(changes["layer"]){var p_1=changes["layer"].previousValue;var n_1=changes["layer"].currentValue;this.zone.runOutsideAngular(function(){if(null!=p_1){p_1.remove()}if(null!=n_1){_this.addLayerEventListeners(n_1);_this.leafletDirective.getMap().addLayer(n_1)}})}};LeafletLayerDirective.prototype.addLayerEventListeners=function(l){var _this=this;l.on("add",function(e){return LeafletUtil.handleEvent(_this.zone,_this.onAdd,e)});l.on("remove",function(e){return LeafletUtil.handleEvent(_this.zone,_this.onRemove,e)})};LeafletLayerDirective.decorators=[{type:core.Directive,args:[{selector:"[leafletLayer]"}]}];LeafletLayerDirective.ctorParameters=function(){return[{type:LeafletDirective},{type:core.NgZone}]};LeafletLayerDirective.propDecorators={layer:[{type:core.Input,args:["leafletLayer"]}],onAdd:[{type:core.Output,args:["leafletLayerAdd"]}],onRemove:[{type:core.Output,args:["leafletLayerRemove"]}]};return LeafletLayerDirective}();var LeafletLayersDirective=function(){function LeafletLayersDirective(leafletDirective,differs,zone){this.differs=differs;this.zone=zone;this.leafletDirective=new LeafletDirectiveWrapper(leafletDirective);this.layersDiffer=this.differs.find([]).create()}Object.defineProperty(LeafletLayersDirective.prototype,"layers",{get:function(){return this.layersValue},set:function(v){this.layersValue=v;this.updateLayers()},enumerable:false,configurable:true});LeafletLayersDirective.prototype.ngDoCheck=function(){this.updateLayers()};LeafletLayersDirective.prototype.ngOnInit=function(){this.leafletDirective.init();this.updateLayers()};LeafletLayersDirective.prototype.ngOnDestroy=function(){this.layers=[]};LeafletLayersDirective.prototype.updateLayers=function(){var map=this.leafletDirective.getMap();if(null!=map&&null!=this.layersDiffer){var changes_1=this.layersDiffer.diff(this.layersValue);if(null!=changes_1){this.zone.runOutsideAngular(function(){changes_1.forEachRemovedItem(function(c){map.removeLayer(c.item)});changes_1.forEachAddedItem(function(c){map.addLayer(c.item)})})}}};LeafletLayersDirective.decorators=[{type:core.Directive,args:[{selector:"[leafletLayers]"}]}];LeafletLayersDirective.ctorParameters=function(){return[{type:LeafletDirective},{type:core.IterableDiffers},{type:core.NgZone}]};LeafletLayersDirective.propDecorators={layers:[{type:core.Input,args:["leafletLayers"]}]};return LeafletLayersDirective}();var LeafletControlLayersChanges=function(){function LeafletControlLayersChanges(){this.layersRemoved=0;this.layersChanged=0;this.layersAdded=0}LeafletControlLayersChanges.prototype.changed=function(){return!(this.layersRemoved===0&&this.layersChanged===0&&this.layersAdded===0)};return LeafletControlLayersChanges}();var LeafletControlLayersWrapper=function(){function LeafletControlLayersWrapper(zone,layersControlReady){this.zone=zone;this.layersControlReady=layersControlReady}LeafletControlLayersWrapper.prototype.getLayersControl=function(){return this.layersControl};LeafletControlLayersWrapper.prototype.init=function(controlConfig,controlOptions){var _this=this;var baseLayers=controlConfig.baseLayers||{};var overlays=controlConfig.overlays||{};this.zone.runOutsideAngular(function(){_this.layersControl=leaflet.control.layers(baseLayers,overlays,controlOptions)});this.layersControlReady.emit(this.layersControl);return this.layersControl};LeafletControlLayersWrapper.prototype.applyBaseLayerChanges=function(changes){var results=new LeafletControlLayersChanges;if(null!=this.layersControl){results=this.applyChanges(changes,this.layersControl.addBaseLayer)}return results};LeafletControlLayersWrapper.prototype.applyOverlayChanges=function(changes){var results=new LeafletControlLayersChanges;if(null!=this.layersControl){results=this.applyChanges(changes,this.layersControl.addOverlay)}return results};LeafletControlLayersWrapper.prototype.applyChanges=function(changes,addFn){var _this=this;var results=new LeafletControlLayersChanges;if(null!=changes){this.zone.runOutsideAngular(function(){changes.forEachChangedItem(function(c){_this.layersControl.removeLayer(c.previousValue);addFn.call(_this.layersControl,c.currentValue,c.key);results.layersChanged++});changes.forEachRemovedItem(function(c){_this.layersControl.removeLayer(c.previousValue);results.layersRemoved++});changes.forEachAddedItem(function(c){addFn.call(_this.layersControl,c.currentValue,c.key);results.layersAdded++})})}return results};return LeafletControlLayersWrapper}();var LeafletControlLayersConfig=function(){function LeafletControlLayersConfig(){this.baseLayers={};this.overlays={}}return LeafletControlLayersConfig}();var LeafletLayersControlDirective=function(){function LeafletLayersControlDirective(leafletDirective,differs,zone){this.differs=differs;this.zone=zone;this.layersControlReady=new core.EventEmitter;this.leafletDirective=new LeafletDirectiveWrapper(leafletDirective);this.controlLayers=new LeafletControlLayersWrapper(this.zone,this.layersControlReady);this.baseLayersDiffer=this.differs.find({}).create();this.overlaysDiffer=this.differs.find({}).create()}Object.defineProperty(LeafletLayersControlDirective.prototype,"layersControlConfig",{get:function(){return this.layersControlConfigValue},set:function(v){if(null==v){v=new LeafletControlLayersConfig}if(null==v.baseLayers){v.baseLayers={}}if(null==v.overlays){v.overlays={}}this.layersControlConfigValue=v;this.updateLayers()},enumerable:false,configurable:true});LeafletLayersControlDirective.prototype.ngOnInit=function(){var _this=this;this.leafletDirective.init();this.zone.runOutsideAngular(function(){_this.controlLayers.init({},_this.layersControlOptions).addTo(_this.leafletDirective.getMap())});this.updateLayers()};LeafletLayersControlDirective.prototype.ngOnDestroy=function(){this.layersControlConfig={baseLayers:{},overlays:{}};this.controlLayers.getLayersControl().remove()};LeafletLayersControlDirective.prototype.ngDoCheck=function(){this.updateLayers()};LeafletLayersControlDirective.prototype.updateLayers=function(){var map=this.leafletDirective.getMap();var layersControl=this.controlLayers.getLayersControl();if(null!=map&&null!=layersControl){if(null!=this.baseLayersDiffer&&null!=this.layersControlConfigValue.baseLayers){var changes=this.baseLayersDiffer.diff(this.layersControlConfigValue.baseLayers);this.controlLayers.applyBaseLayerChanges(changes)}if(null!=this.overlaysDiffer&&null!=this.layersControlConfigValue.overlays){var changes=this.overlaysDiffer.diff(this.layersControlConfigValue.overlays);this.controlLayers.applyOverlayChanges(changes)}}};LeafletLayersControlDirective.decorators=[{type:core.Directive,args:[{selector:"[leafletLayersControl]"}]}];LeafletLayersControlDirective.ctorParameters=function(){return[{type:LeafletDirective},{type:core.KeyValueDiffers},{type:core.NgZone}]};LeafletLayersControlDirective.propDecorators={layersControlConfig:[{type:core.Input,args:["leafletLayersControl"]}],layersControlOptions:[{type:core.Input,args:["leafletLayersControlOptions"]}],layersControlReady:[{type:core.Output,args:["leafletLayersControlReady"]}]};return LeafletLayersControlDirective}();var LeafletBaseLayersDirective=function(){function LeafletBaseLayersDirective(leafletDirective,differs,zone){this.differs=differs;this.zone=zone;this.layersControlReady=new core.EventEmitter;this.leafletDirective=new LeafletDirectiveWrapper(leafletDirective);this.controlLayers=new LeafletControlLayersWrapper(this.zone,this.layersControlReady);this.baseLayersDiffer=this.differs.find({}).create()}Object.defineProperty(LeafletBaseLayersDirective.prototype,"baseLayers",{get:function(){return this.baseLayersValue},set:function(v){this.baseLayersValue=v;this.updateBaseLayers()},enumerable:false,configurable:true});LeafletBaseLayersDirective.prototype.ngOnDestroy=function(){this.baseLayers={};this.controlLayers.getLayersControl().remove()};LeafletBaseLayersDirective.prototype.ngOnInit=function(){var _this=this;this.leafletDirective.init();this.zone.runOutsideAngular(function(){_this.controlLayers.init({},_this.layersControlOptions).addTo(_this.leafletDirective.getMap())});this.updateBaseLayers()};LeafletBaseLayersDirective.prototype.ngDoCheck=function(){this.updateBaseLayers()};LeafletBaseLayersDirective.prototype.updateBaseLayers=function(){var map=this.leafletDirective.getMap();var layersControl=this.controlLayers.getLayersControl();if(null!=map&&null!=layersControl&&null!=this.baseLayersDiffer){var changes=this.baseLayersDiffer.diff(this.baseLayersValue);var results=this.controlLayers.applyBaseLayerChanges(changes);if(results.changed()){this.syncBaseLayer()}}};LeafletBaseLayersDirective.prototype.syncBaseLayer=function(){var _this=this;var map=this.leafletDirective.getMap();var layers=LeafletUtil.mapToArray(this.baseLayers);var foundLayer;map.eachLayer(function(l){foundLayer=layers.find(function(bl){return l===bl})});if(null!=foundLayer){this.baseLayer=foundLayer}else{if(layers.length>0){this.baseLayer=layers[0];this.zone.runOutsideAngular(function(){_this.baseLayer.addTo(map)})}}};LeafletBaseLayersDirective.decorators=[{type:core.Directive,args:[{selector:"[leafletBaseLayers]"}]}];LeafletBaseLayersDirective.ctorParameters=function(){return[{type:LeafletDirective},{type:core.KeyValueDiffers},{type:core.NgZone}]};LeafletBaseLayersDirective.propDecorators={baseLayers:[{type:core.Input,args:["leafletBaseLayers"]}],layersControlOptions:[{type:core.Input,args:["leafletLayersControlOptions"]}],layersControlReady:[{type:core.Output,args:["leafletLayersControlReady"]}]};return LeafletBaseLayersDirective}();var LeafletModule=function(){function LeafletModule(){}LeafletModule.decorators=[{type:core.NgModule,args:[{exports:[LeafletDirective,LeafletLayerDirective,LeafletLayersDirective,LeafletLayersControlDirective,LeafletBaseLayersDirective],declarations:[LeafletDirective,LeafletLayerDirective,LeafletLayersDirective,LeafletLayersControlDirective,LeafletBaseLayersDirective]}]}];return LeafletModule}();var LeafletTileLayerDefinition=function(){function LeafletTileLayerDefinition(type,url,options){this.type=type;this.url=url;this.options=options}LeafletTileLayerDefinition.createTileLayer=function(layerDef){var layer;switch(layerDef.type){case"xyz":layer=leaflet.tileLayer(layerDef.url,layerDef.options);break;case"wms":default:layer=leaflet.tileLayer.wms(layerDef.url,layerDef.options);break}return layer};LeafletTileLayerDefinition.createTileLayers=function(layerDefs){var layers={};for(var k in layerDefs){if(layerDefs.hasOwnProperty(k)){layers[k]=LeafletTileLayerDefinition.createTileLayer(layerDefs[k])}}return layers};LeafletTileLayerDefinition.prototype.createTileLayer=function(){return LeafletTileLayerDefinition.createTileLayer(this)};return LeafletTileLayerDefinition}();exports.LeafletBaseLayersDirective=LeafletBaseLayersDirective;exports.LeafletControlLayersChanges=LeafletControlLayersChanges;exports.LeafletControlLayersConfig=LeafletControlLayersConfig;exports.LeafletControlLayersWrapper=LeafletControlLayersWrapper;exports.LeafletDirective=LeafletDirective;exports.LeafletDirectiveWrapper=LeafletDirectiveWrapper;exports.LeafletLayerDirective=LeafletLayerDirective;exports.LeafletLayersControlDirective=LeafletLayersControlDirective;exports.LeafletLayersDirective=LeafletLayersDirective;exports.LeafletModule=LeafletModule;exports.LeafletTileLayerDefinition=LeafletTileLayerDefinition;exports.LeafletUtil=LeafletUtil;Object.defineProperty(exports,"__esModule",{value:true})});
+/* @license @asymmetrik/ngx-leaflet - 8.1.0 - Copyright Asymmetrik, Ltd. 2007-2020 - All Rights Reserved. + */
+(function(global,factory){typeof exports==="object"&&typeof module!=="undefined"?factory(exports,require("@angular/core"),require("leaflet")):typeof define==="function"&&define.amd?define(["exports","@angular/core","leaflet"],factory):(global=typeof globalThis!=="undefined"?globalThis:global||self,factory(global.ngxLeaflet={},global.ng.core,global.L))})(this,function(exports,core,leaflet){"use strict";var LeafletUtil=function(){function LeafletUtil(){}LeafletUtil.mapToArray=function(map){var toReturn=[];for(var k in map){if(map.hasOwnProperty(k)){toReturn.push(map[k])}}return toReturn};LeafletUtil.handleEvent=function(zone,eventEmitter,event){if(0<eventEmitter.observers.length){zone.run(function(){eventEmitter.emit(event)})}};return LeafletUtil}();var LeafletDirective=function(){function LeafletDirective(element,zone){this.element=element;this.zone=zone;this.DEFAULT_ZOOM=1;this.DEFAULT_CENTER=leaflet.latLng(38.907192,-77.036871);this.DEFAULT_FPZ_OPTIONS={};this.fitBoundsOptions=this.DEFAULT_FPZ_OPTIONS;this.panOptions=this.DEFAULT_FPZ_OPTIONS;this.zoomOptions=this.DEFAULT_FPZ_OPTIONS;this.zoomPanOptions=this.DEFAULT_FPZ_OPTIONS;this.options={};this.mapReady=new core.EventEmitter;this.zoomChange=new core.EventEmitter;this.centerChange=new core.EventEmitter;this.onClick=new core.EventEmitter;this.onDoubleClick=new core.EventEmitter;this.onMouseDown=new core.EventEmitter;this.onMouseUp=new core.EventEmitter;this.onMouseMove=new core.EventEmitter;this.onMouseOver=new core.EventEmitter;this.onMouseOut=new core.EventEmitter;this.onMapMove=new core.EventEmitter;this.onMapMoveStart=new core.EventEmitter;this.onMapMoveEnd=new core.EventEmitter;this.onMapZoom=new core.EventEmitter;this.onMapZoomStart=new core.EventEmitter;this.onMapZoomEnd=new core.EventEmitter;this.mapEventHandlers={}}LeafletDirective.prototype.ngOnInit=function(){var _this=this;this.zone.runOutsideAngular(function(){_this.map=leaflet.map(_this.element.nativeElement,_this.options);_this.addMapEventListeners()});if(null!=this.center&&null!=this.zoom){this.setView(this.center,this.zoom)}if(null!=this.fitBounds){this.setFitBounds(this.fitBounds)}if(null!=this.maxBounds){this.setMaxBounds(this.maxBounds)}if(null!=this.minZoom){this.setMinZoom(this.minZoom)}if(null!=this.maxZoom){this.setMaxZoom(this.maxZoom)}this.doResize();this.mapReady.emit(this.map)};LeafletDirective.prototype.ngOnChanges=function(changes){if(changes["zoom"]&&changes["center"]&&null!=this.zoom&&null!=this.center){this.setView(changes["center"].currentValue,changes["zoom"].currentValue)}else if(changes["zoom"]){this.setZoom(changes["zoom"].currentValue)}else if(changes["center"]){this.setCenter(changes["center"].currentValue)}if(changes["fitBounds"]){this.setFitBounds(changes["fitBounds"].currentValue)}if(changes["maxBounds"]){this.setMaxBounds(changes["maxBounds"].currentValue)}if(changes["minZoom"]){this.setMinZoom(changes["minZoom"].currentValue)}if(changes["maxZoom"]){this.setMaxZoom(changes["maxZoom"].currentValue)}};LeafletDirective.prototype.ngOnDestroy=function(){this.map.remove()};LeafletDirective.prototype.getMap=function(){return this.map};LeafletDirective.prototype.onResize=function(){this.delayResize()};LeafletDirective.prototype.addMapEventListeners=function(){var _this=this;var registerEventHandler=function(eventName,handler){_this.mapEventHandlers[eventName]=handler;_this.map.on(eventName,handler)};registerEventHandler("click",function(e){return LeafletUtil.handleEvent(_this.zone,_this.onClick,e)});registerEventHandler("dblclick",function(e){return LeafletUtil.handleEvent(_this.zone,_this.onDoubleClick,e)});registerEventHandler("mousedown",function(e){return LeafletUtil.handleEvent(_this.zone,_this.onMouseDown,e)});registerEventHandler("mouseup",function(e){return LeafletUtil.handleEvent(_this.zone,_this.onMouseUp,e)});registerEventHandler("mouseover",function(e){return LeafletUtil.handleEvent(_this.zone,_this.onMouseOver,e)});registerEventHandler("mouseout",function(e){return LeafletUtil.handleEvent(_this.zone,_this.onMouseOut,e)});registerEventHandler("mousemove",function(e){return LeafletUtil.handleEvent(_this.zone,_this.onMouseMove,e)});registerEventHandler("zoomstart",function(e){return LeafletUtil.handleEvent(_this.zone,_this.onMapZoomStart,e)});registerEventHandler("zoom",function(e){return LeafletUtil.handleEvent(_this.zone,_this.onMapZoom,e)});registerEventHandler("zoomend",function(e){return LeafletUtil.handleEvent(_this.zone,_this.onMapZoomEnd,e)});registerEventHandler("movestart",function(e){return LeafletUtil.handleEvent(_this.zone,_this.onMapMoveStart,e)});registerEventHandler("move",function(e){return LeafletUtil.handleEvent(_this.zone,_this.onMapMove,e)});registerEventHandler("moveend",function(e){return LeafletUtil.handleEvent(_this.zone,_this.onMapMoveEnd,e)});var outputUpdateHandler=function(){var zoom=_this.map.getZoom();if(zoom!==_this.zoom){_this.zoom=zoom;LeafletUtil.handleEvent(_this.zone,_this.zoomChange,zoom)}var center=_this.map.getCenter();if(null!=center||null!=_this.center){if((null==center||null==_this.center)&&center!==_this.center||(center.lat!==_this.center.lat||center.lng!==_this.center.lng)){_this.center=center;LeafletUtil.handleEvent(_this.zone,_this.centerChange,center)}}};registerEventHandler("moveend",outputUpdateHandler);registerEventHandler("zoomend",outputUpdateHandler)};LeafletDirective.prototype.doResize=function(){var _this=this;this.zone.runOutsideAngular(function(){_this.map.invalidateSize({})})};LeafletDirective.prototype.delayResize=function(){if(null!=this.resizeTimer){clearTimeout(this.resizeTimer)}this.resizeTimer=setTimeout(this.doResize.bind(this),200)};LeafletDirective.prototype.setView=function(center,zoom){if(this.map&&null!=center&&null!=zoom){this.map.setView(center,zoom,this.zoomPanOptions)}};LeafletDirective.prototype.setZoom=function(zoom){if(this.map&&null!=zoom){this.map.setZoom(zoom,this.zoomOptions)}};LeafletDirective.prototype.setCenter=function(center){if(this.map&&null!=center){this.map.panTo(center,this.panOptions)}};LeafletDirective.prototype.setFitBounds=function(latLngBounds){if(this.map&&null!=latLngBounds){this.map.fitBounds(latLngBounds,this.fitBoundsOptions)}};LeafletDirective.prototype.setMaxBounds=function(latLngBounds){if(this.map&&null!=latLngBounds){this.map.setMaxBounds(latLngBounds)}};LeafletDirective.prototype.setMinZoom=function(zoom){if(this.map&&null!=zoom){this.map.setMinZoom(zoom)}};LeafletDirective.prototype.setMaxZoom=function(zoom){if(this.map&&null!=zoom){this.map.setMaxZoom(zoom)}};LeafletDirective.decorators=[{type:core.Directive,args:[{selector:"[leaflet]"}]}];LeafletDirective.ctorParameters=function(){return[{type:core.ElementRef},{type:core.NgZone}]};LeafletDirective.propDecorators={fitBoundsOptions:[{type:core.Input,args:["leafletFitBoundsOptions"]}],panOptions:[{type:core.Input,args:["leafletPanOptions"]}],zoomOptions:[{type:core.Input,args:["leafletZoomOptions"]}],zoomPanOptions:[{type:core.Input,args:["leafletZoomPanOptions"]}],options:[{type:core.Input,args:["leafletOptions"]}],mapReady:[{type:core.Output,args:["leafletMapReady"]}],zoom:[{type:core.Input,args:["leafletZoom"]}],zoomChange:[{type:core.Output,args:["leafletZoomChange"]}],center:[{type:core.Input,args:["leafletCenter"]}],centerChange:[{type:core.Output,args:["leafletCenterChange"]}],fitBounds:[{type:core.Input,args:["leafletFitBounds"]}],maxBounds:[{type:core.Input,args:["leafletMaxBounds"]}],minZoom:[{type:core.Input,args:["leafletMinZoom"]}],maxZoom:[{type:core.Input,args:["leafletMaxZoom"]}],onClick:[{type:core.Output,args:["leafletClick"]}],onDoubleClick:[{type:core.Output,args:["leafletDoubleClick"]}],onMouseDown:[{type:core.Output,args:["leafletMouseDown"]}],onMouseUp:[{type:core.Output,args:["leafletMouseUp"]}],onMouseMove:[{type:core.Output,args:["leafletMouseMove"]}],onMouseOver:[{type:core.Output,args:["leafletMouseOver"]}],onMouseOut:[{type:core.Output,args:["leafletMouseOut"]}],onMapMove:[{type:core.Output,args:["leafletMapMove"]}],onMapMoveStart:[{type:core.Output,args:["leafletMapMoveStart"]}],onMapMoveEnd:[{type:core.Output,args:["leafletMapMoveEnd"]}],onMapZoom:[{type:core.Output,args:["leafletMapZoom"]}],onMapZoomStart:[{type:core.Output,args:["leafletMapZoomStart"]}],onMapZoomEnd:[{type:core.Output,args:["leafletMapZoomEnd"]}],onResize:[{type:core.HostListener,args:["window:resize",[]]}]};return LeafletDirective}();var LeafletDirectiveWrapper=function(){function LeafletDirectiveWrapper(leafletDirective){this.leafletDirective=leafletDirective}LeafletDirectiveWrapper.prototype.init=function(){};LeafletDirectiveWrapper.prototype.getMap=function(){return this.leafletDirective.getMap()};return LeafletDirectiveWrapper}();var LeafletLayerDirective=function(){function LeafletLayerDirective(leafletDirective,zone){this.zone=zone;this.onAdd=new core.EventEmitter;this.onRemove=new core.EventEmitter;this.leafletDirective=new LeafletDirectiveWrapper(leafletDirective)}LeafletLayerDirective.prototype.ngOnInit=function(){this.leafletDirective.init()};LeafletLayerDirective.prototype.ngOnDestroy=function(){if(null!=this.layer){this.removeLayerEventListeners(this.layer);this.layer.remove()}};LeafletLayerDirective.prototype.ngOnChanges=function(changes){var _this=this;if(changes["layer"]){var p_1=changes["layer"].previousValue;var n_1=changes["layer"].currentValue;this.zone.runOutsideAngular(function(){if(null!=p_1){_this.removeLayerEventListeners(p_1);p_1.remove()}if(null!=n_1){_this.addLayerEventListeners(n_1);_this.leafletDirective.getMap().addLayer(n_1)}})}};LeafletLayerDirective.prototype.addLayerEventListeners=function(l){var _this=this;this.onAddLayerHandler=function(e){return LeafletUtil.handleEvent(_this.zone,_this.onAdd,e)};l.on("add",this.onAddLayerHandler);this.onRemoveLayerHandler=function(e){return LeafletUtil.handleEvent(_this.zone,_this.onRemove,e)};l.on("remove",this.onRemoveLayerHandler)};LeafletLayerDirective.prototype.removeLayerEventListeners=function(l){l.off("add",this.onAddLayerHandler);l.off("remove",this.onRemoveLayerHandler)};LeafletLayerDirective.decorators=[{type:core.Directive,args:[{selector:"[leafletLayer]"}]}];LeafletLayerDirective.ctorParameters=function(){return[{type:LeafletDirective},{type:core.NgZone}]};LeafletLayerDirective.propDecorators={layer:[{type:core.Input,args:["leafletLayer"]}],onAdd:[{type:core.Output,args:["leafletLayerAdd"]}],onRemove:[{type:core.Output,args:["leafletLayerRemove"]}]};return LeafletLayerDirective}();var LeafletLayersDirective=function(){function LeafletLayersDirective(leafletDirective,differs,zone){this.differs=differs;this.zone=zone;this.leafletDirective=new LeafletDirectiveWrapper(leafletDirective);this.layersDiffer=this.differs.find([]).create()}Object.defineProperty(LeafletLayersDirective.prototype,"layers",{get:function(){return this.layersValue},set:function(v){this.layersValue=v;this.updateLayers()},enumerable:false,configurable:true});LeafletLayersDirective.prototype.ngDoCheck=function(){this.updateLayers()};LeafletLayersDirective.prototype.ngOnInit=function(){this.leafletDirective.init();this.updateLayers()};LeafletLayersDirective.prototype.ngOnDestroy=function(){this.layers=[]};LeafletLayersDirective.prototype.updateLayers=function(){var map=this.leafletDirective.getMap();if(null!=map&&null!=this.layersDiffer){var changes_1=this.layersDiffer.diff(this.layersValue);if(null!=changes_1){this.zone.runOutsideAngular(function(){changes_1.forEachRemovedItem(function(c){map.removeLayer(c.item)});changes_1.forEachAddedItem(function(c){map.addLayer(c.item)})})}}};LeafletLayersDirective.decorators=[{type:core.Directive,args:[{selector:"[leafletLayers]"}]}];LeafletLayersDirective.ctorParameters=function(){return[{type:LeafletDirective},{type:core.IterableDiffers},{type:core.NgZone}]};LeafletLayersDirective.propDecorators={layers:[{type:core.Input,args:["leafletLayers"]}]};return LeafletLayersDirective}();var LeafletControlLayersChanges=function(){function LeafletControlLayersChanges(){this.layersRemoved=0;this.layersChanged=0;this.layersAdded=0}LeafletControlLayersChanges.prototype.changed=function(){return!(this.layersRemoved===0&&this.layersChanged===0&&this.layersAdded===0)};return LeafletControlLayersChanges}();var LeafletControlLayersWrapper=function(){function LeafletControlLayersWrapper(zone,layersControlReady){this.zone=zone;this.layersControlReady=layersControlReady}LeafletControlLayersWrapper.prototype.getLayersControl=function(){return this.layersControl};LeafletControlLayersWrapper.prototype.init=function(controlConfig,controlOptions){var _this=this;var baseLayers=controlConfig.baseLayers||{};var overlays=controlConfig.overlays||{};this.zone.runOutsideAngular(function(){_this.layersControl=leaflet.control.layers(baseLayers,overlays,controlOptions)});this.layersControlReady.emit(this.layersControl);return this.layersControl};LeafletControlLayersWrapper.prototype.applyBaseLayerChanges=function(changes){var results=new LeafletControlLayersChanges;if(null!=this.layersControl){results=this.applyChanges(changes,this.layersControl.addBaseLayer)}return results};LeafletControlLayersWrapper.prototype.applyOverlayChanges=function(changes){var results=new LeafletControlLayersChanges;if(null!=this.layersControl){results=this.applyChanges(changes,this.layersControl.addOverlay)}return results};LeafletControlLayersWrapper.prototype.applyChanges=function(changes,addFn){var _this=this;var results=new LeafletControlLayersChanges;if(null!=changes){this.zone.runOutsideAngular(function(){changes.forEachChangedItem(function(c){_this.layersControl.removeLayer(c.previousValue);addFn.call(_this.layersControl,c.currentValue,c.key);results.layersChanged++});changes.forEachRemovedItem(function(c){_this.layersControl.removeLayer(c.previousValue);results.layersRemoved++});changes.forEachAddedItem(function(c){addFn.call(_this.layersControl,c.currentValue,c.key);results.layersAdded++})})}return results};return LeafletControlLayersWrapper}();var LeafletControlLayersConfig=function(){function LeafletControlLayersConfig(){this.baseLayers={};this.overlays={}}return LeafletControlLayersConfig}();var LeafletLayersControlDirective=function(){function LeafletLayersControlDirective(leafletDirective,differs,zone){this.differs=differs;this.zone=zone;this.layersControlReady=new core.EventEmitter;this.leafletDirective=new LeafletDirectiveWrapper(leafletDirective);this.controlLayers=new LeafletControlLayersWrapper(this.zone,this.layersControlReady);this.baseLayersDiffer=this.differs.find({}).create();this.overlaysDiffer=this.differs.find({}).create()}Object.defineProperty(LeafletLayersControlDirective.prototype,"layersControlConfig",{get:function(){return this.layersControlConfigValue},set:function(v){if(null==v){v=new LeafletControlLayersConfig}if(null==v.baseLayers){v.baseLayers={}}if(null==v.overlays){v.overlays={}}this.layersControlConfigValue=v;this.updateLayers()},enumerable:false,configurable:true});LeafletLayersControlDirective.prototype.ngOnInit=function(){var _this=this;this.leafletDirective.init();this.zone.runOutsideAngular(function(){_this.controlLayers.init({},_this.layersControlOptions).addTo(_this.leafletDirective.getMap())});this.updateLayers()};LeafletLayersControlDirective.prototype.ngOnDestroy=function(){this.layersControlConfig={baseLayers:{},overlays:{}};this.controlLayers.getLayersControl().remove()};LeafletLayersControlDirective.prototype.ngDoCheck=function(){this.updateLayers()};LeafletLayersControlDirective.prototype.updateLayers=function(){var map=this.leafletDirective.getMap();var layersControl=this.controlLayers.getLayersControl();if(null!=map&&null!=layersControl){if(null!=this.baseLayersDiffer&&null!=this.layersControlConfigValue.baseLayers){var changes=this.baseLayersDiffer.diff(this.layersControlConfigValue.baseLayers);this.controlLayers.applyBaseLayerChanges(changes)}if(null!=this.overlaysDiffer&&null!=this.layersControlConfigValue.overlays){var changes=this.overlaysDiffer.diff(this.layersControlConfigValue.overlays);this.controlLayers.applyOverlayChanges(changes)}}};LeafletLayersControlDirective.decorators=[{type:core.Directive,args:[{selector:"[leafletLayersControl]"}]}];LeafletLayersControlDirective.ctorParameters=function(){return[{type:LeafletDirective},{type:core.KeyValueDiffers},{type:core.NgZone}]};LeafletLayersControlDirective.propDecorators={layersControlConfig:[{type:core.Input,args:["leafletLayersControl"]}],layersControlOptions:[{type:core.Input,args:["leafletLayersControlOptions"]}],layersControlReady:[{type:core.Output,args:["leafletLayersControlReady"]}]};return LeafletLayersControlDirective}();var LeafletBaseLayersDirective=function(){function LeafletBaseLayersDirective(leafletDirective,differs,zone){this.differs=differs;this.zone=zone;this.layersControlReady=new core.EventEmitter;this.leafletDirective=new LeafletDirectiveWrapper(leafletDirective);this.controlLayers=new LeafletControlLayersWrapper(this.zone,this.layersControlReady);this.baseLayersDiffer=this.differs.find({}).create()}Object.defineProperty(LeafletBaseLayersDirective.prototype,"baseLayers",{get:function(){return this.baseLayersValue},set:function(v){this.baseLayersValue=v;this.updateBaseLayers()},enumerable:false,configurable:true});LeafletBaseLayersDirective.prototype.ngOnDestroy=function(){this.baseLayers={};this.controlLayers.getLayersControl().remove()};LeafletBaseLayersDirective.prototype.ngOnInit=function(){var _this=this;this.leafletDirective.init();this.zone.runOutsideAngular(function(){_this.controlLayers.init({},_this.layersControlOptions).addTo(_this.leafletDirective.getMap())});this.updateBaseLayers()};LeafletBaseLayersDirective.prototype.ngDoCheck=function(){this.updateBaseLayers()};LeafletBaseLayersDirective.prototype.updateBaseLayers=function(){var map=this.leafletDirective.getMap();var layersControl=this.controlLayers.getLayersControl();if(null!=map&&null!=layersControl&&null!=this.baseLayersDiffer){var changes=this.baseLayersDiffer.diff(this.baseLayersValue);var results=this.controlLayers.applyBaseLayerChanges(changes);if(results.changed()){this.syncBaseLayer()}}};LeafletBaseLayersDirective.prototype.syncBaseLayer=function(){var _this=this;var map=this.leafletDirective.getMap();var layers=LeafletUtil.mapToArray(this.baseLayers);var foundLayer;map.eachLayer(function(l){foundLayer=layers.find(function(bl){return l===bl})});if(null!=foundLayer){this.baseLayer=foundLayer}else{if(layers.length>0){this.baseLayer=layers[0];this.zone.runOutsideAngular(function(){_this.baseLayer.addTo(map)})}}};LeafletBaseLayersDirective.decorators=[{type:core.Directive,args:[{selector:"[leafletBaseLayers]"}]}];LeafletBaseLayersDirective.ctorParameters=function(){return[{type:LeafletDirective},{type:core.KeyValueDiffers},{type:core.NgZone}]};LeafletBaseLayersDirective.propDecorators={baseLayers:[{type:core.Input,args:["leafletBaseLayers"]}],layersControlOptions:[{type:core.Input,args:["leafletLayersControlOptions"]}],layersControlReady:[{type:core.Output,args:["leafletLayersControlReady"]}]};return LeafletBaseLayersDirective}();var LeafletModule=function(){function LeafletModule(){}LeafletModule.decorators=[{type:core.NgModule,args:[{exports:[LeafletDirective,LeafletLayerDirective,LeafletLayersDirective,LeafletLayersControlDirective,LeafletBaseLayersDirective],declarations:[LeafletDirective,LeafletLayerDirective,LeafletLayersDirective,LeafletLayersControlDirective,LeafletBaseLayersDirective]}]}];return LeafletModule}();var LeafletTileLayerDefinition=function(){function LeafletTileLayerDefinition(type,url,options){this.type=type;this.url=url;this.options=options}LeafletTileLayerDefinition.createTileLayer=function(layerDef){var layer;switch(layerDef.type){case"xyz":layer=leaflet.tileLayer(layerDef.url,layerDef.options);break;case"wms":default:layer=leaflet.tileLayer.wms(layerDef.url,layerDef.options);break}return layer};LeafletTileLayerDefinition.createTileLayers=function(layerDefs){var layers={};for(var k in layerDefs){if(layerDefs.hasOwnProperty(k)){layers[k]=LeafletTileLayerDefinition.createTileLayer(layerDefs[k])}}return layers};LeafletTileLayerDefinition.prototype.createTileLayer=function(){return LeafletTileLayerDefinition.createTileLayer(this)};return LeafletTileLayerDefinition}();exports.LeafletBaseLayersDirective=LeafletBaseLayersDirective;exports.LeafletControlLayersChanges=LeafletControlLayersChanges;exports.LeafletControlLayersConfig=LeafletControlLayersConfig;exports.LeafletControlLayersWrapper=LeafletControlLayersWrapper;exports.LeafletDirective=LeafletDirective;exports.LeafletDirectiveWrapper=LeafletDirectiveWrapper;exports.LeafletLayerDirective=LeafletLayerDirective;exports.LeafletLayersControlDirective=LeafletLayersControlDirective;exports.LeafletLayersDirective=LeafletLayersDirective;exports.LeafletModule=LeafletModule;exports.LeafletTileLayerDefinition=LeafletTileLayerDefinition;exports.LeafletUtil=LeafletUtil;Object.defineProperty(exports,"__esModule",{value:true})});

dist/leaflet/core/leaflet.directive.d.ts

@@ -1,4 +0,4 @@
-import { ElementRef, EventEmitter, NgZone, OnChanges, OnInit, SimpleChange } from '@angular/core';
+import { ElementRef, EventEmitter, NgZone, OnChanges, OnDestroy, OnInit, SimpleChange } from '@angular/core';
 import { LatLng, LatLngBounds, LeafletEvent, LeafletMouseEvent, Map, MapOptions } from 'leaflet';
-export declare class LeafletDirective implements OnChanges, OnInit {
+export declare class LeafletDirective implements OnChanges, OnDestroy, OnInit {
     private element;
@@ -38,2 +38,3 @@ private zone;
     onMapZoomEnd: EventEmitter<LeafletEvent>;
+    private mapEventHandlers;
     constructor(element: ElementRef, zone: NgZone);
@@ -44,2 +45,3 @@ ngOnInit(): void;
     }): void;
+    ngOnDestroy(): void;
     getMap(): Map;
@@ -46,0 +48,0 @@ onResize(): void;

dist/leaflet/core/leaflet.directive.js

@@ -37,2 +37,3 @@ import { Directive, ElementRef, EventEmitter, HostListener, Input, NgZone, Output } from '@angular/core';
         this.onMapZoomEnd = new EventEmitter();
+        this.mapEventHandlers = {};
         // Nothing here
@@ -104,2 +105,6 @@ }
     };
+    LeafletDirective.prototype.ngOnDestroy = function () {
+        // If this directive is destroyed, the map is too
+        this.map.remove();
+    };
     LeafletDirective.prototype.getMap = function () {
@@ -113,18 +118,22 @@ return this.map;
         var _this = this;
+        var registerEventHandler = function (eventName, handler) {
+            _this.mapEventHandlers[eventName] = handler;
+            _this.map.on(eventName, handler);
+        };
         // Add all the pass-through mouse event handlers
-        this.map.on('click', function (e) { return LeafletUtil.handleEvent(_this.zone, _this.onClick, e); });
-        this.map.on('dblclick', function (e) { return LeafletUtil.handleEvent(_this.zone, _this.onDoubleClick, e); });
-        this.map.on('mousedown', function (e) { return LeafletUtil.handleEvent(_this.zone, _this.onMouseDown, e); });
-        this.map.on('mouseup', function (e) { return LeafletUtil.handleEvent(_this.zone, _this.onMouseUp, e); });
-        this.map.on('mouseover', function (e) { return LeafletUtil.handleEvent(_this.zone, _this.onMouseOver, e); });
-        this.map.on('mouseout', function (e) { return LeafletUtil.handleEvent(_this.zone, _this.onMouseOut, e); });
-        this.map.on('mousemove', function (e) { return LeafletUtil.handleEvent(_this.zone, _this.onMouseMove, e); });
-        this.map.on('zoomstart', function (e) { return LeafletUtil.handleEvent(_this.zone, _this.onMapZoomStart, e); });
-        this.map.on('zoom', function (e) { return LeafletUtil.handleEvent(_this.zone, _this.onMapZoom, e); });
-        this.map.on('zoomend', function (e) { return LeafletUtil.handleEvent(_this.zone, _this.onMapZoomEnd, e); });
-        this.map.on('movestart', function (e) { return LeafletUtil.handleEvent(_this.zone, _this.onMapMoveStart, e); });
-        this.map.on('move', function (e) { return LeafletUtil.handleEvent(_this.zone, _this.onMapMove, e); });
-        this.map.on('moveend', function (e) { return LeafletUtil.handleEvent(_this.zone, _this.onMapMoveEnd, e); });
+        registerEventHandler('click', function (e) { return LeafletUtil.handleEvent(_this.zone, _this.onClick, e); });
+        registerEventHandler('dblclick', function (e) { return LeafletUtil.handleEvent(_this.zone, _this.onDoubleClick, e); });
+        registerEventHandler('mousedown', function (e) { return LeafletUtil.handleEvent(_this.zone, _this.onMouseDown, e); });
+        registerEventHandler('mouseup', function (e) { return LeafletUtil.handleEvent(_this.zone, _this.onMouseUp, e); });
+        registerEventHandler('mouseover', function (e) { return LeafletUtil.handleEvent(_this.zone, _this.onMouseOver, e); });
+        registerEventHandler('mouseout', function (e) { return LeafletUtil.handleEvent(_this.zone, _this.onMouseOut, e); });
+        registerEventHandler('mousemove', function (e) { return LeafletUtil.handleEvent(_this.zone, _this.onMouseMove, e); });
+        registerEventHandler('zoomstart', function (e) { return LeafletUtil.handleEvent(_this.zone, _this.onMapZoomStart, e); });
+        registerEventHandler('zoom', function (e) { return LeafletUtil.handleEvent(_this.zone, _this.onMapZoom, e); });
+        registerEventHandler('zoomend', function (e) { return LeafletUtil.handleEvent(_this.zone, _this.onMapZoomEnd, e); });
+        registerEventHandler('movestart', function (e) { return LeafletUtil.handleEvent(_this.zone, _this.onMapMoveStart, e); });
+        registerEventHandler('move', function (e) { return LeafletUtil.handleEvent(_this.zone, _this.onMapMove, e); });
+        registerEventHandler('moveend', function (e) { return LeafletUtil.handleEvent(_this.zone, _this.onMapMoveEnd, e); });
         // Update any things for which we provide output bindings
-        this.map.on('zoomend moveend', function () {
+        var outputUpdateHandler = function () {
             var zoom = _this.map.getZoom();
@@ -143,3 +152,5 @@ if (zoom !== _this.zoom) {
             }
-        });
+        };
+        registerEventHandler('moveend', outputUpdateHandler);
+        registerEventHandler('zoomend', outputUpdateHandler);
     };
@@ -146,0 +157,0 @@ /**

dist/leaflet/core/leaflet.directive.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":4,"metadata":{"LeafletDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":9,"character":1},"arguments":[{"selector":"[leaflet]"}]}],"members":{"fitBoundsOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":24,"character":2},"arguments":["leafletFitBoundsOptions"]}]}],"panOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":25,"character":2},"arguments":["leafletPanOptions"]}]}],"zoomOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":2},"arguments":["leafletZoomOptions"]}]}],"zoomPanOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":2},"arguments":["leafletZoomPanOptions"]}]}],"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":2},"arguments":["leafletOptions"]}]}],"mapReady":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":34,"character":2},"arguments":["leafletMapReady"]}]}],"zoom":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":2},"arguments":["leafletZoom"]}]}],"zoomChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":38,"character":2},"arguments":["leafletZoomChange"]}]}],"center":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":2},"arguments":["leafletCenter"]}]}],"centerChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":42,"character":2},"arguments":["leafletCenterChange"]}]}],"fitBounds":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":45,"character":2},"arguments":["leafletFitBounds"]}]}],"maxBounds":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":48,"character":2},"arguments":["leafletMaxBounds"]}]}],"minZoom":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":51,"character":2},"arguments":["leafletMinZoom"]}]}],"maxZoom":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":54,"character":2},"arguments":["leafletMaxZoom"]}]}],"onClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":58,"character":2},"arguments":["leafletClick"]}]}],"onDoubleClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":59,"character":2},"arguments":["leafletDoubleClick"]}]}],"onMouseDown":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":60,"character":2},"arguments":["leafletMouseDown"]}]}],"onMouseUp":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":61,"character":2},"arguments":["leafletMouseUp"]}]}],"onMouseMove":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":62,"character":2},"arguments":["leafletMouseMove"]}]}],"onMouseOver":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":63,"character":2},"arguments":["leafletMouseOver"]}]}],"onMouseOut":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":64,"character":2},"arguments":["leafletMouseOut"]}]}],"onMapMove":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":67,"character":2},"arguments":["leafletMapMove"]}]}],"onMapMoveStart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":68,"character":2},"arguments":["leafletMapMoveStart"]}]}],"onMapMoveEnd":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":69,"character":2},"arguments":["leafletMapMoveEnd"]}]}],"onMapZoom":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":72,"character":2},"arguments":["leafletMapZoom"]}]}],"onMapZoomStart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":73,"character":2},"arguments":["leafletMapZoomStart"]}]}],"onMapZoomEnd":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":74,"character":2},"arguments":["leafletMapZoomEnd"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":77,"character":30},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":77,"character":56}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"getMap":[{"__symbolic":"method"}],"onResize":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":169,"character":2},"arguments":["window:resize",[]]}]}],"addMapEventListeners":[{"__symbolic":"method"}],"doResize":[{"__symbolic":"method"}],"delayResize":[{"__symbolic":"method"}],"setView":[{"__symbolic":"method"}],"setZoom":[{"__symbolic":"method"}],"setCenter":[{"__symbolic":"method"}],"setFitBounds":[{"__symbolic":"method"}],"setMaxBounds":[{"__symbolic":"method"}],"setMinZoom":[{"__symbolic":"method"}],"setMaxZoom":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"LeafletDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":9,"character":1},"arguments":[{"selector":"[leaflet]"}]}],"members":{"fitBoundsOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":24,"character":2},"arguments":["leafletFitBoundsOptions"]}]}],"panOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":25,"character":2},"arguments":["leafletPanOptions"]}]}],"zoomOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":2},"arguments":["leafletZoomOptions"]}]}],"zoomPanOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":2},"arguments":["leafletZoomPanOptions"]}]}],"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":2},"arguments":["leafletOptions"]}]}],"mapReady":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":34,"character":2},"arguments":["leafletMapReady"]}]}],"zoom":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":2},"arguments":["leafletZoom"]}]}],"zoomChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":38,"character":2},"arguments":["leafletZoomChange"]}]}],"center":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":2},"arguments":["leafletCenter"]}]}],"centerChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":42,"character":2},"arguments":["leafletCenterChange"]}]}],"fitBounds":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":45,"character":2},"arguments":["leafletFitBounds"]}]}],"maxBounds":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":48,"character":2},"arguments":["leafletMaxBounds"]}]}],"minZoom":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":51,"character":2},"arguments":["leafletMinZoom"]}]}],"maxZoom":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":54,"character":2},"arguments":["leafletMaxZoom"]}]}],"onClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":58,"character":2},"arguments":["leafletClick"]}]}],"onDoubleClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":59,"character":2},"arguments":["leafletDoubleClick"]}]}],"onMouseDown":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":60,"character":2},"arguments":["leafletMouseDown"]}]}],"onMouseUp":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":61,"character":2},"arguments":["leafletMouseUp"]}]}],"onMouseMove":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":62,"character":2},"arguments":["leafletMouseMove"]}]}],"onMouseOver":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":63,"character":2},"arguments":["leafletMouseOver"]}]}],"onMouseOut":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":64,"character":2},"arguments":["leafletMouseOut"]}]}],"onMapMove":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":67,"character":2},"arguments":["leafletMapMove"]}]}],"onMapMoveStart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":68,"character":2},"arguments":["leafletMapMoveStart"]}]}],"onMapMoveEnd":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":69,"character":2},"arguments":["leafletMapMoveEnd"]}]}],"onMapZoom":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":72,"character":2},"arguments":["leafletMapZoom"]}]}],"onMapZoomStart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":73,"character":2},"arguments":["leafletMapZoomStart"]}]}],"onMapZoomEnd":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":74,"character":2},"arguments":["leafletMapZoomEnd"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":78,"character":30},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":78,"character":56}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"getMap":[{"__symbolic":"method"}],"onResize":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":175,"character":2},"arguments":["window:resize",[]]}]}],"addMapEventListeners":[{"__symbolic":"method"}],"doResize":[{"__symbolic":"method"}],"delayResize":[{"__symbolic":"method"}],"setView":[{"__symbolic":"method"}],"setZoom":[{"__symbolic":"method"}],"setCenter":[{"__symbolic":"method"}],"setFitBounds":[{"__symbolic":"method"}],"setMaxBounds":[{"__symbolic":"method"}],"setMinZoom":[{"__symbolic":"method"}],"setMaxZoom":[{"__symbolic":"method"}]}}}}]

dist/leaflet/layers/leaflet-layer.directive.d.ts

@@ -16,2 +16,4 @@ import { EventEmitter, NgZone, OnChanges, OnDestroy, OnInit, SimpleChange } from '@angular/core';
     onRemove: EventEmitter<LeafletEvent>;
+    private onAddLayerHandler;
+    private onRemoveLayerHandler;
     private leafletDirective;
@@ -25,2 +27,3 @@ constructor(leafletDirective: LeafletDirective, zone: NgZone);
     private addLayerEventListeners;
+    private removeLayerEventListeners;
 }

dist/leaflet/layers/leaflet-layer.directive.js

@@ -25,3 +25,8 @@ import { Directive, EventEmitter, Input, NgZone, Output } from '@angular/core';
     LeafletLayerDirective.prototype.ngOnDestroy = function () {
-        this.layer.remove();
+        if (null != this.layer) {
+            // Unregister the event handlers
+            this.removeLayerEventListeners(this.layer);
+            // Remove the layer from the map
+            this.layer.remove();
+        }
     };
@@ -36,2 +41,3 @@ LeafletLayerDirective.prototype.ngOnChanges = function (changes) {
                 if (null != p_1) {
+                    _this.removeLayerEventListeners(p_1);
                     p_1.remove();
@@ -48,5 +54,11 @@ }
         var _this = this;
-        l.on('add', function (e) { return LeafletUtil.handleEvent(_this.zone, _this.onAdd, e); });
-        l.on('remove', function (e) { return LeafletUtil.handleEvent(_this.zone, _this.onRemove, e); });
+        this.onAddLayerHandler = function (e) { return LeafletUtil.handleEvent(_this.zone, _this.onAdd, e); };
+        l.on('add', this.onAddLayerHandler);
+        this.onRemoveLayerHandler = function (e) { return LeafletUtil.handleEvent(_this.zone, _this.onRemove, e); };
+        l.on('remove', this.onRemoveLayerHandler);
     };
+    LeafletLayerDirective.prototype.removeLayerEventListeners = function (l) {
+        l.off('add', this.onAddLayerHandler);
+        l.off('remove', this.onRemoveLayerHandler);
+    };
     LeafletLayerDirective.decorators = [
@@ -53,0 +65,0 @@ { type: Directive, args: [{

dist/leaflet/layers/leaflet-layer.directive.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":4,"metadata":{"LeafletLayerDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":19,"character":1},"arguments":[{"selector":"[leafletLayer]"}]}],"members":{"layer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":25,"character":2},"arguments":["leafletLayer"]}]}],"onAdd":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":28,"character":2},"arguments":["leafletLayerAdd"]}]}],"onRemove":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":29,"character":2},"arguments":["leafletLayerRemove"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"../core/leaflet.directive","name":"LeafletDirective","line":34,"character":31},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":34,"character":63}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"addLayerEventListeners":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"LeafletLayerDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":19,"character":1},"arguments":[{"selector":"[leafletLayer]"}]}],"members":{"layer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":25,"character":2},"arguments":["leafletLayer"]}]}],"onAdd":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":28,"character":2},"arguments":["leafletLayerAdd"]}]}],"onRemove":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":29,"character":2},"arguments":["leafletLayerRemove"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"../core/leaflet.directive","name":"LeafletDirective","line":38,"character":31},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":38,"character":63}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"addLayerEventListeners":[{"__symbolic":"method"}],"removeLayerEventListeners":[{"__symbolic":"method"}]}}}}]

package.json

@@ -6,3 +6,3 @@ {
 	"description": "Angular.io components for Leaflet",
-	"version": "8.0.0",
+	"version": "8.1.0",
 	"author": "Asymmetrik, Ltd.",
@@ -9,0 +9,0 @@ "copyright": "Copyright Asymmetrik, Ltd. 2007-2020 - All Rights Reserved.",

src/demo/app/leaflet/leaflet-demo.module.ts

@@ -9,2 +9,3 @@ import { NgModule } from '@angular/core';
 import { LeafletCoreDemoComponent } from './core/core-demo.component';
+import { LeafletMultiMapDemoComponent } from'./core/multi-map-demo.component';
 import { LeafletEventsDemoComponent } from './events/events-demo.component';
@@ -35,2 +36,3 @@ import { LeafletLayersDemoComponent } from './layers/layers-demo.component';
 		LeafletPerformanceDemoComponent,
+		LeafletMultiMapDemoComponent,
 		LeafletWrapperComponent
@@ -37,0 +39,0 @@ ],

src/leaflet/core/leaflet.directive.ts

 import {
-	Directive, ElementRef, EventEmitter, HostListener, Input, NgZone, OnChanges, OnInit, Output,
+	Directive, ElementRef, EventEmitter, HostListener, Input, NgZone, OnChanges, OnDestroy, OnInit, Output,
 	SimpleChange
@@ -14,3 +14,3 @@ } from '@angular/core';
 export class LeafletDirective
-	implements OnChanges, OnInit {
+	implements OnChanges, OnDestroy, OnInit {
 
@@ -78,2 +78,3 @@ readonly DEFAULT_ZOOM = 1;
 
+	private mapEventHandlers: any = {};
 
@@ -167,2 +168,7 @@ constructor(private element: ElementRef, private zone: NgZone) {
 
+	ngOnDestroy() {
+		// If this directive is destroyed, the map is too
+		this.map.remove();
+	}
+
 	public getMap() {
@@ -180,21 +186,27 @@ return this.map;
 
+		const registerEventHandler = (eventName: string, handler: (e: LeafletEvent) => any) => {
+			this.mapEventHandlers[eventName] = handler;
+			this.map.on(eventName, handler);
+		};
+
+
 		// Add all the pass-through mouse event handlers
-		this.map.on('click', (e: LeafletMouseEvent) => LeafletUtil.handleEvent(this.zone, this.onClick, e));
-		this.map.on('dblclick', (e: LeafletMouseEvent) => LeafletUtil.handleEvent(this.zone, this.onDoubleClick, e));
-		this.map.on('mousedown', (e: LeafletMouseEvent) => LeafletUtil.handleEvent(this.zone, this.onMouseDown, e));
-		this.map.on('mouseup', (e: LeafletMouseEvent) => LeafletUtil.handleEvent(this.zone, this.onMouseUp, e));
-		this.map.on('mouseover', (e: LeafletMouseEvent) => LeafletUtil.handleEvent(this.zone, this.onMouseOver, e));
-		this.map.on('mouseout', (e: LeafletMouseEvent) => LeafletUtil.handleEvent(this.zone, this.onMouseOut, e));
-		this.map.on('mousemove', (e: LeafletMouseEvent) => LeafletUtil.handleEvent(this.zone, this.onMouseMove, e));
+		registerEventHandler('click', (e: LeafletMouseEvent) => LeafletUtil.handleEvent(this.zone, this.onClick, e));
+		registerEventHandler('dblclick', (e: LeafletMouseEvent) => LeafletUtil.handleEvent(this.zone, this.onDoubleClick, e));
+		registerEventHandler('mousedown', (e: LeafletMouseEvent) => LeafletUtil.handleEvent(this.zone, this.onMouseDown, e));
+		registerEventHandler('mouseup', (e: LeafletMouseEvent) => LeafletUtil.handleEvent(this.zone, this.onMouseUp, e));
+		registerEventHandler('mouseover', (e: LeafletMouseEvent) => LeafletUtil.handleEvent(this.zone, this.onMouseOver, e));
+		registerEventHandler('mouseout', (e: LeafletMouseEvent) => LeafletUtil.handleEvent(this.zone, this.onMouseOut, e));
+		registerEventHandler('mousemove', (e: LeafletMouseEvent) => LeafletUtil.handleEvent(this.zone, this.onMouseMove, e));
 
-		this.map.on('zoomstart', (e: LeafletEvent) => LeafletUtil.handleEvent(this.zone, this.onMapZoomStart, e));
-		this.map.on('zoom', (e: LeafletEvent) => LeafletUtil.handleEvent(this.zone, this.onMapZoom, e));
-		this.map.on('zoomend', (e: LeafletEvent) => LeafletUtil.handleEvent(this.zone, this.onMapZoomEnd, e));
-		this.map.on('movestart', (e: LeafletEvent) => LeafletUtil.handleEvent(this.zone, this.onMapMoveStart, e));
-		this.map.on('move', (e: LeafletEvent) => LeafletUtil.handleEvent(this.zone, this.onMapMove, e));
-		this.map.on('moveend', (e: LeafletEvent) => LeafletUtil.handleEvent(this.zone, this.onMapMoveEnd, e));
+		registerEventHandler('zoomstart', (e: LeafletEvent) => LeafletUtil.handleEvent(this.zone, this.onMapZoomStart, e));
+		registerEventHandler('zoom', (e: LeafletEvent) => LeafletUtil.handleEvent(this.zone, this.onMapZoom, e));
+		registerEventHandler('zoomend', (e: LeafletEvent) => LeafletUtil.handleEvent(this.zone, this.onMapZoomEnd, e));
+		registerEventHandler('movestart', (e: LeafletEvent) => LeafletUtil.handleEvent(this.zone, this.onMapMoveStart, e));
+		registerEventHandler('move', (e: LeafletEvent) => LeafletUtil.handleEvent(this.zone, this.onMapMove, e));
+		registerEventHandler('moveend', (e: LeafletEvent) => LeafletUtil.handleEvent(this.zone, this.onMapMoveEnd, e));
 
 
 		// Update any things for which we provide output bindings
-		this.map.on('zoomend moveend', () => {
+		const outputUpdateHandler = () => {
 			const zoom = this.map.getZoom();
@@ -217,6 +229,8 @@ if (zoom !== this.zoom) {
 			}
-		});
+		};
+
+		registerEventHandler('moveend', outputUpdateHandler);
+		registerEventHandler('zoomend', outputUpdateHandler);
 	}
 
-
 	/**
@@ -223,0 +237,0 @@ * Resize the map to fit it's parent container

src/leaflet/layers/leaflet-layer.directive.ts

@@ -32,2 +32,6 @@ import {
 
+	// Layer Event handlers
+	private onAddLayerHandler: any;
+	private onRemoveLayerHandler: any;
+
 	// Wrapper for the leaflet directive (manages the parent directive)
@@ -48,3 +52,12 @@ private leafletDirective: LeafletDirectiveWrapper;
 	ngOnDestroy() {
-		this.layer.remove();
+
+		if (null != this.layer) {
+
+			// Unregister the event handlers
+			this.removeLayerEventListeners(this.layer);
+
+			// Remove the layer from the map
+			this.layer.remove();
+		}
+
 	}
@@ -62,2 +75,3 @@
 				if (null != p) {
+					this.removeLayerEventListeners(p);
 					p.remove();
@@ -77,7 +91,17 @@ }
 
-		l.on('add', (e: LeafletEvent) => LeafletUtil.handleEvent(this.zone, this.onAdd, e));
-		l.on('remove', (e: LeafletEvent) => LeafletUtil.handleEvent(this.zone, this.onRemove, e));
+		this.onAddLayerHandler = (e: LeafletEvent) => LeafletUtil.handleEvent(this.zone, this.onAdd, e);
+		l.on('add', this.onAddLayerHandler);
 
+		this.onRemoveLayerHandler = (e: LeafletEvent) => LeafletUtil.handleEvent(this.zone, this.onRemove, e);
+		l.on('remove', this.onRemoveLayerHandler);
+
 	}
 
+	private removeLayerEventListeners(l: Layer) {
+
+		l.off('add', this.onAddLayerHandler);
+		l.off('remove', this.onRemoveLayerHandler);
+
+	}
+
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

317694

increased by3.09%

Number of package files

101

increased by2.02%

Lines of code

3364

increased by3.41%

No dependency changes