@yaga/leaflet-ng2
Version:
Angular2 module for Leaflet
286 lines • 12 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.LayersControlDirective = void 0;
const core_1 = require("@angular/core");
const leaflet_1 = require("leaflet");
const layers_control_provider_1 = require("./layers-control.provider");
const map_provider_1 = require("./map.provider");
const mouse_event_helper_1 = require("./mouse-event-helper");
const i0 = require("@angular/core");
const i1 = require("./map.provider");
const i2 = require("./layers-control.provider");
/**
* Angular2 directive for the attribution-control of Leaflet.
*
* *You can use this directive in an Angular2 template after importing `YagaModule`.*
*
* How to use in a template:
* ```html
* <yaga-map>
* <yaga-layers-control
* [(display)]="..."
* [(zIndex)]="..."
* [(position)]="..."
*
* (add)="..."
* (remove)="..."
* (click)="..."
* (dblclick)="..."
* (mousedown)="..."
* (mouseover)="..."
* (mouseout)="..."
* >
* <yaga-tile-layer yaga-base-layer="OSM"></yaga-tile-layer>
* <yaga-geojson yaga-overlay-layer="My points"></yaga-geojson>
* </yaga-layers-control>
* </yaga-map>
* ```
*
* @link http://leafletjs.com/reference-1.2.0.html#control-layers Original Leaflet documentation
* @link https://leaflet-ng2.yagajs.org/latest/browser-test?grep=Scale-Control%20Directive Unit-Test
* @link https://leaflet-ng2.yagajs.org/latest/coverage/lcov-report/lib/attribution-control.directive.js.html
* Test coverage
* @link https://leaflet-ng2.yagajs.org/latest/typedoc/classes/layerscontroldirective.html API documentation
* @example https://leaflet-ng2.yagajs.org/latest/examples/layers-control-directive/
*/
class LayersControlDirective extends leaflet_1.Control.Layers {
constructor(mapProvider, layersControlProvider) {
super();
this.mapProvider = mapProvider;
/**
* Two-Way bound property for the display status of the control.
* Use it with `<yaga-layers-control [(display)]="someValue">`
* or `<yaga-layers-control (displayChange)="processEvent($event)">`
*/
this.displayChange = new core_1.EventEmitter();
/**
* Two-Way bound property for the zIndex of the control.
* Use it with `<yaga-layers-control [(zIndex)]="someValue">`
* or `<yaga-layers-control (zIndexChange)="processEvent($event)">`
*/
this.zIndexChange = new core_1.EventEmitter();
/**
* Two-Way bound property for the position of the control.
* Use it with `<yaga-layers-control [(position)]="someValue">`
* or `<yaga-layers-control (positionChange)="processEvent($event)">`
*/
this.positionChange = new core_1.EventEmitter();
/**
* From leaflet fired add event.
* Use it with `<yaga-layers-control (add)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#control-layers-add Original Leaflet documentation
*/
this.addEvent = new core_1.EventEmitter();
/**
* From leaflet fired remove event.
* Use it with `<yaga-layers-control (remove)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#control-layers-remove Original Leaflet documentation
*/
this.removeEvent = new core_1.EventEmitter();
/**
* From leaflet fired click event.
* Use it with `<yaga-layers-control (click)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#control-layers-click Original Leaflet documentation
*/
this.clickEvent = new core_1.EventEmitter();
/**
* From leaflet fired dblclick event.
* Use it with `<yaga-layers-control (dblclick)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#control-layers-dblclick Original Leaflet documentation
*/
this.dblclickEvent = new core_1.EventEmitter();
/**
* From leaflet fired mousedown event.
* Use it with `<yaga-layers-control (mousedown)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#control-layers-mousedown Original Leaflet documentation
*/
this.mousedownEvent = new core_1.EventEmitter();
/**
* From leaflet fired mouseover event.
* Use it with `<yaga-layers-control (mouseover)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#control-layers-mouseover Original Leaflet documentation
*/
this.mouseoverEvent = new core_1.EventEmitter();
/**
* From leaflet fired mouseout event.
* Use it with `<yaga-layers-control (mouseout)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#control-layers-mouseout Original Leaflet documentation
*/
this.mouseoutEvent = new core_1.EventEmitter();
layersControlProvider.ref = this;
this.mapProvider.ref.addControl(this);
}
/**
* Internal method to provide the removal of the control in Leaflet, when removing it from the Angular template
*/
ngOnDestroy() {
this.mapProvider.ref.removeControl(this);
}
/**
* Derived remove function
*/
remove() {
/* tslint:disable */
super.remove();
this.displayChange.emit(false);
this.removeEvent.emit({ target: this, type: "remove" });
return this;
}
/**
* Derived addTo function
*/
addTo(map) {
/* tslint:disable */
super.addTo(map);
this.displayChange.emit(true);
this.addEvent.emit({ target: this, type: "add" });
return this;
}
/**
* Derived method of the original setPosition.
* @link http://leafletjs.com/reference-1.2.0.html#control-layers-setposition Original Leaflet documentation
*/
setPosition(val) {
super.setPosition(val);
this.positionChange.emit(val);
return this;
}
/**
* Two-Way bound property for the opacity.
* Use it with `<yaga-layers-control [(opacity)]="someValue">`
* or `<yaga-layers-control [opacity]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#control-layers-opacity Original Leaflet documentation
*/
set opacity(val) {
if (typeof val === "number") {
this.getContainer().style.opacity = val.toString();
return;
}
this.getContainer().style.opacity = "";
}
get opacity() {
if (typeof this.getContainer().style.opacity === "string") {
return parseFloat(this.getContainer().style.opacity);
}
return undefined;
}
/**
* Two-Way bound property for the display state.
* Use it with `<yaga-layers-control [(display)]="someValue">`
* or `<yaga-layers-control [display]="someValue">`
*/
set display(val) {
if (!this._map) {
// No map available...
return;
}
if (val) {
this.getContainer().style.display = "";
return;
}
this.getContainer().style.display = "none";
return;
}
get display() {
return !!this._map && this.getContainer().style.display !== "none";
}
/**
* Two-Way bound property for the position.
* Use it with `<yaga-layers-control [(position)]="someValue">`
* or `<yaga-layers-control [position]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#control-layers-position Original Leaflet documentation
*/
set position(val) {
this.setPosition(val);
}
get position() {
return this.getPosition();
}
/**
* Two-Way bound property for the zIndex of the control.
* Use it with `<yaga-layers-control [(zIndex)]="someValue">`
* or `<yaga-layers-control (zIndexChange)="processEvent($event)">`
*/
set zIndex(zIndex) {
if (typeof zIndex === "number") {
this.getContainer().style.zIndex = zIndex.toString();
return;
}
this.getContainer().style.zIndex = "";
}
get zIndex() {
if (typeof this.getContainer().style.zIndex === "string") {
return parseInt(this.getContainer().style.zIndex, 10);
}
return undefined;
}
/**
* Reimplemention of initLayout private function to register event listeners after DOM creation.
*/
_initLayout() {
// @ts-ignore
super._initLayout();
// Events
this.getContainer().addEventListener("click", (event) => {
this.clickEvent.emit(mouse_event_helper_1.enhanceMouseEvent(event, this._map));
});
this.getContainer().addEventListener("dblclick", (event) => {
this.dblclickEvent.emit(mouse_event_helper_1.enhanceMouseEvent(event, this._map));
});
this.getContainer().addEventListener("mousedown", (event) => {
this.mousedownEvent.emit(mouse_event_helper_1.enhanceMouseEvent(event, this._map));
});
this.getContainer().addEventListener("mouseover", (event) => {
this.mouseoverEvent.emit(mouse_event_helper_1.enhanceMouseEvent(event, this._map));
});
this.getContainer().addEventListener("mouseout", (event) => {
this.mouseoutEvent.emit(mouse_event_helper_1.enhanceMouseEvent(event, this._map));
});
}
}
exports.LayersControlDirective = LayersControlDirective;
LayersControlDirective.ɵfac = function LayersControlDirective_Factory(t) { return new (t || LayersControlDirective)(i0.ɵɵdirectiveInject(i1.MapProvider), i0.ɵɵdirectiveInject(i2.LayersControlProvider)); };
LayersControlDirective.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: LayersControlDirective, selectors: [["yaga-layers-control"]], inputs: { opacity: "opacity", display: "display", position: "position", zIndex: "zIndex" }, outputs: { displayChange: "displayChange", zIndexChange: "zIndexChange", positionChange: "positionChange", addEvent: "add", removeEvent: "remove", clickEvent: "click", dblclickEvent: "dblclick", mousedownEvent: "mousedown", mouseoverEvent: "mouseover", mouseoutEvent: "mouseout" }, features: [i0.ɵɵProvidersFeature([layers_control_provider_1.LayersControlProvider]), i0.ɵɵInheritDefinitionFeature] });
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LayersControlDirective, [{
type: core_1.Directive,
args: [{
providers: [layers_control_provider_1.LayersControlProvider],
selector: "yaga-layers-control",
}]
}], function () { return [{ type: i1.MapProvider }, { type: i2.LayersControlProvider }]; }, { displayChange: [{
type: core_1.Output
}], zIndexChange: [{
type: core_1.Output
}], positionChange: [{
type: core_1.Output
}], addEvent: [{
type: core_1.Output,
args: ["add"]
}], removeEvent: [{
type: core_1.Output,
args: ["remove"]
}], clickEvent: [{
type: core_1.Output,
args: ["click"]
}], dblclickEvent: [{
type: core_1.Output,
args: ["dblclick"]
}], mousedownEvent: [{
type: core_1.Output,
args: ["mousedown"]
}], mouseoverEvent: [{
type: core_1.Output,
args: ["mouseover"]
}], mouseoutEvent: [{
type: core_1.Output,
args: ["mouseout"]
}], opacity: [{
type: core_1.Input
}], display: [{
type: core_1.Input
}], position: [{
type: core_1.Input
}], zIndex: [{
type: core_1.Input
}] }); })();
//# sourceMappingURL=layers-control.directive.js.map