@artstesh/maps 1.0.5 → 1.0.7

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/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/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.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, 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('rxjs'), require('@artstesh/postboy'), require('ol/Map'), require('ol/View'), require('ol/layer/Tile'), require('ol/source/OSM'), require('rxjs/operators'), require('ol/source'), require('ol/layer'), require('ol/Overlay'), require('ol/loadingstrategy'), require('ol/geom/Polygon'), require('ol/source/Cluster'), require('ol/style/Style'), require('ol/style')) :
+    typeof define === 'function' && define.amd ? define('maps-components/src/map', ['exports', '@angular/core', '@angular/common', 'ol', 'ol/geom', 'ol/format', 'ol/extent', 'ol/proj', 'rxjs', '@artstesh/postboy', 'ol/Map', 'ol/View', 'ol/layer/Tile', 'ol/source/OSM', 'rxjs/operators', 'ol/source', 'ol/layer', 'ol/Overlay', 'ol/loadingstrategy', 'ol/geom/Polygon', 'ol/source/Cluster', 'ol/style/Style', 'ol/style'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["maps-components"] = global["maps-components"] || {}, global["maps-components"].src = global["maps-components"].src || {}, global["maps-components"].src.map = {}), global.ng.core, global.ng.common, global.ol, global.geom, global.format, global.extent, global.proj, global.rxjs, global.postboy, global.Map, global.View, global.TileLayer, global.OSM, global.rxjs.operators, global.source, global.layer, global.Overlay, global.loadingstrategy, global.Polygon, global.Cluster, global.Style, global.style));
+})(this, (function (exports, i0, i5, ol, geom, format, extent, proj, rxjs, postboy, Map, View, TileLayer, OSM, operators, source, layer, Overlay, loadingstrategy, Polygon, Cluster, Style, style) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -31,6 +31,7 @@
     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 Style__default = /*#__PURE__*/_interopDefaultLegacy(Style);
 
     var DestructibleComponent = /** @class */ (function () {
@@ -608,6 +609,13 @@
     }());
     IdGenerator.collection = 'ABCDEFGHIJKLMNOPQRSTUVWXTZ0123456789'.split('');
 
+    var MapConstants = /** @class */ (function () {
+        function MapConstants() {
+        }
+        return MapConstants;
+    }());
+    MapConstants.FeatureInfo = 'f-info';
+
     var MarkerModel = /** @class */ (function () {
         function MarkerModel(lat, lng, id, info) {
             this.lat = lat;
@@ -627,12 +635,41 @@
             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;
     }());
 
+    var PolygonModel = /** @class */ (function () {
+        function PolygonModel(feature, id, info) {
+            var _b;
+            var _a;
+            this.info = info;
+            this.id = id == null ? IdGenerator.get() : id;
+            this._feature = feature;
+            _b = __read(extent.getCenter((_a = this._feature.getGeometry()) === null || _a === void 0 ? void 0 : _a.getExtent()), 2), this.lng = _b[0], this.lat = _b[1];
+        }
+        PolygonModel.fromGeoJson = function (id, json, info) {
+            var feature = new format.GeoJSON().readFeature(json);
+            feature.setId(id);
+            return new PolygonModel(feature, id, info);
+        };
+        PolygonModel.fromWKT = function (id, wkt, info) {
+            var feature = new format.WKT().readFeature(wkt);
+            feature.setId(id);
+            return new PolygonModel(feature, id, info);
+        };
+        Object.defineProperty(PolygonModel.prototype, "feature", {
+            get: function () {
+                return this._feature;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return PolygonModel;
+    }());
+
     var GenericMessage = /** @class */ (function () {
         function GenericMessage() {
         }
@@ -673,10 +710,11 @@
 
     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", {
@@ -799,6 +837,26 @@
     }(GenericMessage));
     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;
+    }(GenericMessage));
+    FitToFeaturesCommand.ID = '76cdc091-3793-4b6c-82f7-1e0334cf08a8';
+
     var MapPostboyService = /** @class */ (function (_super) {
         __extends(MapPostboyService, _super);
         function MapPostboyService() {
@@ -861,11 +919,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 () {
@@ -901,6 +962,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;
@@ -921,7 +1018,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; })
@@ -929,7 +1026,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;
@@ -952,9 +1052,9 @@
 
     var MessageRegistratorService = /** @class */ (function (_super) {
         __extends(MessageRegistratorService, _super);
-        function MessageRegistratorService(service, management, state, interaction) {
+        function MessageRegistratorService(service, management, state, feature, interaction) {
             var _this = _super.call(this, service) || this;
-            _this.registerServices([management, state, interaction]);
+            _this.registerServices([management, state, interaction, feature]);
             return _this;
         }
         MessageRegistratorService.prototype._up = function () {
@@ -966,14 +1066,15 @@
             this.registerSubject(RemoveTileCommand.ID);
             this.registerSubject(MapClickEvent.ID);
             this.registerSubject(CloseTooltipCommand.ID);
+            this.registerSubject(FitToFeaturesCommand.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 }], 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 }]; } });
 
     var MapPlateFactory = /** @class */ (function () {
         function MapPlateFactory() {
@@ -1117,7 +1218,7 @@
         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 });
+    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: [{
@@ -1125,7 +1226,7 @@
                         templateUrl: './map-plate.component.html',
                         styleUrls: ['./map-plate.component.scss'],
                         changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                        providers: [MessageRegistratorService, MapStateService, MapManagementService, MapClickService],
+                        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
@@ -1570,6 +1671,242 @@
                     type: i0.Input
                 }] } });
 
+    var PolygonsComponent = /** @class */ (function (_super) {
+        __extends(PolygonsComponent, _super);
+        function PolygonsComponent(postboy) {
+            var _this = _super.call(this) || this;
+            _this.postboy = postboy;
+            _this.layerName = '';
+            _this._polygons = [];
+            return _this;
+        }
+        Object.defineProperty(PolygonsComponent.prototype, "polygons", {
+            set: function (value) {
+                this._polygons = value;
+                this.putPolygons();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        PolygonsComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.postboy
+                .subscribe(MapRenderedEvent.ID)
+                .pipe(operators.filter(function (m) { return !!m; }), operators.first())
+                .subscribe(function () { return _this.putPolygons(); });
+        };
+        PolygonsComponent.prototype.putPolygons = function () {
+            var _a;
+            if (!((_a = this._polygons) === null || _a === void 0 ? void 0 : _a.length))
+                return;
+            this.postboy.fire(new PlaceLayerFeaturesCommand(this.layerName, this._polygons.map(function (m) { return m.feature; })));
+        };
+        return PolygonsComponent;
+    }(DestructibleComponent));
+    PolygonsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PolygonsComponent, deps: [{ token: MapPostboyService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    PolygonsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PolygonsComponent, selector: "lib-polygons", inputs: { layerName: "layerName", polygons: "polygons" }, 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: PolygonsComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'lib-polygons',
+                        template: '',
+                        styleUrls: [],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    }]
+            }], ctorParameters: function () { return [{ type: MapPostboyService }]; }, propDecorators: { layerName: [{
+                    type: i0.Input
+                }], polygons: [{
+                    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() {
         }
@@ -1582,7 +1919,15 @@
             OsmTileLayerComponent,
             FeatureLayerComponent,
             MarkersComponent,
-            TooltipComponent], imports: [i5.CommonModule], exports: [MapPlateComponent, FeatureLayerComponent, MarkersComponent, TileLayerComponent, TooltipComponent] });
+            TooltipComponent,
+            PolygonsComponent,
+            ClusterLayerComponent], imports: [i5.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]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MapModule, decorators: [{
                 type: i0.NgModule,
@@ -1596,8 +1941,18 @@
                             FeatureLayerComponent,
                             MarkersComponent,
                             TooltipComponent,
+                            PolygonsComponent,
+                            ClusterLayerComponent,
+                        ],
+                        exports: [
+                            MapPlateComponent,
+                            FeatureLayerComponent,
+                            MarkersComponent,
+                            TileLayerComponent,
+                            TooltipComponent,
+                            PolygonsComponent,
+                            ClusterLayerComponent,
                         ],
-                        exports: [MapPlateComponent, FeatureLayerComponent, MarkersComponent, TileLayerComponent, TooltipComponent],
                     }]
             }] });
 
@@ -1627,9 +1982,47 @@
                 }),
             });
         };
+        MarkerStyleHelper.withText = function (style, text) {
+            style.setText(text);
+            return style;
+        };
         return MarkerStyleHelper;
     }());
 
+    var PolygonStyleHelper = /** @class */ (function () {
+        function PolygonStyleHelper() {
+        }
+        PolygonStyleHelper.simple = function (fill, stroke, strokeWidth) {
+            if (strokeWidth === void 0) { strokeWidth = 1; }
+            return new Style__default["default"]({
+                fill: new style.Fill({
+                    color: fill,
+                }),
+                stroke: new style.Stroke({
+                    color: stroke,
+                    width: strokeWidth,
+                }),
+            });
+        };
+        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
      */
@@ -1640,6 +2033,8 @@
 
     exports.CallbackMessage = CallbackMessage;
     exports.CloseTooltipCommand = CloseTooltipCommand;
+    exports.ClusterLayerComponent = ClusterLayerComponent;
+    exports.ClusterLayerSettings = ClusterLayerSettings;
     exports.FeatureLayerComponent = FeatureLayerComponent;
     exports.FeatureLayerSettings = FeatureLayerSettings;
     exports.GenericMessage = GenericMessage;
@@ -1655,6 +2050,10 @@
     exports.MarkersComponent = MarkersComponent;
     exports.MessageRegistratorService = MessageRegistratorService;
     exports.OsmTileLayerComponent = OsmTileLayerComponent;
+    exports.PolygonModel = PolygonModel;
+    exports.PolygonStyleHelper = PolygonStyleHelper;
+    exports.PolygonsComponent = PolygonsComponent;
+    exports.TextStyleHelper = TextStyleHelper;
     exports.TileLayerComponent = TileLayerComponent;
     exports.TileLayerSettings = TileLayerSettings;
     exports.TooltipComponent = TooltipComponent;