Socket
Socket
Sign inDemoInstall

@asymmetrik/ngx-leaflet

Package Overview
Dependencies
Maintainers
8
Versions
35
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@asymmetrik/ngx-leaflet - npm Package Compare versions

Comparing version 7.0.0 to 7.0.1

6

CHANGES.md

@@ -5,2 +5,3 @@ # Changelog

Support for Angular.io 9. 🎉
- Are your markers broken? In Leaflet 1.6, the marker icons changed enough to create new hashes. See [README](https://github.com/Asymmetrik/ngx-leaflet/blob/master/README.md#a-note-about-markers) for more details.

@@ -10,3 +11,8 @@ - Renamed UMD bundle to `ngx-leaflet.umd.js`. This shouldn't affect anyone unless you're manually including the bundle.

### 7.0.1
Fixed an error running the demo.
Cleanup in the README.
Fixing minification to exclude comments and include license.
## 6.0

@@ -13,0 +19,0 @@ Support for Angular.io 8.

22

dist/bundles/ngx-leaflet.umd.js

@@ -1,2 +0,2 @@

/*! @license @asymmetrik/ngx-leaflet - 7.0.0 - Copyright Asymmetrik, Ltd. 2007-2020 - All Rights Reserved. + */
/*! @license @asymmetrik/ngx-leaflet - 7.0.1 - Copyright Asymmetrik, Ltd. 2007-2020 - All Rights Reserved. + */
(function (global, factory) {

@@ -9,14 +9,14 @@ typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('leaflet')) :

/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
Copyright (c) Microsoft Corporation.
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */

@@ -23,0 +23,0 @@

@@ -1,231 +0,2 @@

/*! @license @asymmetrik/ngx-leaflet - 7.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=global||self,factory(global.ngxLeaflet={},global.ng.core,global.L))})(this,function(exports,core,leaflet){"use strict";
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */function __decorate(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)if(d=decorators[i])r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r;return c>3&&r&&Object.defineProperty(target,key,r),r}function __metadata(metadataKey,metadataValue){if(typeof Reflect==="object"&&typeof Reflect.metadata==="function")return Reflect.metadata(metadataKey,metadataValue)}var LeafletUtil=/** @class */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){
// Don't want to emit if there are no observers
if(0<eventEmitter.observers.length){zone.run(function(){eventEmitter.emit(event)})}};return LeafletUtil}();var LeafletDirective=/** @class */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;
// Default configuration
this.options={};
// Configure callback function for the map
this.mapReady=new core.EventEmitter;this.zoomChange=new core.EventEmitter;this.centerChange=new core.EventEmitter;
// Mouse Map Events
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;
// Map Move Events
this.onMapMove=new core.EventEmitter;this.onMapMoveStart=new core.EventEmitter;this.onMapMoveEnd=new core.EventEmitter;
// Map Zoom Events
this.onMapZoom=new core.EventEmitter;this.onMapZoomStart=new core.EventEmitter;this.onMapZoomEnd=new core.EventEmitter;
// Nothing here
}LeafletDirective.prototype.ngOnInit=function(){var _this=this;
// Create the map outside of angular so the various map events don't trigger change detection
this.zone.runOutsideAngular(function(){
// Create the map with some reasonable defaults
_this.map=leaflet.map(_this.element.nativeElement,_this.options);_this.addMapEventListeners()});
// Only setView if there is a center/zoom
if(null!=this.center&&null!=this.zoom){this.setView(this.center,this.zoom)}
// Set up all the initial settings
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();
// Fire map ready event
this.mapReady.emit(this.map)};LeafletDirective.prototype.ngOnChanges=function(changes){
/*
* The following code is to address an issue with our (basic) implementation of
* zooming and panning. From our testing, it seems that a pan operation followed
* by a zoom operation in the same thread will interfere with eachother. The zoom
* operation interrupts/cancels the pan, resulting in a final center point that is
* inaccurate. The solution seems to be to either separate them with a timeout or
* to collapse them into a setView call.
*/
// Zooming and Panning
if(changes["zoom"]&&changes["center"]&&null!=this.zoom&&null!=this.center){this.setView(changes["center"].currentValue,changes["zoom"].currentValue)}
// Set the zoom level
else if(changes["zoom"]){this.setZoom(changes["zoom"].currentValue)}
// Set the map center
else if(changes["center"]){this.setCenter(changes["center"].currentValue)}
// Other options
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;
// 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)});
// Update any things for which we provide output bindings
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)}}})};
/**
* Resize the map to fit it's parent container
*/LeafletDirective.prototype.doResize=function(){var _this=this;
// Run this outside of angular so the map events stay outside of angular
this.zone.runOutsideAngular(function(){
// Invalidate the map size to trigger it to update itself
_this.map.invalidateSize({})})};
/**
* Manage a delayed resize of the component
*/LeafletDirective.prototype.delayResize=function(){if(null!=this.resizeTimer){clearTimeout(this.resizeTimer)}this.resizeTimer=setTimeout(this.doResize.bind(this),200)};
/**
* Set the view (center/zoom) all at once
* @param center The new center
* @param zoom The new zoom level
*/LeafletDirective.prototype.setView=function(center,zoom){if(this.map&&null!=center&&null!=zoom){this.map.setView(center,zoom,this.zoomPanOptions)}};
/**
* Set the map zoom level
* @param zoom the new zoom level for the map
*/LeafletDirective.prototype.setZoom=function(zoom){if(this.map&&null!=zoom){this.map.setZoom(zoom,this.zoomOptions)}};
/**
* Set the center of the map
* @param center the center point
*/LeafletDirective.prototype.setCenter=function(center){if(this.map&&null!=center){this.map.panTo(center,this.panOptions)}};
/**
* Fit the map to the bounds
* @param latLngBounds the boundary to set
*/LeafletDirective.prototype.setFitBounds=function(latLngBounds){if(this.map&&null!=latLngBounds){this.map.fitBounds(latLngBounds,this.fitBoundsOptions)}};
/**
* Set the map's max bounds
* @param latLngBounds the boundary to set
*/LeafletDirective.prototype.setMaxBounds=function(latLngBounds){if(this.map&&null!=latLngBounds){this.map.setMaxBounds(latLngBounds)}};
/**
* Set the map's min zoom
* @param number the new min zoom
*/LeafletDirective.prototype.setMinZoom=function(zoom){if(this.map&&null!=zoom){this.map.setMinZoom(zoom)}};
/**
* Set the map's min zoom
* @param number the new min zoom
*/LeafletDirective.prototype.setMaxZoom=function(zoom){if(this.map&&null!=zoom){this.map.setMaxZoom(zoom)}};__decorate([core.Input("leafletFitBoundsOptions"),__metadata("design:type",Object)],LeafletDirective.prototype,"fitBoundsOptions",void 0);__decorate([core.Input("leafletPanOptions"),__metadata("design:type",Object)],LeafletDirective.prototype,"panOptions",void 0);__decorate([core.Input("leafletZoomOptions"),__metadata("design:type",Object)],LeafletDirective.prototype,"zoomOptions",void 0);__decorate([core.Input("leafletZoomPanOptions"),__metadata("design:type",Object)],LeafletDirective.prototype,"zoomPanOptions",void 0);__decorate([core.Input("leafletOptions"),__metadata("design:type",Object)],LeafletDirective.prototype,"options",void 0);__decorate([core.Output("leafletMapReady"),__metadata("design:type",Object)],LeafletDirective.prototype,"mapReady",void 0);__decorate([core.Input("leafletZoom"),__metadata("design:type",Number)],LeafletDirective.prototype,"zoom",void 0);__decorate([core.Output("leafletZoomChange"),__metadata("design:type",Object)],LeafletDirective.prototype,"zoomChange",void 0);__decorate([core.Input("leafletCenter"),__metadata("design:type",leaflet.LatLng)],LeafletDirective.prototype,"center",void 0);__decorate([core.Output("leafletCenterChange"),__metadata("design:type",Object)],LeafletDirective.prototype,"centerChange",void 0);__decorate([core.Input("leafletFitBounds"),__metadata("design:type",leaflet.LatLngBounds)],LeafletDirective.prototype,"fitBounds",void 0);__decorate([core.Input("leafletMaxBounds"),__metadata("design:type",leaflet.LatLngBounds)],LeafletDirective.prototype,"maxBounds",void 0);__decorate([core.Input("leafletMinZoom"),__metadata("design:type",Number)],LeafletDirective.prototype,"minZoom",void 0);__decorate([core.Input("leafletMaxZoom"),__metadata("design:type",Number)],LeafletDirective.prototype,"maxZoom",void 0);__decorate([core.Output("leafletClick"),__metadata("design:type",Object)],LeafletDirective.prototype,"onClick",void 0);__decorate([core.Output("leafletDoubleClick"),__metadata("design:type",Object)],LeafletDirective.prototype,"onDoubleClick",void 0);__decorate([core.Output("leafletMouseDown"),__metadata("design:type",Object)],LeafletDirective.prototype,"onMouseDown",void 0);__decorate([core.Output("leafletMouseUp"),__metadata("design:type",Object)],LeafletDirective.prototype,"onMouseUp",void 0);__decorate([core.Output("leafletMouseMove"),__metadata("design:type",Object)],LeafletDirective.prototype,"onMouseMove",void 0);__decorate([core.Output("leafletMouseOver"),__metadata("design:type",Object)],LeafletDirective.prototype,"onMouseOver",void 0);__decorate([core.Output("leafletMouseOut"),__metadata("design:type",Object)],LeafletDirective.prototype,"onMouseOut",void 0);__decorate([core.Output("leafletMapMove"),__metadata("design:type",Object)],LeafletDirective.prototype,"onMapMove",void 0);__decorate([core.Output("leafletMapMoveStart"),__metadata("design:type",Object)],LeafletDirective.prototype,"onMapMoveStart",void 0);__decorate([core.Output("leafletMapMoveEnd"),__metadata("design:type",Object)],LeafletDirective.prototype,"onMapMoveEnd",void 0);__decorate([core.Output("leafletMapZoom"),__metadata("design:type",Object)],LeafletDirective.prototype,"onMapZoom",void 0);__decorate([core.Output("leafletMapZoomStart"),__metadata("design:type",Object)],LeafletDirective.prototype,"onMapZoomStart",void 0);__decorate([core.Output("leafletMapZoomEnd"),__metadata("design:type",Object)],LeafletDirective.prototype,"onMapZoomEnd",void 0);__decorate([core.HostListener("window:resize",[]),__metadata("design:type",Function),__metadata("design:paramtypes",[]),__metadata("design:returntype",void 0)],LeafletDirective.prototype,"onResize",null);LeafletDirective=__decorate([core.Directive({selector:"[leaflet]"}),__metadata("design:paramtypes",[core.ElementRef,core.NgZone])],LeafletDirective);return LeafletDirective}();var LeafletDirectiveWrapper=/** @class */function(){function LeafletDirectiveWrapper(leafletDirective){this.leafletDirective=leafletDirective}LeafletDirectiveWrapper.prototype.init=function(){
// Nothing for now
};LeafletDirectiveWrapper.prototype.getMap=function(){return this.leafletDirective.getMap()};return LeafletDirectiveWrapper}();
/**
* Layer directive
*
* This directive is used to directly control a single map layer. The purpose of this directive is to
* be used as part of a child structural directive of the map element.
*
*/var LeafletLayerDirective=/** @class */function(){function LeafletLayerDirective(leafletDirective,zone){this.zone=zone;
// Layer Events
this.onAdd=new core.EventEmitter;this.onRemove=new core.EventEmitter;this.leafletDirective=new LeafletDirectiveWrapper(leafletDirective)}LeafletLayerDirective.prototype.ngOnInit=function(){
// Init the map
this.leafletDirective.init()};LeafletLayerDirective.prototype.ngOnDestroy=function(){this.layer.remove()};LeafletLayerDirective.prototype.ngOnChanges=function(changes){var _this=this;if(changes["layer"]){
// Update the 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)})};__decorate([core.Input("leafletLayer"),__metadata("design:type",leaflet.Layer)],LeafletLayerDirective.prototype,"layer",void 0);__decorate([core.Output("leafletLayerAdd"),__metadata("design:type",Object)],LeafletLayerDirective.prototype,"onAdd",void 0);__decorate([core.Output("leafletLayerRemove"),__metadata("design:type",Object)],LeafletLayerDirective.prototype,"onRemove",void 0);LeafletLayerDirective=__decorate([core.Directive({selector:"[leafletLayer]"}),__metadata("design:paramtypes",[LeafletDirective,core.NgZone])],LeafletLayerDirective);return LeafletLayerDirective}();
/**
* Layers directive
*
* This directive is used to directly control map layers. As changes are made to the input array of
* layers, the map is synched to the array. As layers are added or removed from the input array, they
* are also added or removed from the map. The input array is treated as immutable. To detect changes,
* you must change the array instance.
*
* Important Note: The input layers array is assumed to be immutable. This means you need to use an
* immutable array implementation or create a new copy of your array when you make changes, otherwise
* this directive won't detect the change. This is by design. It's for performance reasons. Change
* detection of mutable arrays requires diffing the state of the array on every DoCheck cycle, which
* is extremely expensive from a time complexity perspective.
*
*/var LeafletLayersDirective=/** @class */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/get the layers
set:function(v){this.layersValue=v;
// Now that we have a differ, do an immediate layer update
this.updateLayers()},enumerable:true,configurable:true});LeafletLayersDirective.prototype.ngDoCheck=function(){this.updateLayers()};LeafletLayersDirective.prototype.ngOnInit=function(){
// Init the map
this.leafletDirective.init();
// Update layers once the map is ready
this.updateLayers()};LeafletLayersDirective.prototype.ngOnDestroy=function(){this.layers=[]};
/**
* Update the state of the layers.
* We use an iterable differ to synchronize the map layers with the state of the bound layers array.
* This is important because it allows us to react to changes to the contents of the array as well
* as changes to the actual array instance.
*/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){
// Run outside angular to ensure layer events don't trigger change detection
this.zone.runOutsideAngular(function(){changes_1.forEachRemovedItem(function(c){map.removeLayer(c.item)});changes_1.forEachAddedItem(function(c){map.addLayer(c.item)})})}}};__decorate([core.Input("leafletLayers"),__metadata("design:type",Array),__metadata("design:paramtypes",[Array])],LeafletLayersDirective.prototype,"layers",null);LeafletLayersDirective=__decorate([core.Directive({selector:"[leafletLayers]"}),__metadata("design:paramtypes",[LeafletDirective,core.IterableDiffers,core.NgZone])],LeafletLayersDirective);return LeafletLayersDirective}();var LeafletControlLayersChanges=/** @class */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=/** @class */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||{};
// Create the control outside of angular to ensure events don't trigger change detection
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){
// All layer management is outside angular to avoid layer events from triggering change detection
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=/** @class */function(){function LeafletControlLayersConfig(){this.baseLayers={};this.overlays={}}return LeafletControlLayersConfig}();
/**
* Layers Control
*
* This directive is used to configure the layers control. The input accepts an object with two
* key-value maps of layer name -> layer. Mutable changes are detected. On changes, a differ is
* used to determine what changed so that layers are appropriately added or removed.
*
* To specify which layer to show as the 'active' baselayer, you will want to add it to the map
* using the layers directive. Otherwise, the last one it sees will be used.
*/var LeafletLayersControlDirective=/** @class */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);
// Generate differs
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){
// Validation/init stuff
if(null==v){v=new LeafletControlLayersConfig}if(null==v.baseLayers){v.baseLayers={}}if(null==v.overlays){v.overlays={}}
// Store the value
this.layersControlConfigValue=v;
// Update the map
this.updateLayers()},enumerable:true,configurable:true});LeafletLayersControlDirective.prototype.ngOnInit=function(){var _this=this;
// Init the map
this.leafletDirective.init();
// Set up control outside of angular to avoid change detection when using the control
this.zone.runOutsideAngular(function(){
// Set up all the initial settings
_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){
// Run the baselayers differ
if(null!=this.baseLayersDiffer&&null!=this.layersControlConfigValue.baseLayers){var changes=this.baseLayersDiffer.diff(this.layersControlConfigValue.baseLayers);this.controlLayers.applyBaseLayerChanges(changes)}
// Run the overlays differ
if(null!=this.overlaysDiffer&&null!=this.layersControlConfigValue.overlays){var changes=this.overlaysDiffer.diff(this.layersControlConfigValue.overlays);this.controlLayers.applyOverlayChanges(changes)}}};__decorate([core.Input("leafletLayersControl"),__metadata("design:type",LeafletControlLayersConfig),__metadata("design:paramtypes",[LeafletControlLayersConfig])],LeafletLayersControlDirective.prototype,"layersControlConfig",null);__decorate([core.Input("leafletLayersControlOptions"),__metadata("design:type",Object)],LeafletLayersControlDirective.prototype,"layersControlOptions",void 0);__decorate([core.Output("leafletLayersControlReady"),__metadata("design:type",Object)],LeafletLayersControlDirective.prototype,"layersControlReady",void 0);LeafletLayersControlDirective=__decorate([core.Directive({selector:"[leafletLayersControl]"}),__metadata("design:paramtypes",[LeafletDirective,core.KeyValueDiffers,core.NgZone])],LeafletLayersControlDirective);return LeafletLayersControlDirective}();
/**
* Baselayers directive
*
* This directive is provided as a convenient way to add baselayers to the map. The input accepts
* a key-value map of layer name -> layer. Mutable changed are detected. On changes, a differ is
* used to determine what changed so that layers are appropriately added or removed. This directive
* will also add the layers control so users can switch between available base layers.
*
* To specify which layer to show as the 'active' baselayer, you will want to add it to the map
* using the layers directive. Otherwise, the plugin will use the last one it sees.
*/var LeafletBaseLayersDirective=/** @class */function(){function LeafletBaseLayersDirective(leafletDirective,differs,zone){this.differs=differs;this.zone=zone;
// Output for once the layers control is ready
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/get baseLayers
set:function(v){this.baseLayersValue=v;this.updateBaseLayers()},enumerable:true,configurable:true});LeafletBaseLayersDirective.prototype.ngOnDestroy=function(){this.baseLayers={};this.controlLayers.getLayersControl().remove()};LeafletBaseLayersDirective.prototype.ngOnInit=function(){var _this=this;
// Init the map
this.leafletDirective.init();
// Create the control outside angular to prevent events from triggering chnage detection
this.zone.runOutsideAngular(function(){
// Initially configure the controlLayers
_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()}}};
/**
* Check the current base layer and change it to the new one if necessary
*/LeafletBaseLayersDirective.prototype.syncBaseLayer=function(){var _this=this;var map=this.leafletDirective.getMap();var layers=LeafletUtil.mapToArray(this.baseLayers);var foundLayer;
// Search all the layers in the map to see if we can find them in the baselayer array
map.eachLayer(function(l){foundLayer=layers.find(function(bl){return l===bl})});
// Did we find the layer?
if(null!=foundLayer){
// Yes - set the baselayer to the one we found
this.baseLayer=foundLayer}else{
// No - set the baselayer to the first in the array and add it to the map
if(layers.length>0){this.baseLayer=layers[0];
// Add layers outside of angular to prevent events from triggering change detection
this.zone.runOutsideAngular(function(){_this.baseLayer.addTo(map)})}}};__decorate([core.Input("leafletBaseLayers"),__metadata("design:type",Object),__metadata("design:paramtypes",[Object])],LeafletBaseLayersDirective.prototype,"baseLayers",null);__decorate([core.Input("leafletLayersControlOptions"),__metadata("design:type",Object)],LeafletBaseLayersDirective.prototype,"layersControlOptions",void 0);__decorate([core.Output("leafletLayersControlReady"),__metadata("design:type",Object)],LeafletBaseLayersDirective.prototype,"layersControlReady",void 0);LeafletBaseLayersDirective=__decorate([core.Directive({selector:"[leafletBaseLayers]"}),__metadata("design:paramtypes",[LeafletDirective,core.KeyValueDiffers,core.NgZone])],LeafletBaseLayersDirective);return LeafletBaseLayersDirective}();var LeafletModule=/** @class */function(){function LeafletModule(){}LeafletModule=__decorate([core.NgModule({exports:[LeafletDirective,LeafletLayerDirective,LeafletLayersDirective,LeafletLayersControlDirective,LeafletBaseLayersDirective],declarations:[LeafletDirective,LeafletLayerDirective,LeafletLayersDirective,LeafletLayersControlDirective,LeafletBaseLayersDirective]})],LeafletModule);return LeafletModule}();var LeafletTileLayerDefinition=/** @class */function(){function LeafletTileLayerDefinition(type,url,options){this.type=type;this.url=url;this.options=options}
/**
* Creates a TileLayer from the provided definition. This is a convenience function
* to help with generating layers from objects.
*
* @param layerDef The layer to create
* @returns {TileLayer} The TileLayer that has been created
*/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};
/**
* Creates a TileLayer for each key in the incoming map. This is a convenience function
* for generating an associative array of layers from an associative array of objects
*
* @param layerDefs A map of key to tile layer definition
* @returns {{[p: string]: TileLayer}} A new map of key to TileLayer
*/LeafletTileLayerDefinition.createTileLayers=function(layerDefs){var layers={};for(var k in layerDefs){if(layerDefs.hasOwnProperty(k)){layers[k]=LeafletTileLayerDefinition.createTileLayer(layerDefs[k])}}return layers};
/**
* Create a Tile Layer from the current state of this object
*
* @returns {TileLayer} A new TileLayer
*/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})});
//# sourceMappingURL=ngx-leaflet.umd.js.map
/*! @license @asymmetrik/ngx-leaflet - 7.0.1 - 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=global||self,factory(global.ngxLeaflet={},global.ng.core,global.L))})(this,function(exports,core,leaflet){"use strict";function __decorate(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)if(d=decorators[i])r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r;return c>3&&r&&Object.defineProperty(target,key,r),r}function __metadata(metadataKey,metadataValue){if(typeof Reflect==="object"&&typeof Reflect.metadata==="function")return Reflect.metadata(metadataKey,metadataValue)}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)}};__decorate([core.Input("leafletFitBoundsOptions"),__metadata("design:type",Object)],LeafletDirective.prototype,"fitBoundsOptions",void 0);__decorate([core.Input("leafletPanOptions"),__metadata("design:type",Object)],LeafletDirective.prototype,"panOptions",void 0);__decorate([core.Input("leafletZoomOptions"),__metadata("design:type",Object)],LeafletDirective.prototype,"zoomOptions",void 0);__decorate([core.Input("leafletZoomPanOptions"),__metadata("design:type",Object)],LeafletDirective.prototype,"zoomPanOptions",void 0);__decorate([core.Input("leafletOptions"),__metadata("design:type",Object)],LeafletDirective.prototype,"options",void 0);__decorate([core.Output("leafletMapReady"),__metadata("design:type",Object)],LeafletDirective.prototype,"mapReady",void 0);__decorate([core.Input("leafletZoom"),__metadata("design:type",Number)],LeafletDirective.prototype,"zoom",void 0);__decorate([core.Output("leafletZoomChange"),__metadata("design:type",Object)],LeafletDirective.prototype,"zoomChange",void 0);__decorate([core.Input("leafletCenter"),__metadata("design:type",leaflet.LatLng)],LeafletDirective.prototype,"center",void 0);__decorate([core.Output("leafletCenterChange"),__metadata("design:type",Object)],LeafletDirective.prototype,"centerChange",void 0);__decorate([core.Input("leafletFitBounds"),__metadata("design:type",leaflet.LatLngBounds)],LeafletDirective.prototype,"fitBounds",void 0);__decorate([core.Input("leafletMaxBounds"),__metadata("design:type",leaflet.LatLngBounds)],LeafletDirective.prototype,"maxBounds",void 0);__decorate([core.Input("leafletMinZoom"),__metadata("design:type",Number)],LeafletDirective.prototype,"minZoom",void 0);__decorate([core.Input("leafletMaxZoom"),__metadata("design:type",Number)],LeafletDirective.prototype,"maxZoom",void 0);__decorate([core.Output("leafletClick"),__metadata("design:type",Object)],LeafletDirective.prototype,"onClick",void 0);__decorate([core.Output("leafletDoubleClick"),__metadata("design:type",Object)],LeafletDirective.prototype,"onDoubleClick",void 0);__decorate([core.Output("leafletMouseDown"),__metadata("design:type",Object)],LeafletDirective.prototype,"onMouseDown",void 0);__decorate([core.Output("leafletMouseUp"),__metadata("design:type",Object)],LeafletDirective.prototype,"onMouseUp",void 0);__decorate([core.Output("leafletMouseMove"),__metadata("design:type",Object)],LeafletDirective.prototype,"onMouseMove",void 0);__decorate([core.Output("leafletMouseOver"),__metadata("design:type",Object)],LeafletDirective.prototype,"onMouseOver",void 0);__decorate([core.Output("leafletMouseOut"),__metadata("design:type",Object)],LeafletDirective.prototype,"onMouseOut",void 0);__decorate([core.Output("leafletMapMove"),__metadata("design:type",Object)],LeafletDirective.prototype,"onMapMove",void 0);__decorate([core.Output("leafletMapMoveStart"),__metadata("design:type",Object)],LeafletDirective.prototype,"onMapMoveStart",void 0);__decorate([core.Output("leafletMapMoveEnd"),__metadata("design:type",Object)],LeafletDirective.prototype,"onMapMoveEnd",void 0);__decorate([core.Output("leafletMapZoom"),__metadata("design:type",Object)],LeafletDirective.prototype,"onMapZoom",void 0);__decorate([core.Output("leafletMapZoomStart"),__metadata("design:type",Object)],LeafletDirective.prototype,"onMapZoomStart",void 0);__decorate([core.Output("leafletMapZoomEnd"),__metadata("design:type",Object)],LeafletDirective.prototype,"onMapZoomEnd",void 0);__decorate([core.HostListener("window:resize",[]),__metadata("design:type",Function),__metadata("design:paramtypes",[]),__metadata("design:returntype",void 0)],LeafletDirective.prototype,"onResize",null);LeafletDirective=__decorate([core.Directive({selector:"[leaflet]"}),__metadata("design:paramtypes",[core.ElementRef,core.NgZone])],LeafletDirective);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)})};__decorate([core.Input("leafletLayer"),__metadata("design:type",leaflet.Layer)],LeafletLayerDirective.prototype,"layer",void 0);__decorate([core.Output("leafletLayerAdd"),__metadata("design:type",Object)],LeafletLayerDirective.prototype,"onAdd",void 0);__decorate([core.Output("leafletLayerRemove"),__metadata("design:type",Object)],LeafletLayerDirective.prototype,"onRemove",void 0);LeafletLayerDirective=__decorate([core.Directive({selector:"[leafletLayer]"}),__metadata("design:paramtypes",[LeafletDirective,core.NgZone])],LeafletLayerDirective);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:true,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)})})}}};__decorate([core.Input("leafletLayers"),__metadata("design:type",Array),__metadata("design:paramtypes",[Array])],LeafletLayersDirective.prototype,"layers",null);LeafletLayersDirective=__decorate([core.Directive({selector:"[leafletLayers]"}),__metadata("design:paramtypes",[LeafletDirective,core.IterableDiffers,core.NgZone])],LeafletLayersDirective);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:true,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)}}};__decorate([core.Input("leafletLayersControl"),__metadata("design:type",LeafletControlLayersConfig),__metadata("design:paramtypes",[LeafletControlLayersConfig])],LeafletLayersControlDirective.prototype,"layersControlConfig",null);__decorate([core.Input("leafletLayersControlOptions"),__metadata("design:type",Object)],LeafletLayersControlDirective.prototype,"layersControlOptions",void 0);__decorate([core.Output("leafletLayersControlReady"),__metadata("design:type",Object)],LeafletLayersControlDirective.prototype,"layersControlReady",void 0);LeafletLayersControlDirective=__decorate([core.Directive({selector:"[leafletLayersControl]"}),__metadata("design:paramtypes",[LeafletDirective,core.KeyValueDiffers,core.NgZone])],LeafletLayersControlDirective);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:true,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)})}}};__decorate([core.Input("leafletBaseLayers"),__metadata("design:type",Object),__metadata("design:paramtypes",[Object])],LeafletBaseLayersDirective.prototype,"baseLayers",null);__decorate([core.Input("leafletLayersControlOptions"),__metadata("design:type",Object)],LeafletBaseLayersDirective.prototype,"layersControlOptions",void 0);__decorate([core.Output("leafletLayersControlReady"),__metadata("design:type",Object)],LeafletBaseLayersDirective.prototype,"layersControlReady",void 0);LeafletBaseLayersDirective=__decorate([core.Directive({selector:"[leafletBaseLayers]"}),__metadata("design:paramtypes",[LeafletDirective,core.KeyValueDiffers,core.NgZone])],LeafletBaseLayersDirective);return LeafletBaseLayersDirective}();var LeafletModule=function(){function LeafletModule(){}LeafletModule=__decorate([core.NgModule({exports:[LeafletDirective,LeafletLayerDirective,LeafletLayersDirective,LeafletLayersControlDirective,LeafletBaseLayersDirective],declarations:[LeafletDirective,LeafletLayerDirective,LeafletLayersDirective,LeafletLayersControlDirective,LeafletBaseLayersDirective]})],LeafletModule);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})});

@@ -6,3 +6,3 @@ {

"description": "Angular.io components for Leaflet",
"version": "7.0.0",
"version": "7.0.1",
"author": "Asymmetrik, Ltd.",

@@ -28,3 +28,3 @@ "copyright": "Copyright Asymmetrik, Ltd. 2007-2020 - All Rights Reserved.",

"rollup": "rollup -c rollup.config.js",
"uglify": "uglifyjs --comments 'license' -o ./dist/bundles/ngx-leaflet.umd.min.js -- ./dist/bundles/ngx-leaflet.umd.js",
"uglify": "uglifyjs --comments -o ./dist/bundles/ngx-leaflet.umd.min.js -- ./dist/bundles/ngx-leaflet.umd.js",
"watch": " watch 'npm run lint' ./src"

@@ -53,3 +53,3 @@ },

"@types/leaflet": "1",
"@types/node": "12",
"@types/node": "12.12.36",
"angular2-template-loader": "0.6",

@@ -56,0 +56,0 @@ "awesome-typescript-loader": "5",

@@ -78,11 +78,11 @@ # @asymmetrik/ngx-leaflet

{
...
"module" : {
...
"module" : {
loaders: [
...
{ test: /\.css$/, loaders: [ 'style-loader', 'css-loader' ] },
...
]
},
...
...
{ test: /\.css$/, loaders: [ 'style-loader', 'css-loader' ] },
...
]
},
...
}

@@ -97,8 +97,8 @@ ```

{
...
"styles": [
"styles.css",
"./node_modules/leaflet/dist/leaflet.css"
],
...
...
"styles": [
"styles.css",
"./node_modules/leaflet/dist/leaflet.css"
],
...
}

@@ -121,4 +121,4 @@ ```

imports: [
...
LeafletModule
...
LeafletModule
]

@@ -137,4 +137,4 @@ ...

imports: [
...
LeafletModule
...
LeafletModule
]

@@ -233,5 +233,5 @@ ...

layers = [
circle([ 46.95, -122 ], { radius: 5000 }),
polygon([[ 46.8, -121.85 ], [ 46.92, -121.92 ], [ 46.87, -121.8 ]]),
marker([ 46.879966, -121.726909 ])
circle([ 46.95, -122 ], { radius: 5000 }),
polygon([[ 46.8, -121.85 ], [ 46.92, -121.92 ], [ 46.87, -121.8 ]]),
marker([ 46.879966, -121.726909 ])
];

@@ -453,3 +453,3 @@ ```

[leafletOptions]="options">
<div *ngFor="let l of layers" [leafletLayer]="l"></div>
<div *ngFor="let l of layers" [leafletLayer]="l"></div>
</div>

@@ -522,3 +522,3 @@ ```

onMapReady(map: Map) {
// Do stuff with map
// Do stuff with map
}

@@ -548,3 +548,3 @@ ```

<div leaflet>
<div myCustomDirective></div>
<div myCustomDirective></div>
</div>

@@ -555,16 +555,16 @@ ```

@Directive({
selector: '[myCustomDirective]'
selector: '[myCustomDirective]'
})
export class MyCustomDirective {
leafletDirective: LeafletDirective;
constructor(leafletDirective: LeafletDirective) {
this.leafletDirective = leafletDirective;
}
leafletDirective: LeafletDirective;
someFunction() {
if (null != this.leafletDirective.getMap()) {
// Do stuff with the map
}
}
constructor(leafletDirective: LeafletDirective) {
this.leafletDirective = leafletDirective;
}
someFunction() {
if (null != this.leafletDirective.getMap()) {
// Do stuff with the map
}
}
}

@@ -603,6 +603,6 @@ ```

ngOnInit() {
// The 'add' event callback handler happens outside of the Angular zone
this.circle.on('add', () => {
// But, we can run stuff inside of Angular's zone by calling NgZone.run()

@@ -613,3 +613,3 @@ // everything inside the arrow function body happens inside of Angular's zone, where changes will be detected

});
});

@@ -632,12 +632,12 @@ }

ngOnInit() {
// The 'add' event callback happens outside of the Angular zone
this.circle.on('add', () => {
// Because we're outside of Angular's zone, this change won't be detected
this.fitBounds = this.circle.getBounds();
// But, it will if we tell Angular to detect changes
this.changeDetector.detectChanges();
});

@@ -659,6 +659,6 @@ }

```js
import 'leaflet/dist/images/marker-shadow.png';
import 'leaflet/dist/images/marker-icon.png';
```
```js
import 'leaflet/dist/images/marker-shadow.png';
import 'leaflet/dist/images/marker-icon.png';
```

@@ -669,13 +669,13 @@ 1. Either host the images statically or use the file-loader Webpack plugin to generate the images.

```js
let layer = marker([ 46.879966, -121.726909 ], {
icon: icon({
iconSize: [ 25, 41 ],
iconAnchor: [ 13, 41 ],
iconUrl: '2b3e1faf89f94a4835397e7a43b4f77d.png',
iconRetinaUrl: '680f69f3c2e6b90c1812a813edf67fd7.png',
shadowUrl: 'a0c6cc1401c107b501efee6477816891.png'
})
});
```
```js
let layer = marker([ 46.879966, -121.726909 ], {
icon: icon({
iconSize: [ 25, 41 ],
iconAnchor: [ 13, 41 ],
iconUrl: '2b3e1faf89f94a4835397e7a43b4f77d.png',
iconRetinaUrl: '680f69f3c2e6b90c1812a813edf67fd7.png',
shadowUrl: 'a0c6cc1401c107b501efee6477816891.png'
})
});
```

@@ -687,36 +687,36 @@ #### Angular CLI Marker Workaround

1. Configure the CLI (by editing `angular.json`)to include leaflet assets as below. Detailed instructions can be found in the [asset-configuration](https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/asset-configuration.md) documentation.
```json
{
...
"assets": [
"assets",
"favicon.ico",
{
"glob": "**/*",
"input": "./node_modules/leaflet/dist/images",
"output": "assets/"
}
],
...
}
```
```json
{
...
"assets": [
"assets",
"favicon.ico",
{
"glob": "**/*",
"input": "./node_modules/leaflet/dist/images",
"output": "assets/"
}
],
...
}
```
1. Configure Leaflet to use the correct URLs as customer marker images
```js
let layer = marker([ 46.879966, -121.726909 ], {
icon: icon({
iconSize: [ 25, 41 ],
iconAnchor: [ 13, 41 ],
iconUrl: 'assets/marker-icon.png',
shadowUrl: 'assets/marker-shadow.png'
})
});
```
```js
let layer = marker([ 46.879966, -121.726909 ], {
icon: icon({
iconSize: [ 25, 41 ],
iconAnchor: [ 13, 41 ],
iconUrl: 'assets/marker-icon.png',
shadowUrl: 'assets/marker-shadow.png'
})
});
```
## Extensions
There are several libraries that extend the core functionality of ngx-leaflet:
* [Leaflet Draw](https://github.com/Asymmetrik/ngx-leaflet-draw)
* [Leaflet Markercluster](https://github.com/Asymmetrik/ngx-leaflet-markercluster)
* [Leaflet D3 (Hexbins)](https://github.com/Asymmetrik/ngx-leaflet-d3)
* [Leaflet Draw](https://github.com/Asymmetrik/ngx-leaflet-draw)
* [Leaflet Markercluster](https://github.com/Asymmetrik/ngx-leaflet-markercluster)
* [Leaflet D3 (Hexbins)](https://github.com/Asymmetrik/ngx-leaflet-d3)

@@ -726,7 +726,6 @@

Here's a list of articles, tutorials, guides, and help resources:
* [ngx-leaflet on Stack Overflow](https://stackoverflow.com/questions/tagged/ngx-leaflet)
* [High-level intro to @asymmetrik/ngx-leaflet](https://www.asymmetrik.com/introducing-ngx-leaflet)
* [Using @asymmetrik/ngx-leaflet in Angular CLI projects](https://www.asymmetrik.com/ngx-leaflet-tutorial-angular-cli)
* [Integrating 3rd Party Leaflet Libraries with @asymmetrik/ngx-leaflet and @angular/cli](https://github.com/Asymmetrik/ngx-leaflet-tutorial-3rd-party-libs)
* [ngx-leaflet on Stack Overflow](https://stackoverflow.com/questions/tagged/ngx-leaflet)
* [High-level intro to @asymmetrik/ngx-leaflet](https://www.asymmetrik.com/introducing-ngx-leaflet)
* [Using @asymmetrik/ngx-leaflet in Angular CLI projects](https://www.asymmetrik.com/ngx-leaflet-tutorial-angular-cli)
* [Integrating 3rd Party Leaflet Libraries with @asymmetrik/ngx-leaflet and @angular/cli](https://github.com/Asymmetrik/ngx-leaflet-tutorial-3rd-party-libs)

@@ -733,0 +732,0 @@

@@ -6,3 +6,3 @@ import {

import {Layer, LeafletEvent } from 'leaflet';
import { Layer, LeafletEvent } from 'leaflet';

@@ -9,0 +9,0 @@ import { LeafletDirective } from '../core/leaflet.directive';

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc