angular-leaflet
Version:
Collection of angular components to build map views faster and with minimal configuration using the most popular library **LeafletJS**.
854 lines (834 loc) • 22.3 kB
JavaScript
import { ContentChildren, Component, ElementRef, Input, NgModule, forwardRef } from '@angular/core';
import { v4 } from 'uuid';
import { CommonModule } from '@angular/common';
import { map, FeatureGroup, imageOverlay, latLngBounds, marker, divIcon, tileLayer, polygon, polyline, rectangle, circle } from 'leaflet';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @template T
*/
class LayerHandler {
constructor() {
this.id = v4();
}
/**
* @param {?} mapRef
* @param {?} layerRef
* @return {?}
*/
initialize(mapRef, layerRef) {
this.mapRef = mapRef;
this.layerRef = layerRef;
}
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @template T
*/
class BaseLayer {
constructor() {
this.handlerIds = [];
this.id = v4();
}
/**
* @param {?} map
* @return {?}
*/
addTo(map) {
this.mapRef = map;
}
/**
* @return {?}
*/
removeFrom() {
if (this.layerRef) {
((/** @type {?} */ (this.mapRef))).removeLayer(this.layerRef);
}
}
/**
* @return {?}
*/
ngAfterContentInit() {
this.initHandlers();
this.handlerSubscription = this.handlers.changes.subscribe(this.initHandlers.bind(this));
}
/**
* @return {?}
*/
initHandlers() {
this.handlers.filter((/**
* @param {?} handler
* @return {?}
*/
handler => !this.handlerIds.includes(handler.id))).forEach(this.initHandler.bind(this));
}
/**
* @param {?} handler
* @return {?}
*/
initHandler(handler) {
handler.initialize(this.layerRef['_map'], this.layerRef);
this.handlerIds = [...this.handlerIds, handler.id];
}
/**
* @return {?}
*/
ngOnDestroy() {
this.handlerSubscription.unsubscribe();
this.removeFrom();
}
}
BaseLayer.propDecorators = {
handlers: [{ type: ContentChildren, args: [LayerHandler,] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class MapHandler {
constructor() {
this.id = v4();
}
/**
* @param {?} mapRef
* @return {?}
*/
initialize(mapRef) {
this.mapRef = mapRef;
}
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class LeafletComponent {
/**
* @param {?} elementRef
*/
constructor(elementRef) {
this.elementRef = elementRef;
this.layerIds = [];
this.handlerIds = [];
}
/**
* @return {?}
*/
ngOnInit() {
this.map = map(this.elementRef.nativeElement, Object.assign({}, this.options));
}
/**
* @return {?}
*/
ngAfterContentInit() {
this.addLayers();
this.layers.changes.subscribe(this.addLayers.bind(this));
this.addHandlers();
this.handlers.changes.subscribe(this.addHandlers.bind(this));
}
/**
* @private
* @return {?}
*/
addLayers() {
this.layers.filter((/**
* @param {?} layer
* @return {?}
*/
layer => !this.layerIds.includes(layer.id))).forEach(this.addLayer.bind(this));
}
/**
* @private
* @param {?} layer
* @return {?}
*/
addLayer(layer) {
layer.addTo(this.map);
this.layerIds = [...this.layerIds, layer.id];
}
/**
* @private
* @return {?}
*/
addHandlers() {
this.handlers.filter((/**
* @param {?} handler
* @return {?}
*/
handler => !this.handlerIds.includes(handler.id))).forEach(this.addHandler.bind(this));
}
/**
* @private
* @param {?} handler
* @return {?}
*/
addHandler(handler) {
handler.initialize(this.map);
this.handlerIds = [...this.handlerIds, handler.id];
}
}
LeafletComponent.decorators = [
{ type: Component, args: [{
selector: 'ngl-leaflet',
template: '<ng-content></ng-content>',
styles: [`
:host {
display: flex;
flex: 1 1 auto;
}
`]
}] }
];
/** @nocollapse */
LeafletComponent.ctorParameters = () => [
{ type: ElementRef }
];
LeafletComponent.propDecorators = {
options: [{ type: Input }],
layers: [{ type: ContentChildren, args: [BaseLayer,] }],
handlers: [{ type: ContentChildren, args: [MapHandler, { descendants: true },] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class NglCoreModule {
}
NglCoreModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule
],
declarations: [
LeafletComponent
],
exports: [
LeafletComponent
]
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class FeatureGroupComponent extends BaseLayer {
constructor() {
super(...arguments);
this.layerIds = [];
}
/**
* @param {?} map
* @return {?}
*/
addTo(map) {
super.addTo(map);
this.layerRef = new FeatureGroup();
this.mapRef.addLayer(this.layerRef);
this.addLayers();
this.initHandlers();
this.layers.changes.subscribe(this.addLayers.bind(this));
}
/**
* @private
* @return {?}
*/
addLayers() {
this.layers
.filter((/**
* @param {?} layer
* @return {?}
*/
layer => layer.id !== this.id))
.filter((/**
* @param {?} layer
* @return {?}
*/
layer => !this.layerIds.includes(layer.id)))
.forEach(this.addLayer.bind(this));
}
/**
* @private
* @param {?} layer
* @return {?}
*/
addLayer(layer) {
layer.addTo(this.layerRef);
this.layerIds = [...this.layerIds, layer.id];
}
}
FeatureGroupComponent.decorators = [
{ type: Component, args: [{
selector: 'ngl-feature-group',
template: '',
providers: [{ provide: BaseLayer, useExisting: forwardRef((/**
* @return {?}
*/
() => FeatureGroupComponent)) }]
}] }
];
FeatureGroupComponent.propDecorators = {
layers: [{ type: ContentChildren, args: [BaseLayer,] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class NglGroupsModule {
}
NglGroupsModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule
],
declarations: [
FeatureGroupComponent
],
exports: [
FeatureGroupComponent
]
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class ImageOverlayComponent extends BaseLayer {
/**
* @param {?} value
* @return {?}
*/
set src(value) {
this._url = value;
if (this.layerRef) {
this.layerRef.setUrl(value);
}
else {
this.prepareLayer();
}
}
/**
* @param {?} value
* @return {?}
*/
set width(value) {
this._width = value;
if (this.layerRef) {
this.layerRef.setBounds(this.prepareBounds(this._width, this._height));
}
else {
this.prepareLayer();
}
}
/**
* @param {?} value
* @return {?}
*/
set height(value) {
this._height = value;
if (this.layerRef) {
this.layerRef.setBounds(this.prepareBounds(this._width, this._height));
}
else {
this.prepareLayer();
}
}
/**
* @param {?} map
* @return {?}
*/
addTo(map) {
super.addTo(map);
this.prepareLayer();
}
/**
* @return {?}
*/
prepareLayer() {
if (this.mapRef && this._url && this._height && this._width) {
this.layerRef = imageOverlay(this._url, this.prepareBounds(this._width, this._height));
this.mapRef.addLayer(this.layerRef);
this.initHandlers();
}
}
/**
* @private
* @param {?} width
* @param {?} height
* @return {?}
*/
prepareBounds(width, height) {
/** @type {?} */
const southWest = ((/** @type {?} */ (this.mapRef))).unproject([0, height * 2], 1);
/** @type {?} */
const northEast = ((/** @type {?} */ (this.mapRef))).unproject([width * 2, 0], 1);
return latLngBounds(southWest, northEast);
}
}
ImageOverlayComponent.decorators = [
{ type: Component, args: [{
selector: 'ngl-image-overlay',
template: '',
providers: [{ provide: BaseLayer, useExisting: forwardRef((/**
* @return {?}
*/
() => ImageOverlayComponent)) }]
}] }
];
ImageOverlayComponent.propDecorators = {
src: [{ type: Input }],
width: [{ type: Input }],
height: [{ type: Input }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class NglImageOverlayModule {
}
NglImageOverlayModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule
],
declarations: [
ImageOverlayComponent
],
exports: [
ImageOverlayComponent
]
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class MarkerComponent extends BaseLayer {
/**
* @param {?} value
* @return {?}
*/
set latLng(value) {
this._latLng = value;
this.prepareLayer();
}
/**
* @private
* @return {?}
*/
prepareLayer() {
if (this.mapRef && this._latLng) {
if (this.layerRef) {
this.layerRef.setLatLng(this._latLng);
}
else {
this.createLayer();
}
}
}
/**
* @private
* @return {?}
*/
createLayer() {
this.layerRef = marker(this._latLng, {
icon: divIcon()
});
this.mapRef.addLayer(this.layerRef);
this.initHandlers();
}
/**
* @param {?} map
* @return {?}
*/
addTo(map) {
super.addTo(map);
this.prepareLayer();
}
}
MarkerComponent.decorators = [
{ type: Component, args: [{
selector: 'ngl-marker',
template: '',
providers: [{ provide: BaseLayer, useExisting: forwardRef((/**
* @return {?}
*/
() => MarkerComponent)) }]
}] }
];
MarkerComponent.propDecorators = {
latLng: [{ type: Input }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class NglMarkerModule {
}
NglMarkerModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule
],
declarations: [
MarkerComponent
],
exports: [
MarkerComponent
]
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class TileLayerComponent extends BaseLayer {
/**
* @param {?} map
* @return {?}
*/
addTo(map) {
super.addTo(map);
if (!this.layerRef) {
this.layerRef = tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
this.mapRef.addLayer(this.layerRef);
this.initHandlers();
}
}
}
TileLayerComponent.decorators = [
{ type: Component, args: [{
selector: 'ngl-tile-layer',
template: '',
providers: [{ provide: BaseLayer, useExisting: forwardRef((/**
* @return {?}
*/
() => TileLayerComponent)) }]
}] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class NglTileLayerModule {
}
NglTileLayerModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule
],
declarations: [
TileLayerComponent
],
exports: [
TileLayerComponent
]
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class PolygonComponent extends BaseLayer {
/**
* @param {?} value
* @return {?}
*/
set coordinates(value) {
this._coordinates = value;
if (this.layerRef) {
this.layerRef.setLatLngs(value);
}
else {
this.createLayer();
}
}
/**
* @param {?} value
* @return {?}
*/
set options(value) {
this._options = value;
if (this.layerRef) {
this.layerRef.setStyle(value);
}
else {
this.createLayer();
}
}
/**
* @return {?}
*/
createLayer() {
if (this.mapRef && this._coordinates) {
this.layerRef = polygon(this._coordinates, Object.assign({}, this._options));
this.mapRef.addLayer(this.layerRef);
this.initHandlers();
}
}
/**
* @param {?} map
* @return {?}
*/
addTo(map) {
super.addTo(map);
if (!this.layerRef) {
this.createLayer();
}
}
}
PolygonComponent.decorators = [
{ type: Component, args: [{
selector: 'ngl-polygon',
template: '',
providers: [{ provide: BaseLayer, useExisting: forwardRef((/**
* @return {?}
*/
() => PolygonComponent)) }]
}] }
];
PolygonComponent.propDecorators = {
coordinates: [{ type: Input }],
options: [{ type: Input }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class PolylineComponent extends BaseLayer {
/**
* @param {?} value
* @return {?}
*/
set coordinates(value) {
this._coordinates = value;
if (this.layerRef) {
this.layerRef.setLatLngs(value);
}
else {
this.createLayer();
}
}
/**
* @param {?} value
* @return {?}
*/
set options(value) {
this._options = value;
if (this.layerRef) {
this.layerRef.setStyle(value);
}
else {
this.createLayer();
}
}
/**
* @param {?} map
* @return {?}
*/
addTo(map) {
super.addTo(map);
if (!this.layerRef && this._coordinates) {
this.createLayer();
}
}
/**
* @private
* @return {?}
*/
createLayer() {
if (this.mapRef && this._coordinates) {
this.layerRef = polyline(this._coordinates, Object.assign({}, this._options));
this.mapRef.addLayer(this.layerRef);
this.initHandlers();
}
}
}
PolylineComponent.decorators = [
{ type: Component, args: [{
selector: 'ngl-polyline',
template: '',
providers: [{ provide: BaseLayer, useExisting: forwardRef((/**
* @return {?}
*/
() => PolylineComponent)) }]
}] }
];
PolylineComponent.propDecorators = {
coordinates: [{ type: Input }],
options: [{ type: Input }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class RectangleComponent extends BaseLayer {
/**
* @param {?} value
* @return {?}
*/
set bounds(value) {
this._bounds = value;
if (this.layerRef) {
this.layerRef.setBounds(value);
}
else {
this.createLayer();
}
}
/**
* @param {?} value
* @return {?}
*/
set options(value) {
this._options = value;
if (this.layerRef) {
this.layerRef.setStyle(value);
}
else {
this.createLayer();
}
}
/**
* @return {?}
*/
createLayer() {
if (this.mapRef && this._bounds) {
this.layerRef = rectangle(this._bounds, Object.assign({}, this._options));
this.mapRef.addLayer(this.layerRef);
this.initHandlers();
}
}
/**
* @param {?} map
* @return {?}
*/
addTo(map) {
super.addTo(map);
if (!this.layerRef) {
this.createLayer();
}
}
}
RectangleComponent.decorators = [
{ type: Component, args: [{
selector: 'ngl-rectangle',
template: '',
providers: [{ provide: BaseLayer, useExisting: forwardRef((/**
* @return {?}
*/
() => RectangleComponent)) }]
}] }
];
RectangleComponent.propDecorators = {
bounds: [{ type: Input }],
options: [{ type: Input }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class CircleComponent extends BaseLayer {
/**
* @param {?} value
* @return {?}
*/
set center(value) {
this._center = value;
if (this.layerRef) {
this.layerRef.setLatLng(value);
}
else {
this.createLayer();
}
}
/**
* @param {?} value
* @return {?}
*/
set radius(value) {
this._radius = value;
if (this.layerRef) {
this.layerRef.setRadius(value);
}
else {
this.createLayer();
}
}
/**
* @param {?} value
* @return {?}
*/
set options(value) {
this._options = value;
if (this.layerRef) {
this.layerRef.setStyle(value);
}
}
/**
* @param {?} map
* @return {?}
*/
addTo(map) {
super.addTo(map);
if (!this.layerRef) {
this.createLayer();
}
}
/**
* @private
* @return {?}
*/
createLayer() {
if (this.mapRef && this._center && this._radius) {
this.layerRef = circle(this._center, Object.assign({}, this._options, { radius: this._radius }));
this.mapRef.addLayer(this.layerRef);
this.initHandlers();
}
}
}
CircleComponent.decorators = [
{ type: Component, args: [{
selector: 'ngl-circle',
template: '',
providers: [{ provide: BaseLayer, useExisting: forwardRef((/**
* @return {?}
*/
() => CircleComponent)) }]
}] }
];
CircleComponent.propDecorators = {
center: [{ type: Input }],
radius: [{ type: Input }],
options: [{ type: Input }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class NglVectorsModule {
}
NglVectorsModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule
],
declarations: [
PolygonComponent,
PolylineComponent,
RectangleComponent,
CircleComponent
],
exports: [
PolygonComponent,
PolylineComponent,
RectangleComponent,
CircleComponent
]
},] }
];
export { BaseLayer, CircleComponent, FeatureGroupComponent, ImageOverlayComponent, LayerHandler, LeafletComponent, MapHandler, MarkerComponent, NglCoreModule, NglGroupsModule, NglImageOverlayModule, NglMarkerModule, NglTileLayerModule, NglVectorsModule, PolygonComponent, PolylineComponent, RectangleComponent, TileLayerComponent };
//# sourceMappingURL=angular-leaflet.js.map