@artstesh/maps 4.0.7 → 4.0.9

package/dist/fesm2015/maps-components.mjs

@@ -3,25 +3,28 @@ import { Component, Injectable, ChangeDetectionStrategy, Input, ViewChild, NgMod
 import * as i4 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { Feature } from 'ol';
-import { Point } from 'ol/geom';
+import { Point, LineString } from 'ol/geom';
 import { GeoJSON, WKT } from 'ol/format';
 import { getCenter, createEmpty, extend } from 'ol/extent';
-import { useGeographic, get } from 'ol/proj';
-import { Subject } from 'rxjs';
-import { PostboyService, PostboyAbstractRegistrator } from '@artstesh/postboy';
-import Map from 'ol/Map';
-import View from 'ol/View';
+import { get, useGeographic, transform } from 'ol/proj';
+import { PostboyGenericMessage, PostboyCallbackMessage, PostboyService, PostboyAbstractRegistrator } from '@artstesh/postboy';
+import { first, filter, auditTime } from 'rxjs/operators';
+import { Vector, XYZ } from 'ol/source';
+import { Draw } from 'ol/interaction';
+import { createRegularPolygon } from 'ol/interaction/Draw';
 import TileLayer from 'ol/layer/Tile';
 import OSM from 'ol/source/OSM';
-import { filter, first } from 'rxjs/operators';
-import { XYZ, Vector } from 'ol/source';
 import { Vector as Vector$1 } from 'ol/layer';
-import Overlay from 'ol/Overlay';
 import { bbox } from 'ol/loadingstrategy';
-import { fromExtent } from 'ol/geom/Polygon';
+import Polygon, { fromExtent } from 'ol/geom/Polygon';
 import Cluster from 'ol/source/Cluster';
+import { combineLatest } from 'rxjs';
+import Map from 'ol/Map';
+import View from 'ol/View';
+import Overlay from 'ol/Overlay';
 import Style from 'ol/style/Style';
 import { Icon, Circle, Fill, Stroke, Text } from 'ol/style';
+import { METERS_PER_UNIT } from 'ol/proj/epsg4326';
 
 class DestructibleComponent {
     constructor() {
@@ -127,7 +130,8 @@ IdGenerator.collection = 'ABCDEFGHIJKLMNOPQRSTUVWXTZ0123456789'.split('');
 
 class MapConstants {
 }
-MapConstants.FeatureInfo = 'f-info';
+MapConstants.FeatureInfo = 'f-info';
+MapConstants.DrawingLayerId = '93a981756ec7';
 
 class MarkerModel {
     constructor(lat, lng, id, info) {
@@ -172,21 +176,19 @@ class PolygonModel {
     }
 }
 
-class GenericMessage {
-}
-class CallbackMessage extends GenericMessage {
-    constructor() {
-        super(...arguments);
-        this.result$ = new Subject();
-        this.result = this.result$.asObservable();
-    }
-    finish(value) {
-        this.result$.next(value);
-        this.result$.complete();
-    }
-}
+var DrawingType;
+(function (DrawingType) {
+    DrawingType[DrawingType["Polygon"] = 1] = "Polygon";
+    DrawingType[DrawingType["Circle"] = 2] = "Circle";
+})(DrawingType || (DrawingType = {}));
+
+var FeatureOutputFormat;
+(function (FeatureOutputFormat) {
+    FeatureOutputFormat[FeatureOutputFormat["GeoJson"] = 1] = "GeoJson";
+    FeatureOutputFormat[FeatureOutputFormat["WKT"] = 2] = "WKT";
+})(FeatureOutputFormat || (FeatureOutputFormat = {}));
 
-class MapRenderedEvent extends GenericMessage {
+class MapRenderedEvent extends PostboyGenericMessage {
     constructor(map) {
         super();
         this.map = map;
@@ -197,7 +199,7 @@ class MapRenderedEvent extends GenericMessage {
 }
 MapRenderedEvent.ID = 'b6121807-3b89-4cd3-82cf-089d2cefdc4f';
 
-class MapClickEvent extends GenericMessage {
+class MapClickEvent extends PostboyGenericMessage {
     constructor(coordinates, entities, features) {
         super();
         this.coordinates = coordinates;
@@ -210,7 +212,19 @@ class MapClickEvent extends GenericMessage {
 }
 MapClickEvent.ID = '323df526-8d9c-49c6-83e8-6e9a1e7762f7';
 
-class CloseTooltipCommand extends GenericMessage {
+class MapMoveEndEvent extends PostboyGenericMessage {
+    constructor(zoom, extent) {
+        super();
+        this.zoom = zoom;
+        this.extent = extent;
+    }
+    get id() {
+        return MapMoveEndEvent.ID;
+    }
+}
+MapMoveEndEvent.ID = 'f21f783e-b5af-4489-9fec-8027fd07a8ad';
+
+class CloseTooltipCommand extends PostboyGenericMessage {
     constructor(tooltipId) {
         super();
         this.tooltipId = tooltipId;
@@ -221,7 +235,27 @@ class CloseTooltipCommand extends GenericMessage {
 }
 CloseTooltipCommand.ID = '4896d52c-e34f-4994-bcfd-32832d12dbe4';
 
-class AddLayerCommand extends GenericMessage {
+class StartDrawingCommand extends PostboyCallbackMessage {
+    constructor(type, style, format = FeatureOutputFormat.GeoJson) {
+        super();
+        this.type = type;
+        this.style = style;
+        this.format = format;
+    }
+    get id() {
+        return StartDrawingCommand.ID;
+    }
+}
+StartDrawingCommand.ID = 'da904f4b-a1c8-4db7-a6af-14d9ee18ec8c';
+
+class CancelDrawingCommand extends PostboyGenericMessage {
+    get id() {
+        return CancelDrawingCommand.ID;
+    }
+}
+CancelDrawingCommand.ID = '7d38d983-feba-4176-a66b-18175e5ecd6b';
+
+class AddLayerCommand extends PostboyGenericMessage {
     constructor(layer) {
         super();
         this.layer = layer;
@@ -232,7 +266,7 @@ class AddLayerCommand extends GenericMessage {
 }
 AddLayerCommand.ID = 'd93e250f-92bc-43ac-9c6a-46c521a1aaa5';
 
-class PlaceLayerFeaturesCommand extends GenericMessage {
+class PlaceLayerFeaturesCommand extends PostboyGenericMessage {
     constructor(layer, features) {
         super();
         this.layer = layer;
@@ -244,7 +278,7 @@ class PlaceLayerFeaturesCommand extends GenericMessage {
 }
 PlaceLayerFeaturesCommand.ID = '8caf86bc-869b-426f-b36d-4642f6b8aab0';
 
-class RemoveLayerCommand extends GenericMessage {
+class RemoveLayerCommand extends PostboyGenericMessage {
     constructor(layer) {
         super();
         this.layer = layer;
@@ -255,7 +289,7 @@ class RemoveLayerCommand extends GenericMessage {
 }
 RemoveLayerCommand.ID = 'ab484e0e-e185-45cd-8434-12101f3c7eb1';
 
-class AddTileCommand extends GenericMessage {
+class AddTileCommand extends PostboyGenericMessage {
     constructor(layer) {
         super();
         this.layer = layer;
@@ -266,7 +300,7 @@ class AddTileCommand extends GenericMessage {
 }
 AddTileCommand.ID = '25b7df28-72ce-4453-9fe6-54285a2fdc57';
 
-class RemoveTileCommand extends GenericMessage {
+class RemoveTileCommand extends PostboyGenericMessage {
     constructor(layer) {
         super();
         this.layer = layer;
@@ -277,7 +311,7 @@ class RemoveTileCommand extends GenericMessage {
 }
 RemoveTileCommand.ID = 'c36ccc0b-5638-4819-b148-2de57a59a5b7';
 
-class FitToFeaturesCommand extends GenericMessage {
+class FitToFeaturesCommand extends PostboyGenericMessage {
     constructor(features, zoomAfter = 0) {
         super();
         this.features = features;
@@ -289,17 +323,51 @@ class FitToFeaturesCommand extends GenericMessage {
 }
 FitToFeaturesCommand.ID = '76cdc091-3793-4b6c-82f7-1e0334cf08a8';
 
+class GetLayerQuery extends PostboyCallbackMessage {
+    constructor(name) {
+        super();
+        this.name = name;
+    }
+    get id() {
+        return GetLayerQuery.ID;
+    }
+}
+GetLayerQuery.ID = '5c04c87b-8a93-4c2a-979e-d1e313d860ed';
+
+class DrawingFinishedEvent extends PostboyGenericMessage {
+    constructor() {
+        super();
+    }
+    get id() {
+        return DrawingFinishedEvent.ID;
+    }
+}
+DrawingFinishedEvent.ID = 'c724b68e-b4eb-4783-90f1-a8e31973fd36';
+
+class GenerateDrawQuery extends PostboyCallbackMessage {
+    constructor(layer, style, type) {
+        super();
+        this.layer = layer;
+        this.style = style;
+        this.type = type;
+    }
+    get id() {
+        return GenerateDrawQuery.ID;
+    }
+}
+GenerateDrawQuery.ID = 'f01c99ba-0953-4ab5-82f9-04e6fbb678c1';
+
 class MapPostboyService extends PostboyService {
     constructor() {
-        super(...arguments);
-        this.observe = (id) => this.subscribe(id);
+        super();
+        this.addLocker({ locker: StartDrawingCommand.ID, unlocker: DrawingFinishedEvent.ID, locking: [MapClickEvent.ID] });
     }
 }
-MapPostboyService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapPostboyService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+MapPostboyService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapPostboyService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
 MapPostboyService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapPostboyService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapPostboyService, decorators: [{
             type: Injectable
-        }] });
+        }], ctorParameters: function () { return []; } });
 
 class MapManagementService {
     constructor(postboy) {
@@ -313,6 +381,7 @@ class MapManagementService {
         this.observePlaceFeatures();
         this.observeAddTile();
         this.observeRemoveTile();
+        this.observeLayerQuery();
     }
     observeRemoveTile() {
         this.postboy.subscribe(RemoveTileCommand.ID).subscribe((c) => {
@@ -321,6 +390,9 @@ class MapManagementService {
             this.map.removeLayer(c.layer);
         });
     }
+    observeLayerQuery() {
+        this.postboy.subscribe(GetLayerQuery.ID).subscribe((ev) => { var _a; return ev.finish((_a = this.layers[ev.name]) !== null && _a !== void 0 ? _a : null); });
+    }
     observeAddTile() {
         this.postboy.subscribe(AddTileCommand.ID).subscribe((c) => {
             if (!this.map)
@@ -373,7 +445,16 @@ class MapStateService {
         this.postboy = postboy;
     }
     up() {
-        this.postboy.subscribe(MapRenderedEvent.ID).subscribe((m) => (this.map = m));
+        this.postboy.subscribe(MapRenderedEvent.ID).subscribe((ev) => {
+            var _a;
+            this.map = ev.map;
+            (_a = this.map) === null || _a === void 0 ? void 0 : _a.on('moveend', () => {
+                var _a, _b;
+                const zoom = Math.floor(((_a = this.map) === null || _a === void 0 ? void 0 : _a.getView().getZoom()) || -1);
+                const extent = ((_b = this.map) === null || _b === void 0 ? void 0 : _b.getView().calculateExtent()) || [];
+                this.postboy.fire(new MapMoveEndEvent(zoom, extent));
+            });
+        });
     }
 }
 MapStateService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapStateService, deps: [{ token: MapPostboyService }], target: i0.ɵɵFactoryTarget.Injectable });
@@ -464,10 +545,98 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             type: Injectable
         }], ctorParameters: function () { return [{ type: MapPostboyService }]; } });
 
+class DrawingService {
+    constructor(postboy) {
+        this.postboy = postboy;
+    }
+    up() {
+        this.postboy.subscribe(StartDrawingCommand.ID).subscribe((ev) => {
+            this.draw((l) => {
+                if (!l || !this.map) {
+                    this.clearInteraction(l);
+                    return;
+                }
+                const drawQuery = new GenerateDrawQuery(l, ev.style, ev.type);
+                drawQuery.result.subscribe((draw) => {
+                    var _a;
+                    const cancelSub = this.observeCancelation(ev, l);
+                    this.drawInteraction = draw;
+                    (_a = this.map) === null || _a === void 0 ? void 0 : _a.addInteraction(this.drawInteraction);
+                    this.drawInteraction.on('drawend', (evt) => {
+                        cancelSub.unsubscribe();
+                        this.onEnd(evt, ev, l);
+                    });
+                });
+                this.postboy.fire(drawQuery);
+            });
+        });
+        this.observeMapRender();
+    }
+    onEnd(evt, command, layer) {
+        command.finish(command.format === FeatureOutputFormat.GeoJson
+            ? new GeoJSON().writeFeature(evt.feature)
+            : new WKT().writeFeature(evt.feature));
+        this.clearInteraction(layer);
+    }
+    observeMapRender() {
+        this.postboy.subscribe(MapRenderedEvent.ID).subscribe((m) => {
+            this.map = m.map;
+        });
+    }
+    draw(action) {
+        const query = new GetLayerQuery(MapConstants.DrawingLayerId);
+        query.result.subscribe((l) => action(l));
+        this.postboy.fire(query);
+    }
+    observeCancelation(ev, layer) {
+        return this.postboy
+            .subscribe(CancelDrawingCommand.ID)
+            .pipe(first())
+            .subscribe(() => {
+            ev.finish(null);
+            this.clearInteraction(layer);
+        });
+    }
+    clearInteraction(layer) {
+        var _a;
+        if (!!this.drawInteraction) {
+            (_a = this.map) === null || _a === void 0 ? void 0 : _a.removeInteraction(this.drawInteraction);
+            layer === null || layer === void 0 ? void 0 : layer.setSource(new Vector({}));
+        }
+        setTimeout(() => this.postboy.fire(new DrawingFinishedEvent()), 300);
+    }
+}
+DrawingService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DrawingService, deps: [{ token: MapPostboyService }], target: i0.ɵɵFactoryTarget.Injectable });
+DrawingService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DrawingService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DrawingService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: MapPostboyService }]; } });
+
+class DrawingGenerationService {
+    constructor(postboy) {
+        this.postboy = postboy;
+    }
+    up() {
+        this.postboy.subscribe(GenerateDrawQuery.ID).subscribe((ev) => {
+            ev.finish(new Draw({
+                source: ev.layer.getSource(),
+                type: DrawingType[ev.type],
+                style: ev.style,
+                geometryFunction: ev.type !== DrawingType.Circle ? undefined : createRegularPolygon(32),
+            }));
+        });
+    }
+}
+DrawingGenerationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DrawingGenerationService, deps: [{ token: MapPostboyService }], target: i0.ɵɵFactoryTarget.Injectable });
+DrawingGenerationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DrawingGenerationService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DrawingGenerationService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: MapPostboyService }]; } });
+
 class MessageRegistratorService extends PostboyAbstractRegistrator {
-    constructor(service, management, state, feature, interaction) {
+    constructor(service, management, state, feature, interaction, drawing, drawGenerator) {
         super(service);
-        this.registerServices([management, state, interaction, feature]);
+        this.registerServices([management, state, interaction, feature, drawing, drawGenerator]);
     }
     _up() {
         this.registerReplay(MapRenderedEvent.ID);
@@ -479,136 +648,19 @@ class MessageRegistratorService extends PostboyAbstractRegistrator {
         this.registerSubject(MapClickEvent.ID);
         this.registerSubject(CloseTooltipCommand.ID);
         this.registerSubject(FitToFeaturesCommand.ID);
+        this.registerSubject(MapMoveEndEvent.ID);
+        this.registerSubject(CancelDrawingCommand.ID);
+        this.registerSubject(StartDrawingCommand.ID);
+        this.registerSubject(GetLayerQuery.ID);
+        this.registerSubject(DrawingFinishedEvent.ID);
+        this.registerSubject(GenerateDrawQuery.ID);
     }
 }
-MessageRegistratorService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MessageRegistratorService, deps: [{ token: MapPostboyService }, { token: MapManagementService }, { token: MapStateService }, { token: MapFeatureService }, { token: MapClickService }], target: i0.ɵɵFactoryTarget.Injectable });
+MessageRegistratorService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MessageRegistratorService, deps: [{ token: MapPostboyService }, { token: MapManagementService }, { token: MapStateService }, { token: MapFeatureService }, { token: MapClickService }, { token: DrawingService }, { token: DrawingGenerationService }], target: i0.ɵɵFactoryTarget.Injectable });
 MessageRegistratorService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MessageRegistratorService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MessageRegistratorService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: MapPostboyService }, { type: MapManagementService }, { type: MapStateService }, { type: MapFeatureService }, { type: MapClickService }]; } });
-
-class MapPlateFactory {
-    build(settings) {
-        return new Map({
-            controls: [],
-            view: new View({
-                center: (settings === null || settings === void 0 ? void 0 : settings.center) || [0, 0],
-                zoom: (settings === null || settings === void 0 ? void 0 : settings.zoom) || 4,
-                minZoom: (settings === null || settings === void 0 ? void 0 : settings.minZoom) || 0,
-                maxZoom: (settings === null || settings === void 0 ? void 0 : settings.maxZoom) || 19,
-            }),
-            layers: [],
-        });
-    }
-}
-MapPlateFactory.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapPlateFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-MapPlateFactory.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapPlateFactory, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapPlateFactory, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
-
-class OsmTileLayerComponent extends DestructibleComponent {
-    constructor() {
-        super();
-        this._url = '';
-    }
-    set url(value) {
-        if (!value || this._url === value)
-            return;
-        this._url = value;
-        this.initLayer();
-    }
-    set map(value) {
-        if (!value || this._map === value)
-            return;
-        this._map = value;
-        this.initLayer();
-    }
-    ngOnInit() { }
-    ngOnDestroy() {
-        var _a, _b;
-        if (this.layer) {
-            (_a = this._map) === null || _a === void 0 ? void 0 : _a.removeLayer(this.layer);
-        }
-        // @ts-ignore
-        (_b = this.layer) === null || _b === void 0 ? void 0 : _b.setMap(null);
-    }
-    initLayer() {
-        if (!this._url || !this._map)
-            return;
-        if (this.layer)
-            this._map.removeLayer(this.layer);
-        this.layer = new TileLayer({
-            source: new OSM({
-                url: this._url,
-            }),
-        });
-        this.layer.set('name', 'osm-tile-layer');
-        this._map.addLayer(this.layer);
-    }
-}
-OsmTileLayerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OsmTileLayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-OsmTileLayerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: OsmTileLayerComponent, selector: "lib-osm-tile-layer", inputs: { url: "url", map: "map" }, usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OsmTileLayerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-osm-tile-layer', template: '', changeDetection: ChangeDetectionStrategy.OnPush }]
-        }], ctorParameters: function () { return []; }, propDecorators: { url: [{
-                type: Input
-            }], map: [{
-                type: Input
-            }] } });
-
-class MapPlateComponent extends DestructibleComponent {
-    constructor(elementRef, postboy, mapFactory, registrator, detector) {
-        super();
-        this.elementRef = elementRef;
-        this.postboy = postboy;
-        this.mapFactory = mapFactory;
-        this.registrator = registrator;
-        this.detector = detector;
-        this.osmUrl = '';
-        this._settings = new MapSettings();
-        this.onDestroy = () => {
-            this.registrator.down();
-        };
-        registrator.up();
-    }
-    set settings(value) {
-        if (!value || this._settings.isSame(value))
-            return;
-        this._settings = value;
-        this.setOsm();
-    }
-    ngOnInit() {
-        useGeographic();
-        this.map = this.mapFactory.build(this._settings);
-        this.map.setTarget(this.elementRef.nativeElement);
-        this.detector.detectChanges();
-        this.map.once('postrender', () => {
-            this.map.updateSize();
-            this.postboy.fire(new MapRenderedEvent(this.map));
-        });
-        this.setOsm();
-    }
-    setOsm() {
-        if (!this.map)
-            return;
-        this.osmUrl = `https://mt{0-3}.google.com/vt/lyrs=${MapLyrsLabel.get(this._settings.lyrs)}&hl=${this._settings.language}&x={x}&y={y}&z={z}`;
-        this.detector.detectChanges();
-        this.map.updateSize();
-    }
-}
-MapPlateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapPlateComponent, deps: [{ token: i0.ElementRef }, { token: MapPostboyService }, { token: MapPlateFactory }, { token: MessageRegistratorService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-MapPlateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapPlateComponent, selector: "lib-map-plate", inputs: { settings: "settings" }, providers: [MessageRegistratorService, MapStateService, MapManagementService, MapClickService, MapFeatureService], usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n<lib-osm-tile-layer *ngIf=\"osmUrl && map\" [map]=\"map\" [url]=\"osmUrl\"></lib-osm-tile-layer>\n", styles: ["lib-map-plate{position:relative;display:flex;flex-direction:column;height:100%}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: OsmTileLayerComponent, selector: "lib-osm-tile-layer", inputs: ["url", "map"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapPlateComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-map-plate', changeDetection: ChangeDetectionStrategy.OnPush, providers: [MessageRegistratorService, MapStateService, MapManagementService, MapClickService, MapFeatureService], template: "<ng-content></ng-content>\n<lib-osm-tile-layer *ngIf=\"osmUrl && map\" [map]=\"map\" [url]=\"osmUrl\"></lib-osm-tile-layer>\n", styles: ["lib-map-plate{position:relative;display:flex;flex-direction:column;height:100%}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: MapPostboyService }, { type: MapPlateFactory }, { type: MessageRegistratorService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { settings: [{
-                type: Input
-            }] } });
+        }], ctorParameters: function () { return [{ type: MapPostboyService }, { type: MapManagementService }, { type: MapStateService }, { type: MapFeatureService }, { type: MapClickService }, { type: DrawingService }, { type: DrawingGenerationService }]; } });
 
 class TileLayerSettings {
     constructor() {
@@ -741,35 +793,86 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }] } });
 
-class FeatureLayerSettings {
+class OsmTileLayerComponent extends DestructibleComponent {
     constructor() {
-        this.name = IdGenerator.get();
-        this.zIndex = 1;
-        this.maxZoom = 19;
-        this.minZoom = 0;
-    }
-    static copy(model) {
-        const result = new FeatureLayerSettings();
-        result.name = model.name;
-        result.maxZoom = model.maxZoom;
-        result.minZoom = model.minZoom;
-        result.zIndex = model.zIndex;
-        result.style = model.style;
-        return result;
-    }
-    setZIndex(zIndex) {
-        return FeatureLayerSettings.copy(Object.assign(Object.assign({}, this), { zIndex }));
+        super();
+        this._url = '';
     }
-    setName(name) {
-        return FeatureLayerSettings.copy(Object.assign(Object.assign({}, this), { name }));
+    set url(value) {
+        if (!value || this._url === value)
+            return;
+        this._url = value;
+        this.initLayer();
     }
-    setMaxZoom(maxZoom) {
-        return FeatureLayerSettings.copy(Object.assign(Object.assign({}, this), { maxZoom }));
+    set map(value) {
+        if (!value || this._map === value)
+            return;
+        this._map = value;
+        this.initLayer();
     }
-    setMinZoom(minZoom) {
-        return FeatureLayerSettings.copy(Object.assign(Object.assign({}, this), { minZoom }));
+    ngOnInit() { }
+    ngOnDestroy() {
+        var _a, _b;
+        if (this.layer) {
+            (_a = this._map) === null || _a === void 0 ? void 0 : _a.removeLayer(this.layer);
+        }
+        // @ts-ignore
+        (_b = this.layer) === null || _b === void 0 ? void 0 : _b.setMap(null);
     }
-    setStyle(style) {
+    initLayer() {
+        if (!this._url || !this._map)
+            return;
+        if (this.layer)
+            this._map.removeLayer(this.layer);
+        this.layer = new TileLayer({
+            source: new OSM({
+                url: this._url,
+            }),
+        });
+        this.layer.set('name', 'osm-tile-layer');
+        this._map.addLayer(this.layer);
+    }
+}
+OsmTileLayerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OsmTileLayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+OsmTileLayerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: OsmTileLayerComponent, selector: "lib-osm-tile-layer", inputs: { url: "url", map: "map" }, usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OsmTileLayerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-osm-tile-layer', template: '', changeDetection: ChangeDetectionStrategy.OnPush }]
+        }], ctorParameters: function () { return []; }, propDecorators: { url: [{
+                type: Input
+            }], map: [{
+                type: Input
+            }] } });
+
+class FeatureLayerSettings {
+    constructor() {
+        this.name = IdGenerator.get();
+        this.zIndex = 1;
+        this.maxZoom = 19;
+        this.minZoom = 0;
+    }
+    static copy(model) {
+        const result = new FeatureLayerSettings();
+        result.name = model.name;
+        result.maxZoom = model.maxZoom;
+        result.minZoom = model.minZoom;
+        result.zIndex = model.zIndex;
+        result.style = model.style;
+        return result;
+    }
+    setZIndex(zIndex) {
+        return FeatureLayerSettings.copy(Object.assign(Object.assign({}, this), { zIndex }));
+    }
+    setName(name) {
+        return FeatureLayerSettings.copy(Object.assign(Object.assign({}, this), { name }));
+    }
+    setMaxZoom(maxZoom) {
+        return FeatureLayerSettings.copy(Object.assign(Object.assign({}, this), { maxZoom }));
+    }
+    setMinZoom(minZoom) {
+        return FeatureLayerSettings.copy(Object.assign(Object.assign({}, this), { minZoom }));
+    }
+    setStyle(style) {
         return FeatureLayerSettings.copy(Object.assign(Object.assign({}, this), { style }));
     }
     isSame(model) {
@@ -851,175 +954,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }] } });
 
-class MarkersComponent extends DestructibleComponent {
-    constructor(postboy) {
-        super();
-        this.postboy = postboy;
-        this.layerName = '';
-        this._markers = [];
-    }
-    set markers(value) {
-        this._markers = value;
-        this.putMarkers();
-    }
-    ngOnInit() {
-        this.postboy
-            .subscribe(MapRenderedEvent.ID)
-            .pipe(filter((m) => !!m), first())
-            .subscribe(() => this.putMarkers());
-    }
-    putMarkers() {
-        var _a;
-        if (!((_a = this._markers) === null || _a === void 0 ? void 0 : _a.length))
-            return;
-        this.postboy.fire(new PlaceLayerFeaturesCommand(this.layerName, this._markers.map((m) => m.feature)));
-    }
-}
-MarkersComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MarkersComponent, deps: [{ token: MapPostboyService }], target: i0.ɵɵFactoryTarget.Component });
-MarkersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MarkersComponent, selector: "lib-markers", inputs: { layerName: "layerName", markers: "markers" }, usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MarkersComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-markers', template: '', changeDetection: ChangeDetectionStrategy.OnPush }]
-        }], ctorParameters: function () { return [{ type: MapPostboyService }]; }, propDecorators: { layerName: [{
-                type: Input
-            }], markers: [{
-                type: Input
-            }] } });
-
-class TooltipSettings {
-    constructor(id) {
-        this.containerClass = 'custom-tooltip-class';
-        this.show = (e) => true;
-        this.id = id !== null && id !== void 0 ? id : IdGenerator.get();
-    }
-    static copy(model) {
-        const result = new TooltipSettings(model.id);
-        result.show = model.show;
-        result.containerClass = model.containerClass;
-        return result;
-    }
-    setShow(show) {
-        return TooltipSettings.copy(Object.assign(Object.assign({}, this), { show }));
-    }
-    setClass(containerClass) {
-        return TooltipSettings.copy(Object.assign(Object.assign({}, this), { containerClass }));
-    }
-    isSame(model) {
-        if (this.show !== model.show)
-            return false;
-        if (this.containerClass !== model.containerClass)
-            return false;
-        if (this.id !== model.id)
-            return false;
-        return true;
-    }
-}
-
-class TooltipComponent extends DestructibleComponent {
-    set settings(value) {
-        if (!value || this._settings.isSame(value))
-            return;
-        this._settings = value;
-        this.detector.detectChanges();
-    }
-    constructor(postboy, detector) {
-        super();
-        this.postboy = postboy;
-        this.detector = detector;
-        this._settings = new TooltipSettings();
-        this.show = false;
-        this.removeOverlay = () => {
-            var _a;
-            !!this.overlay && ((_a = this.map) === null || _a === void 0 ? void 0 : _a.removeOverlay(this.overlay));
-            this.show = false;
-        };
-        this.options = (coordinates) => {
-            var _a;
-            return {
-                element: (_a = this.container) === null || _a === void 0 ? void 0 : _a.nativeElement,
-                autoPan: false,
-                autoPanAnimation: { duration: 0 },
-                position: coordinates,
-            };
-        };
-    }
-    ngOnInit() {
-        this.subs.push(this.observeMapRender());
-        this.subs.push(this.observeMapClick());
-        this.subs.push(this.observeClose());
-    }
-    observeMapClick() {
-        return this.postboy.subscribe(MapClickEvent.ID).subscribe((ev) => {
-            this._settings.show(ev) ? this.addOverlay(ev.coordinates) : this.removeOverlay();
-        });
-    }
-    observeClose() {
-        return this.postboy
-            .subscribe(CloseTooltipCommand.ID)
-            .pipe(filter((ev) => ev.tooltipId === this._settings.id))
-            .subscribe(() => this.removeOverlay());
-    }
-    observeMapRender() {
-        return this.postboy.subscribe(MapRenderedEvent.ID).subscribe((m) => {
-            this.map = m.map;
-        });
-    }
-    addOverlay(coordinates) {
-        var _a;
-        this.removeOverlay();
-        this.overlay = new Overlay(this.options(coordinates));
-        (_a = this.map) === null || _a === void 0 ? void 0 : _a.addOverlay(this.overlay);
-        this.show = true;
-        this.detector.detectChanges();
-    }
-}
-TooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TooltipComponent, deps: [{ token: MapPostboyService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-TooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TooltipComponent, selector: "lib-tooltip", inputs: { settings: "settings" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["tip"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div #tip [class]=\"['tooltip-wrapper', _settings.containerClass]\" [hidden]=\"!show\">\r\n  <ng-content></ng-content>\r\n</div>\r\n", styles: [".tooltip-wrapper{position:absolute}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TooltipComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-tooltip', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #tip [class]=\"['tooltip-wrapper', _settings.containerClass]\" [hidden]=\"!show\">\r\n  <ng-content></ng-content>\r\n</div>\r\n", styles: [".tooltip-wrapper{position:absolute}\n"] }]
-        }], ctorParameters: function () { return [{ type: MapPostboyService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { container: [{
-                type: ViewChild,
-                args: ['tip']
-            }], settings: [{
-                type: Input
-            }] } });
-
-class PolygonsComponent extends DestructibleComponent {
-    constructor(postboy) {
-        super();
-        this.postboy = postboy;
-        this.layerName = '';
-        this._polygons = [];
-    }
-    set polygons(value) {
-        this._polygons = value;
-        this.putPolygons();
-    }
-    ngOnInit() {
-        this.postboy
-            .subscribe(MapRenderedEvent.ID)
-            .pipe(filter((m) => !!m), first())
-            .subscribe(() => this.putPolygons());
-    }
-    putPolygons() {
-        var _a;
-        if (!((_a = this._polygons) === null || _a === void 0 ? void 0 : _a.length))
-            return;
-        this.postboy.fire(new PlaceLayerFeaturesCommand(this.layerName, this._polygons.map((m) => m.feature)));
-    }
-}
-PolygonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PolygonsComponent, deps: [{ token: MapPostboyService }], target: i0.ɵɵFactoryTarget.Component });
-PolygonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PolygonsComponent, selector: "lib-polygons", inputs: { layerName: "layerName", polygons: "polygons" }, usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PolygonsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-polygons', template: '', changeDetection: ChangeDetectionStrategy.OnPush }]
-        }], ctorParameters: function () { return [{ type: MapPostboyService }]; }, propDecorators: { layerName: [{
-                type: Input
-            }], polygons: [{
-                type: Input
-            }] } });
-
 class ClusterLayerSettings {
     constructor() {
         this.name = IdGenerator.get();
@@ -1028,6 +962,7 @@ class ClusterLayerSettings {
         this.minZoom = 0;
         this.distance = 20;
         this.bbox = false;
+        this.clusterCancel = 14;
     }
     static copy(model) {
         const result = new ClusterLayerSettings();
@@ -1036,6 +971,7 @@ class ClusterLayerSettings {
         result.minZoom = model.minZoom;
         result.zIndex = model.zIndex;
         result.bbox = model.bbox;
+        result.clusterCancel = model.clusterCancel;
         result.distance = model.distance;
         result.style = model.style;
         return result;
@@ -1055,6 +991,9 @@ class ClusterLayerSettings {
     setMinZoom(minZoom) {
         return ClusterLayerSettings.copy(Object.assign(Object.assign({}, this), { minZoom }));
     }
+    setClusterCancel(clusterCancel) {
+        return ClusterLayerSettings.copy(Object.assign(Object.assign({}, this), { clusterCancel }));
+    }
     setBbox(bbox) {
         return ClusterLayerSettings.copy(Object.assign(Object.assign({}, this), { bbox }));
     }
@@ -1072,6 +1011,8 @@ class ClusterLayerSettings {
             return false;
         if (this.distance !== model.distance)
             return false;
+        if (this.clusterCancel !== model.clusterCancel)
+            return false;
         if (this.bbox !== model.bbox)
             return false;
         if (this.style !== model.style)
@@ -1086,6 +1027,15 @@ class ClusterLayerManager {
         this.layer = layer;
         this.postboy = postboy;
         this.observeClick();
+        this.observeMapMovement();
+    }
+    observeMapMovement() {
+        combineLatest([
+            this.postboy.subscribe(MapMoveEndEvent.ID).pipe(auditTime(250)),
+            this.postboy.subscribe(MapRenderedEvent.ID),
+        ]).subscribe(([movement, renderEvent]) => {
+            this.checkClusterNecessity(renderEvent.map);
+        });
     }
     observeClick() {
         this.postboy.subscribe(MapClickEvent.ID).subscribe((m) => {
@@ -1095,6 +1045,12 @@ class ClusterLayerManager {
             }
         });
     }
+    checkClusterNecessity(map) {
+        var _a, _b, _c;
+        let zoom = (_a = map.getView().getZoom()) !== null && _a !== void 0 ? _a : 0;
+        const distance = zoom > this.settings.clusterCancel ? 0 : this.settings.distance;
+        (_c = (_b = this.layer) === null || _b === void 0 ? void 0 : _b.getSource()) === null || _c === void 0 ? void 0 : _c.setDistance(distance);
+    }
 }
 
 class ClusterLayerFactory {
@@ -1189,6 +1145,263 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }] } });
 
+class MapPlateFactory {
+    build(settings) {
+        return new Map({
+            controls: [],
+            view: new View({
+                center: (settings === null || settings === void 0 ? void 0 : settings.center) || [0, 0],
+                zoom: (settings === null || settings === void 0 ? void 0 : settings.zoom) || 4,
+                minZoom: (settings === null || settings === void 0 ? void 0 : settings.minZoom) || 0,
+                maxZoom: (settings === null || settings === void 0 ? void 0 : settings.maxZoom) || 19,
+            }),
+            layers: [],
+        });
+    }
+}
+MapPlateFactory.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapPlateFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+MapPlateFactory.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapPlateFactory, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapPlateFactory, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class MapPlateComponent extends DestructibleComponent {
+    constructor(elementRef, postboy, mapFactory, registrator, detector) {
+        super();
+        this.elementRef = elementRef;
+        this.postboy = postboy;
+        this.mapFactory = mapFactory;
+        this.registrator = registrator;
+        this.detector = detector;
+        this.osmUrl = '';
+        this._settings = new MapSettings();
+        this.drawingLayerSettings = new FeatureLayerSettings().setName(MapConstants.DrawingLayerId);
+        this.onDestroy = () => {
+            this.registrator.down();
+        };
+        registrator.up();
+    }
+    set settings(value) {
+        if (!value || this._settings.isSame(value))
+            return;
+        this._settings = value;
+        this.setOsm();
+    }
+    ngOnInit() {
+        useGeographic();
+        this.map = this.mapFactory.build(this._settings);
+        this.map.setTarget(this.elementRef.nativeElement);
+        this.detector.detectChanges();
+        this.map.once('postrender', () => {
+            this.map.updateSize();
+            this.postboy.fire(new MapRenderedEvent(this.map));
+        });
+        this.setOsm();
+    }
+    setOsm() {
+        if (!this.map)
+            return;
+        this.osmUrl = `https://mt{0-3}.google.com/vt/lyrs=${MapLyrsLabel.get(this._settings.lyrs)}&hl=${this._settings.language}&x={x}&y={y}&z={z}`;
+        this.detector.detectChanges();
+        this.map.updateSize();
+    }
+}
+MapPlateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapPlateComponent, deps: [{ token: i0.ElementRef }, { token: MapPostboyService }, { token: MapPlateFactory }, { token: MessageRegistratorService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+MapPlateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapPlateComponent, selector: "lib-map-plate", inputs: { settings: "settings" }, providers: [
+        MessageRegistratorService,
+        MapStateService,
+        MapManagementService,
+        MapClickService,
+        MapFeatureService,
+        DrawingService,
+        DrawingGenerationService,
+    ], usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\r\n<lib-osm-tile-layer *ngIf=\"osmUrl && map\" [map]=\"map\" [url]=\"osmUrl\"></lib-osm-tile-layer>\r\n<lib-feature-layer *ngIf=\"map\" [settings]=\"drawingLayerSettings\"></lib-feature-layer>\r\n", styles: ["lib-map-plate{position:relative;display:flex;flex-direction:column;height:100%}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: OsmTileLayerComponent, selector: "lib-osm-tile-layer", inputs: ["url", "map"] }, { kind: "component", type: FeatureLayerComponent, selector: "lib-feature-layer", inputs: ["settings"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapPlateComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-map-plate', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        MessageRegistratorService,
+                        MapStateService,
+                        MapManagementService,
+                        MapClickService,
+                        MapFeatureService,
+                        DrawingService,
+                        DrawingGenerationService,
+                    ], template: "<ng-content></ng-content>\r\n<lib-osm-tile-layer *ngIf=\"osmUrl && map\" [map]=\"map\" [url]=\"osmUrl\"></lib-osm-tile-layer>\r\n<lib-feature-layer *ngIf=\"map\" [settings]=\"drawingLayerSettings\"></lib-feature-layer>\r\n", styles: ["lib-map-plate{position:relative;display:flex;flex-direction:column;height:100%}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: MapPostboyService }, { type: MapPlateFactory }, { type: MessageRegistratorService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { settings: [{
+                type: Input
+            }] } });
+
+class MarkersComponent extends DestructibleComponent {
+    constructor(postboy) {
+        super();
+        this.postboy = postboy;
+        this.layerName = '';
+        this._markers = [];
+    }
+    set markers(value) {
+        this._markers = value;
+        this.putMarkers();
+    }
+    ngOnInit() {
+        this.postboy
+            .subscribe(MapRenderedEvent.ID)
+            .pipe(filter((m) => !!m), first())
+            .subscribe(() => this.putMarkers());
+    }
+    putMarkers() {
+        var _a;
+        if (!((_a = this._markers) === null || _a === void 0 ? void 0 : _a.length))
+            return;
+        this.postboy.fire(new PlaceLayerFeaturesCommand(this.layerName, this._markers.map((m) => m.feature)));
+    }
+}
+MarkersComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MarkersComponent, deps: [{ token: MapPostboyService }], target: i0.ɵɵFactoryTarget.Component });
+MarkersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MarkersComponent, selector: "lib-markers", inputs: { layerName: "layerName", markers: "markers" }, usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MarkersComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-markers', template: '', changeDetection: ChangeDetectionStrategy.OnPush }]
+        }], ctorParameters: function () { return [{ type: MapPostboyService }]; }, propDecorators: { layerName: [{
+                type: Input
+            }], markers: [{
+                type: Input
+            }] } });
+
+class TooltipSettings {
+    constructor(id) {
+        this.containerClass = 'custom-tooltip-class';
+        this.show = (e) => true;
+        this.id = id !== null && id !== void 0 ? id : IdGenerator.get();
+    }
+    static copy(model) {
+        const result = new TooltipSettings(model.id);
+        result.show = model.show;
+        result.containerClass = model.containerClass;
+        return result;
+    }
+    setShow(show) {
+        return TooltipSettings.copy(Object.assign(Object.assign({}, this), { show }));
+    }
+    setClass(containerClass) {
+        return TooltipSettings.copy(Object.assign(Object.assign({}, this), { containerClass }));
+    }
+    isSame(model) {
+        if (this.show !== model.show)
+            return false;
+        if (this.containerClass !== model.containerClass)
+            return false;
+        if (this.id !== model.id)
+            return false;
+        return true;
+    }
+}
+
+class TooltipComponent extends DestructibleComponent {
+    set settings(value) {
+        if (!value || this._settings.isSame(value))
+            return;
+        this._settings = value;
+        this.detector.detectChanges();
+    }
+    constructor(postboy, detector) {
+        super();
+        this.postboy = postboy;
+        this.detector = detector;
+        this._settings = new TooltipSettings();
+        this.show = false;
+        this.removeOverlay = () => {
+            var _a;
+            !!this.overlay && ((_a = this.map) === null || _a === void 0 ? void 0 : _a.removeOverlay(this.overlay));
+            this.show = false;
+        };
+        this.options = (coordinates) => {
+            var _a;
+            return {
+                element: (_a = this.container) === null || _a === void 0 ? void 0 : _a.nativeElement,
+                autoPan: false,
+                autoPanAnimation: { duration: 0 },
+                position: coordinates,
+            };
+        };
+    }
+    ngOnInit() {
+        this.subs.push(this.observeMapRender());
+        this.subs.push(this.observeMapClick());
+        this.subs.push(this.observeClose());
+    }
+    observeMapClick() {
+        return this.postboy.subscribe(MapClickEvent.ID).subscribe((ev) => {
+            this._settings.show(ev) ? this.addOverlay(ev.coordinates) : this.removeOverlay();
+        });
+    }
+    observeClose() {
+        return this.postboy
+            .subscribe(CloseTooltipCommand.ID)
+            .pipe(filter((ev) => ev.tooltipId === this._settings.id))
+            .subscribe(() => this.removeOverlay());
+    }
+    observeMapRender() {
+        return this.postboy.subscribe(MapRenderedEvent.ID).subscribe((m) => {
+            this.map = m.map;
+        });
+    }
+    addOverlay(coordinates) {
+        var _a;
+        this.removeOverlay();
+        this.overlay = new Overlay(this.options(coordinates));
+        (_a = this.map) === null || _a === void 0 ? void 0 : _a.addOverlay(this.overlay);
+        this.show = true;
+        this.detector.detectChanges();
+    }
+}
+TooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TooltipComponent, deps: [{ token: MapPostboyService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+TooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TooltipComponent, selector: "lib-tooltip", inputs: { settings: "settings" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["tip"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div #tip [class]=\"['tooltip-wrapper', _settings.containerClass]\" [hidden]=\"!show\">\r\n  <ng-content></ng-content>\r\n</div>\r\n", styles: [".tooltip-wrapper{position:absolute}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TooltipComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-tooltip', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #tip [class]=\"['tooltip-wrapper', _settings.containerClass]\" [hidden]=\"!show\">\r\n  <ng-content></ng-content>\r\n</div>\r\n", styles: [".tooltip-wrapper{position:absolute}\n"] }]
+        }], ctorParameters: function () { return [{ type: MapPostboyService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { container: [{
+                type: ViewChild,
+                args: ['tip']
+            }], settings: [{
+                type: Input
+            }] } });
+
+class PolygonsComponent extends DestructibleComponent {
+    constructor(postboy) {
+        super();
+        this.postboy = postboy;
+        this.layerName = '';
+        this._polygons = [];
+    }
+    set polygons(value) {
+        this._polygons = value;
+        this.putPolygons();
+    }
+    ngOnInit() {
+        this.postboy
+            .subscribe(MapRenderedEvent.ID)
+            .pipe(filter((m) => !!m), first())
+            .subscribe(() => this.putPolygons());
+    }
+    putPolygons() {
+        if (!this._polygons)
+            return;
+        this.postboy.fire(new PlaceLayerFeaturesCommand(this.layerName, this._polygons.map((m) => m.feature)));
+    }
+}
+PolygonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PolygonsComponent, deps: [{ token: MapPostboyService }], target: i0.ɵɵFactoryTarget.Component });
+PolygonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PolygonsComponent, selector: "lib-polygons", inputs: { layerName: "layerName", polygons: "polygons" }, usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PolygonsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-polygons', template: '', changeDetection: ChangeDetectionStrategy.OnPush }]
+        }], ctorParameters: function () { return [{ type: MapPostboyService }]; }, propDecorators: { layerName: [{
+                type: Input
+            }], polygons: [{
+                type: Input
+            }] } });
+
 class MapModule {
 }
 MapModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -1289,6 +1502,57 @@ class TextStyleHelper {
     }
 }
 
+class StringifyFeatureHelper {
+    static polygon(feature, format = FeatureOutputFormat.GeoJson) {
+        return format === FeatureOutputFormat.GeoJson
+            ? new GeoJSON().writeFeature(feature)
+            : new WKT().writeFeature(feature);
+    }
+    static circle(feature, format = FeatureOutputFormat.GeoJson) {
+        // const clone = feature.clone();
+        // clone.setGeometry(fromCircle(feature.getGeometry()! as Circle));
+        const tetemp = feature.getGeometryName();
+        const circle = feature.getGeometry();
+        // const temp = StringifyFeatureHelper.drawCircle(circle.getCenter(), circle.getRadius());
+        const ttt = feature.getGeometry().getExtent();
+        const eastPoint = [ttt[2], (ttt[1] + ttt[3]) / 2];
+        const aaa = [
+            ...transform([ttt[0], ttt[1]], 'EPSG:4326', 'EPSG:3857'),
+            ...transform([ttt[2], ttt[3]], 'EPSG:4326', 'EPSG:3857'),
+        ];
+        const radius = (aaa[2] - aaa[0]) / 2;
+        const radius2 = new LineString([circle.getCenter(), eastPoint]).getLength();
+        const polygonGeom = new Polygon(StringifyFeatureHelper.drawCircle(circle.getCenter(), radius));
+        // var edgeCoordinate = [circle.getCenter()[0] + radius, circle.getCenter()[1]];
+        // var wgs84Sphere = new Sphere(6378137);
+        return StringifyFeatureHelper.polygon(new Feature(polygonGeom), format);
+        //  const rad = circle.getRadius();
+        //  const degrees = 180 / Math.PI; // radians to degrees
+        //  const radians = Math.PI / 180; // degrees to radians
+        //  const rlat = rad * degrees * 1000;
+        //  const rlng = rad * radians;
+        //  return StringifyFeatureHelper.polygon(new Feature<Geometry>(circular(circle.getCenter(),circle.getRadius() * METERS_PER_UNIT)), format);
+    }
+    static drawCircle(point, radius) {
+        const tetetemp = transform(point, 'EPSG:4326', 'EPSG:3857');
+        // const tetetemp = point;
+        const radians = Math.PI / 180; // degrees to radians
+        const degrees = 180 / Math.PI; // radians to degrees
+        const earthsradius = 6378137.0;
+        const rlat = (radius / earthsradius) * degrees;
+        const rlng = rlat / Math.cos(tetetemp[1] * radians);
+        const extp = [];
+        for (let i = 0; i <= 32; i++) {
+            const theta = Math.PI * (i / 16);
+            extp.push([
+                tetetemp[0] + rlng * Math.cos(theta) * METERS_PER_UNIT,
+                tetetemp[1] + rlat * Math.sin(theta) * METERS_PER_UNIT,
+            ]);
+        }
+        return [extp.map((e) => transform(e, 'EPSG:3857', 'EPSG:4326'))];
+    }
+}
+
 /*
  * Public API Surface of maps
  */
@@ -1301,5 +1565,5 @@ class TextStyleHelper {
  * Generated bundle index. Do not edit.
  */
 
-export { CallbackMessage, CloseTooltipCommand, ClusterLayerComponent, ClusterLayerSettings, FeatureLayerComponent, FeatureLayerSettings, GenericMessage, MapClickEvent, MapLyrs, MapLyrsLabel, MapModule, MapPlateComponent, MapPostboyService, MapRenderedEvent, MapSettings, MarkerModel, MarkerStyleHelper, MarkersComponent, MessageRegistratorService, OsmTileLayerComponent, PolygonModel, PolygonStyleHelper, PolygonsComponent, TextStyleHelper, TileLayerComponent, TileLayerSettings, TooltipComponent, TooltipSettings };
+export { CancelDrawingCommand, CloseTooltipCommand, ClusterLayerComponent, ClusterLayerSettings, DrawingType, FeatureLayerComponent, FeatureLayerSettings, FeatureOutputFormat, MapClickEvent, MapLyrs, MapLyrsLabel, MapModule, MapMoveEndEvent, MapPlateComponent, MapPostboyService, MapRenderedEvent, MapSettings, MarkerModel, MarkerStyleHelper, MarkersComponent, MessageRegistratorService, OsmTileLayerComponent, PolygonModel, PolygonStyleHelper, PolygonsComponent, StartDrawingCommand, StringifyFeatureHelper, TextStyleHelper, TileLayerComponent, TileLayerSettings, TooltipComponent, TooltipSettings };
 //# sourceMappingURL=maps-components.mjs.map