@yaga/leaflet-ng2
Version:
Angular2 module for Leaflet
245 lines • 10.6 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FeatureGroupDirective = void 0;
const core_1 = require("@angular/core");
const leaflet_1 = require("leaflet");
const layer_group_provider_1 = require("./layer-group.provider");
const layer_provider_1 = require("./layer.provider");
const i0 = require("@angular/core");
const i1 = require("./layer-group.provider");
const i2 = require("./layer.provider");
/**
* Angular2 directive for Leaflet layer-groups.
*
* *You can use this directive in an Angular2 template after importing `YagaModule`.*
*
* How to use in a template:
* ```html
* <yaga-map>
* <yaga-feature-group
* [(display)]="..."
*
* (add)="..."
* (remove)="..."
* (popupopen)="..."
* (popupclose)="..."
* (tooltipopen)="..."
* (tooltipclose)="..."
*
* [attribution]="...">
* <!-- place other layers here... -->
* </yaga-feature-group>
* </yaga-map>
* ```
*
* @link http://leafletjs.com/reference-1.2.0.html#featuregroup Original Leaflet documentation
* @link https://leaflet-ng2.yagajs.org/latest/browser-test?grep=Feature-Group%20Directive Unit-Test
* @link https://leaflet-ng2.yagajs.org/latest/coverage/lcov-report/lib/feature-group.directive.js.html Test coverage
* @link https://leaflet-ng2.yagajs.org/latest/typedoc/classes/featuregroupdirective.html API documentation
* @example https://leaflet-ng2.yagajs.org/latest/examples/feature-group-directive
*/
class FeatureGroupDirective extends leaflet_1.FeatureGroup {
/**
* From leaflet fired click event.
* Use it with `<yaga-feature-group (click)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#featuregroup-click Original Leaflet documentation
*/
constructor(parentLayerGroupProvider, layerGroupProvider, layerProvider) {
super();
this.parentLayerGroupProvider = parentLayerGroupProvider;
/**
* Two-Way bound property for the display status of the layer.
* Use it with `<yaga-feature-group [(display)]="someValue">`
* or `<yaga-feature-group (displayChange)="processEvent($event)">`
*/
this.displayChange = new core_1.EventEmitter();
/**
* From leaflet fired add event.
* Use it with `<yaga-feature-group (layeradd)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#featuregroup-add Original Leaflet documentation
*/
this.layeraddEvent = new core_1.EventEmitter();
/**
* From leaflet fired remove event.
* Use it with `<yaga-feature-group (layerremove)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#featuregroup-remove Original Leaflet documentation
*/
this.layerremoveEvent = new core_1.EventEmitter();
/**
* From leaflet fired add event.
* Use it with `<yaga-feature-group (add)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#featuregroup-add Original Leaflet documentation
*/
this.addEvent = new core_1.EventEmitter();
/**
* From leaflet fired remove event.
* Use it with `<yaga-feature-group (remove)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#featuregroup-remove Original Leaflet documentation
*/
this.removeEvent = new core_1.EventEmitter();
/**
* From leaflet fired popupopen event.
* Use it with `<yaga-feature-group (popupopen)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#featuregroup-popupopen Original Leaflet documentation
*/
this.popupopenEvent = new core_1.EventEmitter();
/**
* From leaflet fired popupclose event.
* Use it with `<yaga-feature-group (popupclose)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#featuregroup-popupclose Original Leaflet documentation
*/
this.popupcloseEvent = new core_1.EventEmitter();
/**
* From leaflet fired tooltipopen event.
* Use it with `<yaga-feature-group (tooltipopen)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#featuregroup-tooltipopen Original Leaflet documentation
*/
this.tooltipopenEvent = new core_1.EventEmitter();
/**
* From leaflet fired tooltipclose event.
* Use it with `<yaga-feature-group (tooltipclose)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#featuregroup-tooltipclose Original Leaflet documentation
*/
this.tooltipcloseEvent = new core_1.EventEmitter();
layerProvider.ref = this;
layerGroupProvider.ref = this;
this.on("remove", () => {
this._map = null; // This seems to fix a bug in Leaflet
this.displayChange.emit(false);
});
this.on("add", () => {
this.displayChange.emit(true);
});
this.addTo(this.parentLayerGroupProvider.ref);
// Events
this.on("layeradd", (event) => {
this.layeraddEvent.emit(event);
});
this.on("layerremove", (event) => {
this.layerremoveEvent.emit(event);
});
this.on("add", (event) => {
this.addEvent.emit(event);
});
this.on("remove", (event) => {
this.removeEvent.emit(event);
});
this.on("popupopen", (event) => {
this.popupopenEvent.emit(event);
});
this.on("popupclose", (event) => {
this.popupcloseEvent.emit(event);
});
this.on("tooltipopen", (event) => {
this.tooltipopenEvent.emit(event);
});
this.on("tooltipclose", (event) => {
this.tooltipcloseEvent.emit(event);
});
}
/**
* This function gets called from Angular on destroy of the html-component.
* @link https://angular.io/docs/ts/latest/api/core/index/OnDestroy-class.html
*/
ngOnDestroy() {
this.removeFrom(this.parentLayerGroupProvider.ref);
}
/**
* Two-Way bound property for the display status of the layer.
* Use it with `<yaga-feature-group [(display)]="someValue">` or `<yaga-feature-group [display]="someValue">`
*/
set display(val) {
if (val) {
this.addTo(this.parentLayerGroupProvider.ref);
return;
}
// TODO: proof and maybe enhance typedefinition
this.parentLayerGroupProvider.ref.removeLayer(this);
}
/**
* Two-Way bound property for the display status of the layer.
* Use it with `<yaga-feature-group [(display)]="someValue">` or `<yaga-feature-group [display]="someValue">`
*/
get display() {
return !!(this._map);
}
/**
* Input for the attribution.
* Use it with `<yaga-feature-group [attribution]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#featuregroup-attribution Original Leaflet documentation
*/
set attribution(val) {
if (this._map && this._map.attributionControl) {
if (this.getAttribution()) {
this._map.attributionControl
.removeAttribution(this.getAttribution());
}
this._map.attributionControl.addAttribution(val);
}
// TODO: add options to the official type definition
this.options.attribution = val;
}
get attribution() {
return this.getAttribution() || "";
}
removeFrom(map) {
this.displayChange.emit(false);
return super.removeFrom(map);
}
/**
* Input for the style.
* Use it with `<yaga-feature-group [style]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#featuregroup-setstyle Original Leaflet documentation
*/
set style(val) {
this.setStyle(val);
}
get style() {
return {};
}
}
exports.FeatureGroupDirective = FeatureGroupDirective;
FeatureGroupDirective.ɵfac = function FeatureGroupDirective_Factory(t) { return new (t || FeatureGroupDirective)(i0.ɵɵdirectiveInject(i1.LayerGroupProvider, 4), i0.ɵɵdirectiveInject(i1.LayerGroupProvider), i0.ɵɵdirectiveInject(i2.LayerProvider)); };
FeatureGroupDirective.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: FeatureGroupDirective, selectors: [["yaga-feature-group"]], inputs: { display: "display", attribution: "attribution", style: "style" }, outputs: { displayChange: "displayChange", layeraddEvent: "layeradd", layerremoveEvent: "layerremove", addEvent: "add", removeEvent: "remove", popupopenEvent: "popupopen", popupcloseEvent: "popupclose", tooltipopenEvent: "tooltipopen", tooltipcloseEvent: "tooltipclose" }, features: [i0.ɵɵProvidersFeature([layer_group_provider_1.LayerGroupProvider, layer_provider_1.LayerProvider]), i0.ɵɵInheritDefinitionFeature] });
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FeatureGroupDirective, [{
type: core_1.Directive,
args: [{
providers: [layer_group_provider_1.LayerGroupProvider, layer_provider_1.LayerProvider],
selector: "yaga-feature-group",
}]
}], function () { return [{ type: i1.LayerGroupProvider, decorators: [{
type: core_1.SkipSelf
}] }, { type: i1.LayerGroupProvider }, { type: i2.LayerProvider }]; }, { displayChange: [{
type: core_1.Output
}], layeraddEvent: [{
type: core_1.Output,
args: ["layeradd"]
}], layerremoveEvent: [{
type: core_1.Output,
args: ["layerremove"]
}], addEvent: [{
type: core_1.Output,
args: ["add"]
}], removeEvent: [{
type: core_1.Output,
args: ["remove"]
}], popupopenEvent: [{
type: core_1.Output,
args: ["popupopen"]
}], popupcloseEvent: [{
type: core_1.Output,
args: ["popupclose"]
}], tooltipopenEvent: [{
type: core_1.Output,
args: ["tooltipopen"]
}], tooltipcloseEvent: [{
type: core_1.Output,
args: ["tooltipclose"]
}], display: [{
type: core_1.Input
}], attribution: [{
type: core_1.Input
}], style: [{
type: core_1.Input
}] }); })();
//# sourceMappingURL=feature-group.directive.js.map