@artstesh/maps 1.0.7 → 1.0.9

package/dist/bundles/maps-components-src-map.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('ol'), require('ol/geom'), require('ol/format'), require('ol/extent'), require('ol/proj'), require('rxjs'), require('@artstesh/postboy'), require('ol/Map'), require('ol/View'), require('ol/layer/Tile'), require('ol/source/OSM'), require('rxjs/operators'), require('ol/source'), require('ol/layer'), require('ol/Overlay'), require('ol/loadingstrategy'), require('ol/geom/Polygon'), require('ol/source/Cluster'), require('ol/style/Style'), require('ol/style')) :
-    typeof define === 'function' && define.amd ? define('maps-components/src/map', ['exports', '@angular/core', '@angular/common', 'ol', 'ol/geom', 'ol/format', 'ol/extent', 'ol/proj', 'rxjs', '@artstesh/postboy', 'ol/Map', 'ol/View', 'ol/layer/Tile', 'ol/source/OSM', 'rxjs/operators', 'ol/source', 'ol/layer', 'ol/Overlay', 'ol/loadingstrategy', 'ol/geom/Polygon', 'ol/source/Cluster', 'ol/style/Style', 'ol/style'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["maps-components"] = global["maps-components"] || {}, global["maps-components"].src = global["maps-components"].src || {}, global["maps-components"].src.map = {}), global.ng.core, global.ng.common, global.ol, global.geom, global.format, global.extent, global.proj, global.rxjs, global.postboy, global.Map, global.View, global.TileLayer, global.OSM, global.rxjs.operators, global.source, global.layer, global.Overlay, global.loadingstrategy, global.Polygon, global.Cluster, global.Style, global.style));
-})(this, (function (exports, i0, i5, ol, geom, format, extent, proj, rxjs, postboy, Map, View, TileLayer, OSM, operators, source, layer, Overlay, loadingstrategy, Polygon, Cluster, Style, style) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('ol'), require('ol/geom'), require('ol/format'), require('ol/extent'), require('ol/proj'), require('@artstesh/postboy'), require('rxjs/operators'), require('ol/source'), require('ol/interaction'), require('ol/interaction/Draw'), require('ol/layer/Tile'), require('ol/source/OSM'), require('ol/layer'), require('ol/loadingstrategy'), require('ol/geom/Polygon'), require('ol/source/Cluster'), require('rxjs'), require('ol/Map'), require('ol/View'), require('ol/Overlay'), require('ol/style/Style'), require('ol/style'), require('ol/proj/epsg4326')) :
+    typeof define === 'function' && define.amd ? define('maps-components/src/map', ['exports', '@angular/core', '@angular/common', 'ol', 'ol/geom', 'ol/format', 'ol/extent', 'ol/proj', '@artstesh/postboy', 'rxjs/operators', 'ol/source', 'ol/interaction', 'ol/interaction/Draw', 'ol/layer/Tile', 'ol/source/OSM', 'ol/layer', 'ol/loadingstrategy', 'ol/geom/Polygon', 'ol/source/Cluster', 'rxjs', 'ol/Map', 'ol/View', 'ol/Overlay', 'ol/style/Style', 'ol/style', 'ol/proj/epsg4326'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["maps-components"] = global["maps-components"] || {}, global["maps-components"].src = global["maps-components"].src || {}, global["maps-components"].src.map = {}), global.ng.core, global.ng.common, global.ol, global.geom, global.format, global.extent, global.proj, global.postboy, global.rxjs.operators, global.source, global.interaction, global.Draw, global.TileLayer, global.OSM, global.layer, global.loadingstrategy, global.Polygon, global.Cluster, global.rxjs, global.Map, global.View, global.Overlay, global.Style, global.style, global.epsg4326));
+})(this, (function (exports, i0, i6, ol, geom, format, extent, proj, postboy, operators, source, interaction, Draw, TileLayer, OSM, layer, loadingstrategy, Polygon, Cluster, rxjs, Map, View, Overlay, Style, style, epsg4326) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -25,13 +25,14 @@
     }
 
     var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
-    var i5__namespace = /*#__PURE__*/_interopNamespace(i5);
-    var Map__default = /*#__PURE__*/_interopDefaultLegacy(Map);
-    var View__default = /*#__PURE__*/_interopDefaultLegacy(View);
+    var i6__namespace = /*#__PURE__*/_interopNamespace(i6);
     var TileLayer__default = /*#__PURE__*/_interopDefaultLegacy(TileLayer);
     var OSM__default = /*#__PURE__*/_interopDefaultLegacy(OSM);
-    var Overlay__default = /*#__PURE__*/_interopDefaultLegacy(Overlay);
+    var Polygon__default = /*#__PURE__*/_interopDefaultLegacy(Polygon);
     var Cluster__default = /*#__PURE__*/_interopDefaultLegacy(Cluster);
+    var Map__default = /*#__PURE__*/_interopDefaultLegacy(Map);
+    var View__default = /*#__PURE__*/_interopDefaultLegacy(View);
+    var Overlay__default = /*#__PURE__*/_interopDefaultLegacy(Overlay);
     var Style__default = /*#__PURE__*/_interopDefaultLegacy(Style);
 
     var DestructibleComponent = /** @class */ (function () {
@@ -614,7 +615,8 @@
         }
         return MapConstants;
     }());
-    MapConstants.FeatureInfo = 'f-info';
+    MapConstants.FeatureInfo = 'f-info';
+    MapConstants.DrawingLayerId = '93a981756ec7';
 
     var MarkerModel = /** @class */ (function () {
         function MarkerModel(lat, lng, id, info) {
@@ -670,25 +672,17 @@
         return PolygonModel;
     }());
 
-    var GenericMessage = /** @class */ (function () {
-        function GenericMessage() {
-        }
-        return GenericMessage;
-    }());
-    var CallbackMessage = /** @class */ (function (_super) {
-        __extends(CallbackMessage, _super);
-        function CallbackMessage() {
-            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
-            _this.result$ = new rxjs.Subject();
-            _this.result = _this.result$.asObservable();
-            return _this;
-        }
-        CallbackMessage.prototype.finish = function (value) {
-            this.result$.next(value);
-            this.result$.complete();
-        };
-        return CallbackMessage;
-    }(GenericMessage));
+    exports.DrawingType = void 0;
+    (function (DrawingType) {
+        DrawingType[DrawingType["Polygon"] = 1] = "Polygon";
+        DrawingType[DrawingType["Circle"] = 2] = "Circle";
+    })(exports.DrawingType || (exports.DrawingType = {}));
+
+    exports.FeatureOutputFormat = void 0;
+    (function (FeatureOutputFormat) {
+        FeatureOutputFormat[FeatureOutputFormat["GeoJson"] = 1] = "GeoJson";
+        FeatureOutputFormat[FeatureOutputFormat["WKT"] = 2] = "WKT";
+    })(exports.FeatureOutputFormat || (exports.FeatureOutputFormat = {}));
 
     var MapRenderedEvent = /** @class */ (function (_super) {
         __extends(MapRenderedEvent, _super);
@@ -705,7 +699,7 @@
             configurable: true
         });
         return MapRenderedEvent;
-    }(GenericMessage));
+    }(postboy.PostboyGenericMessage));
     MapRenderedEvent.ID = 'b6121807-3b89-4cd3-82cf-089d2cefdc4f';
 
     var MapClickEvent = /** @class */ (function (_super) {
@@ -725,9 +719,28 @@
             configurable: true
         });
         return MapClickEvent;
-    }(GenericMessage));
+    }(postboy.PostboyGenericMessage));
     MapClickEvent.ID = '323df526-8d9c-49c6-83e8-6e9a1e7762f7';
 
+    var MapMoveEndEvent = /** @class */ (function (_super) {
+        __extends(MapMoveEndEvent, _super);
+        function MapMoveEndEvent(zoom, extent) {
+            var _this = _super.call(this) || this;
+            _this.zoom = zoom;
+            _this.extent = extent;
+            return _this;
+        }
+        Object.defineProperty(MapMoveEndEvent.prototype, "id", {
+            get: function () {
+                return MapMoveEndEvent.ID;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return MapMoveEndEvent;
+    }(postboy.PostboyGenericMessage));
+    MapMoveEndEvent.ID = 'f21f783e-b5af-4489-9fec-8027fd07a8ad';
+
     var CloseTooltipCommand = /** @class */ (function (_super) {
         __extends(CloseTooltipCommand, _super);
         function CloseTooltipCommand(tooltipId) {
@@ -743,9 +756,46 @@
             configurable: true
         });
         return CloseTooltipCommand;
-    }(GenericMessage));
+    }(postboy.PostboyGenericMessage));
     CloseTooltipCommand.ID = '4896d52c-e34f-4994-bcfd-32832d12dbe4';
 
+    var StartDrawingCommand = /** @class */ (function (_super) {
+        __extends(StartDrawingCommand, _super);
+        function StartDrawingCommand(type, style, format) {
+            if (format === void 0) { format = exports.FeatureOutputFormat.GeoJson; }
+            var _this = _super.call(this) || this;
+            _this.type = type;
+            _this.style = style;
+            _this.format = format;
+            return _this;
+        }
+        Object.defineProperty(StartDrawingCommand.prototype, "id", {
+            get: function () {
+                return StartDrawingCommand.ID;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return StartDrawingCommand;
+    }(postboy.PostboyCallbackMessage));
+    StartDrawingCommand.ID = 'da904f4b-a1c8-4db7-a6af-14d9ee18ec8c';
+
+    var CancelDrawingCommand = /** @class */ (function (_super) {
+        __extends(CancelDrawingCommand, _super);
+        function CancelDrawingCommand() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        Object.defineProperty(CancelDrawingCommand.prototype, "id", {
+            get: function () {
+                return CancelDrawingCommand.ID;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return CancelDrawingCommand;
+    }(postboy.PostboyGenericMessage));
+    CancelDrawingCommand.ID = '7d38d983-feba-4176-a66b-18175e5ecd6b';
+
     var AddLayerCommand = /** @class */ (function (_super) {
         __extends(AddLayerCommand, _super);
         function AddLayerCommand(layer) {
@@ -761,7 +811,7 @@
             configurable: true
         });
         return AddLayerCommand;
-    }(GenericMessage));
+    }(postboy.PostboyGenericMessage));
     AddLayerCommand.ID = 'd93e250f-92bc-43ac-9c6a-46c521a1aaa5';
 
     var PlaceLayerFeaturesCommand = /** @class */ (function (_super) {
@@ -780,7 +830,7 @@
             configurable: true
         });
         return PlaceLayerFeaturesCommand;
-    }(GenericMessage));
+    }(postboy.PostboyGenericMessage));
     PlaceLayerFeaturesCommand.ID = '8caf86bc-869b-426f-b36d-4642f6b8aab0';
 
     var RemoveLayerCommand = /** @class */ (function (_super) {
@@ -798,7 +848,7 @@
             configurable: true
         });
         return RemoveLayerCommand;
-    }(GenericMessage));
+    }(postboy.PostboyGenericMessage));
     RemoveLayerCommand.ID = 'ab484e0e-e185-45cd-8434-12101f3c7eb1';
 
     var AddTileCommand = /** @class */ (function (_super) {
@@ -816,7 +866,7 @@
             configurable: true
         });
         return AddTileCommand;
-    }(GenericMessage));
+    }(postboy.PostboyGenericMessage));
     AddTileCommand.ID = '25b7df28-72ce-4453-9fe6-54285a2fdc57';
 
     var RemoveTileCommand = /** @class */ (function (_super) {
@@ -834,7 +884,7 @@
             configurable: true
         });
         return RemoveTileCommand;
-    }(GenericMessage));
+    }(postboy.PostboyGenericMessage));
     RemoveTileCommand.ID = 'c36ccc0b-5638-4819-b148-2de57a59a5b7';
 
     var FitToFeaturesCommand = /** @class */ (function (_super) {
@@ -854,23 +904,77 @@
             configurable: true
         });
         return FitToFeaturesCommand;
-    }(GenericMessage));
+    }(postboy.PostboyGenericMessage));
     FitToFeaturesCommand.ID = '76cdc091-3793-4b6c-82f7-1e0334cf08a8';
 
+    var GetLayerQuery = /** @class */ (function (_super) {
+        __extends(GetLayerQuery, _super);
+        function GetLayerQuery(name) {
+            var _this = _super.call(this) || this;
+            _this.name = name;
+            return _this;
+        }
+        Object.defineProperty(GetLayerQuery.prototype, "id", {
+            get: function () {
+                return GetLayerQuery.ID;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return GetLayerQuery;
+    }(postboy.PostboyCallbackMessage));
+    GetLayerQuery.ID = '5c04c87b-8a93-4c2a-979e-d1e313d860ed';
+
+    var DrawingFinishedEvent = /** @class */ (function (_super) {
+        __extends(DrawingFinishedEvent, _super);
+        function DrawingFinishedEvent() {
+            return _super.call(this) || this;
+        }
+        Object.defineProperty(DrawingFinishedEvent.prototype, "id", {
+            get: function () {
+                return DrawingFinishedEvent.ID;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return DrawingFinishedEvent;
+    }(postboy.PostboyGenericMessage));
+    DrawingFinishedEvent.ID = 'c724b68e-b4eb-4783-90f1-a8e31973fd36';
+
+    var GenerateDrawQuery = /** @class */ (function (_super) {
+        __extends(GenerateDrawQuery, _super);
+        function GenerateDrawQuery(layer, style, type) {
+            var _this = _super.call(this) || this;
+            _this.layer = layer;
+            _this.style = style;
+            _this.type = type;
+            return _this;
+        }
+        Object.defineProperty(GenerateDrawQuery.prototype, "id", {
+            get: function () {
+                return GenerateDrawQuery.ID;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return GenerateDrawQuery;
+    }(postboy.PostboyCallbackMessage));
+    GenerateDrawQuery.ID = 'f01c99ba-0953-4ab5-82f9-04e6fbb678c1';
+
     var MapPostboyService = /** @class */ (function (_super) {
         __extends(MapPostboyService, _super);
         function MapPostboyService() {
-            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
-            _this.observe = function (id) { return _this.subscribe(id); };
+            var _this = _super.call(this) || this;
+            _this.addLocker({ locker: StartDrawingCommand.ID, unlocker: DrawingFinishedEvent.ID, locking: [MapClickEvent.ID] });
             return _this;
         }
         return MapPostboyService;
     }(postboy.PostboyService));
-    MapPostboyService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MapPostboyService, deps: null, target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    MapPostboyService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MapPostboyService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
     MapPostboyService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MapPostboyService });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MapPostboyService, decorators: [{
                 type: i0.Injectable
-            }] });
+            }], ctorParameters: function () { return []; } });
 
     var MapManagementService = /** @class */ (function () {
         function MapManagementService(postboy) {
@@ -884,6 +988,7 @@
             this.observePlaceFeatures();
             this.observeAddTile();
             this.observeRemoveTile();
+            this.observeLayerQuery();
         };
         MapManagementService.prototype.observeRemoveTile = function () {
             var _this = this;
@@ -893,6 +998,10 @@
                 _this.map.removeLayer(c.layer);
             });
         };
+        MapManagementService.prototype.observeLayerQuery = function () {
+            var _this = this;
+            this.postboy.subscribe(GetLayerQuery.ID).subscribe(function (ev) { var _a; return ev.finish((_a = _this.layers[ev.name]) !== null && _a !== void 0 ? _a : null); });
+        };
         MapManagementService.prototype.observeAddTile = function () {
             var _this = this;
             this.postboy.subscribe(AddTileCommand.ID).subscribe(function (c) {
@@ -952,7 +1061,16 @@
         }
         MapStateService.prototype.up = function () {
             var _this = this;
-            this.postboy.subscribe(MapRenderedEvent.ID).subscribe(function (m) { return (_this.map = m); });
+            this.postboy.subscribe(MapRenderedEvent.ID).subscribe(function (ev) {
+                var _a;
+                _this.map = ev.map;
+                (_a = _this.map) === null || _a === void 0 ? void 0 : _a.on('moveend', function () {
+                    var _a, _b;
+                    var zoom = Math.floor(((_a = _this.map) === null || _a === void 0 ? void 0 : _a.getView().getZoom()) || -1);
+                    var extent = ((_b = _this.map) === null || _b === void 0 ? void 0 : _b.getView().calculateExtent()) || [];
+                    _this.postboy.fire(new MapMoveEndEvent(zoom, extent));
+                });
+            });
         };
         return MapStateService;
     }());
@@ -1050,11 +1168,105 @@
                 type: i0.Injectable
             }], ctorParameters: function () { return [{ type: MapPostboyService }]; } });
 
+    var DrawingService = /** @class */ (function () {
+        function DrawingService(postboy) {
+            this.postboy = postboy;
+        }
+        DrawingService.prototype.up = function () {
+            var _this = this;
+            this.postboy.subscribe(StartDrawingCommand.ID).subscribe(function (ev) {
+                _this.draw(function (l) {
+                    if (!l || !_this.map) {
+                        _this.clearInteraction(l);
+                        return;
+                    }
+                    var drawQuery = new GenerateDrawQuery(l, ev.style, ev.type);
+                    drawQuery.result.subscribe(function (draw) {
+                        var _a;
+                        var 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', function (evt) {
+                            cancelSub.unsubscribe();
+                            _this.onEnd(evt, ev, l);
+                        });
+                    });
+                    _this.postboy.fire(drawQuery);
+                });
+            });
+            this.observeMapRender();
+        };
+        DrawingService.prototype.onEnd = function (evt, command, layer) {
+            command.finish(command.format === exports.FeatureOutputFormat.GeoJson
+                ? new format.GeoJSON().writeFeature(evt.feature)
+                : new format.WKT().writeFeature(evt.feature));
+            this.clearInteraction(layer);
+        };
+        DrawingService.prototype.observeMapRender = function () {
+            var _this = this;
+            this.postboy.subscribe(MapRenderedEvent.ID).subscribe(function (m) {
+                _this.map = m.map;
+            });
+        };
+        DrawingService.prototype.draw = function (action) {
+            var query = new GetLayerQuery(MapConstants.DrawingLayerId);
+            query.result.subscribe(function (l) { return action(l); });
+            this.postboy.fire(query);
+        };
+        DrawingService.prototype.observeCancelation = function (ev, layer) {
+            var _this = this;
+            return this.postboy
+                .subscribe(CancelDrawingCommand.ID)
+                .pipe(operators.first())
+                .subscribe(function () {
+                ev.finish(null);
+                _this.clearInteraction(layer);
+            });
+        };
+        DrawingService.prototype.clearInteraction = function (layer) {
+            var _this = this;
+            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 source.Vector({}));
+            }
+            setTimeout(function () { return _this.postboy.fire(new DrawingFinishedEvent()); }, 300);
+        };
+        return DrawingService;
+    }());
+    DrawingService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DrawingService, deps: [{ token: MapPostboyService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    DrawingService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DrawingService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DrawingService, decorators: [{
+                type: i0.Injectable
+            }], ctorParameters: function () { return [{ type: MapPostboyService }]; } });
+
+    var DrawingGenerationService = /** @class */ (function () {
+        function DrawingGenerationService(postboy) {
+            this.postboy = postboy;
+        }
+        DrawingGenerationService.prototype.up = function () {
+            this.postboy.subscribe(GenerateDrawQuery.ID).subscribe(function (ev) {
+                ev.finish(new interaction.Draw({
+                    source: ev.layer.getSource(),
+                    type: exports.DrawingType[ev.type],
+                    style: ev.style,
+                    geometryFunction: ev.type !== exports.DrawingType.Circle ? undefined : Draw.createRegularPolygon(32),
+                }));
+            });
+        };
+        return DrawingGenerationService;
+    }());
+    DrawingGenerationService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DrawingGenerationService, deps: [{ token: MapPostboyService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    DrawingGenerationService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DrawingGenerationService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DrawingGenerationService, decorators: [{
+                type: i0.Injectable
+            }], ctorParameters: function () { return [{ type: MapPostboyService }]; } });
+
     var MessageRegistratorService = /** @class */ (function (_super) {
         __extends(MessageRegistratorService, _super);
-        function MessageRegistratorService(service, management, state, feature, interaction) {
+        function MessageRegistratorService(service, management, state, feature, interaction, drawing, drawGenerator) {
             var _this = _super.call(this, service) || this;
-            _this.registerServices([management, state, interaction, feature]);
+            _this.registerServices([management, state, interaction, feature, drawing, drawGenerator]);
             return _this;
         }
         MessageRegistratorService.prototype._up = function () {
@@ -1067,286 +1279,330 @@
             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);
         };
         return MessageRegistratorService;
     }(postboy.PostboyAbstractRegistrator));
-    MessageRegistratorService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MessageRegistratorService, deps: [{ token: MapPostboyService }, { token: MapManagementService }, { token: MapStateService }, { token: MapFeatureService }, { token: MapClickService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    MessageRegistratorService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MessageRegistratorService, deps: [{ token: MapPostboyService }, { token: MapManagementService }, { token: MapStateService }, { token: MapFeatureService }, { token: MapClickService }, { token: DrawingService }, { token: DrawingGenerationService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
     MessageRegistratorService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MessageRegistratorService });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MessageRegistratorService, decorators: [{
                 type: i0.Injectable
-            }], ctorParameters: function () { return [{ type: MapPostboyService }, { type: MapManagementService }, { type: MapStateService }, { type: MapFeatureService }, { type: MapClickService }]; } });
+            }], ctorParameters: function () { return [{ type: MapPostboyService }, { type: MapManagementService }, { type: MapStateService }, { type: MapFeatureService }, { type: MapClickService }, { type: DrawingService }, { type: DrawingGenerationService }]; } });
 
-    var MapPlateFactory = /** @class */ (function () {
-        function MapPlateFactory() {
+    var TileLayerSettings = /** @class */ (function () {
+        function TileLayerSettings() {
+            this.maxZoom = 19;
+            this.minZoom = 0;
+            this.opacity = 0.6;
+            this.url = '';
+            this.projection = 'EPSG:3857';
         }
-        MapPlateFactory.prototype.build = function (settings) {
-            return new Map__default["default"]({
-                controls: [],
-                view: new View__default["default"]({
-                    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: [],
+        TileLayerSettings.copy = function (model) {
+            var result = new TileLayerSettings();
+            result.maxZoom = model.maxZoom;
+            result.minZoom = model.minZoom;
+            result.projection = model.projection;
+            result.opacity = model.opacity;
+            result.url = model.url;
+            return result;
+        };
+        TileLayerSettings.prototype.setUrl = function (url) {
+            return TileLayerSettings.copy(Object.assign(Object.assign({}, this), { url: url }));
+        };
+        TileLayerSettings.prototype.setMaxZoom = function (maxZoom) {
+            return TileLayerSettings.copy(Object.assign(Object.assign({}, this), { maxZoom: maxZoom }));
+        };
+        TileLayerSettings.prototype.setMinZoom = function (minZoom) {
+            return TileLayerSettings.copy(Object.assign(Object.assign({}, this), { minZoom: minZoom }));
+        };
+        TileLayerSettings.prototype.setOpacity = function (opacity) {
+            return TileLayerSettings.copy(Object.assign(Object.assign({}, this), { opacity: opacity }));
+        };
+        TileLayerSettings.prototype.setProjection = function (projection) {
+            return TileLayerSettings.copy(Object.assign(Object.assign({}, this), { projection: projection }));
+        };
+        TileLayerSettings.prototype.isSame = function (model) {
+            if (this.maxZoom !== model.maxZoom)
+                return false;
+            if (this.minZoom !== model.minZoom)
+                return false;
+            if (this.url !== model.url)
+                return false;
+            if (this.projection !== model.projection)
+                return false;
+            if (this.opacity !== model.opacity)
+                return false;
+            return true;
+        };
+        return TileLayerSettings;
+    }());
+
+    var TileLayerFactory = /** @class */ (function () {
+        function TileLayerFactory() {
+        }
+        TileLayerFactory.prototype.build = function (settings) {
+            var source$1 = new source.XYZ({
+                tileSize: 256,
+                maxZoom: settings.maxZoom || 14,
+                minZoom: settings.minZoom || 1,
+                projection: proj.get(settings.projection),
+                tileUrlFunction: this.getTileFunc(settings),
+                crossOrigin: 'Anonymous',
             });
+            return new TileLayer__default["default"]({ source: source$1, opacity: settings.opacity });
         };
-        return MapPlateFactory;
+        TileLayerFactory.prototype.getTileFunc = function (settings) {
+            var _this = this;
+            return function (tileCoord) {
+                var zoom = tileCoord[0];
+                var x = tileCoord[1];
+                var y = tileCoord[2];
+                var normalizedCoord = _this.getNormalizedCoord({ x: x, y: y }, zoom);
+                var bound = 1 << zoom;
+                return settings.url
+                    .replace('{x}', String((normalizedCoord === null || normalizedCoord === void 0 ? void 0 : normalizedCoord.x) || x))
+                    .replace('{z}', String(zoom))
+                    .replace('{y}', String(bound - ((normalizedCoord === null || normalizedCoord === void 0 ? void 0 : normalizedCoord.y) || y) - 1));
+            };
+        };
+        TileLayerFactory.prototype.getNormalizedCoord = function (coord, zoom) {
+            var y = coord.y;
+            var x = coord.x;
+            var tileRange = 1 << zoom;
+            if (y < 0 || y >= tileRange)
+                return null;
+            if (x < 0 || x >= tileRange)
+                x = ((x % tileRange) + tileRange) % tileRange;
+            return { x: x, y: y };
+        };
+        return TileLayerFactory;
     }());
-    MapPlateFactory.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MapPlateFactory, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    MapPlateFactory.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MapPlateFactory, providedIn: 'root' });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MapPlateFactory, decorators: [{
+    TileLayerFactory.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TileLayerFactory, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    TileLayerFactory.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TileLayerFactory, providedIn: 'root' });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TileLayerFactory, decorators: [{
                 type: i0.Injectable,
                 args: [{
                         providedIn: 'root',
                     }]
             }] });
 
-    var OsmTileLayerComponent = /** @class */ (function (_super) {
-        __extends(OsmTileLayerComponent, _super);
-        function OsmTileLayerComponent() {
+    var TileLayerComponent = /** @class */ (function (_super) {
+        __extends(TileLayerComponent, _super);
+        function TileLayerComponent(postboy, factory) {
             var _this = _super.call(this) || this;
-            _this._url = '';
+            _this.postboy = postboy;
+            _this.factory = factory;
+            _this._settings = new TileLayerSettings();
+            _this.onDestroy = function () { return _this.removeLayer(); };
             return _this;
         }
-        Object.defineProperty(OsmTileLayerComponent.prototype, "url", {
-            set: function (value) {
-                if (!value || this._url === value)
-                    return;
-                this._url = value;
-                this.initLayer();
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(OsmTileLayerComponent.prototype, "map", {
+        TileLayerComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.postboy
+                .subscribe(MapRenderedEvent.ID)
+                .pipe(operators.filter(function (m) { return !!m; }), operators.first())
+                .subscribe(function (m) { return _this.initLayer(); });
+        };
+        Object.defineProperty(TileLayerComponent.prototype, "settings", {
             set: function (value) {
-                if (!value || this._map === value)
+                if (!value || this._settings.isSame(value))
                     return;
-                this._map = value;
+                this._settings = value;
                 this.initLayer();
             },
             enumerable: false,
             configurable: true
         });
-        OsmTileLayerComponent.prototype.ngOnInit = function () { };
-        OsmTileLayerComponent.prototype.ngOnDestroy = function () {
-            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);
+        TileLayerComponent.prototype.initLayer = function () {
+            this.removeLayer();
+            this.layer = this.factory.build(this._settings);
+            this.postboy.fire(new AddTileCommand(this.layer));
         };
-        OsmTileLayerComponent.prototype.initLayer = function () {
-            if (!this._url || !this._map)
-                return;
+        TileLayerComponent.prototype.removeLayer = function () {
             if (this.layer)
-                this._map.removeLayer(this.layer);
-            this.layer = new TileLayer__default["default"]({
-                source: new OSM__default["default"]({
-                    url: this._url,
-                }),
-            });
-            this.layer.set('name', 'osm-tile-layer');
-            this._map.addLayer(this.layer);
+                this.postboy.fire(new RemoveTileCommand(this.layer));
         };
-        return OsmTileLayerComponent;
+        return TileLayerComponent;
     }(DestructibleComponent));
-    OsmTileLayerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: OsmTileLayerComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    OsmTileLayerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: OsmTileLayerComponent, selector: "lib-osm-tile-layer", inputs: { url: "url", map: "map" }, usesInheritance: true, ngImport: i0__namespace, template: '', isInline: true, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: OsmTileLayerComponent, decorators: [{
+    TileLayerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TileLayerComponent, deps: [{ token: MapPostboyService }, { token: TileLayerFactory }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TileLayerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TileLayerComponent, selector: "lib-tile-layer", inputs: { settings: "settings" }, usesInheritance: true, ngImport: i0__namespace, template: '', isInline: true, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TileLayerComponent, decorators: [{
                 type: i0.Component,
                 args: [{
-                        selector: 'lib-osm-tile-layer',
+                        selector: 'lib-tile-layer',
                         template: '',
                         styleUrls: [],
                         changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     }]
-            }], ctorParameters: function () { return []; }, propDecorators: { url: [{
-                    type: i0.Input
-                }], map: [{
+            }], ctorParameters: function () { return [{ type: MapPostboyService }, { type: TileLayerFactory }]; }, propDecorators: { settings: [{
                     type: i0.Input
                 }] } });
 
-    var MapPlateComponent = /** @class */ (function (_super) {
-        __extends(MapPlateComponent, _super);
-        function MapPlateComponent(elementRef, postboy, mapFactory, registrator, detector) {
+    var OsmTileLayerComponent = /** @class */ (function (_super) {
+        __extends(OsmTileLayerComponent, _super);
+        function OsmTileLayerComponent() {
             var _this = _super.call(this) || this;
-            _this.elementRef = elementRef;
-            _this.postboy = postboy;
-            _this.mapFactory = mapFactory;
-            _this.registrator = registrator;
-            _this.detector = detector;
-            _this.osmUrl = '';
-            _this._settings = new MapSettings();
-            _this.onDestroy = function () {
-                _this.registrator.down();
-            };
-            registrator.up();
+            _this._url = '';
             return _this;
         }
-        Object.defineProperty(MapPlateComponent.prototype, "settings", {
+        Object.defineProperty(OsmTileLayerComponent.prototype, "url", {
             set: function (value) {
-                if (!value || this._settings.isSame(value))
+                if (!value || this._url === value)
                     return;
-                this._settings = value;
-                this.setOsm();
+                this._url = value;
+                this.initLayer();
             },
             enumerable: false,
             configurable: true
         });
-        MapPlateComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            proj.useGeographic();
-            this.map = this.mapFactory.build(this._settings);
-            this.map.setTarget(this.elementRef.nativeElement);
-            this.detector.detectChanges();
-            this.map.once('postrender', function () {
-                _this.map.updateSize();
-                _this.postboy.fire(new MapRenderedEvent(_this.map));
-            });
-            this.setOsm();
+        Object.defineProperty(OsmTileLayerComponent.prototype, "map", {
+            set: function (value) {
+                if (!value || this._map === value)
+                    return;
+                this._map = value;
+                this.initLayer();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        OsmTileLayerComponent.prototype.ngOnInit = function () { };
+        OsmTileLayerComponent.prototype.ngOnDestroy = function () {
+            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);
         };
-        MapPlateComponent.prototype.setOsm = function () {
-            if (!this.map)
+        OsmTileLayerComponent.prototype.initLayer = function () {
+            if (!this._url || !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();
+            if (this.layer)
+                this._map.removeLayer(this.layer);
+            this.layer = new TileLayer__default["default"]({
+                source: new OSM__default["default"]({
+                    url: this._url,
+                }),
+            });
+            this.layer.set('name', 'osm-tile-layer');
+            this._map.addLayer(this.layer);
         };
-        return MapPlateComponent;
+        return OsmTileLayerComponent;
     }(DestructibleComponent));
-    MapPlateComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MapPlateComponent, deps: [{ token: i0__namespace.ElementRef }, { token: MapPostboyService }, { token: MapPlateFactory }, { token: MessageRegistratorService }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    MapPlateComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MapPlateComponent, selector: "lib-map-plate", inputs: { settings: "settings" }, providers: [MessageRegistratorService, MapStateService, MapManagementService, MapClickService, MapFeatureService], usesInheritance: true, ngImport: i0__namespace, 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"], components: [{ type: OsmTileLayerComponent, selector: "lib-osm-tile-layer", inputs: ["url", "map"] }], directives: [{ type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MapPlateComponent, decorators: [{
+    OsmTileLayerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: OsmTileLayerComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    OsmTileLayerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: OsmTileLayerComponent, selector: "lib-osm-tile-layer", inputs: { url: "url", map: "map" }, usesInheritance: true, ngImport: i0__namespace, template: '', isInline: true, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: OsmTileLayerComponent, decorators: [{
                 type: i0.Component,
                 args: [{
-                        selector: 'lib-map-plate',
-                        templateUrl: './map-plate.component.html',
-                        styleUrls: ['./map-plate.component.scss'],
+                        selector: 'lib-osm-tile-layer',
+                        template: '',
+                        styleUrls: [],
                         changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                        providers: [MessageRegistratorService, MapStateService, MapManagementService, MapClickService, MapFeatureService],
                     }]
-            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: MapPostboyService }, { type: MapPlateFactory }, { type: MessageRegistratorService }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { settings: [{
+            }], ctorParameters: function () { return []; }, propDecorators: { url: [{
+                    type: i0.Input
+                }], map: [{
                     type: i0.Input
                 }] } });
 
-    var TileLayerSettings = /** @class */ (function () {
-        function TileLayerSettings() {
+    var FeatureLayerSettings = /** @class */ (function () {
+        function FeatureLayerSettings() {
+            this.name = IdGenerator.get();
+            this.zIndex = 1;
             this.maxZoom = 19;
             this.minZoom = 0;
-            this.opacity = 0.6;
-            this.url = '';
-            this.projection = 'EPSG:3857';
         }
-        TileLayerSettings.copy = function (model) {
-            var result = new TileLayerSettings();
+        FeatureLayerSettings.copy = function (model) {
+            var result = new FeatureLayerSettings();
+            result.name = model.name;
             result.maxZoom = model.maxZoom;
             result.minZoom = model.minZoom;
-            result.projection = model.projection;
-            result.opacity = model.opacity;
-            result.url = model.url;
+            result.zIndex = model.zIndex;
+            result.style = model.style;
             return result;
         };
-        TileLayerSettings.prototype.setUrl = function (url) {
-            return TileLayerSettings.copy(Object.assign(Object.assign({}, this), { url: url }));
+        FeatureLayerSettings.prototype.setZIndex = function (zIndex) {
+            return FeatureLayerSettings.copy(Object.assign(Object.assign({}, this), { zIndex: zIndex }));
         };
-        TileLayerSettings.prototype.setMaxZoom = function (maxZoom) {
-            return TileLayerSettings.copy(Object.assign(Object.assign({}, this), { maxZoom: maxZoom }));
+        FeatureLayerSettings.prototype.setName = function (name) {
+            return FeatureLayerSettings.copy(Object.assign(Object.assign({}, this), { name: name }));
         };
-        TileLayerSettings.prototype.setMinZoom = function (minZoom) {
-            return TileLayerSettings.copy(Object.assign(Object.assign({}, this), { minZoom: minZoom }));
+        FeatureLayerSettings.prototype.setMaxZoom = function (maxZoom) {
+            return FeatureLayerSettings.copy(Object.assign(Object.assign({}, this), { maxZoom: maxZoom }));
         };
-        TileLayerSettings.prototype.setOpacity = function (opacity) {
-            return TileLayerSettings.copy(Object.assign(Object.assign({}, this), { opacity: opacity }));
+        FeatureLayerSettings.prototype.setMinZoom = function (minZoom) {
+            return FeatureLayerSettings.copy(Object.assign(Object.assign({}, this), { minZoom: minZoom }));
         };
-        TileLayerSettings.prototype.setProjection = function (projection) {
-            return TileLayerSettings.copy(Object.assign(Object.assign({}, this), { projection: projection }));
+        FeatureLayerSettings.prototype.setStyle = function (style) {
+            return FeatureLayerSettings.copy(Object.assign(Object.assign({}, this), { style: style }));
         };
-        TileLayerSettings.prototype.isSame = function (model) {
+        FeatureLayerSettings.prototype.isSame = function (model) {
             if (this.maxZoom !== model.maxZoom)
                 return false;
             if (this.minZoom !== model.minZoom)
                 return false;
-            if (this.url !== model.url)
+            if (this.zIndex !== model.zIndex)
                 return false;
-            if (this.projection !== model.projection)
+            if (this.name !== model.name)
                 return false;
-            if (this.opacity !== model.opacity)
+            if (this.style !== model.style)
                 return false;
             return true;
         };
-        return TileLayerSettings;
+        return FeatureLayerSettings;
     }());
 
-    var TileLayerFactory = /** @class */ (function () {
-        function TileLayerFactory() {
+    var FeatureLayerFactory = /** @class */ (function () {
+        function FeatureLayerFactory() {
         }
-        TileLayerFactory.prototype.build = function (settings) {
-            var source$1 = new source.XYZ({
-                tileSize: 256,
-                maxZoom: settings.maxZoom || 14,
-                minZoom: settings.minZoom || 1,
-                projection: proj.get(settings.projection),
-                tileUrlFunction: this.getTileFunc(settings),
-                crossOrigin: 'Anonymous',
+        FeatureLayerFactory.prototype.build = function (settings) {
+            var source$1 = new source.Vector({});
+            var layer$1 = new layer.Vector({
+                source: source$1,
+                maxZoom: settings.maxZoom,
+                minZoom: settings.minZoom,
+                zIndex: settings.zIndex,
             });
-            return new TileLayer__default["default"]({ source: source$1, opacity: settings.opacity });
-        };
-        TileLayerFactory.prototype.getTileFunc = function (settings) {
-            var _this = this;
-            return function (tileCoord) {
-                var zoom = tileCoord[0];
-                var x = tileCoord[1];
-                var y = tileCoord[2];
-                var normalizedCoord = _this.getNormalizedCoord({ x: x, y: y }, zoom);
-                var bound = 1 << zoom;
-                return settings.url
-                    .replace('{x}', String((normalizedCoord === null || normalizedCoord === void 0 ? void 0 : normalizedCoord.x) || x))
-                    .replace('{z}', String(zoom))
-                    .replace('{y}', String(bound - ((normalizedCoord === null || normalizedCoord === void 0 ? void 0 : normalizedCoord.y) || y) - 1));
-            };
-        };
-        TileLayerFactory.prototype.getNormalizedCoord = function (coord, zoom) {
-            var y = coord.y;
-            var x = coord.x;
-            var tileRange = 1 << zoom;
-            if (y < 0 || y >= tileRange)
-                return null;
-            if (x < 0 || x >= tileRange)
-                x = ((x % tileRange) + tileRange) % tileRange;
-            return { x: x, y: y };
+            if (settings.style)
+                layer$1.setStyle(settings.style);
+            layer$1.set('name', settings.name);
+            return layer$1;
         };
-        return TileLayerFactory;
+        return FeatureLayerFactory;
     }());
-    TileLayerFactory.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TileLayerFactory, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    TileLayerFactory.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TileLayerFactory, providedIn: 'root' });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TileLayerFactory, decorators: [{
+    FeatureLayerFactory.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FeatureLayerFactory, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    FeatureLayerFactory.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FeatureLayerFactory, providedIn: 'root' });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FeatureLayerFactory, decorators: [{
                 type: i0.Injectable,
                 args: [{
                         providedIn: 'root',
                     }]
             }] });
 
-    var TileLayerComponent = /** @class */ (function (_super) {
-        __extends(TileLayerComponent, _super);
-        function TileLayerComponent(postboy, factory) {
+    var FeatureLayerComponent = /** @class */ (function (_super) {
+        __extends(FeatureLayerComponent, _super);
+        function FeatureLayerComponent(postboy, factory) {
             var _this = _super.call(this) || this;
             _this.postboy = postboy;
             _this.factory = factory;
-            _this._settings = new TileLayerSettings();
+            _this.layer = null;
+            _this._settings = new FeatureLayerSettings();
             _this.onDestroy = function () { return _this.removeLayer(); };
             return _this;
         }
-        TileLayerComponent.prototype.ngOnInit = function () {
+        FeatureLayerComponent.prototype.ngOnInit = function () {
             var _this = this;
             this.postboy
                 .subscribe(MapRenderedEvent.ID)
                 .pipe(operators.filter(function (m) { return !!m; }), operators.first())
                 .subscribe(function (m) { return _this.initLayer(); });
         };
-        Object.defineProperty(TileLayerComponent.prototype, "settings", {
+        Object.defineProperty(FeatureLayerComponent.prototype, "settings", {
             set: function (value) {
                 if (!value || this._settings.isSame(value))
                     return;
@@ -1356,63 +1612,78 @@
             enumerable: false,
             configurable: true
         });
-        TileLayerComponent.prototype.initLayer = function () {
+        FeatureLayerComponent.prototype.initLayer = function () {
             this.removeLayer();
             this.layer = this.factory.build(this._settings);
-            this.postboy.fire(new AddTileCommand(this.layer));
+            this.postboy.fire(new AddLayerCommand(this.layer));
         };
-        TileLayerComponent.prototype.removeLayer = function () {
+        FeatureLayerComponent.prototype.removeLayer = function () {
             if (this.layer)
-                this.postboy.fire(new RemoveTileCommand(this.layer));
+                this.postboy.fire(new RemoveLayerCommand(this.layer));
         };
-        return TileLayerComponent;
+        return FeatureLayerComponent;
     }(DestructibleComponent));
-    TileLayerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TileLayerComponent, deps: [{ token: MapPostboyService }, { token: TileLayerFactory }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TileLayerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TileLayerComponent, selector: "lib-tile-layer", inputs: { settings: "settings" }, usesInheritance: true, ngImport: i0__namespace, template: '', isInline: true, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TileLayerComponent, decorators: [{
+    FeatureLayerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FeatureLayerComponent, deps: [{ token: MapPostboyService }, { token: FeatureLayerFactory }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    FeatureLayerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: FeatureLayerComponent, selector: "lib-feature-layer", inputs: { settings: "settings" }, usesInheritance: true, ngImport: i0__namespace, template: '', isInline: true, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FeatureLayerComponent, decorators: [{
                 type: i0.Component,
                 args: [{
-                        selector: 'lib-tile-layer',
+                        selector: 'lib-feature-layer',
                         template: '',
                         styleUrls: [],
                         changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     }]
-            }], ctorParameters: function () { return [{ type: MapPostboyService }, { type: TileLayerFactory }]; }, propDecorators: { settings: [{
+            }], ctorParameters: function () { return [{ type: MapPostboyService }, { type: FeatureLayerFactory }]; }, propDecorators: { settings: [{
                     type: i0.Input
                 }] } });
 
-    var FeatureLayerSettings = /** @class */ (function () {
-        function FeatureLayerSettings() {
+    var ClusterLayerSettings = /** @class */ (function () {
+        function ClusterLayerSettings() {
             this.name = IdGenerator.get();
             this.zIndex = 1;
             this.maxZoom = 19;
             this.minZoom = 0;
+            this.distance = 20;
+            this.bbox = false;
+            this.clusterCancel = 14;
         }
-        FeatureLayerSettings.copy = function (model) {
-            var result = new FeatureLayerSettings();
+        ClusterLayerSettings.copy = function (model) {
+            var result = new ClusterLayerSettings();
             result.name = model.name;
             result.maxZoom = model.maxZoom;
             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;
         };
-        FeatureLayerSettings.prototype.setZIndex = function (zIndex) {
-            return FeatureLayerSettings.copy(Object.assign(Object.assign({}, this), { zIndex: zIndex }));
+        ClusterLayerSettings.prototype.setZIndex = function (zIndex) {
+            return ClusterLayerSettings.copy(Object.assign(Object.assign({}, this), { zIndex: zIndex }));
         };
-        FeatureLayerSettings.prototype.setName = function (name) {
-            return FeatureLayerSettings.copy(Object.assign(Object.assign({}, this), { name: name }));
+        ClusterLayerSettings.prototype.setDistance = function (distance) {
+            return ClusterLayerSettings.copy(Object.assign(Object.assign({}, this), { distance: distance }));
         };
-        FeatureLayerSettings.prototype.setMaxZoom = function (maxZoom) {
-            return FeatureLayerSettings.copy(Object.assign(Object.assign({}, this), { maxZoom: maxZoom }));
+        ClusterLayerSettings.prototype.setName = function (name) {
+            return ClusterLayerSettings.copy(Object.assign(Object.assign({}, this), { name: name }));
         };
-        FeatureLayerSettings.prototype.setMinZoom = function (minZoom) {
-            return FeatureLayerSettings.copy(Object.assign(Object.assign({}, this), { minZoom: minZoom }));
+        ClusterLayerSettings.prototype.setMaxZoom = function (maxZoom) {
+            return ClusterLayerSettings.copy(Object.assign(Object.assign({}, this), { maxZoom: maxZoom }));
         };
-        FeatureLayerSettings.prototype.setStyle = function (style) {
-            return FeatureLayerSettings.copy(Object.assign(Object.assign({}, this), { style: style }));
+        ClusterLayerSettings.prototype.setMinZoom = function (minZoom) {
+            return ClusterLayerSettings.copy(Object.assign(Object.assign({}, this), { minZoom: minZoom }));
         };
-        FeatureLayerSettings.prototype.isSame = function (model) {
+        ClusterLayerSettings.prototype.setClusterCancel = function (clusterCancel) {
+            return ClusterLayerSettings.copy(Object.assign(Object.assign({}, this), { clusterCancel: clusterCancel }));
+        };
+        ClusterLayerSettings.prototype.setBbox = function (bbox) {
+            return ClusterLayerSettings.copy(Object.assign(Object.assign({}, this), { bbox: bbox }));
+        };
+        ClusterLayerSettings.prototype.setStyle = function (style) {
+            return ClusterLayerSettings.copy(Object.assign(Object.assign({}, this), { style: style }));
+        };
+        ClusterLayerSettings.prototype.isSame = function (model) {
             if (this.maxZoom !== model.maxZoom)
                 return false;
             if (this.minZoom !== model.minZoom)
@@ -1421,90 +1692,266 @@
                 return false;
             if (this.name !== model.name)
                 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)
                 return false;
             return true;
         };
-        return FeatureLayerSettings;
+        return ClusterLayerSettings;
     }());
 
-    var FeatureLayerFactory = /** @class */ (function () {
-        function FeatureLayerFactory() {
+    var ClusterLayerManager = /** @class */ (function () {
+        function ClusterLayerManager(settings, layer, postboy) {
+            this.settings = settings;
+            this.layer = layer;
+            this.postboy = postboy;
+            this.observeClick();
+            this.observeMapMovement();
         }
-        FeatureLayerFactory.prototype.build = function (settings) {
-            var source$1 = new source.Vector({});
-            var layer$1 = new layer.Vector({
+        ClusterLayerManager.prototype.observeMapMovement = function () {
+            var _this = this;
+            rxjs.combineLatest([
+                this.postboy.subscribe(MapMoveEndEvent.ID).pipe(operators.auditTime(250)),
+                this.postboy.subscribe(MapRenderedEvent.ID),
+            ]).subscribe(function (_d) {
+                var _e = __read(_d, 2), movement = _e[0], renderEvent = _e[1];
+                _this.checkClusterNecessity(renderEvent.map);
+            });
+        };
+        ClusterLayerManager.prototype.observeClick = function () {
+            var _this = this;
+            this.postboy.subscribe(MapClickEvent.ID).subscribe(function (m) {
+                var _a, _b;
+                if (((_b = (_a = m.features[_this.settings.name]) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) > 1) {
+                    _this.postboy.fire(new FitToFeaturesCommand(m.features[_this.settings.name], -1));
+                }
+            });
+        };
+        ClusterLayerManager.prototype.checkClusterNecessity = function (map) {
+            var _a, _b, _c;
+            var zoom = (_a = map.getView().getZoom()) !== null && _a !== void 0 ? _a : 0;
+            var 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);
+        };
+        return ClusterLayerManager;
+    }());
+
+    var ClusterLayerFactory = /** @class */ (function () {
+        function ClusterLayerFactory() {
+        }
+        ClusterLayerFactory.prototype.build = function (settings, postboy) {
+            var source$1 = new source.Vector({
+                strategy: settings.bbox ? loadingstrategy.bbox : undefined,
+            });
+            var cluster = new Cluster__default["default"]({
+                distance: settings.distance,
                 source: source$1,
-                maxZoom: settings.maxZoom,
-                minZoom: settings.minZoom,
-                zIndex: settings.zIndex,
+                geometryFunction: function (feature) {
+                    var _a, _b;
+                    var geom = feature.getGeometry();
+                    if ((geom === null || geom === void 0 ? void 0 : geom.getType()) == 'Point') {
+                        return geom;
+                    }
+                    else if ((geom === null || geom === void 0 ? void 0 : geom.getType()) == 'Polygon') {
+                        return (_a = geom) === null || _a === void 0 ? void 0 : _a.getInteriorPoint();
+                    }
+                    else if ((geom === null || geom === void 0 ? void 0 : geom.getType()) == 'MultiPolygon') {
+                        return (_b = Polygon.fromExtent(geom.getExtent())) === null || _b === void 0 ? void 0 : _b.getInteriorPoint();
+                    }
+                    return undefined;
+                },
             });
-            if (settings.style)
-                layer$1.setStyle(settings.style);
+            var layer$1 = new layer.Vector({
+                source: cluster,
+                maxZoom: settings.maxZoom || undefined,
+                minZoom: settings.minZoom || undefined,
+                zIndex: settings.zIndex || 0,
+            });
+            layer$1.setStyle(this.styleFunc(settings));
             layer$1.set('name', settings.name);
-            return layer$1;
+            return new ClusterLayerManager(settings, layer$1, postboy);
         };
-        return FeatureLayerFactory;
+        ClusterLayerFactory.prototype.styleFunc = function (settings) {
+            return function (feature) {
+                var features = feature.get('features');
+                if (!settings.style)
+                    return undefined;
+                return settings.style(features.map(function (f) { return (Object.assign({ id: f.getId() }, f.get(MapConstants.FeatureInfo))); }));
+            };
+        };
+        return ClusterLayerFactory;
     }());
-    FeatureLayerFactory.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FeatureLayerFactory, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    FeatureLayerFactory.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FeatureLayerFactory, providedIn: 'root' });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FeatureLayerFactory, decorators: [{
+    ClusterLayerFactory.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ClusterLayerFactory, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    ClusterLayerFactory.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ClusterLayerFactory, providedIn: 'root' });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ClusterLayerFactory, decorators: [{
                 type: i0.Injectable,
                 args: [{
                         providedIn: 'root',
                     }]
             }] });
 
-    var FeatureLayerComponent = /** @class */ (function (_super) {
-        __extends(FeatureLayerComponent, _super);
-        function FeatureLayerComponent(postboy, factory) {
+    var ClusterLayerComponent = /** @class */ (function (_super) {
+        __extends(ClusterLayerComponent, _super);
+        function ClusterLayerComponent(postboy, factory) {
             var _this = _super.call(this) || this;
             _this.postboy = postboy;
             _this.factory = factory;
-            _this.layer = null;
-            _this._settings = new FeatureLayerSettings();
+            _this.manager = null;
+            _this._settings = new ClusterLayerSettings();
             _this.onDestroy = function () { return _this.removeLayer(); };
             return _this;
         }
-        FeatureLayerComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            this.postboy
-                .subscribe(MapRenderedEvent.ID)
-                .pipe(operators.filter(function (m) { return !!m; }), operators.first())
-                .subscribe(function (m) { return _this.initLayer(); });
-        };
-        Object.defineProperty(FeatureLayerComponent.prototype, "settings", {
+        ClusterLayerComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.postboy
+                .subscribe(MapRenderedEvent.ID)
+                .pipe(operators.filter(function (m) { return !!m; }), operators.first())
+                .subscribe(function (m) { return _this.initLayer(); });
+        };
+        Object.defineProperty(ClusterLayerComponent.prototype, "settings", {
+            set: function (value) {
+                if (!value || this._settings.isSame(value))
+                    return;
+                this._settings = value;
+                this.initLayer();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        ClusterLayerComponent.prototype.initLayer = function () {
+            this.removeLayer();
+            this.manager = this.factory.build(this._settings, this.postboy);
+            this.postboy.fire(new AddLayerCommand(this.manager.layer));
+        };
+        ClusterLayerComponent.prototype.removeLayer = function () {
+            var _a;
+            if ((_a = this.manager) === null || _a === void 0 ? void 0 : _a.layer)
+                this.postboy.fire(new RemoveLayerCommand(this.manager.layer));
+        };
+        return ClusterLayerComponent;
+    }(DestructibleComponent));
+    ClusterLayerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ClusterLayerComponent, deps: [{ token: MapPostboyService }, { token: ClusterLayerFactory }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ClusterLayerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ClusterLayerComponent, selector: "lib-cluster-layer", inputs: { settings: "settings" }, usesInheritance: true, ngImport: i0__namespace, template: '', isInline: true, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ClusterLayerComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'lib-cluster-layer',
+                        template: '',
+                        styleUrls: [],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    }]
+            }], ctorParameters: function () { return [{ type: MapPostboyService }, { type: ClusterLayerFactory }]; }, propDecorators: { settings: [{
+                    type: i0.Input
+                }] } });
+
+    var MapPlateFactory = /** @class */ (function () {
+        function MapPlateFactory() {
+        }
+        MapPlateFactory.prototype.build = function (settings) {
+            return new Map__default["default"]({
+                controls: [],
+                view: new View__default["default"]({
+                    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: [],
+            });
+        };
+        return MapPlateFactory;
+    }());
+    MapPlateFactory.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MapPlateFactory, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    MapPlateFactory.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MapPlateFactory, providedIn: 'root' });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MapPlateFactory, decorators: [{
+                type: i0.Injectable,
+                args: [{
+                        providedIn: 'root',
+                    }]
+            }] });
+
+    var MapPlateComponent = /** @class */ (function (_super) {
+        __extends(MapPlateComponent, _super);
+        function MapPlateComponent(elementRef, postboy, mapFactory, registrator, detector) {
+            var _this = _super.call(this) || this;
+            _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 = function () {
+                _this.registrator.down();
+            };
+            registrator.up();
+            return _this;
+        }
+        Object.defineProperty(MapPlateComponent.prototype, "settings", {
             set: function (value) {
                 if (!value || this._settings.isSame(value))
                     return;
                 this._settings = value;
-                this.initLayer();
+                this.setOsm();
             },
             enumerable: false,
             configurable: true
         });
-        FeatureLayerComponent.prototype.initLayer = function () {
-            this.removeLayer();
-            this.layer = this.factory.build(this._settings);
-            this.postboy.fire(new AddLayerCommand(this.layer));
+        MapPlateComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            proj.useGeographic();
+            this.map = this.mapFactory.build(this._settings);
+            this.map.setTarget(this.elementRef.nativeElement);
+            this.detector.detectChanges();
+            this.map.once('postrender', function () {
+                _this.map.updateSize();
+                _this.postboy.fire(new MapRenderedEvent(_this.map));
+            });
+            this.setOsm();
         };
-        FeatureLayerComponent.prototype.removeLayer = function () {
-            if (this.layer)
-                this.postboy.fire(new RemoveLayerCommand(this.layer));
+        MapPlateComponent.prototype.setOsm = function () {
+            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();
         };
-        return FeatureLayerComponent;
+        return MapPlateComponent;
     }(DestructibleComponent));
-    FeatureLayerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FeatureLayerComponent, deps: [{ token: MapPostboyService }, { token: FeatureLayerFactory }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    FeatureLayerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: FeatureLayerComponent, selector: "lib-feature-layer", inputs: { settings: "settings" }, usesInheritance: true, ngImport: i0__namespace, template: '', isInline: true, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FeatureLayerComponent, decorators: [{
+    MapPlateComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MapPlateComponent, deps: [{ token: i0__namespace.ElementRef }, { token: MapPostboyService }, { token: MapPlateFactory }, { token: MessageRegistratorService }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    MapPlateComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MapPlateComponent, selector: "lib-map-plate", inputs: { settings: "settings" }, providers: [
+            MessageRegistratorService,
+            MapStateService,
+            MapManagementService,
+            MapClickService,
+            MapFeatureService,
+            DrawingService,
+            DrawingGenerationService,
+        ], usesInheritance: true, ngImport: i0__namespace, 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"], components: [{ type: OsmTileLayerComponent, selector: "lib-osm-tile-layer", inputs: ["url", "map"] }, { type: FeatureLayerComponent, selector: "lib-feature-layer", inputs: ["settings"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MapPlateComponent, decorators: [{
                 type: i0.Component,
                 args: [{
-                        selector: 'lib-feature-layer',
-                        template: '',
-                        styleUrls: [],
+                        selector: 'lib-map-plate',
+                        templateUrl: './map-plate.component.html',
+                        styleUrls: ['./map-plate.component.scss'],
                         changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                        providers: [
+                            MessageRegistratorService,
+                            MapStateService,
+                            MapManagementService,
+                            MapClickService,
+                            MapFeatureService,
+                            DrawingService,
+                            DrawingGenerationService,
+                        ],
                     }]
-            }], ctorParameters: function () { return [{ type: MapPostboyService }, { type: FeatureLayerFactory }]; }, propDecorators: { settings: [{
+            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: MapPostboyService }, { type: MapPlateFactory }, { type: MessageRegistratorService }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { settings: [{
                     type: i0.Input
                 }] } });
 
@@ -1696,8 +2143,7 @@
                 .subscribe(function () { return _this.putPolygons(); });
         };
         PolygonsComponent.prototype.putPolygons = function () {
-            var _a;
-            if (!((_a = this._polygons) === null || _a === void 0 ? void 0 : _a.length))
+            if (!this._polygons)
                 return;
             this.postboy.fire(new PlaceLayerFeaturesCommand(this.layerName, this._polygons.map(function (m) { return m.feature; })));
         };
@@ -1719,194 +2165,6 @@
                     type: i0.Input
                 }] } });
 
-    var ClusterLayerSettings = /** @class */ (function () {
-        function ClusterLayerSettings() {
-            this.name = IdGenerator.get();
-            this.zIndex = 1;
-            this.maxZoom = 19;
-            this.minZoom = 0;
-            this.distance = 20;
-            this.bbox = false;
-        }
-        ClusterLayerSettings.copy = function (model) {
-            var result = new ClusterLayerSettings();
-            result.name = model.name;
-            result.maxZoom = model.maxZoom;
-            result.minZoom = model.minZoom;
-            result.zIndex = model.zIndex;
-            result.bbox = model.bbox;
-            result.distance = model.distance;
-            result.style = model.style;
-            return result;
-        };
-        ClusterLayerSettings.prototype.setZIndex = function (zIndex) {
-            return ClusterLayerSettings.copy(Object.assign(Object.assign({}, this), { zIndex: zIndex }));
-        };
-        ClusterLayerSettings.prototype.setDistance = function (distance) {
-            return ClusterLayerSettings.copy(Object.assign(Object.assign({}, this), { distance: distance }));
-        };
-        ClusterLayerSettings.prototype.setName = function (name) {
-            return ClusterLayerSettings.copy(Object.assign(Object.assign({}, this), { name: name }));
-        };
-        ClusterLayerSettings.prototype.setMaxZoom = function (maxZoom) {
-            return ClusterLayerSettings.copy(Object.assign(Object.assign({}, this), { maxZoom: maxZoom }));
-        };
-        ClusterLayerSettings.prototype.setMinZoom = function (minZoom) {
-            return ClusterLayerSettings.copy(Object.assign(Object.assign({}, this), { minZoom: minZoom }));
-        };
-        ClusterLayerSettings.prototype.setBbox = function (bbox) {
-            return ClusterLayerSettings.copy(Object.assign(Object.assign({}, this), { bbox: bbox }));
-        };
-        ClusterLayerSettings.prototype.setStyle = function (style) {
-            return ClusterLayerSettings.copy(Object.assign(Object.assign({}, this), { style: style }));
-        };
-        ClusterLayerSettings.prototype.isSame = function (model) {
-            if (this.maxZoom !== model.maxZoom)
-                return false;
-            if (this.minZoom !== model.minZoom)
-                return false;
-            if (this.zIndex !== model.zIndex)
-                return false;
-            if (this.name !== model.name)
-                return false;
-            if (this.distance !== model.distance)
-                return false;
-            if (this.bbox !== model.bbox)
-                return false;
-            if (this.style !== model.style)
-                return false;
-            return true;
-        };
-        return ClusterLayerSettings;
-    }());
-
-    var ClusterLayerManager = /** @class */ (function () {
-        function ClusterLayerManager(settings, layer, postboy) {
-            this.settings = settings;
-            this.layer = layer;
-            this.postboy = postboy;
-            this.observeClick();
-        }
-        ClusterLayerManager.prototype.observeClick = function () {
-            var _this = this;
-            this.postboy.subscribe(MapClickEvent.ID).subscribe(function (m) {
-                var _a, _b;
-                if (((_b = (_a = m.features[_this.settings.name]) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) > 1) {
-                    _this.postboy.fire(new FitToFeaturesCommand(m.features[_this.settings.name], -1));
-                }
-            });
-        };
-        return ClusterLayerManager;
-    }());
-
-    var ClusterLayerFactory = /** @class */ (function () {
-        function ClusterLayerFactory() {
-        }
-        ClusterLayerFactory.prototype.build = function (settings, postboy) {
-            var source$1 = new source.Vector({
-                strategy: settings.bbox ? loadingstrategy.bbox : undefined,
-            });
-            var cluster = new Cluster__default["default"]({
-                distance: settings.distance,
-                source: source$1,
-                geometryFunction: function (feature) {
-                    var _a, _b;
-                    var geom = feature.getGeometry();
-                    if ((geom === null || geom === void 0 ? void 0 : geom.getType()) == 'Point') {
-                        return geom;
-                    }
-                    else if ((geom === null || geom === void 0 ? void 0 : geom.getType()) == 'Polygon') {
-                        return (_a = geom) === null || _a === void 0 ? void 0 : _a.getInteriorPoint();
-                    }
-                    else if ((geom === null || geom === void 0 ? void 0 : geom.getType()) == 'MultiPolygon') {
-                        return (_b = Polygon.fromExtent(geom.getExtent())) === null || _b === void 0 ? void 0 : _b.getInteriorPoint();
-                    }
-                    return undefined;
-                },
-            });
-            var layer$1 = new layer.Vector({
-                source: cluster,
-                maxZoom: settings.maxZoom || undefined,
-                minZoom: settings.minZoom || undefined,
-                zIndex: settings.zIndex || 0,
-            });
-            layer$1.setStyle(this.styleFunc(settings));
-            layer$1.set('name', settings.name);
-            return new ClusterLayerManager(settings, layer$1, postboy);
-        };
-        ClusterLayerFactory.prototype.styleFunc = function (settings) {
-            return function (feature) {
-                var features = feature.get('features');
-                if (!settings.style)
-                    return undefined;
-                return settings.style(features.map(function (f) { return (Object.assign({ id: f.getId() }, f.get(MapConstants.FeatureInfo))); }));
-            };
-        };
-        return ClusterLayerFactory;
-    }());
-    ClusterLayerFactory.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ClusterLayerFactory, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    ClusterLayerFactory.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ClusterLayerFactory, providedIn: 'root' });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ClusterLayerFactory, decorators: [{
-                type: i0.Injectable,
-                args: [{
-                        providedIn: 'root',
-                    }]
-            }] });
-
-    var ClusterLayerComponent = /** @class */ (function (_super) {
-        __extends(ClusterLayerComponent, _super);
-        function ClusterLayerComponent(postboy, factory) {
-            var _this = _super.call(this) || this;
-            _this.postboy = postboy;
-            _this.factory = factory;
-            _this.manager = null;
-            _this._settings = new ClusterLayerSettings();
-            _this.onDestroy = function () { return _this.removeLayer(); };
-            return _this;
-        }
-        ClusterLayerComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            this.postboy
-                .subscribe(MapRenderedEvent.ID)
-                .pipe(operators.filter(function (m) { return !!m; }), operators.first())
-                .subscribe(function (m) { return _this.initLayer(); });
-        };
-        Object.defineProperty(ClusterLayerComponent.prototype, "settings", {
-            set: function (value) {
-                if (!value || this._settings.isSame(value))
-                    return;
-                this._settings = value;
-                this.initLayer();
-            },
-            enumerable: false,
-            configurable: true
-        });
-        ClusterLayerComponent.prototype.initLayer = function () {
-            this.removeLayer();
-            this.manager = this.factory.build(this._settings, this.postboy);
-            this.postboy.fire(new AddLayerCommand(this.manager.layer));
-        };
-        ClusterLayerComponent.prototype.removeLayer = function () {
-            var _a;
-            if ((_a = this.manager) === null || _a === void 0 ? void 0 : _a.layer)
-                this.postboy.fire(new RemoveLayerCommand(this.manager.layer));
-        };
-        return ClusterLayerComponent;
-    }(DestructibleComponent));
-    ClusterLayerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ClusterLayerComponent, deps: [{ token: MapPostboyService }, { token: ClusterLayerFactory }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    ClusterLayerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ClusterLayerComponent, selector: "lib-cluster-layer", inputs: { settings: "settings" }, usesInheritance: true, ngImport: i0__namespace, template: '', isInline: true, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ClusterLayerComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'lib-cluster-layer',
-                        template: '',
-                        styleUrls: [],
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    }]
-            }], ctorParameters: function () { return [{ type: MapPostboyService }, { type: ClusterLayerFactory }]; }, propDecorators: { settings: [{
-                    type: i0.Input
-                }] } });
-
     var MapModule = /** @class */ (function () {
         function MapModule() {
         }
@@ -1921,18 +2179,18 @@
             MarkersComponent,
             TooltipComponent,
             PolygonsComponent,
-            ClusterLayerComponent], imports: [i5.CommonModule], exports: [MapPlateComponent,
+            ClusterLayerComponent], imports: [i6.CommonModule], exports: [MapPlateComponent,
             FeatureLayerComponent,
             MarkersComponent,
             TileLayerComponent,
             TooltipComponent,
             PolygonsComponent,
             ClusterLayerComponent] });
-    MapModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MapModule, imports: [[i5.CommonModule]] });
+    MapModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MapModule, imports: [[i6.CommonModule]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MapModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
-                        imports: [i5.CommonModule],
+                        imports: [i6.CommonModule],
                         declarations: [
                             DestructibleComponent,
                             MapPlateComponent,
@@ -2023,6 +2281,59 @@
         return TextStyleHelper;
     }());
 
+    var StringifyFeatureHelper = /** @class */ (function () {
+        function StringifyFeatureHelper() {
+        }
+        StringifyFeatureHelper.polygon = function (feature, format$1) {
+            if (format$1 === void 0) { format$1 = exports.FeatureOutputFormat.GeoJson; }
+            return format$1 === exports.FeatureOutputFormat.GeoJson
+                ? new format.GeoJSON().writeFeature(feature)
+                : new format.WKT().writeFeature(feature);
+        };
+        StringifyFeatureHelper.circle = function (feature, format) {
+            if (format === void 0) { format = exports.FeatureOutputFormat.GeoJson; }
+            // const clone = feature.clone();
+            // clone.setGeometry(fromCircle(feature.getGeometry()! as Circle));
+            var tetemp = feature.getGeometryName();
+            var circle = feature.getGeometry();
+            // const temp = StringifyFeatureHelper.drawCircle(circle.getCenter(), circle.getRadius());
+            var ttt = feature.getGeometry().getExtent();
+            var eastPoint = [ttt[2], (ttt[1] + ttt[3]) / 2];
+            var aaa = __spreadArray(__spreadArray([], __read(proj.transform([ttt[0], ttt[1]], 'EPSG:4326', 'EPSG:3857'))), __read(proj.transform([ttt[2], ttt[3]], 'EPSG:4326', 'EPSG:3857')));
+            var radius = (aaa[2] - aaa[0]) / 2;
+            var radius2 = new geom.LineString([circle.getCenter(), eastPoint]).getLength();
+            var polygonGeom = new Polygon__default["default"](StringifyFeatureHelper.drawCircle(circle.getCenter(), radius));
+            // var edgeCoordinate = [circle.getCenter()[0] + radius, circle.getCenter()[1]];
+            // var wgs84Sphere = new Sphere(6378137);
+            return StringifyFeatureHelper.polygon(new ol.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);
+        };
+        StringifyFeatureHelper.drawCircle = function (point, radius) {
+            var tetetemp = proj.transform(point, 'EPSG:4326', 'EPSG:3857');
+            // const tetetemp = point;
+            var radians = Math.PI / 180; // degrees to radians
+            var degrees = 180 / Math.PI; // radians to degrees
+            var earthsradius = 6378137.0;
+            var rlat = (radius / earthsradius) * degrees;
+            var rlng = rlat / Math.cos(tetetemp[1] * radians);
+            var extp = [];
+            for (var i = 0; i <= 32; i++) {
+                var theta = Math.PI * (i / 16);
+                extp.push([
+                    tetetemp[0] + rlng * Math.cos(theta) * epsg4326.METERS_PER_UNIT,
+                    tetetemp[1] + rlat * Math.sin(theta) * epsg4326.METERS_PER_UNIT,
+                ]);
+            }
+            return [extp.map(function (e) { return proj.transform(e, 'EPSG:3857', 'EPSG:4326'); })];
+        };
+        return StringifyFeatureHelper;
+    }());
+
     /*
      * Public API Surface of maps
      */
@@ -2031,16 +2342,16 @@
      * Generated bundle index. Do not edit.
      */
 
-    exports.CallbackMessage = CallbackMessage;
+    exports.CancelDrawingCommand = CancelDrawingCommand;
     exports.CloseTooltipCommand = CloseTooltipCommand;
     exports.ClusterLayerComponent = ClusterLayerComponent;
     exports.ClusterLayerSettings = ClusterLayerSettings;
     exports.FeatureLayerComponent = FeatureLayerComponent;
     exports.FeatureLayerSettings = FeatureLayerSettings;
-    exports.GenericMessage = GenericMessage;
     exports.MapClickEvent = MapClickEvent;
     exports.MapLyrsLabel = MapLyrsLabel;
     exports.MapModule = MapModule;
+    exports.MapMoveEndEvent = MapMoveEndEvent;
     exports.MapPlateComponent = MapPlateComponent;
     exports.MapPostboyService = MapPostboyService;
     exports.MapRenderedEvent = MapRenderedEvent;
@@ -2053,6 +2364,8 @@
     exports.PolygonModel = PolygonModel;
     exports.PolygonStyleHelper = PolygonStyleHelper;
     exports.PolygonsComponent = PolygonsComponent;
+    exports.StartDrawingCommand = StartDrawingCommand;
+    exports.StringifyFeatureHelper = StringifyFeatureHelper;
     exports.TextStyleHelper = TextStyleHelper;
     exports.TileLayerComponent = TileLayerComponent;
     exports.TileLayerSettings = TileLayerSettings;