@artstesh/maps 1.0.6 → 1.0.8

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/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/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.Style, global.style));
-})(this, (function (exports, i0, i5, ol, geom, format, extent, proj, rxjs, postboy, Map, View, TileLayer, OSM, operators, source, layer, Overlay, 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/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/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["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.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,11 +25,12 @@
     }
 
     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 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);
 
@@ -608,6 +609,14 @@
     }());
     IdGenerator.collection = 'ABCDEFGHIJKLMNOPQRSTUVWXTZ0123456789'.split('');
 
+    var MapConstants = /** @class */ (function () {
+        function MapConstants() {
+        }
+        return MapConstants;
+    }());
+    MapConstants.FeatureInfo = 'f-info';
+    MapConstants.DrawingLayerId = '93a981756ec7';
+
     var MarkerModel = /** @class */ (function () {
         function MarkerModel(lat, lng, id, info) {
             this.lat = lat;
@@ -627,7 +636,7 @@
             var feature = new ol.Feature(new geom.Point([this.lng, this.lat]));
             feature.setId(this.id);
             if (this.info)
-                feature.set('info', this.info);
+                feature.set(MapConstants.FeatureInfo, this.info);
             return feature;
         };
         return MarkerModel;
@@ -662,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);
@@ -697,15 +697,16 @@
             configurable: true
         });
         return MapRenderedEvent;
-    }(GenericMessage));
+    }(postboy.PostboyGenericMessage));
     MapRenderedEvent.ID = 'b6121807-3b89-4cd3-82cf-089d2cefdc4f';
 
     var MapClickEvent = /** @class */ (function (_super) {
         __extends(MapClickEvent, _super);
-        function MapClickEvent(coordinates, entities) {
+        function MapClickEvent(coordinates, entities, features) {
             var _this = _super.call(this) || this;
             _this.coordinates = coordinates;
             _this.entities = entities;
+            _this.features = features;
             return _this;
         }
         Object.defineProperty(MapClickEvent.prototype, "id", {
@@ -716,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) {
@@ -734,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) {
@@ -752,7 +809,7 @@
             configurable: true
         });
         return AddLayerCommand;
-    }(GenericMessage));
+    }(postboy.PostboyGenericMessage));
     AddLayerCommand.ID = 'd93e250f-92bc-43ac-9c6a-46c521a1aaa5';
 
     var PlaceLayerFeaturesCommand = /** @class */ (function (_super) {
@@ -771,7 +828,7 @@
             configurable: true
         });
         return PlaceLayerFeaturesCommand;
-    }(GenericMessage));
+    }(postboy.PostboyGenericMessage));
     PlaceLayerFeaturesCommand.ID = '8caf86bc-869b-426f-b36d-4642f6b8aab0';
 
     var RemoveLayerCommand = /** @class */ (function (_super) {
@@ -789,7 +846,7 @@
             configurable: true
         });
         return RemoveLayerCommand;
-    }(GenericMessage));
+    }(postboy.PostboyGenericMessage));
     RemoveLayerCommand.ID = 'ab484e0e-e185-45cd-8434-12101f3c7eb1';
 
     var AddTileCommand = /** @class */ (function (_super) {
@@ -807,7 +864,7 @@
             configurable: true
         });
         return AddTileCommand;
-    }(GenericMessage));
+    }(postboy.PostboyGenericMessage));
     AddTileCommand.ID = '25b7df28-72ce-4453-9fe6-54285a2fdc57';
 
     var RemoveTileCommand = /** @class */ (function (_super) {
@@ -825,23 +882,77 @@
             configurable: true
         });
         return RemoveTileCommand;
-    }(GenericMessage));
+    }(postboy.PostboyGenericMessage));
     RemoveTileCommand.ID = 'c36ccc0b-5638-4819-b148-2de57a59a5b7';
 
+    var FitToFeaturesCommand = /** @class */ (function (_super) {
+        __extends(FitToFeaturesCommand, _super);
+        function FitToFeaturesCommand(features, zoomAfter) {
+            if (zoomAfter === void 0) { zoomAfter = 0; }
+            var _this = _super.call(this) || this;
+            _this.features = features;
+            _this.zoomAfter = zoomAfter;
+            return _this;
+        }
+        Object.defineProperty(FitToFeaturesCommand.prototype, "id", {
+            get: function () {
+                return FitToFeaturesCommand.ID;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return FitToFeaturesCommand;
+    }(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) {
@@ -855,6 +966,7 @@
             this.observePlaceFeatures();
             this.observeAddTile();
             this.observeRemoveTile();
+            this.observeLayerQuery();
         };
         MapManagementService.prototype.observeRemoveTile = function () {
             var _this = this;
@@ -864,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) {
@@ -890,11 +1006,14 @@
         MapManagementService.prototype.observePlaceFeatures = function () {
             var _this = this;
             this.postboy.subscribe(PlaceLayerFeaturesCommand.ID).subscribe(function (c) {
-                var _a, _b, _c;
+                var _a, _b;
                 if (!_this.layers[c.layer])
                     return;
-                (_b = (_a = _this.layers[c.layer]) === null || _a === void 0 ? void 0 : _a.getSource()) === null || _b === void 0 ? void 0 : _b.clear();
-                (_c = _this.layers[c.layer].getSource()) === null || _c === void 0 ? void 0 : _c.addFeatures(c.features);
+                var source = (_a = _this.layers[c.layer]) === null || _a === void 0 ? void 0 : _a.getSource();
+                if (!!source['getSource'])
+                    source = (_b = source) === null || _b === void 0 ? void 0 : _b.getSource();
+                source === null || source === void 0 ? void 0 : source.clear();
+                source === null || source === void 0 ? void 0 : source.addFeatures(c.features);
             });
         };
         MapManagementService.prototype.observeRemoveLayer = function () {
@@ -920,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;
     }());
@@ -930,6 +1058,42 @@
                 type: i0.Injectable
             }], ctorParameters: function () { return [{ type: MapPostboyService }]; } });
 
+    var MapFeatureService = /** @class */ (function () {
+        function MapFeatureService(postboy) {
+            this.postboy = postboy;
+        }
+        MapFeatureService.prototype.up = function () {
+            this.observeMapRender();
+            this.observeFitToFeatures();
+        };
+        MapFeatureService.prototype.observeMapRender = function () {
+            var _this = this;
+            this.postboy.subscribe(MapRenderedEvent.ID).subscribe(function (m) {
+                _this.map = m.map;
+            });
+        };
+        MapFeatureService.prototype.observeFitToFeatures = function () {
+            var _this = this;
+            this.postboy.subscribe(FitToFeaturesCommand.ID).subscribe(function (m) {
+                _this.fitToGeometries(m.features.map(function (f) { return f.getGeometry(); }), m.zoomAfter);
+            });
+        };
+        MapFeatureService.prototype.fitToGeometries = function (geometries, zoomAfter) {
+            if (!(geometries === null || geometries === void 0 ? void 0 : geometries.length) || !this.map)
+                return;
+            var extent$1 = extent.createEmpty();
+            geometries.forEach(function (g) { return extent.extend(extent$1, g.getExtent()); });
+            this.map.getView().fit(extent$1);
+            this.map.getView().setZoom(this.map.getView().getZoom() + zoomAfter);
+        };
+        return MapFeatureService;
+    }());
+    MapFeatureService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MapFeatureService, deps: [{ token: MapPostboyService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    MapFeatureService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MapFeatureService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MapFeatureService, decorators: [{
+                type: i0.Injectable
+            }], ctorParameters: function () { return [{ type: MapPostboyService }]; } });
+
     var MapClickService = /** @class */ (function () {
         function MapClickService(postboy) {
             this.postboy = postboy;
@@ -950,7 +1114,7 @@
         MapClickService.prototype.onClick = function (ev) {
             var _this = this;
             var _a;
-            var model = new MapClickEvent(ev.coordinate, {});
+            var model = new MapClickEvent(ev.coordinate, {}, {});
             (_a = this.map) === null || _a === void 0 ? void 0 : _a.forEachFeatureAtPixel(ev.pixel, function (f, l) {
                 _this.getFeatureCollectionWithInner([f])
                     .filter(function (f) { return f.getId() != null; })
@@ -958,7 +1122,10 @@
                     var layerName = l.get('name');
                     if (!model.entities[layerName])
                         model.entities[layerName] = [];
-                    model.entities[layerName].push(f.getId());
+                    if (!model.features[layerName])
+                        model.features[layerName] = [];
+                    model.entities[layerName].push(Object.assign({ id: fs.getId() }, fs.get(MapConstants.FeatureInfo)));
+                    model.features[layerName].push(fs);
                 });
             });
             return model;
@@ -979,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, interaction) {
+        function MessageRegistratorService(service, management, state, feature, interaction, drawing) {
             var _this = _super.call(this, service) || this;
-            _this.registerServices([management, state, interaction]);
+            _this.registerServices([management, state, interaction, feature, drawing]);
             return _this;
         }
         MessageRegistratorService.prototype._up = function () {
@@ -995,70 +1233,199 @@
             this.registerSubject(RemoveTileCommand.ID);
             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: 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: MapClickService }]; } });
+            }], ctorParameters: function () { return [{ type: MapPostboyService }, { type: MapManagementService }, { type: MapStateService }, { type: MapFeatureService }, { type: MapClickService }, { type: DrawingService }]; } });
 
-    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 () {
+        TileLayerComponent.prototype.initLayer = function () {
+            this.removeLayer();
+            this.layer = this.factory.build(this._settings);
+            this.postboy.fire(new AddTileCommand(this.layer));
+        };
+        TileLayerComponent.prototype.removeLayer = function () {
+            if (this.layer)
+                this.postboy.fire(new RemoveTileCommand(this.layer));
+        };
+        return TileLayerComponent;
+    }(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: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'lib-tile-layer',
+                        template: '',
+                        styleUrls: [],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    }]
+            }], ctorParameters: function () { return [{ type: MapPostboyService }, { type: TileLayerFactory }]; }, propDecorators: { settings: [{
+                    type: i0.Input
+                }] } });
+
+    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);
@@ -1097,184 +1464,99 @@
                     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], 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],
-                    }]
-            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: MapPostboyService }, { type: MapPlateFactory }, { type: MessageRegistratorService }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { settings: [{
-                    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;
@@ -1284,63 +1566,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)
@@ -1349,59 +1646,128 @@
                 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);
+        };
+        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 FeatureLayerFactory;
+        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 () {
+        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(FeatureLayerComponent.prototype, "settings", {
+        Object.defineProperty(ClusterLayerComponent.prototype, "settings", {
             set: function (value) {
                 if (!value || this._settings.isSame(value))
                     return;
@@ -1411,28 +1777,133 @@
             enumerable: false,
             configurable: true
         });
-        FeatureLayerComponent.prototype.initLayer = function () {
+        ClusterLayerComponent.prototype.initLayer = function () {
             this.removeLayer();
-            this.layer = this.factory.build(this._settings);
-            this.postboy.fire(new AddLayerCommand(this.layer));
+            this.manager = this.factory.build(this._settings, this.postboy);
+            this.postboy.fire(new AddLayerCommand(this.manager.layer));
         };
-        FeatureLayerComponent.prototype.removeLayer = function () {
-            if (this.layer)
-                this.postboy.fire(new RemoveLayerCommand(this.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 FeatureLayerComponent;
+        return ClusterLayerComponent;
     }(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: [{
+    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-feature-layer',
+                        selector: 'lib-cluster-layer',
                         template: '',
                         styleUrls: [],
                         changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     }]
-            }], ctorParameters: function () { return [{ type: MapPostboyService }, { type: FeatureLayerFactory }]; }, propDecorators: { settings: [{
+            }], 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.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,
+            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-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: i0__namespace.ElementRef }, { type: MapPostboyService }, { type: MapPlateFactory }, { type: MessageRegistratorService }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { settings: [{
                     type: i0.Input
                 }] } });
 
@@ -1624,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; })));
         };
@@ -1660,17 +2130,19 @@
             FeatureLayerComponent,
             MarkersComponent,
             TooltipComponent,
-            PolygonsComponent], imports: [i5.CommonModule], exports: [MapPlateComponent,
+            PolygonsComponent,
+            ClusterLayerComponent], imports: [i6.CommonModule], exports: [MapPlateComponent,
             FeatureLayerComponent,
             MarkersComponent,
             TileLayerComponent,
             TooltipComponent,
-            PolygonsComponent] });
-    MapModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MapModule, imports: [[i5.CommonModule]] });
+            PolygonsComponent,
+            ClusterLayerComponent] });
+    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,
@@ -1680,6 +2152,7 @@
                             MarkersComponent,
                             TooltipComponent,
                             PolygonsComponent,
+                            ClusterLayerComponent,
                         ],
                         exports: [
                             MapPlateComponent,
@@ -1688,6 +2161,7 @@
                             TileLayerComponent,
                             TooltipComponent,
                             PolygonsComponent,
+                            ClusterLayerComponent,
                         ],
                     }]
             }] });
@@ -1718,6 +2192,10 @@
                 }),
             });
         };
+        MarkerStyleHelper.withText = function (style, text) {
+            style.setText(text);
+            return style;
+        };
         return MarkerStyleHelper;
     }());
 
@@ -1739,6 +2217,22 @@
         return PolygonStyleHelper;
     }());
 
+    var TextStyleHelper = /** @class */ (function () {
+        function TextStyleHelper() {
+        }
+        TextStyleHelper.get = function (text, font, color) {
+            return new style.Text({
+                text: text,
+                font: font,
+                textAlign: 'center',
+                fill: new style.Fill({
+                    color: color,
+                }),
+            });
+        };
+        return TextStyleHelper;
+    }());
+
     /*
      * Public API Surface of maps
      */
@@ -1747,14 +2241,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;
@@ -1767,6 +2263,8 @@
     exports.PolygonModel = PolygonModel;
     exports.PolygonStyleHelper = PolygonStyleHelper;
     exports.PolygonsComponent = PolygonsComponent;
+    exports.StartDrawingCommand = StartDrawingCommand;
+    exports.TextStyleHelper = TextStyleHelper;
     exports.TileLayerComponent = TileLayerComponent;
     exports.TileLayerSettings = TileLayerSettings;
     exports.TooltipComponent = TooltipComponent;