@artstesh/maps 1.0.7 → 1.0.8

package/dist/bundles/maps-components.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', ['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.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/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')) :
+    typeof define === 'function' && define.amd ? define('maps-components', ['exports', '@angular/core', '@angular/common', 'ol', 'ol/geom', 'ol/format', 'ol/extent', 'ol/proj', '@artstesh/postboy', 'rxjs/operators', 'ol/source', 'ol/interaction', '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'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["maps-components"] = {}, 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.TileLayer, global.OSM, global.layer, global.loadingstrategy, global.Polygon, global.Cluster, global.rxjs, global.Map, global.View, global.Overlay, global.Style, global.style));
+})(this, (function (exports, i0, i6, ol, geom, format, extent, proj, postboy, operators, source, interaction, TileLayer, OSM, layer, loadingstrategy, Polygon, Cluster, rxjs, Map, View, Overlay, Style, style) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -25,13 +25,13 @@
     }
 
     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 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 +614,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 +671,16 @@
         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";
+    })(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 +697,7 @@
             configurable: true
         });
         return MapRenderedEvent;
-    }(GenericMessage));
+    }(postboy.PostboyGenericMessage));
     MapRenderedEvent.ID = 'b6121807-3b89-4cd3-82cf-089d2cefdc4f';
 
     var MapClickEvent = /** @class */ (function (_super) {
@@ -725,9 +717,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 +754,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 +809,7 @@
             configurable: true
         });
         return AddLayerCommand;
-    }(GenericMessage));
+    }(postboy.PostboyGenericMessage));
     AddLayerCommand.ID = 'd93e250f-92bc-43ac-9c6a-46c521a1aaa5';
 
     var PlaceLayerFeaturesCommand = /** @class */ (function (_super) {
@@ -780,7 +828,7 @@
             configurable: true
         });
         return PlaceLayerFeaturesCommand;
-    }(GenericMessage));
+    }(postboy.PostboyGenericMessage));
     PlaceLayerFeaturesCommand.ID = '8caf86bc-869b-426f-b36d-4642f6b8aab0';
 
     var RemoveLayerCommand = /** @class */ (function (_super) {
@@ -798,7 +846,7 @@
             configurable: true
         });
         return RemoveLayerCommand;
-    }(GenericMessage));
+    }(postboy.PostboyGenericMessage));
     RemoveLayerCommand.ID = 'ab484e0e-e185-45cd-8434-12101f3c7eb1';
 
     var AddTileCommand = /** @class */ (function (_super) {
@@ -816,7 +864,7 @@
             configurable: true
         });
         return AddTileCommand;
-    }(GenericMessage));
+    }(postboy.PostboyGenericMessage));
     AddTileCommand.ID = '25b7df28-72ce-4453-9fe6-54285a2fdc57';
 
     var RemoveTileCommand = /** @class */ (function (_super) {
@@ -834,7 +882,7 @@
             configurable: true
         });
         return RemoveTileCommand;
-    }(GenericMessage));
+    }(postboy.PostboyGenericMessage));
     RemoveTileCommand.ID = 'c36ccc0b-5638-4819-b148-2de57a59a5b7';
 
     var FitToFeaturesCommand = /** @class */ (function (_super) {
@@ -854,23 +902,57 @@
             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 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 +966,7 @@
             this.observePlaceFeatures();
             this.observeAddTile();
             this.observeRemoveTile();
+            this.observeLayerQuery();
         };
         MapManagementService.prototype.observeRemoveTile = function () {
             var _this = this;
@@ -893,6 +976,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 +1039,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 +1146,82 @@
                 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 cancelSub = _this.observeCancelation(ev, l);
+                    _this.drawInteraction = new interaction.Draw({
+                        source: l.getSource(),
+                        type: exports.DrawingType[ev.type],
+                        style: ev.style,
+                    });
+                    _this.map.addInteraction(_this.drawInteraction);
+                    _this.drawInteraction.on('drawend', function (evt) {
+                        cancelSub.unsubscribe();
+                        _this.onEnd(evt, ev, l);
+                    });
+                });
+            });
+            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 MessageRegistratorService = /** @class */ (function (_super) {
         __extends(MessageRegistratorService, _super);
-        function MessageRegistratorService(service, management, state, feature, interaction) {
+        function MessageRegistratorService(service, management, state, feature, interaction, drawing) {
             var _this = _super.call(this, service) || this;
-            _this.registerServices([management, state, interaction, feature]);
+            _this.registerServices([management, state, interaction, feature, drawing]);
             return _this;
         }
         MessageRegistratorService.prototype._up = function () {
@@ -1067,170 +1234,19 @@
             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);
         };
         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 }], 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 }]; } });
-
-    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 OsmTileLayerComponent = /** @class */ (function (_super) {
-        __extends(OsmTileLayerComponent, _super);
-        function OsmTileLayerComponent() {
-            var _this = _super.call(this) || this;
-            _this._url = '';
-            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", {
-            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);
-        };
-        OsmTileLayerComponent.prototype.initLayer = function () {
-            if (!this._url || !this._map)
-                return;
-            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 OsmTileLayerComponent;
-    }(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: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'lib-osm-tile-layer',
-                        template: '',
-                        styleUrls: [],
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    }]
-            }], ctorParameters: function () { return []; }, propDecorators: { url: [{
-                    type: i0.Input
-                }], map: [{
-                    type: i0.Input
-                }] } });
-
-    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.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.setOsm();
-            },
-            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();
-        };
-        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 MapPlateComponent;
-    }(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: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'lib-map-plate',
-                        templateUrl: './map-plate.component.html',
-                        styleUrls: ['./map-plate.component.scss'],
-                        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: [{
-                    type: i0.Input
-                }] } });
+            }], ctorParameters: function () { return [{ type: MapPostboyService }, { type: MapManagementService }, { type: MapStateService }, { type: MapFeatureService }, { type: MapClickService }, { type: DrawingService }]; } });
 
     var TileLayerSettings = /** @class */ (function () {
         function TileLayerSettings() {
@@ -1381,15 +1397,82 @@
                     type: i0.Input
                 }] } });
 
-    var FeatureLayerSettings = /** @class */ (function () {
-        function FeatureLayerSettings() {
-            this.name = IdGenerator.get();
-            this.zIndex = 1;
-            this.maxZoom = 19;
-            this.minZoom = 0;
+    var OsmTileLayerComponent = /** @class */ (function (_super) {
+        __extends(OsmTileLayerComponent, _super);
+        function OsmTileLayerComponent() {
+            var _this = _super.call(this) || this;
+            _this._url = '';
+            return _this;
         }
-        FeatureLayerSettings.copy = function (model) {
-            var result = new FeatureLayerSettings();
+        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", {
+            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);
+        };
+        OsmTileLayerComponent.prototype.initLayer = function () {
+            if (!this._url || !this._map)
+                return;
+            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 OsmTileLayerComponent;
+    }(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: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'lib-osm-tile-layer',
+                        template: '',
+                        styleUrls: [],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    }]
+            }], ctorParameters: function () { return []; }, propDecorators: { url: [{
+                    type: i0.Input
+                }], map: [{
+                    type: i0.Input
+                }] } });
+
+    var FeatureLayerSettings = /** @class */ (function () {
+        function FeatureLayerSettings() {
+            this.name = IdGenerator.get();
+            this.zIndex = 1;
+            this.maxZoom = 19;
+            this.minZoom = 0;
+        }
+        FeatureLayerSettings.copy = function (model) {
+            var result = new FeatureLayerSettings();
             result.name = model.name;
             result.maxZoom = model.maxZoom;
             result.minZoom = model.minZoom;
@@ -1460,51 +1543,367 @@
         function FeatureLayerComponent(postboy, factory) {
             var _this = _super.call(this) || this;
             _this.postboy = postboy;
-            _this.factory = factory;
-            _this.layer = null;
-            _this._settings = new FeatureLayerSettings();
-            _this.onDestroy = function () { return _this.removeLayer(); };
+            _this.factory = factory;
+            _this.layer = null;
+            _this._settings = new FeatureLayerSettings();
+            _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", {
+            set: function (value) {
+                if (!value || this._settings.isSame(value))
+                    return;
+                this._settings = value;
+                this.initLayer();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        FeatureLayerComponent.prototype.initLayer = function () {
+            this.removeLayer();
+            this.layer = this.factory.build(this._settings);
+            this.postboy.fire(new AddLayerCommand(this.layer));
+        };
+        FeatureLayerComponent.prototype.removeLayer = function () {
+            if (this.layer)
+                this.postboy.fire(new RemoveLayerCommand(this.layer));
+        };
+        return FeatureLayerComponent;
+    }(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: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'lib-feature-layer',
+                        template: '',
+                        styleUrls: [],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    }]
+            }], ctorParameters: function () { return [{ type: MapPostboyService }, { type: FeatureLayerFactory }]; }, propDecorators: { settings: [{
+                    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;
+            this.clusterCancel = 14;
+        }
+        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;
+        };
+        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.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)
+                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.clusterCancel !== model.clusterCancel)
+                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();
+            this.observeMapMovement();
+        }
+        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,
+                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 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;
         }
-        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", {
+        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,
+        ], 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,
+                        ],
                     }]
-            }], 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 +2095,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 +2117,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 +2131,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,
@@ -2035,16 +2245,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;
@@ -2057,6 +2267,7 @@
     exports.PolygonModel = PolygonModel;
     exports.PolygonStyleHelper = PolygonStyleHelper;
     exports.PolygonsComponent = PolygonsComponent;
+    exports.StartDrawingCommand = StartDrawingCommand;
     exports.TextStyleHelper = TextStyleHelper;
     exports.TileLayerComponent = TileLayerComponent;
     exports.TileLayerSettings = TileLayerSettings;