@yaga/leaflet-ng2
Version:
Angular2 module for Leaflet
410 lines • 16.1 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.GeoJSONDirective = void 0;
const core_1 = require("@angular/core");
const leaflet_1 = require("leaflet");
const consts_1 = require("./consts");
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 GeoJSON of Leaflet.
*
* *You can use this directive in an Angular2 template after importing `YagaModule`.*
*
* How to use in a template:
* ```html
* <yaga-map>
* <yaga-geojson
* [(data)]="..."
* [(stroke)]="..."
* [(color)]="..."
* [(weight)]="..."
* [(opacity)]="..."
* [(lineCap)]="..."
* [(lineJoin)]="..."
* [(dashArray)]="..."
* [(dashOffset)]="..."
* [(fill)]="..."
* [(fillColor)]="..."
* [(fillOpacity)]="..."
* [(fillRule)]="..."
* [(className)]="..."
* [(lat)]="..."
* [(lng)]="..."
* [(radius)]="..."
*
* (add)="..."
* (remove)="..."
* (popupopen)="..."
* (popupclose)="..."
* (tooltipopen)="..."
* (tooltipclose)="..."
* (click)="..."
* (dblclick)="..."
* (mousedown)="..."
* (mouseover)="..."
* (mouseout)="..."
* (contextmenu)="..."
* (onEachFeature)="..."
*
* [data]="..."
* [filter]="..."
* [pointToLayer]="..."
* [styler]="..."
* [defaultStyle]="..."
* >
* </yaga-geojson>
* </yaga-map>
* ```
*
* @link http://leafletjs.com/reference-1.2.0.html#geojson Original Leaflet documentation
* @link https://leaflet-ng2.yagajs.org/latest/browser-test?grep=GeoJSON%20Directive Unit-Test
* @link https://leaflet-ng2.yagajs.org/latest/coverage/lcov-report/lib/geojson.directive.js.html
* Test coverage
* @link https://leaflet-ng2.yagajs.org/latest/typedoc/classes/geojson.directive.js.html API documentation
* @example https://leaflet-ng2.yagajs.org/latest/examples/geojson-directive/
*/
class GeoJSONDirective extends leaflet_1.GeoJSON {
constructor(parentLayerGroupProvider, layerGroupProvider, layerProvider) {
super({ features: [], type: "FeatureCollection" }, {
filter: (feature) => {
if (this.middleware.filter) {
return this.middleware.filter(feature);
}
return true;
},
onEachFeature: (feature, layer) => {
this.onEachFeatureEvent.emit({ feature, layer });
},
pointToLayer: (geoJSON, latLng) => {
if (this.middleware.pointToLayer) {
return this.middleware.pointToLayer(geoJSON, latLng);
}
return new leaflet_1.Marker(latLng);
},
style: (geoJSON) => {
const defaultStyle = this.middleware.defaultStyle;
if (this.middleware.styler) {
return this.middleware.styler(geoJSON, defaultStyle);
}
return defaultStyle;
},
});
this.parentLayerGroupProvider = parentLayerGroupProvider;
/* tslint:disable:max-line-length */
this.dataChange = new core_1.EventEmitter();
/* tslint:enable */
/**
* From leaflet fired add event.
* Use it with `<yaga-geojson (add)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#geojson-add Original Leaflet documentation
*/
this.addEvent = new core_1.EventEmitter();
/**
* From leaflet fired remove event.
* Use it with `<yaga-geojson (remove)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#geojson-remove Original Leaflet documentation
*/
this.removeEvent = new core_1.EventEmitter();
/**
* From leaflet fired popupopen event.
* Use it with `<yaga-geojson (popupopen)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#geojson-popupopen Original Leaflet documentation
*/
this.popupopenEvent = new core_1.EventEmitter();
/**
* From leaflet fired popupclose event.
* Use it with `<yaga-geojson (popupclose)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#geojson-popupclose Original Leaflet documentation
*/
this.popupcloseEvent = new core_1.EventEmitter();
/**
* From leaflet fired tooltipopen event.
* Use it with `<yaga-geojson (tooltipopen)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#geojson-tooltipopen Original Leaflet documentation
*/
this.tooltipopenEvent = new core_1.EventEmitter();
/**
* From leaflet fired tooltipclose event.
* Use it with `<yaga-geojson (tooltipclose)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#geojson-tooltipclose Original Leaflet documentation
*/
this.tooltipcloseEvent = new core_1.EventEmitter();
/**
* From leaflet fired click event.
* Use it with `<yaga-geojson (click)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#geojson-click Original Leaflet documentation
*/
this.clickEvent = new core_1.EventEmitter();
/**
* From leaflet fired dblclick event.
* Use it with `<yaga-geojson (dblclick)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#geojson-dblclick Original Leaflet documentation
*/
this.dblclickEvent = new core_1.EventEmitter();
/**
* From leaflet fired mousedown event.
* Use it with `<yaga-geojson (mousedown)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#geojson-mousedown Original Leaflet documentation
*/
this.mousedownEvent = new core_1.EventEmitter();
/**
* From leaflet fired mouseover event.
* Use it with `<yaga-geojson (mouseover)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#geojson-mouseover Original Leaflet documentation
*/
this.mouseoverEvent = new core_1.EventEmitter();
/**
* From leaflet fired mouseout event.
* Use it with `<yaga-geojson (mouseout)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#geojson-mouseout Original Leaflet documentation
*/
this.mouseoutEvent = new core_1.EventEmitter();
/**
* From leaflet fired contextmenu event.
* Use it with `<yaga-geojson (contextmenu)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#geojson-contextmenu Original Leaflet documentation
*/
this.contextmenuEvent = new core_1.EventEmitter();
/* tslint:disable:max-line-length */
this.onEachFeatureEvent = new core_1.EventEmitter();
/* tslint:enable */
/**
* Property to prevent changes before directive is initialized
*/
this.initialized = false;
/**
* Object that stores the middleware functions and the default style
*/
this.middleware = {
defaultStyle: consts_1.DEFAULT_STYLE,
};
layerProvider.ref = this;
layerGroupProvider.ref = this;
this.parentLayerGroupProvider.ref.addLayer(this);
// Events
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.on("click", (event) => {
this.clickEvent.emit(event);
});
this.on("dblclick", (event) => {
this.dblclickEvent.emit(event);
});
this.on("mousedown", (event) => {
this.mousedownEvent.emit(event);
});
this.on("mouseover", (event) => {
this.mouseoverEvent.emit(event);
});
this.on("mouseout", (event) => {
this.mouseoutEvent.emit(event);
});
this.on("contextmenu", (event) => {
this.contextmenuEvent.emit(event);
});
}
/**
* Internal method that provides the initialization of the child popup or tooltip
*/
ngAfterContentInit() {
this.initialized = true;
this.redraw();
}
/**
* Internal method to provide the removal of the layer in Leaflet, when removing it from the Angular template
*/
ngOnDestroy() {
this.removeFrom(this.parentLayerGroupProvider.ref);
}
/**
* Derived method of the original addData.
* @link http://leafletjs.com/reference-1.2.0.html#geojson-adddata Original Leaflet documentation
*/
addData(data) {
const returnValue = super.addData(data);
if (!this.initialized) {
return returnValue;
}
this.dataChange.emit(this.toGeoJSON());
return returnValue;
}
/**
* Derived method of the original clearLayers.
* @link http://leafletjs.com/reference-1.2.0.html#geojson-clearlayers Original Leaflet documentation
*/
clearLayers() {
super.clearLayers();
this.dataChange.emit(this.toGeoJSON());
return this;
}
/**
* Method to remove all existing data and add the new data in one step.
*
* *Note: this is a combination of `clearLayers` and `addData`*
*/
setData(val) {
super.clearLayers();
super.addData(val);
return this;
}
/**
* Two-Way bound property for the data geoJSON data.
* Use it with `<yaga-geojson [(data)]="someValue">` or `<yaga-geojson [data]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#geojson-l-geojson Original Leaflet documentation
*/
set data(val) {
super.clearLayers();
super.addData(val);
}
get data() {
return this.toGeoJSON();
}
/**
* Input for the filter function.
* Use it with `<yaga-geojson [filter]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#geojson-filter Original Leaflet documentation
*/
set filter(filterFn) {
this.middleware.filter = filterFn;
this.redraw();
}
get filter() {
return this.middleware.filter;
}
/**
* Input for the pointToLayer function.
* Use it with `<yaga-geojson [pointToLayer]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#geojson-pointtolayer Original Leaflet documentation
*/
set pointToLayer(pointToLayerFn) {
this.middleware.pointToLayer = pointToLayerFn;
this.redraw();
}
get pointToLayer() {
return this.middleware.pointToLayer;
}
/**
* Input for the styler function.
* Use it with `<yaga-geojson [styler]="someValue">`
*
* *Note: The function can follow the `IGeoJSONStylerFn` interface. It enhances the leaflet ones with the default
* style as second parameter*
* @link http://leafletjs.com/reference-1.2.0.html#geojson-style Original Leaflet documentation
*/
set styler(stylerFn) {
this.middleware.styler = stylerFn;
this.redraw();
}
get styler() {
return this.middleware.styler;
}
/**
* Input for the default style.
* Use it with `<yaga-geojson [defaultStyle]="someValue">`
*
* *Note: Leaflet does not provide a default style, it just provides a style function!*
*/
set defaultStyle(style) {
this.middleware.defaultStyle = style;
this.redraw();
}
get defaultStyle() {
return this.middleware.defaultStyle; // There is a fallback default style
}
/**
* Method to apply changes to the geometries
*/
redraw() {
if (this.initialized) {
this.initialized = false;
const data = this.data;
super.clearLayers();
super.addData(data);
this.initialized = true;
}
}
}
exports.GeoJSONDirective = GeoJSONDirective;
GeoJSONDirective.ɵfac = function GeoJSONDirective_Factory(t) { return new (t || GeoJSONDirective)(i0.ɵɵdirectiveInject(i1.LayerGroupProvider, 4), i0.ɵɵdirectiveInject(i1.LayerGroupProvider), i0.ɵɵdirectiveInject(i2.LayerProvider)); };
GeoJSONDirective.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: GeoJSONDirective, selectors: [["yaga-geojson"]], inputs: { data: "data", filter: "filter", pointToLayer: "pointToLayer", styler: "styler", defaultStyle: "defaultStyle" }, outputs: { dataChange: "dataChange", addEvent: "add", removeEvent: "remove", popupopenEvent: "popupopen", popupcloseEvent: "popupclose", tooltipopenEvent: "tooltipopen", tooltipcloseEvent: "tooltipclose", clickEvent: "click", dblclickEvent: "dblclick", mousedownEvent: "mousedown", mouseoverEvent: "mouseover", mouseoutEvent: "mouseout", contextmenuEvent: "contextmenu", onEachFeatureEvent: "onEachFeature" }, features: [i0.ɵɵProvidersFeature([layer_group_provider_1.LayerGroupProvider, layer_provider_1.LayerProvider]), i0.ɵɵInheritDefinitionFeature] });
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(GeoJSONDirective, [{
type: core_1.Directive,
args: [{
providers: [layer_group_provider_1.LayerGroupProvider, layer_provider_1.LayerProvider],
selector: "yaga-geojson",
}]
}], function () { return [{ type: i1.LayerGroupProvider, decorators: [{
type: core_1.SkipSelf
}] }, { type: i1.LayerGroupProvider }, { type: i2.LayerProvider }]; }, { dataChange: [{
type: core_1.Output
}], 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"]
}], 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"]
}], contextmenuEvent: [{
type: core_1.Output,
args: ["contextmenu"]
}], onEachFeatureEvent: [{
type: core_1.Output,
args: ["onEachFeature"]
}], data: [{
type: core_1.Input
}], filter: [{
type: core_1.Input
}], pointToLayer: [{
type: core_1.Input
}], styler: [{
type: core_1.Input
}], defaultStyle: [{
type: core_1.Input
}] }); })();
//# sourceMappingURL=geojson.directive.js.map