Socket
Socket
Sign inDemoInstall

@asymmetrik/ngx-leaflet

Package Overview
Dependencies
Maintainers
7
Versions
35
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@asymmetrik/ngx-leaflet - npm Package Compare versions

Comparing version 3.0.2 to 3.1.0

.github/ISSUE_TEMPLATE.md
src/demo/app/leaflet/events/events-demo.component.html
src/demo/app/leaflet/events/events-demo.component.ts
yarn.lock

211

dist/bundles/ngx-leaflet.js

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

/*! @asymmetrik/ngx-leaflet - 3.0.2 - Copyright Asymmetrik, Ltd. 2007-2018 - All Rights Reserved. + */
/*! @asymmetrik/ngx-leaflet - 3.1.0 - Copyright Asymmetrik, Ltd. 2007-2018 - All Rights Reserved. + */
(function (global, factory) {

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

var LeafletUtil = /** @class */ (function () {
function LeafletUtil() {
}
LeafletUtil.mapToArray = function (map$$1) {
var toReturn = [];
for (var k in map$$1) {
if (map$$1.hasOwnProperty(k)) {
toReturn.push(map$$1[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 () {

@@ -25,2 +48,19 @@ function LeafletDirective(element, zone) {

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();
// 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();
}

@@ -34,2 +74,3 @@ LeafletDirective.prototype.ngOnInit = function () {

_this.map = leaflet.map(_this.element.nativeElement, _this.options);
_this.addMapEventListeners();
});

@@ -44,2 +85,11 @@ // Only setView if there is a center/zoom

}
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();

@@ -68,6 +118,15 @@ // Fire map ready event

}
// Fit bounds
// 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);
}
};

@@ -80,2 +139,34 @@ LeafletDirective.prototype.getMap = function () {

};
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('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);
}
}
});
};
/**

@@ -170,11 +261,11 @@ * Resize the map to fit it's parent container

* Fit the map to the bounds
* @param center the center point
* @param latLngBounds the boundary to set
*/
/**
* Fit the map to the bounds
* @param center the center point
* @param latLngBounds the boundary to set
*/
LeafletDirective.prototype.setFitBounds = /**
* Fit the map to the bounds
* @param center the center point
* @param latLngBounds the boundary to set
*/

@@ -186,2 +277,53 @@ function (latLngBounds) {

};
/**
* Set the map's max bounds
* @param latLngBounds the boundary to set
*/
/**
* Set the map's max bounds
* @param latLngBounds the boundary to set
*/
LeafletDirective.prototype.setMaxBounds = /**
* Set the map's max bounds
* @param latLngBounds the boundary to set
*/
function (latLngBounds) {
if (this.map && null != latLngBounds) {
this.map.setMaxBounds(latLngBounds);
}
};
/**
* Set the map's min zoom
* @param number the new min zoom
*/
/**
* Set the map's min zoom
* @param number the new min zoom
*/
LeafletDirective.prototype.setMinZoom = /**
* Set the map's min zoom
* @param number the new min zoom
*/
function (zoom) {
if (this.map && null != zoom) {
this.map.setMinZoom(zoom);
}
};
/**
* Set the map's min zoom
* @param number the new min zoom
*/
/**
* Set the map's min zoom
* @param number the new min zoom
*/
LeafletDirective.prototype.setMaxZoom = /**
* Set the map's min zoom
* @param number the new min zoom
*/
function (zoom) {
if (this.map && null != zoom) {
this.map.setMaxZoom(zoom);
}
};
LeafletDirective.decorators = [

@@ -205,4 +347,21 @@ { type: core.Directive, args: [{

"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',] },],
"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', [],] },],

@@ -236,2 +395,5 @@ };

this.zone = zone;
// Layer Events
this.onAdd = new core.EventEmitter();
this.onRemove = new core.EventEmitter();
this.leafletDirective = new LeafletDirectiveWrapper(leafletDirective);

@@ -257,2 +419,3 @@ }

if (null != n_1) {
_this.addLayerEventListeners(n_1);
_this.leafletDirective.getMap().addLayer(n_1);

@@ -263,2 +426,7 @@ }

};
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 = [

@@ -276,2 +444,4 @@ { type: core.Directive, args: [{

"layer": [{ type: core.Input, args: ['leafletLayer',] },],
"onAdd": [{ type: core.Output, args: ['leafletLayerAdd',] },],
"onRemove": [{ type: core.Output, args: ['leafletLayerRemove',] },],
};

@@ -394,5 +564,5 @@ return LeafletLayerDirective;

var LeafletControlLayersWrapper = /** @class */ (function () {
function LeafletControlLayersWrapper(zone) {
// Nothing here
function LeafletControlLayersWrapper(zone, layersControlReady) {
this.zone = zone;
this.layersControlReady = layersControlReady;
}

@@ -410,2 +580,3 @@ LeafletControlLayersWrapper.prototype.getLayersControl = function () {

});
this.layersControlReady.emit(this.layersControl);
return this.layersControl;

@@ -475,4 +646,5 @@ };

this.zone = zone;
this.layersControlReady = new core.EventEmitter();
this.leafletDirective = new LeafletDirectiveWrapper(leafletDirective);
this.controlLayers = new LeafletControlLayersWrapper(this.zone);
this.controlLayers = new LeafletControlLayersWrapper(this.zone, this.layersControlReady);
// Generate differs

@@ -556,2 +728,3 @@ this.baseLayersDiffer = this.differs.find({}).create();

"layersControlOptions": [{ type: core.Input, args: ['leafletLayersControlOptions',] },],
"layersControlReady": [{ type: core.Output, args: ['leafletLayersControlReady',] },],
};

@@ -561,17 +734,2 @@ return LeafletLayersControlDirective;

var LeafletUtil = /** @class */ (function () {
function LeafletUtil() {
}
LeafletUtil.mapToArray = function (map$$1) {
var toReturn = [];
for (var k in map$$1) {
if (map$$1.hasOwnProperty(k)) {
toReturn.push(map$$1[k]);
}
}
return toReturn;
};
return LeafletUtil;
}());
/**

@@ -592,4 +750,6 @@ * Baselayers directive

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.controlLayers = new LeafletControlLayersWrapper(this.zone, this.layersControlReady);
this.baseLayersDiffer = this.differs.find({}).create();

@@ -690,2 +850,3 @@ }

"layersControlOptions": [{ type: core.Input, args: ['leafletLayersControlOptions',] },],
"layersControlReady": [{ type: core.Output, args: ['leafletLayersControlReady',] },],
};

@@ -719,4 +880,2 @@ return LeafletBaseLayersDirective;

];
/** @nocollapse */
LeafletModule.ctorParameters = function () { return []; };
return LeafletModule;

@@ -723,0 +882,0 @@ }());

136

dist/bundles/ngx-leaflet.min.js

@@ -1,9 +0,17 @@

/*! @asymmetrik/ngx-leaflet - 3.0.2 - Copyright Asymmetrik, Ltd. 2007-2018 - All Rights Reserved. + */
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("leaflet")):"function"==typeof define&&define.amd?define(["exports","@angular/core","leaflet"],t):t(e.ngxLeaflet={},e.ng.core,e.L)}(this,function(e,t,r){"use strict";var n=/** @class */function(){function e(e,n){
/*! @asymmetrik/ngx-leaflet - 3.1.0 - Copyright Asymmetrik, Ltd. 2007-2018 - All Rights Reserved. + */
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("leaflet")):"function"==typeof define&&define.amd?define(["exports","@angular/core","leaflet"],t):t(e.ngxLeaflet={},e.ng.core,e.L)}(this,function(e,o,a){"use strict";var r=/** @class */function(){function e(){}return e.mapToArray=function(e){var t=[];for(var n in e)e.hasOwnProperty(n)&&t.push(e[n]);return t},e.handleEvent=function(e,t,n){
// Don't want to emit if there are no observers
0<t.observers.length&&e.run(function(){t.emit(n)})},e}(),t=/** @class */function(){function e(e,t){
// Nothing here
this.element=e,this.zone=n,this.DEFAULT_ZOOM=1,this.DEFAULT_CENTER=r.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.element=e,this.zone=t,this.DEFAULT_ZOOM=1,this.DEFAULT_CENTER=a.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 t.EventEmitter}return e.prototype.ngOnInit=function(){var e=this;
this.mapReady=new o.EventEmitter,this.zoomChange=new o.EventEmitter,this.centerChange=new o.EventEmitter,
// Mouse Map Events
this.onClick=new o.EventEmitter,this.onDoubleClick=new o.EventEmitter,this.onMouseDown=new o.EventEmitter,this.onMouseUp=new o.EventEmitter,this.onMouseMove=new o.EventEmitter,this.onMouseOver=new o.EventEmitter,
// Map Move Events
this.onMapMove=new o.EventEmitter,this.onMapMoveStart=new o.EventEmitter,this.onMapMoveEnd=new o.EventEmitter,
// Map Zoom Events
this.onMapZoom=new o.EventEmitter,this.onMapZoomStart=new o.EventEmitter,this.onMapZoomEnd=new o.EventEmitter}return e.prototype.ngOnInit=function(){var e=this;
// Create the map outside of angular so the various map events don't trigger change detection

@@ -13,7 +21,7 @@ this.zone.runOutsideAngular(function(){

// Create the map with some reasonable defaults
e.map=r.map(e.element.nativeElement,e.options)}),
e.map=a.map(e.element.nativeElement,e.options),e.addMapEventListeners()}),
// Only setView if there is a center/zoom
null!=this.center&&null!=this.zoom&&this.setView(this.center,this.zoom),
// Set up all the initial settings
null!=this.fitBounds&&this.setFitBounds(this.fitBounds),this.doResize(),
null!=this.fitBounds&&this.setFitBounds(this.fitBounds),null!=this.maxBounds&&this.setMaxBounds(this.maxBounds),null!=this.minZoom&&this.setMinZoom(this.minZoom),null!=this.maxZoom&&this.setMaxZoom(this.maxZoom),this.doResize(),
// Fire map ready event

@@ -31,4 +39,8 @@ this.mapReady.emit(this.map)},e.prototype.ngOnChanges=function(e){

e.zoom&&e.center&&null!=this.zoom&&null!=this.center?this.setView(e.center.currentValue,e.zoom.currentValue):e.zoom?this.setZoom(e.zoom.currentValue):e.center&&this.setCenter(e.center.currentValue),
// Fit bounds
e.fitBounds&&this.setFitBounds(e.fitBounds.currentValue)},e.prototype.getMap=function(){return this.map},e.prototype.onResize=function(){this.delayResize()},
// Other options
e.fitBounds&&this.setFitBounds(e.fitBounds.currentValue),e.maxBounds&&this.setMaxBounds(e.maxBounds.currentValue),e.minZoom&&this.setMinZoom(e.minZoom.currentValue),e.maxZoom&&this.setMaxZoom(e.maxZoom.currentValue)},e.prototype.getMap=function(){return this.map},e.prototype.onResize=function(){this.delayResize()},e.prototype.addMapEventListeners=function(){var n=this;
// Add all the pass-through mouse event handlers
this.map.on("click",function(e){return r.handleEvent(n.zone,n.onClick,e)}),this.map.on("dblclick",function(e){return r.handleEvent(n.zone,n.onDoubleClick,e)}),this.map.on("mousedown",function(e){return r.handleEvent(n.zone,n.onMouseDown,e)}),this.map.on("mouseup",function(e){return r.handleEvent(n.zone,n.onMouseUp,e)}),this.map.on("mouseover",function(e){return r.handleEvent(n.zone,n.onMouseOver,e)}),this.map.on("mousemove",function(e){return r.handleEvent(n.zone,n.onMouseMove,e)}),this.map.on("zoomstart",function(e){return r.handleEvent(n.zone,n.onMapZoomStart,e)}),this.map.on("zoom",function(e){return r.handleEvent(n.zone,n.onMapZoom,e)}),this.map.on("zoomend",function(e){return r.handleEvent(n.zone,n.onMapZoomEnd,e)}),this.map.on("movestart",function(e){return r.handleEvent(n.zone,n.onMapMoveStart,e)}),this.map.on("move",function(e){return r.handleEvent(n.zone,n.onMapMove,e)}),this.map.on("moveend",function(e){return r.handleEvent(n.zone,n.onMapMoveEnd,e)}),
// Update any things for which we provide output bindings
this.map.on("zoomend moveend",function(){var e=n.map.getZoom();e!==n.zoom&&(n.zoom=e,r.handleEvent(n.zone,n.zoomChange,e));var t=n.map.getCenter();null==t&&null==n.center||(null!=t&&null!=n.center||t===n.center)&&t.lat===n.center.lat&&t.lng===n.center.lng||(n.center=t,r.handleEvent(n.zone,n.centerChange,t))})},
/**

@@ -108,7 +120,7 @@ * Resize the map to fit it's parent container

* Fit the map to the bounds
* @param center the center point
* @param latLngBounds the boundary to set
*/
/**
* Fit the map to the bounds
* @param center the center point
* @param latLngBounds the boundary to set
*/

@@ -118,15 +130,59 @@ e.prototype.setFitBounds=

* Fit the map to the bounds
* @param center the center point
* @param latLngBounds the boundary to set
*/
function(e){this.map&&null!=e&&this.map.fitBounds(e,this.fitBoundsOptions)},e.decorators=[{type:t.Directive,args:[{selector:"[leaflet]"}]}],
function(e){this.map&&null!=e&&this.map.fitBounds(e,this.fitBoundsOptions)},
/**
* Set the map's max bounds
* @param latLngBounds the boundary to set
*/
/**
* Set the map's max bounds
* @param latLngBounds the boundary to set
*/
e.prototype.setMaxBounds=
/**
* Set the map's max bounds
* @param latLngBounds the boundary to set
*/
function(e){this.map&&null!=e&&this.map.setMaxBounds(e)},
/**
* Set the map's min zoom
* @param number the new min zoom
*/
/**
* Set the map's min zoom
* @param number the new min zoom
*/
e.prototype.setMinZoom=
/**
* Set the map's min zoom
* @param number the new min zoom
*/
function(e){this.map&&null!=e&&this.map.setMinZoom(e)},
/**
* Set the map's min zoom
* @param number the new min zoom
*/
/**
* Set the map's min zoom
* @param number the new min zoom
*/
e.prototype.setMaxZoom=
/**
* Set the map's min zoom
* @param number the new min zoom
*/
function(e){this.map&&null!=e&&this.map.setMaxZoom(e)},e.decorators=[{type:o.Directive,args:[{selector:"[leaflet]"}]}],
/** @nocollapse */
e.ctorParameters=function(){return[{type:t.ElementRef},{type:t.NgZone}]},e.propDecorators={fitBoundsOptions:[{type:t.Input,args:["leafletFitBoundsOptions"]}],panOptions:[{type:t.Input,args:["leafletPanOptions"]}],zoomOptions:[{type:t.Input,args:["leafletZoomOptions"]}],zoomPanOptions:[{type:t.Input,args:["leafletZoomPanOptions"]}],options:[{type:t.Input,args:["leafletOptions"]}],mapReady:[{type:t.Output,args:["leafletMapReady"]}],zoom:[{type:t.Input,args:["leafletZoom"]}],center:[{type:t.Input,args:["leafletCenter"]}],fitBounds:[{type:t.Input,args:["leafletFitBounds"]}],onResize:[{type:t.HostListener,args:["window:resize",[]]}]},e}(),o=/** @class */function(){function e(e){this.leafletDirective=e}return e.prototype.init=function(){
e.ctorParameters=function(){return[{type:o.ElementRef},{type:o.NgZone}]},e.propDecorators={fitBoundsOptions:[{type:o.Input,args:["leafletFitBoundsOptions"]}],panOptions:[{type:o.Input,args:["leafletPanOptions"]}],zoomOptions:[{type:o.Input,args:["leafletZoomOptions"]}],zoomPanOptions:[{type:o.Input,args:["leafletZoomPanOptions"]}],options:[{type:o.Input,args:["leafletOptions"]}],mapReady:[{type:o.Output,args:["leafletMapReady"]}],zoom:[{type:o.Input,args:["leafletZoom"]}],zoomChange:[{type:o.Output,args:["leafletZoomChange"]}],center:[{type:o.Input,args:["leafletCenter"]}],centerChange:[{type:o.Output,args:["leafletCenterChange"]}],fitBounds:[{type:o.Input,args:["leafletFitBounds"]}],maxBounds:[{type:o.Input,args:["leafletMaxBounds"]}],minZoom:[{type:o.Input,args:["leafletMinZoom"]}],maxZoom:[{type:o.Input,args:["leafletMaxZoom"]}],onClick:[{type:o.Output,args:["leafletClick"]}],onDoubleClick:[{type:o.Output,args:["leafletDoubleClick"]}],onMouseDown:[{type:o.Output,args:["leafletMouseDown"]}],onMouseUp:[{type:o.Output,args:["leafletMouseUp"]}],onMouseMove:[{type:o.Output,args:["leafletMouseMove"]}],onMouseOver:[{type:o.Output,args:["leafletMouseOver"]}],onMapMove:[{type:o.Output,args:["leafletMapMove"]}],onMapMoveStart:[{type:o.Output,args:["leafletMapMoveStart"]}],onMapMoveEnd:[{type:o.Output,args:["leafletMapMoveEnd"]}],onMapZoom:[{type:o.Output,args:["leafletMapZoom"]}],onMapZoomStart:[{type:o.Output,args:["leafletMapZoomStart"]}],onMapZoomEnd:[{type:o.Output,args:["leafletMapZoomEnd"]}],onResize:[{type:o.HostListener,args:["window:resize",[]]}]},e}(),s=/** @class */function(){function e(e){this.leafletDirective=e}return e.prototype.init=function(){
// Nothing for now
},e.prototype.getMap=function(){return this.leafletDirective.getMap()},e}(),i=/** @class */function(){function e(e,t){this.zone=t,this.leafletDirective=new o(e)}return e.prototype.ngOnInit=function(){
},e.prototype.getMap=function(){return this.leafletDirective.getMap()},e}(),n=/** @class */function(){function e(e,t){this.zone=t,
// Layer Events
this.onAdd=new o.EventEmitter,this.onRemove=new o.EventEmitter,this.leafletDirective=new s(e)}return e.prototype.ngOnInit=function(){
// Init the map
this.leafletDirective.init()},e.prototype.ngOnDestroy=function(){this.layer.remove()},e.prototype.ngOnChanges=function(e){var t=this;if(e.layer){
// Update the layer
var r=e.layer.previousValue,n=e.layer.currentValue;this.zone.runOutsideAngular(function(){null!=r&&r.remove(),null!=n&&t.leafletDirective.getMap().addLayer(n)})}},e.decorators=[{type:t.Directive,args:[{selector:"[leafletLayer]"}]}],
var n=e.layer.previousValue,o=e.layer.currentValue;this.zone.runOutsideAngular(function(){null!=n&&n.remove(),null!=o&&(t.addLayerEventListeners(o),t.leafletDirective.getMap().addLayer(o))})}},e.prototype.addLayerEventListeners=function(e){var t=this;e.on("add",function(e){return r.handleEvent(t.zone,t.onAdd,e)}),e.on("remove",function(e){return r.handleEvent(t.zone,t.onRemove,e)})},e.decorators=[{type:o.Directive,args:[{selector:"[leafletLayer]"}]}],
/** @nocollapse */
e.ctorParameters=function(){return[{type:n},{type:t.NgZone}]},e.propDecorators={layer:[{type:t.Input,args:["leafletLayer"]}]},e}(),s=/** @class */function(){function e(e,t,r){this.differs=t,this.zone=r,this.leafletDirective=new o(e),this.layersDiffer=this.differs.find([]).create()}return Object.defineProperty(e.prototype,"layers",{get:function(){return this.layersValue},set:
e.ctorParameters=function(){return[{type:t},{type:o.NgZone}]},e.propDecorators={layer:[{type:o.Input,args:["leafletLayer"]}],onAdd:[{type:o.Output,args:["leafletLayerAdd"]}],onRemove:[{type:o.Output,args:["leafletLayerRemove"]}]},e}(),i=/** @class */function(){function e(e,t,n){this.differs=t,this.zone=n,this.leafletDirective=new s(e),this.layersDiffer=this.differs.find([]).create()}return Object.defineProperty(e.prototype,"layers",{get:function(){return this.layersValue},set:
// Set/get the layers

@@ -159,17 +215,15 @@ function(e){this.layersValue=e,

*/
function(){var e=this.leafletDirective.getMap();if(null!=e&&null!=this.layersDiffer){var t=this.layersDiffer.diff(this.layersValue);null!=t&&
function(){var t=this.leafletDirective.getMap();if(null!=t&&null!=this.layersDiffer){var e=this.layersDiffer.diff(this.layersValue);null!=e&&
// Run outside angular to ensure layer events don't trigger change detection
this.zone.runOutsideAngular(function(){t.forEachRemovedItem(function(t){e.removeLayer(t.item)}),t.forEachAddedItem(function(t){e.addLayer(t.item)})})}},e.decorators=[{type:t.Directive,args:[{selector:"[leafletLayers]"}]}],
this.zone.runOutsideAngular(function(){e.forEachRemovedItem(function(e){t.removeLayer(e.item)}),e.forEachAddedItem(function(e){t.addLayer(e.item)})})}},e.decorators=[{type:o.Directive,args:[{selector:"[leafletLayers]"}]}],
/** @nocollapse */
e.ctorParameters=function(){return[{type:n},{type:t.IterableDiffers},{type:t.NgZone}]},e.propDecorators={layers:[{type:t.Input,args:["leafletLayers"]}]},e}(),a=/** @class */function(){function e(){this.layersRemoved=0,this.layersChanged=0,this.layersAdded=0}return e.prototype.changed=function(){return!(0===this.layersRemoved&&0===this.layersChanged&&0===this.layersAdded)},e}(),l=/** @class */function(){function e(e){
// Nothing here
this.zone=e}return e.prototype.getLayersControl=function(){return this.layersControl},e.prototype.init=function(e,t){var n=this,o=e.baseLayers||{},i=e.overlays||{};
e.ctorParameters=function(){return[{type:t},{type:o.IterableDiffers},{type:o.NgZone}]},e.propDecorators={layers:[{type:o.Input,args:["leafletLayers"]}]},e}(),l=/** @class */function(){function e(){this.layersRemoved=0,this.layersChanged=0,this.layersAdded=0}return e.prototype.changed=function(){return!(0===this.layersRemoved&&0===this.layersChanged&&0===this.layersAdded)},e}(),u=/** @class */function(){function e(e,t){this.zone=e,this.layersControlReady=t}return e.prototype.getLayersControl=function(){return this.layersControl},e.prototype.init=function(e,t){var n=this,o=e.baseLayers||{},r=e.overlays||{};
// Create the control outside of angular to ensure events don't trigger change detection
return this.zone.runOutsideAngular(function(){n.layersControl=r.control.layers(o,i,t)}),this.layersControl},e.prototype.applyBaseLayerChanges=function(e){var t=new a;return null!=this.layersControl&&(t=this.applyChanges(e,this.layersControl.addBaseLayer)),t},e.prototype.applyOverlayChanges=function(e){var t=new a;return null!=this.layersControl&&(t=this.applyChanges(e,this.layersControl.addOverlay)),t},e.prototype.applyChanges=function(e,t){var r=this,n=new a;return null!=e&&
return this.zone.runOutsideAngular(function(){n.layersControl=a.control.layers(o,r,t)}),this.layersControlReady.emit(this.layersControl),this.layersControl},e.prototype.applyBaseLayerChanges=function(e){var t=new l;return null!=this.layersControl&&(t=this.applyChanges(e,this.layersControl.addBaseLayer)),t},e.prototype.applyOverlayChanges=function(e){var t=new l;return null!=this.layersControl&&(t=this.applyChanges(e,this.layersControl.addOverlay)),t},e.prototype.applyChanges=function(e,t){var n=this,o=new l;return null!=e&&
// All layer management is outside angular to avoid layer events from triggering change detection
this.zone.runOutsideAngular(function(){e.forEachChangedItem(function(e){r.layersControl.removeLayer(e.previousValue),t.call(r.layersControl,e.currentValue,e.key),n.layersChanged++}),e.forEachRemovedItem(function(e){r.layersControl.removeLayer(e.previousValue),n.layersRemoved++}),e.forEachAddedItem(function(e){t.call(r.layersControl,e.currentValue,e.key),n.layersAdded++})}),n},e}(),u=/** @class */function(){return function(){this.baseLayers={},this.overlays={}}}(),y=/** @class */function(){function e(e,t,r){this.differs=t,this.zone=r,this.leafletDirective=new o(e),this.controlLayers=new l(this.zone),
this.zone.runOutsideAngular(function(){e.forEachChangedItem(function(e){n.layersControl.removeLayer(e.previousValue),t.call(n.layersControl,e.currentValue,e.key),o.layersChanged++}),e.forEachRemovedItem(function(e){n.layersControl.removeLayer(e.previousValue),o.layersRemoved++}),e.forEachAddedItem(function(e){t.call(n.layersControl,e.currentValue,e.key),o.layersAdded++})}),o},e}(),p=function(){this.baseLayers={},this.overlays={}},y=/** @class */function(){function e(e,t,n){this.differs=t,this.zone=n,this.layersControlReady=new o.EventEmitter,this.leafletDirective=new s(e),this.controlLayers=new u(this.zone,this.layersControlReady),
// Generate differs
this.baseLayersDiffer=this.differs.find({}).create(),this.overlaysDiffer=this.differs.find({}).create()}return Object.defineProperty(e.prototype,"layersControlConfig",{get:function(){return this.layersControlConfigValue},set:function(e){
// Validation/init stuff
null==e&&(e=new u),null==e.baseLayers&&(e.baseLayers={}),null==e.overlays&&(e.overlays={}),
null==e&&(e=new p),null==e.baseLayers&&(e.baseLayers={}),null==e.overlays&&(e.overlays={}),
// Store the value

@@ -187,7 +241,9 @@ this.layersControlConfigValue=e,

// Run the baselayers differ
if(null!=this.baseLayersDiffer&&null!=this.layersControlConfigValue.baseLayers){var r=this.baseLayersDiffer.diff(this.layersControlConfigValue.baseLayers);this.controlLayers.applyBaseLayerChanges(r)}
if(null!=this.baseLayersDiffer&&null!=this.layersControlConfigValue.baseLayers){var n=this.baseLayersDiffer.diff(this.layersControlConfigValue.baseLayers);this.controlLayers.applyBaseLayerChanges(n)}
// Run the overlays differ
if(null!=this.overlaysDiffer&&null!=this.layersControlConfigValue.overlays){r=this.overlaysDiffer.diff(this.layersControlConfigValue.overlays);this.controlLayers.applyOverlayChanges(r)}}},e.decorators=[{type:t.Directive,args:[{selector:"[leafletLayersControl]"}]}],
if(null!=this.overlaysDiffer&&null!=this.layersControlConfigValue.overlays){n=this.overlaysDiffer.diff(this.layersControlConfigValue.overlays);this.controlLayers.applyOverlayChanges(n)}}},e.decorators=[{type:o.Directive,args:[{selector:"[leafletLayersControl]"}]}],
/** @nocollapse */
e.ctorParameters=function(){return[{type:n},{type:t.KeyValueDiffers},{type:t.NgZone}]},e.propDecorators={layersControlConfig:[{type:t.Input,args:["leafletLayersControl"]}],layersControlOptions:[{type:t.Input,args:["leafletLayersControlOptions"]}]},e}(),p=/** @class */function(){function e(){}return e.mapToArray=function(e){var t=[];for(var r in e)e.hasOwnProperty(r)&&t.push(e[r]);return t},e}(),f=/** @class */function(){function e(e,t,r){this.differs=t,this.zone=r,this.leafletDirective=new o(e),this.controlLayers=new l(this.zone),this.baseLayersDiffer=this.differs.find({}).create()}return Object.defineProperty(e.prototype,"baseLayers",{get:function(){return this.baseLayersValue},set:
e.ctorParameters=function(){return[{type:t},{type:o.KeyValueDiffers},{type:o.NgZone}]},e.propDecorators={layersControlConfig:[{type:o.Input,args:["leafletLayersControl"]}],layersControlOptions:[{type:o.Input,args:["leafletLayersControlOptions"]}],layersControlReady:[{type:o.Output,args:["leafletLayersControlReady"]}]},e}(),f=/** @class */function(){function e(e,t,n){this.differs=t,this.zone=n,
// Output for once the layers control is ready
this.layersControlReady=new o.EventEmitter,this.leafletDirective=new s(e),this.controlLayers=new u(this.zone,this.layersControlReady),this.baseLayersDiffer=this.differs.find({}).create()}return Object.defineProperty(e.prototype,"baseLayers",{get:function(){return this.baseLayersValue},set:
// Set/get baseLayers

@@ -201,3 +257,3 @@ function(e){this.baseLayersValue=e,this.updateBaseLayers()},enumerable:!0,configurable:!0}),e.prototype.ngOnDestroy=function(){this.baseLayers={},this.controlLayers.getLayersControl().remove()},e.prototype.ngOnInit=function(){var e=this;

// Initially configure the controlLayers
e.controlLayers.init({},e.layersControlOptions).addTo(e.leafletDirective.getMap())}),this.updateBaseLayers()},e.prototype.ngDoCheck=function(){this.updateBaseLayers()},e.prototype.updateBaseLayers=function(){var e=this.leafletDirective.getMap(),t=this.controlLayers.getLayersControl();if(null!=e&&null!=t&&null!=this.baseLayersDiffer){var r=this.baseLayersDiffer.diff(this.baseLayersValue);this.controlLayers.applyBaseLayerChanges(r).changed()&&this.syncBaseLayer()}},
e.controlLayers.init({},e.layersControlOptions).addTo(e.leafletDirective.getMap())}),this.updateBaseLayers()},e.prototype.ngDoCheck=function(){this.updateBaseLayers()},e.prototype.updateBaseLayers=function(){var e=this.leafletDirective.getMap(),t=this.controlLayers.getLayersControl();if(null!=e&&null!=t&&null!=this.baseLayersDiffer){var n=this.baseLayersDiffer.diff(this.baseLayersValue);this.controlLayers.applyBaseLayerChanges(n).changed()&&this.syncBaseLayer()}},
/**

@@ -213,5 +269,5 @@ * Check the current base layer and change it to the new one if necessary

*/
function(){var e,t=this,r=this.leafletDirective.getMap(),n=p.mapToArray(this.baseLayers);
function(){var e,t=this,n=this.leafletDirective.getMap(),o=r.mapToArray(this.baseLayers);
// Search all the layers in the map to see if we can find them in the baselayer array
r.eachLayer(function(t){e=n.find(function(e){return t===e})}),
n.eachLayer(function(t){e=o.find(function(e){return t===e})}),
// Did we find the layer?

@@ -222,9 +278,7 @@ null!=e?

// No - set the baselayer to the first in the array and add it to the map
n.length>0&&(this.baseLayer=n[0],
0<o.length&&(this.baseLayer=o[0],
// Add layers outside of angular to prevent events from triggering change detection
this.zone.runOutsideAngular(function(){t.baseLayer.addTo(r)}))},e.decorators=[{type:t.Directive,args:[{selector:"[leafletBaseLayers]"}]}],
this.zone.runOutsideAngular(function(){t.baseLayer.addTo(n)}))},e.decorators=[{type:o.Directive,args:[{selector:"[leafletBaseLayers]"}]}],
/** @nocollapse */
e.ctorParameters=function(){return[{type:n},{type:t.KeyValueDiffers},{type:t.NgZone}]},e.propDecorators={baseLayers:[{type:t.Input,args:["leafletBaseLayers"]}],layersControlOptions:[{type:t.Input,args:["leafletLayersControlOptions"]}]},e}(),c=/** @class */function(){function e(){}return e.forRoot=function(){return{ngModule:e,providers:[]}},e.decorators=[{type:t.NgModule,args:[{exports:[n,i,s,y,f],declarations:[n,i,s,y,f]}]}],
/** @nocollapse */
e.ctorParameters=function(){return[]},e}(),h=/** @class */function(){function e(e,t,r){this.type=e,this.url=t,this.options=r}
e.ctorParameters=function(){return[{type:t},{type:o.KeyValueDiffers},{type:o.NgZone}]},e.propDecorators={baseLayers:[{type:o.Input,args:["leafletBaseLayers"]}],layersControlOptions:[{type:o.Input,args:["leafletLayersControlOptions"]}],layersControlReady:[{type:o.Output,args:["leafletLayersControlReady"]}]},e}(),h=/** @class */function(){function e(){}return e.forRoot=function(){return{ngModule:e,providers:[]}},e.decorators=[{type:o.NgModule,args:[{exports:[t,n,i,y,f],declarations:[t,n,i,y,f]}]}],e}(),c=/** @class */function(){function o(e,t,n){this.type=e,this.url=t,this.options=n}
/**

@@ -243,3 +297,3 @@ * Creates a TileLayer from the provided definition. This is a convenience function

* @returns {TileLayer} The TileLayer that has been created
*/return e.createTileLayer=
*/return o.createTileLayer=
/**

@@ -252,3 +306,3 @@ * Creates a TileLayer from the provided definition. This is a convenience function

*/
function(e){var t;switch(e.type){case"xyz":t=r.tileLayer(e.url,e.options);break;case"wms":default:t=r.tileLayer.wms(e.url,e.options)}return t},
function(e){var t;switch(e.type){case"xyz":t=a.tileLayer(e.url,e.options);break;case"wms":default:t=a.tileLayer.wms(e.url,e.options)}return t},
/**

@@ -268,3 +322,3 @@ * Creates a TileLayer for each key in the incoming map. This is a convenience function

*/
e.createTileLayers=
o.createTileLayers=
/**

@@ -277,3 +331,3 @@ * Creates a TileLayer for each key in the incoming map. This is a convenience function

*/
function(t){var r={};for(var n in t)t.hasOwnProperty(n)&&(r[n]=e.createTileLayer(t[n]));return r},
function(e){var t={};for(var n in e)e.hasOwnProperty(n)&&(t[n]=o.createTileLayer(e[n]));return t},
/**

@@ -289,3 +343,3 @@ * Create a Tile Layer from the current state of this object

*/
e.prototype.createTileLayer=
o.prototype.createTileLayer=
/**

@@ -296,3 +350,3 @@ * Create a Tile Layer from the current state of this object

*/
function(){return e.createTileLayer(this)},e}();e.LeafletModule=c,e.LeafletDirective=n,e.LeafletDirectiveWrapper=o,e.LeafletTileLayerDefinition=h,Object.defineProperty(e,"__esModule",{value:!0})});
function(){return o.createTileLayer(this)},o}();e.LeafletModule=h,e.LeafletDirective=t,e.LeafletDirectiveWrapper=s,e.LeafletTileLayerDefinition=c,Object.defineProperty(e,"__esModule",{value:!0})});
//# sourceMappingURL=ngx-leaflet.js.map

37

dist/leaflet/core/leaflet.directive.d.ts
import { ElementRef, EventEmitter, NgZone, OnChanges, OnInit, SimpleChange } from '@angular/core';
import { LatLng, LatLngBounds, Map, MapOptions } from 'leaflet';
import { LatLng, LatLngBounds, LeafletEvent, LeafletMouseEvent, Map, MapOptions } from 'leaflet';
export declare class LeafletDirective implements OnChanges, OnInit {

@@ -18,4 +18,21 @@ private element;

zoom: number;
zoomChange: EventEmitter<number>;
center: LatLng;
centerChange: EventEmitter<LatLng>;
fitBounds: LatLngBounds;
maxBounds: LatLngBounds;
minZoom: number;
maxZoom: number;
onClick: EventEmitter<LeafletMouseEvent>;
onDoubleClick: EventEmitter<LeafletMouseEvent>;
onMouseDown: EventEmitter<LeafletMouseEvent>;
onMouseUp: EventEmitter<LeafletMouseEvent>;
onMouseMove: EventEmitter<LeafletMouseEvent>;
onMouseOver: EventEmitter<LeafletMouseEvent>;
onMapMove: EventEmitter<LeafletEvent>;
onMapMoveStart: EventEmitter<LeafletEvent>;
onMapMoveEnd: EventEmitter<LeafletEvent>;
onMapZoom: EventEmitter<LeafletEvent>;
onMapZoomStart: EventEmitter<LeafletEvent>;
onMapZoomEnd: EventEmitter<LeafletEvent>;
constructor(element: ElementRef, zone: NgZone);

@@ -28,2 +45,3 @@ ngOnInit(): void;

onResize(): void;
private addMapEventListeners();
/**

@@ -55,5 +73,20 @@ * Resize the map to fit it's parent container

* Fit the map to the bounds
* @param center the center point
* @param latLngBounds the boundary to set
*/
private setFitBounds(latLngBounds);
/**
* Set the map's max bounds
* @param latLngBounds the boundary to set
*/
private setMaxBounds(latLngBounds);
/**
* Set the map's min zoom
* @param number the new min zoom
*/
private setMinZoom(zoom);
/**
* Set the map's min zoom
* @param number the new min zoom
*/
private setMaxZoom(zoom);
}

145

dist/leaflet/core/leaflet.directive.js
import { Directive, ElementRef, EventEmitter, HostListener, Input, NgZone, Output } from '@angular/core';
import { latLng, LatLng, LatLngBounds, map } from 'leaflet';
import { LeafletUtil } from './leaflet.util';
var LeafletDirective = /** @class */ (function () {

@@ -19,2 +20,19 @@ function LeafletDirective(element, zone) {

this.mapReady = new EventEmitter();
this.zoomChange = new EventEmitter();
this.centerChange = new EventEmitter();
// Mouse Map Events
this.onClick = new EventEmitter();
this.onDoubleClick = new EventEmitter();
this.onMouseDown = new EventEmitter();
this.onMouseUp = new EventEmitter();
this.onMouseMove = new EventEmitter();
this.onMouseOver = new EventEmitter();
// Map Move Events
this.onMapMove = new EventEmitter();
this.onMapMoveStart = new EventEmitter();
this.onMapMoveEnd = new EventEmitter();
// Map Zoom Events
this.onMapZoom = new EventEmitter();
this.onMapZoomStart = new EventEmitter();
this.onMapZoomEnd = new EventEmitter();
}

@@ -28,2 +46,3 @@ LeafletDirective.prototype.ngOnInit = function () {

_this.map = map(_this.element.nativeElement, _this.options);
_this.addMapEventListeners();
});

@@ -38,2 +57,11 @@ // Only setView if there is a center/zoom

}
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();

@@ -62,6 +90,15 @@ // Fire map ready event

}
// Fit bounds
// 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);
}
};

@@ -74,2 +111,34 @@ LeafletDirective.prototype.getMap = function () {

};
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('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);
}
}
});
};
/**

@@ -164,11 +233,11 @@ * Resize the map to fit it's parent container

* Fit the map to the bounds
* @param center the center point
* @param latLngBounds the boundary to set
*/
/**
* Fit the map to the bounds
* @param center the center point
* @param latLngBounds the boundary to set
*/
LeafletDirective.prototype.setFitBounds = /**
* Fit the map to the bounds
* @param center the center point
* @param latLngBounds the boundary to set
*/

@@ -180,2 +249,53 @@ function (latLngBounds) {

};
/**
* Set the map's max bounds
* @param latLngBounds the boundary to set
*/
/**
* Set the map's max bounds
* @param latLngBounds the boundary to set
*/
LeafletDirective.prototype.setMaxBounds = /**
* Set the map's max bounds
* @param latLngBounds the boundary to set
*/
function (latLngBounds) {
if (this.map && null != latLngBounds) {
this.map.setMaxBounds(latLngBounds);
}
};
/**
* Set the map's min zoom
* @param number the new min zoom
*/
/**
* Set the map's min zoom
* @param number the new min zoom
*/
LeafletDirective.prototype.setMinZoom = /**
* Set the map's min zoom
* @param number the new min zoom
*/
function (zoom) {
if (this.map && null != zoom) {
this.map.setMinZoom(zoom);
}
};
/**
* Set the map's min zoom
* @param number the new min zoom
*/
/**
* Set the map's min zoom
* @param number the new min zoom
*/
LeafletDirective.prototype.setMaxZoom = /**
* Set the map's min zoom
* @param number the new min zoom
*/
function (zoom) {
if (this.map && null != zoom) {
this.map.setMaxZoom(zoom);
}
};
LeafletDirective.decorators = [

@@ -199,4 +319,21 @@ { type: Directive, args: [{

"zoom": [{ type: Input, args: ['leafletZoom',] },],
"zoomChange": [{ type: Output, args: ['leafletZoomChange',] },],
"center": [{ type: Input, args: ['leafletCenter',] },],
"centerChange": [{ type: Output, args: ['leafletCenterChange',] },],
"fitBounds": [{ type: Input, args: ['leafletFitBounds',] },],
"maxBounds": [{ type: Input, args: ['leafletMaxBounds',] },],
"minZoom": [{ type: Input, args: ['leafletMinZoom',] },],
"maxZoom": [{ type: Input, args: ['leafletMaxZoom',] },],
"onClick": [{ type: Output, args: ['leafletClick',] },],
"onDoubleClick": [{ type: Output, args: ['leafletDoubleClick',] },],
"onMouseDown": [{ type: Output, args: ['leafletMouseDown',] },],
"onMouseUp": [{ type: Output, args: ['leafletMouseUp',] },],
"onMouseMove": [{ type: Output, args: ['leafletMouseMove',] },],
"onMouseOver": [{ type: Output, args: ['leafletMouseOver',] },],
"onMapMove": [{ type: Output, args: ['leafletMapMove',] },],
"onMapMoveStart": [{ type: Output, args: ['leafletMapMoveStart',] },],
"onMapMoveEnd": [{ type: Output, args: ['leafletMapMoveEnd',] },],
"onMapZoom": [{ type: Output, args: ['leafletMapZoom',] },],
"onMapZoomStart": [{ type: Output, args: ['leafletMapZoomStart',] },],
"onMapZoomEnd": [{ type: Output, args: ['leafletMapZoomEnd',] },],
"onResize": [{ type: HostListener, args: ['window:resize', [],] },],

@@ -203,0 +340,0 @@ };

2

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":7,"character":1},"arguments":[{"selector":"[leaflet]"}]}],"members":{"fitBoundsOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":2},"arguments":["leafletFitBoundsOptions"]}]}],"panOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":2},"arguments":["leafletPanOptions"]}]}],"zoomOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":24,"character":2},"arguments":["leafletZoomOptions"]}]}],"zoomPanOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":25,"character":2},"arguments":["leafletZoomPanOptions"]}]}],"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":2},"arguments":["leafletOptions"]}]}],"mapReady":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":32,"character":2},"arguments":["leafletMapReady"]}]}],"zoom":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":2},"arguments":["leafletZoom"]}]}],"center":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":2},"arguments":["leafletCenter"]}]}],"fitBounds":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":2},"arguments":["leafletFitBounds"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":44,"character":30},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":44,"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":111,"character":2},"arguments":["window:resize",[]]}]}],"doResize":[{"__symbolic":"method"}],"delayResize":[{"__symbolic":"method"}],"setView":[{"__symbolic":"method"}],"setZoom":[{"__symbolic":"method"}],"setCenter":[{"__symbolic":"method"}],"setFitBounds":[{"__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"]}]}],"onMapMove":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":66,"character":2},"arguments":["leafletMapMove"]}]}],"onMapMoveStart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":67,"character":2},"arguments":["leafletMapMoveStart"]}]}],"onMapMoveEnd":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":68,"character":2},"arguments":["leafletMapMoveEnd"]}]}],"onMapZoom":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":71,"character":2},"arguments":["leafletMapZoom"]}]}],"onMapZoomStart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":72,"character":2},"arguments":["leafletMapZoomStart"]}]}],"onMapZoomEnd":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":73,"character":2},"arguments":["leafletMapZoomEnd"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":76,"character":30},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":76,"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":168,"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"}]}}}}]

2

dist/leaflet/core/leaflet.util.d.ts

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

import { EventEmitter, NgZone } from '@angular/core';
export declare class LeafletUtil {

@@ -5,2 +6,3 @@ static mapToArray<T>(map: {

}): T[];
static handleEvent<T>(zone: NgZone, eventEmitter: EventEmitter<T>, event: T): void;
}

8

dist/leaflet/core/leaflet.util.js

@@ -13,2 +13,10 @@ var LeafletUtil = /** @class */ (function () {

};
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;

@@ -15,0 +23,0 @@ }());

5

dist/leaflet/layers/base/leaflet-baselayers.directive.d.ts

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

import { DoCheck, KeyValueDiffer, KeyValueDiffers, NgZone, OnDestroy, OnInit } from '@angular/core';
import { DoCheck, EventEmitter, KeyValueDiffer, KeyValueDiffers, NgZone, OnDestroy, OnInit } from '@angular/core';
import { Control, Layer } from 'leaflet';

@@ -26,3 +26,4 @@ import { LeafletDirective } from '../../core/leaflet.directive';

layersControlOptions: Control.LayersOptions;
baseLayer: Layer;
layersControlReady: EventEmitter<Control.Layers>;
private baseLayer;
private leafletDirective;

@@ -29,0 +30,0 @@ private controlLayers;

7

dist/leaflet/layers/base/leaflet-baselayers.directive.js

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

import { Directive, Input, KeyValueDiffers, NgZone } from '@angular/core';
import { Directive, EventEmitter, Input, KeyValueDiffers, NgZone, Output } from '@angular/core';
import { Control } from 'leaflet';

@@ -22,4 +22,6 @@ import { LeafletUtil } from '../../core/leaflet.util';

this.zone = zone;
// Output for once the layers control is ready
this.layersControlReady = new EventEmitter();
this.leafletDirective = new LeafletDirectiveWrapper(leafletDirective);
this.controlLayers = new LeafletControlLayersWrapper(this.zone);
this.controlLayers = new LeafletControlLayersWrapper(this.zone, this.layersControlReady);
this.baseLayersDiffer = this.differs.find({}).create();

@@ -120,2 +122,3 @@ }

"layersControlOptions": [{ type: Input, args: ['leafletLayersControlOptions',] },],
"layersControlReady": [{ type: Output, args: ['leafletLayersControlReady',] },],
};

@@ -122,0 +125,0 @@ return LeafletBaseLayersDirective;

2

dist/leaflet/layers/base/leaflet-baselayers.directive.metadata.json

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

[{"__symbolic":"module","version":4,"metadata":{"LeafletBaseLayersDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":21,"character":1},"arguments":[{"selector":"[leafletBaseLayers]"}]}],"members":{"baseLayers":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":2},"arguments":["leafletBaseLayers"]}]}],"layersControlOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":45,"character":2},"arguments":["leafletLayersControlOptions"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"../../core/leaflet.directive","name":"LeafletDirective","line":53,"character":31},{"__symbolic":"reference","module":"@angular/core","name":"KeyValueDiffers","line":53,"character":66},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":53,"character":97}]}],"ngOnDestroy":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngDoCheck":[{"__symbolic":"method"}],"updateBaseLayers":[{"__symbolic":"method"}],"syncBaseLayer":[{"__symbolic":"method"}]}}}}]
[{"__symbolic":"module","version":4,"metadata":{"LeafletBaseLayersDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":24,"character":1},"arguments":[{"selector":"[leafletBaseLayers]"}]}],"members":{"baseLayers":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":2},"arguments":["leafletBaseLayers"]}]}],"layersControlOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":48,"character":2},"arguments":["leafletLayersControlOptions"]}]}],"layersControlReady":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":51,"character":2},"arguments":["leafletLayersControlReady"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"../../core/leaflet.directive","name":"LeafletDirective","line":59,"character":31},{"__symbolic":"reference","module":"@angular/core","name":"KeyValueDiffers","line":59,"character":66},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":59,"character":97}]}],"ngOnDestroy":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngDoCheck":[{"__symbolic":"method"}],"updateBaseLayers":[{"__symbolic":"method"}],"syncBaseLayer":[{"__symbolic":"method"}]}}}}]

5

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

@@ -1,3 +0,3 @@

import { DoCheck, KeyValueDiffer, KeyValueDiffers, NgZone, OnDestroy, OnInit } from '@angular/core';
import { Layer } from 'leaflet';
import { DoCheck, EventEmitter, KeyValueDiffer, KeyValueDiffers, NgZone, OnDestroy, OnInit } from '@angular/core';
import { Control, Layer } from 'leaflet';
import { LeafletDirective } from '../../core/leaflet.directive';

@@ -23,2 +23,3 @@ import { LeafletControlLayersConfig } from './leaflet-control-layers-config.model';

layersControlOptions: any;
layersControlReady: EventEmitter<Control.Layers>;
private controlLayers;

@@ -25,0 +26,0 @@ private leafletDirective;

6

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

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

import { Directive, Input, KeyValueDiffers, NgZone } from '@angular/core';
import { Directive, EventEmitter, Input, KeyValueDiffers, NgZone, Output } from '@angular/core';
import { LeafletDirective } from '../../core/leaflet.directive';

@@ -20,4 +20,5 @@ import { LeafletDirectiveWrapper } from '../../core/leaflet.directive.wrapper';

this.zone = zone;
this.layersControlReady = new EventEmitter();
this.leafletDirective = new LeafletDirectiveWrapper(leafletDirective);
this.controlLayers = new LeafletControlLayersWrapper(this.zone);
this.controlLayers = new LeafletControlLayersWrapper(this.zone, this.layersControlReady);
// Generate differs

@@ -101,2 +102,3 @@ this.baseLayersDiffer = this.differs.find({}).create();

"layersControlOptions": [{ type: Input, args: ['leafletLayersControlOptions',] },],
"layersControlReady": [{ type: Output, args: ['leafletLayersControlReady',] },],
};

@@ -103,0 +105,0 @@ return LeafletLayersControlDirective;

2

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

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

[{"__symbolic":"module","version":4,"metadata":{"LeafletLayersControlDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":20,"character":1},"arguments":[{"selector":"[leafletLayersControl]"}]}],"members":{"layersControlConfig":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":2},"arguments":["leafletLayersControl"]}]}],"layersControlOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":51,"character":2},"arguments":["leafletLayersControlOptions"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"../../core/leaflet.directive","name":"LeafletDirective","line":56,"character":31},{"__symbolic":"reference","module":"@angular/core","name":"KeyValueDiffers","line":56,"character":66},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":56,"character":97}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"ngDoCheck":[{"__symbolic":"method"}],"updateLayers":[{"__symbolic":"method"}]}}}}]
[{"__symbolic":"module","version":4,"metadata":{"LeafletLayersControlDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":23,"character":1},"arguments":[{"selector":"[leafletLayersControl]"}]}],"members":{"layersControlConfig":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":2},"arguments":["leafletLayersControl"]}]}],"layersControlOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":54,"character":2},"arguments":["leafletLayersControlOptions"]}]}],"layersControlReady":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":56,"character":2},"arguments":["leafletLayersControlReady"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"../../core/leaflet.directive","name":"LeafletDirective","line":61,"character":31},{"__symbolic":"reference","module":"@angular/core","name":"KeyValueDiffers","line":61,"character":66},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":61,"character":97}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"ngDoCheck":[{"__symbolic":"method"}],"updateLayers":[{"__symbolic":"method"}]}}}}]

5

dist/leaflet/layers/control/leaflet-control-layers.wrapper.d.ts

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

import { KeyValueChanges, NgZone } from '@angular/core';
import { EventEmitter, KeyValueChanges, NgZone } from '@angular/core';
import { Control, Layer } from 'leaflet';

@@ -7,3 +7,4 @@ import { LeafletControlLayersChanges } from './leaflet-control-layers-changes.model';

protected layersControl: Control.Layers;
constructor(zone: NgZone);
protected layersControlReady: EventEmitter<Control.Layers>;
constructor(zone: NgZone, layersControlReady: EventEmitter<Control.Layers>);
getLayersControl(): Control.Layers;

@@ -10,0 +11,0 @@ init(controlConfig: any, controlOptions: any): Control.Layers;

5

dist/leaflet/layers/control/leaflet-control-layers.wrapper.js
import { control } from 'leaflet';
import { LeafletControlLayersChanges } from './leaflet-control-layers-changes.model';
var LeafletControlLayersWrapper = /** @class */ (function () {
function LeafletControlLayersWrapper(zone) {
// Nothing here
function LeafletControlLayersWrapper(zone, layersControlReady) {
this.zone = zone;
this.layersControlReady = layersControlReady;
}

@@ -19,2 +19,3 @@ LeafletControlLayersWrapper.prototype.getLayersControl = function () {

});
this.layersControlReady.emit(this.layersControl);
return this.layersControl;

@@ -21,0 +22,0 @@ };

2

dist/leaflet/layers/control/leaflet-control-layers.wrapper.metadata.json

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

[{"__symbolic":"module","version":4,"metadata":{"LeafletControlLayersWrapper":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":12,"character":27}]}],"getLayersControl":[{"__symbolic":"method"}],"init":[{"__symbolic":"method"}],"applyBaseLayerChanges":[{"__symbolic":"method"}],"applyOverlayChanges":[{"__symbolic":"method"}],"applyChanges":[{"__symbolic":"method"}]}}}}]
[{"__symbolic":"module","version":4,"metadata":{"LeafletControlLayersWrapper":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":14,"character":27},{"__symbolic":"reference","module":"@angular/core","name":"EventEmitter","line":14,"character":55,"arguments":[{"__symbolic":"select","expression":{"__symbolic":"reference","module":"leaflet","name":"Control","line":14,"character":68},"member":"Layers"}]}]}],"getLayersControl":[{"__symbolic":"method"}],"init":[{"__symbolic":"method"}],"applyBaseLayerChanges":[{"__symbolic":"method"}],"applyOverlayChanges":[{"__symbolic":"method"}],"applyChanges":[{"__symbolic":"method"}]}}}}]

7

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

@@ -1,3 +0,3 @@

import { NgZone, OnChanges, OnDestroy, OnInit, SimpleChange } from '@angular/core';
import { Layer } from 'leaflet';
import { EventEmitter, NgZone, OnChanges, OnDestroy, OnInit, SimpleChange } from '@angular/core';
import { Layer, LeafletEvent } from 'leaflet';
import { LeafletDirective } from '../core/leaflet.directive';

@@ -14,2 +14,4 @@ /**

layer: Layer;
onAdd: EventEmitter<LeafletEvent>;
onRemove: EventEmitter<LeafletEvent>;
private leafletDirective;

@@ -22,2 +24,3 @@ constructor(leafletDirective: LeafletDirective, zone: NgZone);

}): void;
private addLayerEventListeners(l);
}

14

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

@@ -1,5 +0,6 @@

import { Directive, Input, NgZone } from '@angular/core';
import { Directive, EventEmitter, Input, NgZone, Output } from '@angular/core';
import { Layer } from 'leaflet';
import { LeafletDirective } from '../core/leaflet.directive';
import { LeafletDirectiveWrapper } from '../core/leaflet.directive.wrapper';
import { LeafletUtil } from '../core/leaflet.util';
/**

@@ -15,2 +16,5 @@ * Layer directive

this.zone = zone;
// Layer Events
this.onAdd = new EventEmitter();
this.onRemove = new EventEmitter();
this.leafletDirective = new LeafletDirectiveWrapper(leafletDirective);

@@ -36,2 +40,3 @@ }

if (null != n_1) {
_this.addLayerEventListeners(n_1);
_this.leafletDirective.getMap().addLayer(n_1);

@@ -42,2 +47,7 @@ }

};
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 = [

@@ -55,2 +65,4 @@ { type: Directive, args: [{

"layer": [{ type: Input, args: ['leafletLayer',] },],
"onAdd": [{ type: Output, args: ['leafletLayerAdd',] },],
"onRemove": [{ type: Output, args: ['leafletLayerRemove',] },],
};

@@ -57,0 +69,0 @@ return LeafletLayerDirective;

2

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":15,"character":1},"arguments":[{"selector":"[leafletLayer]"}]}],"members":{"layer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":2},"arguments":["leafletLayer"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"../core/leaflet.directive","name":"LeafletDirective","line":26,"character":31},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":26,"character":63}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"ngOnChanges":[{"__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":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"}]}}}}]

2

dist/leaflet/leaflet.module.js

@@ -31,4 +31,2 @@ import { NgModule } from '@angular/core';

];
/** @nocollapse */
LeafletModule.ctorParameters = function () { return []; };
return LeafletModule;

@@ -35,0 +33,0 @@ }());

7

package.json

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

"description": "Angular.io components for Leaflet",
"version": "3.0.2",
"version": "3.1.0",
"author": "Asymmetrik, Ltd.",

@@ -22,2 +22,7 @@ "copyright": "Copyright Asymmetrik, Ltd. 2007-2018 - All Rights Reserved.",

"scripts": {
"demo": "gulp dev",
"build": "gulp build"
},
"peerDependencies": {

@@ -24,0 +29,0 @@ "@angular/core": ">=5",

235

README.md

@@ -6,3 +6,3 @@ # @asymmetrik/ngx-leaflet

[travis-url]: https://travis-ci.org/Asymmetrik/ngx-leaflet/
[travis-image]: https://travis-ci.org/Asymmetrik/ngx-leaflet.svg
[travis-image]: https://travis-ci.org/Asymmetrik/ngx-leaflet.svg?branch=master

@@ -37,3 +37,3 @@ > Leaflet packages for Angular.io (v2+).

If you want to run the demo, clone the repository, perform an ```npm install```, ```gulp dev``` and then go to http://localhost:9000/src/demo/index.html
If you want to run the demo, clone the repository, perform an ```npm install```, ```npm run demo``` and then go to http://localhost:9000/src/demo/index.html

@@ -182,9 +182,9 @@

Changes to leafletOptions are ignored after they are initially set.
This is because these options are passed into the map constructor, so they couldn't be updated easily regardless.
This is because these options are passed into the map constructor, so they can't be changed anyways.
So, make sure the object exists before the map is created.
You'll want to create the object in ngOnInit or hide the map DOM element with ngIf until you can create the options object.
You'll want to create the object in ```ngOnInit``` or hide the map DOM element with ```*ngIf``` until you can create the options object.
### Add a Layers Control
The ```leafletLayersControl``` input bindings give you the ability to add the layers control to the map.
The ```[leafletLayersControl]``` input bindings give you the ability to add the layers control to the map.
The layers control lets the user toggle layers and overlays on and off.

@@ -220,3 +220,4 @@

### Add Custom Layers (base layers, markers, shapes, etc.)
You can add layers (baselayers, markers, or custom layers) to the map without showing them in the layer control using the ```leafletLayers``` directive.
There are several different ways to add layers to the map.
You can add layers (baselayers, markers, or custom layers) to the map without showing them in the layer control using the ```[leafletLayers]``` directive.

@@ -241,5 +242,22 @@ Template:

You can also add an individual layer to the map using the ```[leafletLayer]``` directive.
Using this approach allows you to use ```*ngFor``` and ```*ngIf``` to control whether individual layers are added to or removed from the map.
### Dynamically Change Map Layers
Template:
```html
<div style="height: 300px;"
leaflet
[leafletOptions]="options">
<div *ngIf="showLayer" [leafletLayer]="layer"></div>
</div>
```
Layer:
```js
layer = circle([ 46.95, -122 ], { radius: 5000 });
```
### Dynamically Change Map Layers using [leafletLayers]
> **Layer inputs (arrays and maps) are mutable**

@@ -261,2 +279,12 @@ > Previous versions of this plugin treated layers arrays and layer control objects as immutable data structures.

### Working with Leaflet Events
Often, you'll want to make changes based on a map click or other Leaflet interaction.
The ngx-leaflet plugin supports several [map events](#map-events) and [layer events](#layer-events) as documented in the API section.
You may occasionally need to handle events that aren't exposed through the plugin, however.
When that happens, you will need to be aware of how Zones and change detection work to ensure your event handling works as expected.
Take a look at [A Note About Change Detection](#a-note-about-change-detection) for more details.
This is by design and a common thing to deal with when using third party libraries and Angular.
## API

@@ -278,24 +306,24 @@ This section includes more detailed documentation of the functionality of the directives included in this library.

#### leafletOptions
Input binding for the initial leaflet map options (see [Leaflet's](http://leafletjs.com) docs). These options can only be set initially because they are used to create the map. Later changes are ignored.
#### [leafletOptions]
Input binding for the initial leaflet map options (see [Leaflet's](http://leafletjs.com/reference-1.3.0.html#map-option) docs). These options can only be set initially because they are used to create the map. Later changes are ignored.
#### leafletPanOptions
Input binding for pan options (see [Leaflet's](http://leafletjs.com) docs). These options are stored and used whenever pan operations are invoked.
#### [leafletPanOptions]
Input binding for pan options (see [Leaflet's](http://leafletjs.com/reference-1.3.0.html#pan-options) docs). These options are stored and used whenever pan operations are invoked.
#### leafletZoomOptions
Input binding for zoom options (see [Leaflet's](http://leafletjs.com) docs). These options are stored and used whenever zoom operations are invoked.
#### [leafletZoomOptions]
Input binding for zoom options (see [Leaflet's](http://leafletjs.com/reference-1.3.0.html#zoom-options) docs). These options are stored and used whenever zoom operations are invoked.
#### leafletZoomPanOptions
Input binding for zoom/pan options (see [Leaflet's](http://leafletjs.com) docs). These options are stored and used whenever zoom/pan operations are invoked.
#### [leafletZoomPanOptions]
Input binding for zoom/pan options (see [Leaflet's](http://leafletjs.com/reference-1.3.0.html#zoom/pan-options) docs). These options are stored and used whenever zoom/pan operations are invoked.
#### leafletFitBoundsOptions
Input binding for FitBounds options (see [Leaflet's](http://leafletjs.com) docs). These options are stored and used whenever FitBounds operations are invoked.
#### [leafletFitBoundsOptions]
Input binding for FitBounds options (see [Leaflet's](http://leafletjs.com/reference-1.3.0.html#fitbounds-options) docs). These options are stored and used whenever FitBounds operations are invoked.
### Dynamically changing zoom level, center, and fitBounds
### Dynamically changing zoom level, center, fitBounds, etc.
```html
<div leaflet style="height: 300px;"
[leafletOptions]="options"
[leafletZoom]="zoom"
[leafletCenter]="center"
[(leafletZoom)]="zoom"
[(leafletCenter)]="center"
[leafletFitBounds]="fitBounds">

@@ -305,42 +333,30 @@ </div>

#### leafletZoom
Input bind a zoom level to the map.
#### [(leafletZoom)]: number
Input and Output binding for the map zoom level.
```js
zoom: number
```
#### [leafletMaxZoom]: number
Input binding for the maximum zoom level for the map.
On changes, the component applies the new zoom level to the map.
There is no output binding or events emitted for map zoom level changes made using the map controls.
#### [leafletMinZoon]: number
Input binding for the minimum zoom level for the map.
#### [(leafletCenter)]: LatLng
Input and Output binding for the map center position.
#### leafletCenter
Input bind a center position to the map.
#### Note: center/zoom operations may interfere with each other
Zoom/Center operations that are applied in rapid succession may interfere with or cancel each other.
If both changes are picked up at the same time, the component applies the changes as a map.setView() operation to ensure both are processed.
Additionally, if a zoom level or center is applied that is not allowed (e.g., beyond max zoom level or outside of max bounds), Leaflet will determine the new value.
```js
center: LatLng
```
#### [leafletFitBounds]: LatLngBounds
Input bind a ```LatLngBounds``` value that will be applied to the map using ```Map.setFitBounds()```.
This operation has no output binding because the input fitBounds usually results in a slightly different map bounds.
On changes, the component re-centers the map on the center point.
There is no output binding or events emitted for map pan changes made using map controls.
#### [leafletMaxBounds]: LatLngBounds
Input bind a ```LatLngBounds``` value that will be applied to the map using ```Map.setMaxBounds()```.
#### Note: center/zoom operations may cancel each other
Zoom/Center operations cancel each other.
If both changes are picked up at the same time, they will be applied as a map.setView() operation so both are processed.
#### leafletFitBounds
Input bind a fitBounds operation to the map.
```js
fitBounds: LatLngBounds
```
On changes, the component calls map.fitBounds using the bound parameter.
### Simple Layer Management: Setting Baselayers
There is a convenience input binding for setting the baselayers on the map called ```leafletBaseLayers```.
You can also provide ```leafletLayersControlOptions``` if you want to show the control on the map that allows you to switch between baselayers.
There is a convenience input binding for setting the baselayers on the map called ```[leafletBaseLayers]```.
You can also provide ```[leafletLayersControlOptions]``` if you want to show the control on the map that allows you to switch between baselayers.
If you plan to show more than just baselayers, you should use the more advanced layers controls described in *Advanced Layer Management* below.

@@ -358,3 +374,3 @@

#### leafletBaseLayers
#### [leafletBaseLayers]: Control.LayersObject
Input bind an ```Control.LayersObject``` to be synced to the map.

@@ -375,3 +391,3 @@

If you use this directive, you can still manually use the ```leafletLayers``` directive, but you will not be able to use the ```leafletLayersControl``` directive.
If you use this directive, you can still manually use the ```[leafletLayers]``` directive, but you will not be able to use the ```[leafletLayersControl]``` directive.
This directive internally uses the layers control, so if you add both, they'll interfere with each other.

@@ -381,3 +397,3 @@ Because it uses ```control.layers``` under the hood, you can still provide options for the layers control.

#### leafletLayersControlOptions
#### [leafletLayersControlOptions]
Input binding for Control.Layers options (see [Leaflet's](http://leafletjs.com) docs).

@@ -388,11 +404,11 @@ These options are passed into the layers control constructor on creation.

### Advanced Layer Management: Layers, and Layers Control
The ```leafletLayers``` and ```leafletLayersControl``` input bindings give you direct access to manipulate layers and the layers control.
When the array bound to ```leafletLayers``` is changed, the directive will synchronize the layers on the map to the layers in the array.
This includes tile layers and any added shapes.
The ```[leafletLayers]``` and ```[leafletLayersControl]``` input bindings give you direct access to manipulate layers and the layers control.
When the array bound to ```[leafletLayers]``` is changed, the directive will synchronize the layers on the map to the layers in the array.
This includes tile layers and any added shapes.
The ```leafletLayersControl``` input binding allows you to provide a set of base layers and overlay layers that can be managed within leaflet using the layers control.
The ```[leafletLayersControl]``` input binding allows you to provide a set of base layers and overlay layers that can be managed within leaflet using the layers control.
When the user manipulates the control via Leaflet, Leaflet will automatically manage the layers, but the input bound layer array isn't going to get updated to reflect those changes.
So, basically, you use ```leafletLayers``` to assert what should be added to/removed from the map.
Use ```leafletLayersContro``` to tell Leaflet what layers the user can optionally turn on and off.
So, use ```[leafletLayers]``` to add a collection of layers to the map.
And, use ```[leafletLayersControl]``` to allow users to optionally turn layers/overlays on and off.

@@ -410,15 +426,12 @@ For an example of using the layers controls, you should check out the *Layers and Layer Controls* demo.

#### leafletLayers
#### [leafletLayers]: Layer[]
Input bind an array of all layers to be synced (and made visible) in the map.
```js
layers: Layer[]
```
On changes, the component syncs the layers on the map with the layers in this array.
Syncing is performed by selectively adding or removing layers. Layers are compared using instance equality.
Syncing is performed by selectively adding or removing layers.
Layers are compared using instance equality.
As a result of how the map is synced, the order of layers is not guaranteed to be consistent as changes are made.
#### leafletLayersControl
#### [leafletLayersControl]: Control.Layers
Input bind a Control.Layers specification. The object contains properties for each of the two constructor arguments for the Control.Layers constructor.

@@ -437,3 +450,3 @@

#### leafletLayersControlOptions
#### [leafletLayersControlOptions]
Input binding for Control.Layers options (see [Leaflet's](http://leafletjs.com) docs).

@@ -443,7 +456,7 @@ These options are passed into the constructor on creation.

### Advanced Layer Management: Layers and *ngFor / *ngIf
The ```leafletLayer``` input bindings gives you the ability to add a single layer to the map.
While this may seem limiting, you can nest elements inside the map element, each with a ```leafletLayer``` input.
### Advanced Layer Management: Individual Layers and *ngFor / *ngIf
The ```[leafletLayer]``` input bindings gives you the ability to add a single layer to the map.
While this may seem limiting, you can nest elements inside the map element, each with a ```[leafletLayer]``` input.
The result of this is that each layer will be added to the map.
If you add a structural directive - ```*ngFor``` or ```*ngIf``` - you can get some added flexibiltiy when controlling layers.
If you add a structural directive - ```*ngFor``` or ```*ngIf``` - you can get some added flexibility when controlling layers.

@@ -458,7 +471,39 @@ ```html

In this example, each layer in the ```layers``` array will create a new child ```div``` element.
Each element will have a ```leafletLayer``` input binding, which will result in the layer being added to the map.
Each element will have a ```[leafletLayer]``` input binding, which will result in the layer being added to the map.
For more details, you should check out the *Layers and ngFor* demo.
There are several layer events that are available when you are using this approach to controlling layers.
### Layer Events
When you are using the ```[leafletLayer]``` directive to add a layer, you can also access output bindings for layer events.
Two events that are currently exposed include: ```(leafletLayerAdd)``` and ```(leafletLayerRemove)```.
Each of these emits a ```LeafletEvent``` object.
### Map Events
Leaflet exposes a lot of map events including map zoom, map move, and mouse interactions.
The plugin exposes several of the most common events.
For each of these events, the event is emitted in the Angular Zone, so you shouldn't have to do anything extra to get change detection to work.
For a working example, check out the events section of the demo.
#### Mouse Interactions: LeafletMouseEvent
The following events are provided:
* ```(leafletClick)```
* ```(leafletDoubleClick)```
* ```(leafletMouseDown)```
* ```(leafletMouseUp)```
* ```(leafletMouseMove)```
* ```(leafletMouseOver)```
#### Map Zoom and Move: LeafletEvent
The following events are provided:
* ```(leafletMapMove)```
* ```(leafletMapMoveStart)```
* ```(leafletMapMoveEnd)```
* ```(leafletMapZoom)```
* ```(leafletMapZoomStart)```
* ```(leafletMapZoomEnd)```
### Getting a Reference to the Map

@@ -476,3 +521,3 @@ Occasionally, you may need to directly access the Leaflet map instance.

#### leafletMapReady
#### (leafletMapReady): Map
This output is emitted when once when the map is initially created inside of the Leaflet directive.

@@ -546,6 +591,10 @@ The event will only fire when the map exists and is ready for manipulation.

The impact of this is that Angular won't automatically detect changes that you make inside of a Leaflet event callback.
The solution is to manually tell Angular to detect changes.
Consider the following example:
The solution is to either make sure that Angular relevant changes are made inside of Angular's zone or to manually tell Angular to detect changes.
#### Running Inside of Angular's Zone
Leaflet event handlers run outside of Angular's zone, where changes to input bound fields will not be detected automatically.
To ensure your changes are detected and applied, you need to make those changed inside of Angular's zone.
Fortunately, this is extremely easy.
```js

@@ -556,2 +605,29 @@ fitBounds: any = null;

// Inject the Change Detector into your component
constructor(private zone: NgZone) {}
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()
// everything inside the arrow function body happens inside of Angular's zone, where changes will be detected
this.zone.run(() => {
this.fitBounds = this.circle.getBounds();
});
});
}
```
#### Manually Triggering Change Detection
Another option is to manually tell the change detector to detect changes.
The drawback to this option is that it is less precise.
This will trigger change detection for this component and all of its children.
```js
fitBounds: any = null;
circle = circle([ 46.95, -122 ], { radius: 5000 });
// Inject the Change Detector into your component
constructor(private changeDetector: ChangeDetectorRef) {}

@@ -665,2 +741,7 @@

#### 3.1.0
Added [map events](#map-events), [layer events](#layer-events).
Added several input bound map options including ```[leafletMaxBounds]```, ```[leafletMaxZoom]```, and ```[leafletMinZoom]```.
Added output binding for map center - ```(leafletMapCenter)``` and map zoom - ```(leafletMapZoom)```.
### 3.0

@@ -667,0 +748,0 @@ Support for Angular 5. Also cleaned up some of the functionality related to Angular zone management.

67

src/demo/app/leaflet/core/core-demo.component.ts

@@ -5,4 +5,2 @@ import { Component } from '@angular/core';

import { LeafletCoreDemoModel } from './core-demo.model';
@Component({

@@ -14,18 +12,4 @@ selector: 'leafletCoreDemo',

/*
* This is a specification of the leaflet options
* The reason to duplicate this object is so we can easily render it to the template
*/
optionsSpec: {
layers: any[],
zoom: number,
center: number[]
} = {
layers: [
{
url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
maxZoom: 18,
attribution: 'Open Street Map'
}
],
optionsSpec: any = {
layers: [{ url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', attribution: 'Open Street Map' }],
zoom: 5,

@@ -35,30 +19,35 @@ center: [ 46.879966, -121.726909 ]

// Fields for managing the form inputs and binding to leaflet zoom/center
model = new LeafletCoreDemoModel(
this.optionsSpec.center[0],
this.optionsSpec.center[1],
this.optionsSpec.zoom
);
zoom: number;
center: LatLng;
/*
* This are the leaflet map options that we're going to use for input binding
*/
// Leaflet bindings
zoom = this.optionsSpec.zoom;
center = latLng(this.optionsSpec.center);
options = {
layers: this.optionsSpec.layers.map((l) => {
return tileLayer(l.url, { maxZoom: l.maxZoom, attribution: l.attribution });
}),
layers: [ tileLayer(this.optionsSpec.layers[0].url, { attribution: this.optionsSpec.layers[0].attribution }) ],
zoom: this.optionsSpec.zoom,
center: latLng(this.optionsSpec.center[0], this.optionsSpec.center[1])
center: latLng(this.optionsSpec.center)
};
onApply() {
this.zoom = this.model.zoom;
this.center = latLng(this.model.latitude, this.model.longitude);
// Form bindings
formZoom = this.zoom;
zoomLevels = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14 ];
lat = this.center.lat;
lng = this.center.lng;
return false;
// Output binding for center
onCenterChange(center: LatLng) {
setTimeout(() => {
this.lat = center.lat;
this.lng = center.lng;
});
}
onZoomChange(zoom: number) {
setTimeout(() => {
this.formZoom = zoom;
});
}
doApply() {
this.center = latLng(this.lat, this.lng);
this.zoom = this.formZoom;
}
}

2

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 { LeafletEventsDemoComponent } from './events/events-demo.component';
import { LeafletLayersDemoComponent } from './layers/layers-demo.component';

@@ -28,2 +29,3 @@ import { LeafletNgForLayersDemoComponent } from './layers/ngfor-layers-demo.component';

LeafletCoreDemoComponent,
LeafletEventsDemoComponent,
LeafletLayersDemoComponent,

@@ -30,0 +32,0 @@ LeafletNgForLayersDemoComponent,

143

src/leaflet/core/leaflet.directive.ts

@@ -6,4 +6,6 @@ import {

import { latLng, LatLng, LatLngBounds, map, Map, MapOptions} from 'leaflet';
import { latLng, LatLng, LatLngBounds, LeafletEvent, LeafletMouseEvent, map, Map, MapOptions } from 'leaflet';
import { LeafletUtil } from './leaflet.util';
@Directive({

@@ -38,5 +40,7 @@ selector: '[leaflet]'

@Input('leafletZoom') zoom: number;
@Output('leafletZoomChange') zoomChange = new EventEmitter<number>();
// Center the map
// Center of the map
@Input('leafletCenter') center: LatLng;
@Output('leafletCenterChange') centerChange = new EventEmitter<LatLng>();

@@ -46,3 +50,31 @@ // Set fit bounds for map

// Set the max bounds for the map
@Input('leafletMaxBounds') maxBounds: LatLngBounds;
// Set the min zoom for the map
@Input('leafletMinZoom') minZoom: number;
// Set the max zoom for the map
@Input('leafletMaxZoom') maxZoom: number;
// Mouse Map Events
@Output('leafletClick') onClick = new EventEmitter<LeafletMouseEvent>();
@Output('leafletDoubleClick') onDoubleClick = new EventEmitter<LeafletMouseEvent>();
@Output('leafletMouseDown') onMouseDown = new EventEmitter<LeafletMouseEvent>();
@Output('leafletMouseUp') onMouseUp = new EventEmitter<LeafletMouseEvent>();
@Output('leafletMouseMove') onMouseMove = new EventEmitter<LeafletMouseEvent>();
@Output('leafletMouseOver') onMouseOver = new EventEmitter<LeafletMouseEvent>();
// Map Move Events
@Output('leafletMapMove') onMapMove = new EventEmitter<LeafletEvent>();
@Output('leafletMapMoveStart') onMapMoveStart = new EventEmitter<LeafletEvent>();
@Output('leafletMapMoveEnd') onMapMoveEnd = new EventEmitter<LeafletEvent>();
// Map Zoom Events
@Output('leafletMapZoom') onMapZoom = new EventEmitter<LeafletEvent>();
@Output('leafletMapZoomStart') onMapZoomStart = new EventEmitter<LeafletEvent>();
@Output('leafletMapZoomEnd') onMapZoomEnd = new EventEmitter<LeafletEvent>();
constructor(private element: ElementRef, private zone: NgZone) {

@@ -59,2 +91,3 @@ // Nothing here

this.map = map(this.element.nativeElement, this.options);
this.addMapEventListeners();

@@ -73,2 +106,14 @@ });

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();

@@ -105,3 +150,3 @@

// Fit bounds
// Other options
if (changes['fitBounds']) {

@@ -111,2 +156,14 @@ 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);
}
}

@@ -124,2 +181,43 @@

private addMapEventListeners() {
// 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('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));
// Update any things for which we provide output bindings
this.map.on('zoomend moveend', () => {
const zoom = this.map.getZoom();
if (zoom !== this.zoom) {
this.zoom = zoom;
LeafletUtil.handleEvent(this.zone, this.zoomChange, zoom);
}
const 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);
}
}
});
}
/**

@@ -190,3 +288,3 @@ * Resize the map to fit it's parent container

* Fit the map to the bounds
* @param center the center point
* @param latLngBounds the boundary to set
*/

@@ -200,2 +298,39 @@ private setFitBounds(latLngBounds: LatLngBounds) {

}
/**
* Set the map's max bounds
* @param latLngBounds the boundary to set
*/
private setMaxBounds(latLngBounds: LatLngBounds) {
if (this.map && null != latLngBounds) {
this.map.setMaxBounds(latLngBounds);
}
}
/**
* Set the map's min zoom
* @param number the new min zoom
*/
private setMinZoom(zoom: number) {
if (this.map && null != zoom) {
this.map.setMinZoom(zoom);
}
}
/**
* Set the map's min zoom
* @param number the new min zoom
*/
private setMaxZoom(zoom: number) {
if (this.map && null != zoom) {
this.map.setMaxZoom(zoom);
}
}
}

13

src/leaflet/core/leaflet.util.ts

@@ -0,1 +1,3 @@

import { EventEmitter, NgZone } from '@angular/core';
export class LeafletUtil {

@@ -14,2 +16,13 @@

}
static handleEvent<T>(zone: NgZone, eventEmitter: EventEmitter<T>, event: T) {
// Don't want to emit if there are no observers
if (0 < eventEmitter.observers.length) {
zone.run(() => {
eventEmitter.emit(event);
});
}
}
}

12

src/leaflet/layers/base/leaflet-baselayers.directive.ts

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

import { Directive, DoCheck, Input, KeyValueDiffer, KeyValueDiffers, NgZone, OnDestroy, OnInit } from '@angular/core';
import {
Directive, DoCheck, EventEmitter, Input, KeyValueDiffer, KeyValueDiffers, NgZone, OnDestroy,
OnInit, Output
} from '@angular/core';

@@ -48,4 +51,7 @@ import { Control, Layer } from 'leaflet';

// Output for once the layers control is ready
@Output('leafletLayersControlReady') layersControlReady = new EventEmitter<Control.Layers>();
// Active Base Layer
baseLayer: Layer;
private baseLayer: Layer;

@@ -57,3 +63,3 @@ private leafletDirective: LeafletDirectiveWrapper;

this.leafletDirective = new LeafletDirectiveWrapper(leafletDirective);
this.controlLayers = new LeafletControlLayersWrapper(this.zone);
this.controlLayers = new LeafletControlLayersWrapper(this.zone, this.layersControlReady);
this.baseLayersDiffer = this.differs.find({}).create<string, Layer>();

@@ -60,0 +66,0 @@ }

11

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

@@ -1,4 +0,7 @@

import { Directive, DoCheck, Input, KeyValueDiffer, KeyValueDiffers, NgZone, OnDestroy, OnInit } from '@angular/core';
import {
Directive, DoCheck, EventEmitter, Input, KeyValueDiffer, KeyValueDiffers, NgZone, OnDestroy, OnInit,
Output
} from '@angular/core';
import { Layer } from 'leaflet';
import { Control, Layer } from 'leaflet';

@@ -54,2 +57,4 @@ import { LeafletDirective } from '../../core/leaflet.directive';

@Output('leafletLayersControlReady') layersControlReady = new EventEmitter<Control.Layers>();
private controlLayers: LeafletControlLayersWrapper;

@@ -60,3 +65,3 @@ private leafletDirective: LeafletDirectiveWrapper;

this.leafletDirective = new LeafletDirectiveWrapper(leafletDirective);
this.controlLayers = new LeafletControlLayersWrapper(this.zone);
this.controlLayers = new LeafletControlLayersWrapper(this.zone, this.layersControlReady);

@@ -63,0 +68,0 @@ // Generate differs

13

src/leaflet/layers/control/leaflet-control-layers.wrapper.ts

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

import {KeyValueChanges, NgZone} from '@angular/core';
import { EventEmitter, KeyValueChanges, NgZone } from '@angular/core';

@@ -9,8 +9,10 @@ import { control, Control, Layer } from 'leaflet';

// The layers control object
protected layersControl: Control.Layers;
constructor(private zone: NgZone) {
// Nothing here
// Event Emitter for when the control is ready
protected layersControlReady: EventEmitter<Control.Layers>;
constructor(private zone: NgZone, layersControlReady: EventEmitter<Control.Layers>) {
this.layersControlReady = layersControlReady;
}

@@ -32,2 +34,5 @@

this.layersControlReady.emit(this.layersControl);
return this.layersControl;

@@ -34,0 +39,0 @@ }

20

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

@@ -1,7 +0,11 @@

import { Directive, Input, NgZone, OnChanges, OnDestroy, OnInit, SimpleChange } from '@angular/core';
import {
Directive, EventEmitter, Input, NgZone, OnChanges, OnDestroy, OnInit, Output,
SimpleChange
} from '@angular/core';
import { Layer } from 'leaflet';
import {Layer, LeafletEvent } from 'leaflet';
import { LeafletDirective } from '../core/leaflet.directive';
import { LeafletDirectiveWrapper } from '../core/leaflet.directive.wrapper';
import { LeafletUtil } from '../core/leaflet.util';

@@ -24,2 +28,6 @@

// Layer Events
@Output('leafletLayerAdd') onAdd = new EventEmitter<LeafletEvent>();
@Output('leafletLayerRemove') onRemove = new EventEmitter<LeafletEvent>();
// Wrapper for the leaflet directive (manages the parent directive)

@@ -56,2 +64,3 @@ private leafletDirective: LeafletDirectiveWrapper;

if (null != n) {
this.addLayerEventListeners(n);
this.leafletDirective.getMap().addLayer(n);

@@ -65,2 +74,9 @@ }

private addLayerEventListeners(l: Layer) {
l.on('add', (e: LeafletEvent) => LeafletUtil.handleEvent(this.zone, this.onAdd, e));
l.on('remove', (e: LeafletEvent) => LeafletUtil.handleEvent(this.zone, this.onRemove, e));
}
}
src/demo/app/leaflet/core/core-demo.model.ts
.travis.yml

Sorry, the diff of this file is not supported yet

dist/bundles/ngx-leaflet.js.map

Sorry, the diff of this file is not supported yet

dist/leaflet/core/leaflet.directive.js.map

Sorry, the diff of this file is not supported yet

dist/leaflet/core/leaflet.util.js.map

Sorry, the diff of this file is not supported yet

dist/leaflet/layers/base/leaflet-baselayers.directive.js.map

Sorry, the diff of this file is not supported yet

dist/leaflet/layers/control/leaflet-control-layers.directive.js.map

Sorry, the diff of this file is not supported yet

dist/leaflet/layers/control/leaflet-control-layers.wrapper.js.map

Sorry, the diff of this file is not supported yet

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

Sorry, the diff of this file is not supported yet

dist/leaflet/leaflet.module.js.map

Sorry, the diff of this file is not supported yet

LICENSE

Sorry, the diff of this file is not supported yet

src/demo/app/leaflet/core/core-demo.component.html

Sorry, the diff of this file is not supported yet

src/demo/app/leaflet/leaflet-demo.component.html

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

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

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc