@artstesh/maps 1.1.7 → 1.1.8

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

@@ -655,6 +655,13 @@
                 (_a = this._feature) === null || _a === void 0 ? void 0 : _a.set(MapConstants.FeatureInfo, this.info);
             _c = __read(extent.getCenter((_b = this._feature.getGeometry()) === null || _b === void 0 ? void 0 : _b.getExtent()), 2), this.lng = _c[0], this.lat = _c[1];
         }
+        Object.defineProperty(PolygonModel.prototype, "feature", {
+            get: function () {
+                return this._feature;
+            },
+            enumerable: false,
+            configurable: true
+        });
         PolygonModel.fromGeoJson = function (id, json, info) {
             var feature = new format.GeoJSON().readFeature(json);
             feature.setId(id);
@@ -665,13 +672,6 @@
             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;
     }());
 
@@ -691,7 +691,7 @@
 
     /**
      *
-     * A control is a visible widget with a DOM element in a fixed position on the screen. They can involve user input (buttons), or be informational only; the position is determined using CSS. By default these are placed in the container with CSS class name ol-overlaycontainer-stopevent, but can use any outside DOM element.
+     * A control is a visible widget with a DOM element in a fixed position on the screen. They can involve user input (buttons), or be informational only; the position is determined using CSS. By default, these are placed in the container with CSS class name ol-overlaycontainer-stopevent, but can use any outside DOM element.
      * This is the base class for controls. You can use it for simple custom controls by creating the element with listeners, creating an instance:
      * var myControl = new Control({element: myElement}); and then adding this to the map.
      * The main advantage of having this as a control rather than a simple separate DOM element is that preventing propagation is handled for you. Controls will also be objects in a module:ol/Collection~Collection, so you can use their methods.
@@ -1154,6 +1154,11 @@
         FeatureService.filterFeaturesInArea = function (query) {
             return query.features.filter(function (f) { return FeatureService.booleanIntersects(query.area, f.getGeometry()); });
         };
+        FeatureService.calculateArea = function (g) {
+            if (!g)
+                return 0;
+            return Sphere__namespace.getArea(g, { projection: 'EPSG:4326' });
+        };
         FeatureService.booleanIntersects = function (g1, g2) {
             if (g2.getType() === 'Point')
                 return g1.intersectsCoordinate(g2.getCoordinates());
@@ -1163,11 +1168,6 @@
                 return g1.intersectsCoordinate(g2.getInteriorPoint().getCoordinates());
             return false;
         };
-        FeatureService.calculateArea = function (g) {
-            if (!g)
-                return 0;
-            return Sphere__namespace.getArea(g, { projection: 'EPSG:4326' });
-        };
         return FeatureService;
     }());
 
@@ -1474,16 +1474,6 @@
         MapClickService.prototype.up = function () {
             this.observeMapRender();
         };
-        MapClickService.prototype.observeMapRender = function () {
-            var _this = this;
-            this.postboy.subscribe(MapRenderedEvent.ID).subscribe(function (m) {
-                var _a;
-                _this.map = m.map;
-                (_a = _this.map) === null || _a === void 0 ? void 0 : _a.on('singleclick', function (e) {
-                    _this.postboy.fire(_this.onClick(e));
-                });
-            });
-        };
         MapClickService.prototype.onClick = function (ev) {
             var _this = this;
             var _a;
@@ -1503,6 +1493,16 @@
             });
             return model;
         };
+        MapClickService.prototype.observeMapRender = function () {
+            var _this = this;
+            this.postboy.subscribe(MapRenderedEvent.ID).subscribe(function (m) {
+                var _a;
+                _this.map = m.map;
+                (_a = _this.map) === null || _a === void 0 ? void 0 : _a.on('singleclick', function (e) {
+                    _this.postboy.fire(_this.onClick(e));
+                });
+            });
+        };
         MapClickService.prototype.getFeatureCollectionWithInner = function (features) {
             var result = [];
             features === null || features === void 0 ? void 0 : features.forEach(function (f) {
@@ -1787,14 +1787,53 @@
                 type: i0.Injectable
             }], ctorParameters: function () { return [{ type: MapPostboyService }, { type: MapManagementService }, { type: MapStateService }, { type: MapFeatureService }, { type: MapClickService }, { type: DrawingService }, { type: FeatureModificationService }, { type: ControlsService }]; } });
 
+    /**
+     * Class representing settings for a tile layer.
+     */
     var TileLayerSettings = /** @class */ (function () {
         function TileLayerSettings() {
+            /**
+             * The maximum zoom level for a map view.
+             *
+             * @type {number}
+             * @default 19
+             */
             this.maxZoom = 19;
+            /**
+             * The minimum zoom level allowed.
+             *
+             * @type {number}
+             */
             this.minZoom = 0;
+            /**
+             * The opacity of an element.
+             *
+             * @type {number}
+             * @default 0.6
+             */
             this.opacity = 0.6;
+            /**
+             * Represents the tiles URL.
+             * @typedef {string} url
+             *
+             * @example
+             * 'https://example.ex/{z}/{x}/{y}.png'
+             */
             this.url = '';
+            /**
+             * The projection of the coordinate system.
+             *
+             * @type {string}
+             * @default 'EPSG:3857'
+             */
             this.projection = 'EPSG:3857';
         }
+        /**
+         * Creates a copy of the given tile layer settings.
+         *
+         * @param {TileLayerSettings} model - The tile layer settings to be copied.
+         * @return {TileLayerSettings} - A new instance of TileLayerSettings with the same properties as the model.
+         */
         TileLayerSettings.copy = function (model) {
             var result = new TileLayerSettings();
             result.maxZoom = model.maxZoom;
@@ -1804,21 +1843,57 @@
             result.url = model.url;
             return result;
         };
+        /**
+         * Sets the URL of the TileLayerSettings object.
+         *
+         * @param {string} url - The URL to be set.
+         * @return {TileLayerSettings} - The updated TileLayerSettings object.
+         */
         TileLayerSettings.prototype.setUrl = function (url) {
             return TileLayerSettings.copy(Object.assign(Object.assign({}, this), { url: url }));
         };
+        /**
+         * Sets the maximum zoom level for the tile layer.
+         *
+         * @param {number} maxZoom - The maximum zoom level.
+         * @returns {TileLayerSettings} - The updated tile layer settings object.
+         */
         TileLayerSettings.prototype.setMaxZoom = function (maxZoom) {
             return TileLayerSettings.copy(Object.assign(Object.assign({}, this), { maxZoom: maxZoom }));
         };
+        /**
+         * Sets the minimum zoom level for the Tile Layer.
+         *
+         * @param {number} minZoom - The minimum zoom level to be set.
+         * @return {TileLayerSettings} The modified TileLayerSettings object with the updated minimum zoom level.
+         */
         TileLayerSettings.prototype.setMinZoom = function (minZoom) {
             return TileLayerSettings.copy(Object.assign(Object.assign({}, this), { minZoom: minZoom }));
         };
+        /**
+         * Sets the opacity of the TileLayerSettings.
+         *
+         * @param {number} opacity - The opacity value to set. Must be a number between 0 and 1.
+         * @return {TileLayerSettings} - A new instance of TileLayerSettings with the opacity set.
+         */
         TileLayerSettings.prototype.setOpacity = function (opacity) {
             return TileLayerSettings.copy(Object.assign(Object.assign({}, this), { opacity: opacity }));
         };
+        /**
+         * Sets the projection for the tile layer settings.
+         *
+         * @param {string} projection - The desired projection for the tile layer settings.
+         * @return {TileLayerSettings} - The updated tile layer settings with the new projection.
+         */
         TileLayerSettings.prototype.setProjection = function (projection) {
             return TileLayerSettings.copy(Object.assign(Object.assign({}, this), { projection: projection }));
         };
+        /**
+         * Checks if the current instance of TileLayerSettings is equal to the given model.
+         * @param {TileLayerSettings} model - The model to compare against.
+         * @return {boolean} - True if all properties of the current instance matches the properties of the model;
+         *                    otherwise, false.
+         */
         TileLayerSettings.prototype.isSame = function (model) {
             if (this.maxZoom !== model.maxZoom)
                 return false;
@@ -1894,13 +1969,6 @@
             _this.onDestroy = function () { return _this.removeLayer(); };
             return _this;
         }
-        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._settings.isSame(value))
@@ -1911,6 +1979,13 @@
             enumerable: false,
             configurable: true
         });
+        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(); });
+        };
         TileLayerComponent.prototype.initLayer = function () {
             this.removeLayer();
             this.layer = this.factory.build(this._settings);
@@ -2017,17 +2092,24 @@
              */
             this.zIndex = 1;
             /**
-             * The maximum zoom at which the layer is visible. 19 by default
+             The maximum view zoom level (inclusive) at which this layer will be visible.
+          
+             @type {number}
+             @default 19
              */
             this.maxZoom = 19;
             /**
-             * The minimum zoom at which the layer is visible. 0 by default
+             The minimum view zoom level (exclusive) at which this layer will be visible.
+          
+             @type {number}
              */
             this.minZoom = 0;
         }
         /**
-         * Creates a clone of the existing settings
-         * @param model
+         * Copies the given FeatureLayerSettings object
+         *
+         * @param {FeatureLayerSettings} model - The FeatureLayerSettings object to be copied
+         * @returns {FeatureLayerSettings} - A copy of the FeatureLayerSettings object
          */
         FeatureLayerSettings.copy = function (model) {
             var result = new FeatureLayerSettings();
@@ -2039,43 +2121,56 @@
             return result;
         };
         /**
-         Setter for {@link FeatureLayerSettings.zIndex}
-         * @param zIndex
+         * Sets the z-index value for the FeatureLayerSettings object.
+         *
+         * @param {number} zIndex - The new z-index value.
+         * @return {FeatureLayerSettings} - The updated FeatureLayerSettings object.
          */
         FeatureLayerSettings.prototype.setZIndex = function (zIndex) {
             return FeatureLayerSettings.copy(Object.assign(Object.assign({}, this), { zIndex: zIndex }));
         };
         /**
-         * Setter for {@link FeatureLayerSettings.name}
-         * @param name
+         * Sets the name of the FeatureLayerSettings.
+         *
+         * @param {string} name - The name to set for the FeatureLayerSettings.
+         *
+         * @return {FeatureLayerSettings} - The updated FeatureLayerSettings object with the new name.
          */
         FeatureLayerSettings.prototype.setName = function (name) {
             return FeatureLayerSettings.copy(Object.assign(Object.assign({}, this), { name: name }));
         };
         /**
-         * Setter for {@link FeatureLayerSettings.maxZoom}
-         * @param maxZoom
+         * Sets the maximum zoom level for the FeatureLayerSettings.
+         *
+         * @param {number} maxZoom - The maximum zoom level.
+         * @return {FeatureLayerSettings} - The updated FeatureLayerSettings object.
          */
         FeatureLayerSettings.prototype.setMaxZoom = function (maxZoom) {
             return FeatureLayerSettings.copy(Object.assign(Object.assign({}, this), { maxZoom: maxZoom }));
         };
         /**
-         * Setter for {@link FeatureLayerSettings.minZoom}
-         * @param minZoom
+         * Sets the minimum zoom level for the feature layer.
+         *
+         * @param {number} minZoom The minimum zoom level to be set.
+         * @returns {FeatureLayerSettings} The updated feature layer settings object.
          */
         FeatureLayerSettings.prototype.setMinZoom = function (minZoom) {
             return FeatureLayerSettings.copy(Object.assign(Object.assign({}, this), { minZoom: minZoom }));
         };
         /**
-         * Setter for {@link FeatureLayerSettings.style}
-         * @param style
+         * Sets the style for the FeatureLayerSettings object.
+         *
+         * @param {Style | StyleFunction} style - The new style to set. It can be either a Style object or a StyleFunction.
+         * @return {FeatureLayerSettings} - The updated FeatureLayerSettings object with the new style.
          */
         FeatureLayerSettings.prototype.setStyle = function (style) {
             return FeatureLayerSettings.copy(Object.assign(Object.assign({}, this), { style: style }));
         };
         /**
-         * Checks if the model has the same content
-         * @param model - the object to compare
+         * Checks if the given FeatureLayerSettings object is identical to the current object.
+         *
+         * @param {FeatureLayerSettings} model - The FeatureLayerSettings object to compare with.
+         * @return {boolean} - Returns true if the given object is identical to the current object, otherwise false.
          */
         FeatureLayerSettings.prototype.isSame = function (model) {
             if (this.maxZoom !== model.maxZoom)
@@ -2131,13 +2226,6 @@
             _this.onDestroy = function () { return _this.removeLayer(); };
             return _this;
         }
-        FeatureLayerComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            this.postboy
-                .subscribe(MapRenderedEvent.ID)
-                .pipe(operators.filter(function (m) { return !!m; }), operators.first())
-                .subscribe(function (m) { return _this.initLayer(); });
-        };
         Object.defineProperty(FeatureLayerComponent.prototype, "settings", {
             set: function (value) {
                 if (!value || this._settings.isSame(value))
@@ -2148,6 +2236,13 @@
             enumerable: false,
             configurable: true
         });
+        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(); });
+        };
         FeatureLayerComponent.prototype.initLayer = function () {
             this.removeLayer();
             this.layer = this.factory.build(this._settings);
@@ -2177,12 +2272,34 @@
         function ClusterLayerSettings() {
             this.name = IdGenerator.get();
             this.zIndex = 1;
+            /**
+             * The maximum view zoom level (inclusive) at which this layer will be visible.
+             *
+             * @type {number}
+             * @default 19
+             */
             this.maxZoom = 19;
+            /**
+             * The minimum view zoom level (exclusive) at which this layer will be visible.
+             *
+             * @type {number}
+             */
             this.minZoom = 0;
+            /**
+             * Distance in pixels within which features will be clustered together.
+             *
+             * @type {number}
+             */
             this.distance = 20;
             this.bbox = false;
             this.clusterCancel = 14;
         }
+        /**
+         * Creates a copy of the given ClusterLayerSettings object.
+         *
+         * @param {ClusterLayerSettings} model - The ClusterLayerSettings object to be copied.
+         * @returns {ClusterLayerSettings} - A new ClusterLayerSettings object that is a copy of the original object.
+         */
         ClusterLayerSettings.copy = function (model) {
             var result = new ClusterLayerSettings();
             result.name = model.name;
@@ -2195,30 +2312,86 @@
             result.style = model.style;
             return result;
         };
+        /**
+         * Set the z-index for the ClusterLayer.
+         *
+         * @param {number} zIndex - The new z-index for the ClusterLayer.
+         * @return {ClusterLayerSettings} - The updated ClusterLayerSettings object.
+         */
         ClusterLayerSettings.prototype.setZIndex = function (zIndex) {
             return ClusterLayerSettings.copy(Object.assign(Object.assign({}, this), { zIndex: zIndex }));
         };
+        /**
+         * Sets the distance value for ClusterLayerSettings.
+         *
+         * @param {number} distance - The distance value to be set.
+         * @return {ClusterLayerSettings} - The modified ClusterLayerSettings object.
+         */
         ClusterLayerSettings.prototype.setDistance = function (distance) {
             return ClusterLayerSettings.copy(Object.assign(Object.assign({}, this), { distance: distance }));
         };
+        /**
+         * Sets the name of the ClusterLayerSettings object.
+         *
+         * @param {string} name - The name to set for the ClusterLayerSettings.
+         * @return {ClusterLayerSettings} - A new ClusterLayerSettings object with the updated name.
+         */
         ClusterLayerSettings.prototype.setName = function (name) {
             return ClusterLayerSettings.copy(Object.assign(Object.assign({}, this), { name: name }));
         };
+        /**
+         * Sets the maximum zoom level for the Cluster Layer.
+         *
+         * @param {number} maxZoom - The maximum zoom level to be set.
+         * @return {ClusterLayerSettings} - The updated ClusterLayerSettings object.
+         */
         ClusterLayerSettings.prototype.setMaxZoom = function (maxZoom) {
             return ClusterLayerSettings.copy(Object.assign(Object.assign({}, this), { maxZoom: maxZoom }));
         };
+        /**
+         * Sets the minimum zoom level for the ClusterLayerSettings.
+         *
+         * @param {number} minZoom - The minimum zoom level to set.
+         * @return {ClusterLayerSettings} - The updated ClusterLayerSettings object.
+         */
         ClusterLayerSettings.prototype.setMinZoom = function (minZoom) {
             return ClusterLayerSettings.copy(Object.assign(Object.assign({}, this), { minZoom: minZoom }));
         };
+        /**
+         * Sets the cluster cancel number for the ClusterLayerSettings.
+         *
+         * @param {number} clusterCancel - The new cluster cancel number.
+         * @returns {ClusterLayerSettings} - The updated ClusterLayerSettings object.
+         */
         ClusterLayerSettings.prototype.setClusterCancel = function (clusterCancel) {
             return ClusterLayerSettings.copy(Object.assign(Object.assign({}, this), { clusterCancel: clusterCancel }));
         };
+        /**
+         * Sets the value of 'bbox' property in the ClusterLayerSettings object.
+         *
+         * @param {boolean} bbox - A boolean value indicating whether to include bounding box calculation in the cluster layer settings.
+         * @returns {ClusterLayerSettings} - The updated ClusterLayerSettings object with the newly set 'bbox' value.
+         */
         ClusterLayerSettings.prototype.setBbox = function (bbox) {
             return ClusterLayerSettings.copy(Object.assign(Object.assign({}, this), { bbox: bbox }));
         };
+        /**
+         * Sets the style for the ClusterLayerSettings.
+         *
+         * @param {function} style - A function that takes an array of identified features as input and returns a Style or StyleFunction.
+         *
+         * @return {ClusterLayerSettings} - The updated ClusterLayerSettings object with the new style applied.
+         */
         ClusterLayerSettings.prototype.setStyle = function (style) {
             return ClusterLayerSettings.copy(Object.assign(Object.assign({}, this), { style: style }));
         };
+        /**
+         * Checks if the current ClusterLayerSettings object is the same as the specified model.
+         *
+         * @param {ClusterLayerSettings} model - The model to compare with the current object.
+         *
+         * @return {boolean} - Returns true if the current ClusterLayerSettings object is the same as the specified model, otherwise false.
+         */
         ClusterLayerSettings.prototype.isSame = function (model) {
             if (this.maxZoom !== model.maxZoom)
                 return false;
@@ -2331,6 +2504,9 @@
                     }]
             }] });
 
+    /**
+     * Represents a cluster layer component.
+     */
     var ClusterLayerComponent = /** @class */ (function (_super) {
         __extends(ClusterLayerComponent, _super);
         function ClusterLayerComponent(postboy, factory) {
@@ -2342,14 +2518,12 @@
             _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", {
+            /**
+             * Sets the settings for the cluster layer.
+             *
+             * @param {ClusterLayerSettings | undefined} value - The settings for the cluster layer.
+             */
             set: function (value) {
                 if (!value || this._settings.isSame(value))
                     return;
@@ -2359,6 +2533,13 @@
             enumerable: false,
             configurable: true
         });
+        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(); });
+        };
         ClusterLayerComponent.prototype.initLayer = function () {
             this.removeLayer();
             this.manager = this.factory.build(this._settings, this.postboy);
@@ -2421,8 +2602,8 @@
             _this.registrator = registrator;
             _this.detector = detector;
             _this.osmUrl = '';
-            _this._settings = new MapSettings();
             _this.drawingLayerSettings = new FeatureLayerSettings().setName(MapConstants.DrawingLayerId);
+            _this._settings = new MapSettings();
             _this.onDestroy = function () {
                 _this.registrator.down();
             };
@@ -2497,6 +2678,11 @@
                     type: i0.Input
                 }] } });
 
+    /**
+     * MarkersComponent is a component that displays markers on a map.
+     * It listens for changes in the `markers` input property and
+     * automatically puts the markers on the map using the MapPostboyService.
+     */
     var MarkersComponent = /** @class */ (function (_super) {
         __extends(MarkersComponent, _super);
         function MarkersComponent(postboy) {
@@ -2507,6 +2693,11 @@
             return _this;
         }
         Object.defineProperty(MarkersComponent.prototype, "markers", {
+            /**
+             * Sets the markers property.
+             *
+             * @param {MarkerModel[]} value - The array of MarkerModel objects to set as markers.
+             */
             set: function (value) {
                 this._markers = value !== null && value !== void 0 ? value : [];
                 this.putMarkers();
@@ -2580,13 +2771,8 @@
             var _this = _super.call(this) || this;
             _this.postboy = postboy;
             _this.detector = detector;
-            _this._settings = new TooltipSettings();
             _this.show = false;
-            _this.removeOverlay = function () {
-                var _a;
-                !!_this.overlay && ((_a = _this.map) === null || _a === void 0 ? void 0 : _a.removeOverlay(_this.overlay));
-                _this.show = false;
-            };
+            _this._settings = new TooltipSettings();
             _this.options = function (coordinates) {
                 var _a;
                 return {
@@ -2596,6 +2782,11 @@
                     position: coordinates,
                 };
             };
+            _this.removeOverlay = function () {
+                var _a;
+                !!_this.overlay && ((_a = _this.map) === null || _a === void 0 ? void 0 : _a.removeOverlay(_this.overlay));
+                _this.show = false;
+            };
             return _this;
         }
         Object.defineProperty(TooltipComponent.prototype, "settings", {
@@ -2613,6 +2804,14 @@
             this.subs.push(this.observeMapClick());
             this.subs.push(this.observeClose());
         };
+        TooltipComponent.prototype.addOverlay = function (coordinates) {
+            var _a;
+            this.removeOverlay();
+            this.overlay = new Overlay__default["default"](this.options(coordinates));
+            (_a = this.map) === null || _a === void 0 ? void 0 : _a.addOverlay(this.overlay);
+            this.show = true;
+            this.detector.detectChanges();
+        };
         TooltipComponent.prototype.observeMapClick = function () {
             var _this = this;
             return this.postboy.subscribe(MapClickEvent.ID).subscribe(function (ev) {
@@ -2632,14 +2831,6 @@
                 _this.map = m.map;
             });
         };
-        TooltipComponent.prototype.addOverlay = function (coordinates) {
-            var _a;
-            this.removeOverlay();
-            this.overlay = new Overlay__default["default"](this.options(coordinates));
-            (_a = this.map) === null || _a === void 0 ? void 0 : _a.addOverlay(this.overlay);
-            this.show = true;
-            this.detector.detectChanges();
-        };
         return TooltipComponent;
     }(DestructibleComponent));
     TooltipComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TooltipComponent, deps: [{ token: MapPostboyService }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
@@ -2659,6 +2850,11 @@
                     type: i0.Input
                 }] } });
 
+    /**
+     * Component for rendering polygons on a map.
+     * It listens for changes in the `polygons` input property and
+     * automatically puts the polygons on the map using the MapPostboyService.
+     */
     var PolygonsComponent = /** @class */ (function (_super) {
         __extends(PolygonsComponent, _super);
         function PolygonsComponent(postboy) {
@@ -2669,6 +2865,11 @@
             return _this;
         }
         Object.defineProperty(PolygonsComponent.prototype, "polygons", {
+            /**
+             * Sets the value of polygons.
+             *
+             * @param {PolygonModel[]} value - The new value for polygons.
+             */
             set: function (value) {
                 this._polygons = value !== null && value !== void 0 ? value : [];
                 this.putPolygons();
@@ -2706,14 +2907,47 @@
                     type: i0.Input
                 }] } });
 
+    /**
+     * Represents the settings for a zoom control.
+     */
     var ZoomControlSettings = /** @class */ (function () {
         function ZoomControlSettings() {
+            /**
+             * The CSS class name of the control element.
+             *
+             * @type {string}
+             */
             this.controlClass = 'ol-zoom';
+            /**
+             * The CSS class name for zoom in button.
+             * @type {string}
+             */
             this.zoomInClass = 'ol-zoom-in';
+            /**
+             * The CSS class name for the zoom out button element.
+             *
+             * @type {string}
+             */
             this.zoomOutClass = 'ol-zoom-out';
+            /**
+             * The label for the zoom in action.
+             *
+             * @type {string}
+             */
             this.zoomInLabel = 'Zoom In';
+            /**
+             * The label for the zoom out control.
+             *
+             * @type {string}
+             */
             this.zoomOutLabel = 'Zoom Out';
         }
+        /**
+         * Copies the provided ZoomControlSettings object.
+         *
+         * @param {ZoomControlSettings} model - The ZoomControlSettings object to be copied.
+         * @return {ZoomControlSettings} - The copied ZoomControlSettings object.
+         */
         ZoomControlSettings.copy = function (model) {
             var result = new ZoomControlSettings();
             result.controlClass = model.controlClass;
@@ -2723,6 +2957,13 @@
             result.zoomOutLabel = model.zoomOutLabel;
             return result;
         };
+        /**
+         * Checks if the current ZoomControlSettings object is equal to the given model.
+         *
+         * @param {ZoomControlSettings} model - The ZoomControlSettings object to compare with.
+         *
+         * @return {boolean} - true if the current object is equal to the given model, false otherwise.
+         */
         ZoomControlSettings.prototype.isSame = function (model) {
             if (this.zoomInClass !== model.zoomInClass)
                 return false;
@@ -2736,24 +2977,61 @@
                 return false;
             return true;
         };
+        /**
+         * Sets the zoom in label of the Zoom Control Settings.
+         *
+         * @param {string} zoomInLabel - The label for the zoom in button.
+         * @return {ZoomControlSettings} - The new Zoom Control Settings object with the updated zoom in label.
+         */
         ZoomControlSettings.prototype.setZoomInLabel = function (zoomInLabel) {
             return ZoomControlSettings.copy(Object.assign(Object.assign({}, this), { zoomInLabel: zoomInLabel }));
         };
+        /**
+         * Sets the zoomOutClass property of the ZoomControlSettings object.
+         *
+         * @param {string} zoomOutClass - The CSS class to be assigned to the zoom out button.
+         * @return {ZoomControlSettings} - The updated ZoomControlSettings object with the new zoomOutClass value.
+         */
         ZoomControlSettings.prototype.setZoomOutClass = function (zoomOutClass) {
             return ZoomControlSettings.copy(Object.assign(Object.assign({}, this), { zoomOutClass: zoomOutClass }));
         };
+        /**
+         * Sets the zoom in class for the zoom control settings.
+         *
+         * @param {string} zoomInClass - The new zoom in class to be set.
+         * @return {ZoomControlSettings} - The updated zoom control settings.
+         */
         ZoomControlSettings.prototype.setZoomInClass = function (zoomInClass) {
             return ZoomControlSettings.copy(Object.assign(Object.assign({}, this), { zoomInClass: zoomInClass }));
         };
+        /**
+         * Set the label for the zoom out control.
+         *
+         * @param {string} zoomOutLabel - The label for the zoom out control.
+         * @returns {ZoomControlSettings} - The updated zoom control settings.
+         */
         ZoomControlSettings.prototype.setZoomOutLabel = function (zoomOutLabel) {
             return ZoomControlSettings.copy(Object.assign(Object.assign({}, this), { zoomOutLabel: zoomOutLabel }));
         };
+        /**
+         * Sets the control class for the ZoomControlSettings.
+         *
+         * @param {string} controlClass - The class name of the control to be set.
+         *
+         * @return {ZoomControlSettings} - The modified ZoomControlSettings object.
+         */
         ZoomControlSettings.prototype.setControlClass = function (controlClass) {
             return ZoomControlSettings.copy(Object.assign(Object.assign({}, this), { controlClass: controlClass }));
         };
         return ZoomControlSettings;
     }());
 
+    /**
+     * @class
+     * @classdesc Represents a component for the Zoom control on a map.
+     * @extends DestructibleComponent
+     * @implements OnInit
+     */
     var MapControlZoomComponent = /** @class */ (function (_super) {
         __extends(MapControlZoomComponent, _super);
         function MapControlZoomComponent(postboy) {
@@ -2767,6 +3045,17 @@
             return _this;
         }
         Object.defineProperty(MapControlZoomComponent.prototype, "settings", {
+            /**
+             * Sets the settings for the Zoom Control.
+             *
+             * @param {ZoomControlSettings | undefined} value - The new settings for the Zoom Control.
+             *
+             * @description
+             * This method sets the settings for the Zoom Control. It takes a parameter `value` which should be an object of type `ZoomControlSettings` or `undefined`.
+             *
+             * If the `value` is `undefined` or the same as the current settings, the method will return without making any changes.
+             *
+             */
             set: function (value) {
                 if (!value || this._settings.isSame(value))
                     return;
@@ -2861,9 +3150,19 @@
                     }]
             }] });
 
+    /**
+     * Helper class to create and modify marker styles.
+     */
     var MarkerStyleHelper = /** @class */ (function () {
         function MarkerStyleHelper() {
         }
+        /**
+         * Creates a new Style object from an SVG.
+         * @param {string} svg - The SVG string.
+         * @param {Array<number>} [size=[30, 30]] - The size of the icon image.
+         * @param {number} [zIndex=400] - The zIndex of the style.
+         * @returns {Style} A new Style object.
+         */
         MarkerStyleHelper.fromSvg = function (svg, size, zIndex) {
             if (size === void 0) { size = [30, 30]; }
             if (zIndex === void 0) { zIndex = 400; }
@@ -2877,6 +3176,15 @@
                 zIndex: zIndex,
             });
         };
+        /**
+         * Returns a Style object with a circle style.
+         *
+         * @param {number} radius - The radius of the circle.
+         * @param {string} fill - The fill color of the circle. Format: '#RRGGBB' or 'rgba(R, G, B, A)'.
+         * @param {string} strokeColor - The stroke color of the circle. Format: '#RRGGBB' or 'rgba(R, G, B, A)'.
+         * @param {number} [strokeWidth=1] - The width of the stroke. Default is 1.
+         * @returns {Style} - A Style object with a Circle image.
+         */
         MarkerStyleHelper.circle = function (radius, fill, strokeColor, strokeWidth) {
             if (strokeWidth === void 0) { strokeWidth = 1; }
             return new Style__default["default"]({
@@ -2887,6 +3195,13 @@
                 }),
             });
         };
+        /**
+         * Applies the given Text to the provided Style.
+         *
+         * @param {Style} style - The Style to modify.
+         * @param {Text} text - The Text to apply to the Style.
+         * @return {Style} - The modified Style with the applied Text.
+         */
         MarkerStyleHelper.withText = function (style, text) {
             style.setText(text);
             return style;
@@ -2894,9 +3209,21 @@
         return MarkerStyleHelper;
     }());
 
+    /**
+     * A helper class for creating polygon styles.
+     * @class
+     */
     var PolygonStyleHelper = /** @class */ (function () {
         function PolygonStyleHelper() {
         }
+        /**
+         * Creates a Style object with the given fill color, stroke color, and stroke width.
+         *
+         * @param {string} fill - The fill color in hexadecimal or RGB format.
+         * @param {string} stroke - The stroke color in hexadecimal or RGB format.
+         * @param {number} [strokeWidth=1] - The width of the stroke. Defaults to 1.
+         * @return {Style} The created Style object.
+         */
         PolygonStyleHelper.simple = function (fill, stroke, strokeWidth) {
             if (strokeWidth === void 0) { strokeWidth = 1; }
             return new Style__default["default"]({
@@ -2909,6 +3236,15 @@
                 }),
             });
         };
+        /**
+         * Creates a new Style object with the given fill, stroke, stroke width, and pin radius.
+         *
+         * @param {string} fill - The color to use for the fill of the style.
+         * @param {string} stroke - The color to use for the stroke of the style.
+         * @param {number} [strokeWidth=1] - The width of the stroke. Defaults to 1.
+         * @param {number} [pinRadius=5] - The radius of the circle used as the image for the style. Defaults to 5.
+         * @returns {Style} - The newly created Style object.
+         */
         PolygonStyleHelper.edit = function (fill, stroke, strokeWidth, pinRadius) {
             if (strokeWidth === void 0) { strokeWidth = 1; }
             if (pinRadius === void 0) { pinRadius = 5; }
@@ -2931,9 +3267,20 @@
         return PolygonStyleHelper;
     }());
 
+    /**
+     * Helper class for creating text styles.
+     */
     var TextStyleHelper = /** @class */ (function () {
         function TextStyleHelper() {
         }
+        /**
+         * Creates a new instance of the Text class with the specified properties.
+         *
+         * @param {string} text - The text content of the Text object.
+         * @param {string} font - The font style of the Text object.
+         * @param {string} color - The color of the Text object.
+         * @return {Text} A new instance of the Text class.
+         */
         TextStyleHelper.get = function (text, font, color) {
             return new style.Text({
                 text: text,
@@ -2947,6 +3294,9 @@
         return TextStyleHelper;
     }());
 
+    /**
+     * A helper class for converting and stringify features.
+     */
     var StringifyFeatureHelper = /** @class */ (function () {
         function StringifyFeatureHelper() {
         }
@@ -2956,29 +3306,30 @@
                 ? new format.GeoJSON().writeFeature(feature)
                 : new format.WKT().writeFeature(feature);
         };
+        /**
+         * Creates a polygon feature representing a circle based on a given feature with a circle geometry.
+         *
+         * @param {Feature<Geometry>} feature - The input feature with a circle geometry.
+         * @param {FeatureOutputFormat} format - The format for outputting the polygon feature. (default: FeatureOutputFormat.GeoJson)
+         *
+         * @return {string} - The string representation of the polygon feature.
+         */
         StringifyFeatureHelper.circle = function (feature, format) {
             if (format === void 0) { format = exports.FeatureOutputFormat.GeoJson; }
-            // const clone = feature.clone();
-            // clone.setGeometry(fromCircle(feature.getGeometry()! as Circle));
-            var tetemp = feature.getGeometryName();
             var circle = feature.getGeometry();
-            // const temp = StringifyFeatureHelper.drawCircle(circle.getCenter(), circle.getRadius());
-            var ttt = feature.getGeometry().getExtent();
-            var eastPoint = [ttt[2], (ttt[1] + ttt[3]) / 2];
-            var aaa = __spreadArray(__spreadArray([], __read(proj.transform([ttt[0], ttt[1]], 'EPSG:4326', 'EPSG:3857'))), __read(proj.transform([ttt[2], ttt[3]], 'EPSG:4326', 'EPSG:3857')));
-            var radius = (aaa[2] - aaa[0]) / 2;
-            var radius2 = new geom.LineString([circle.getCenter(), eastPoint]).getLength();
+            var ext = feature.getGeometry().getExtent();
+            var coords = __spreadArray(__spreadArray([], __read(proj.transform([ext[0], ext[1]], 'EPSG:4326', 'EPSG:3857'))), __read(proj.transform([ext[2], ext[3]], 'EPSG:4326', 'EPSG:3857')));
+            var radius = (coords[2] - coords[0]) / 2;
             var polygonGeom = new Polygon__default["default"](StringifyFeatureHelper.drawCircle(circle.getCenter(), radius));
-            // var edgeCoordinate = [circle.getCenter()[0] + radius, circle.getCenter()[1]];
-            // var wgs84Sphere = new Sphere(6378137);
             return StringifyFeatureHelper.polygon(new ol.Feature(polygonGeom), format);
-            //  const rad = circle.getRadius();
-            //  const degrees = 180 / Math.PI; // radians to degrees
-            //  const radians = Math.PI / 180; // degrees to radians
-            //  const rlat = rad * degrees * 1000;
-            //  const rlng = rad * radians;
-            //  return StringifyFeatureHelper.polygon(new Feature<Geometry>(circular(circle.getCenter(),circle.getRadius() * METERS_PER_UNIT)), format);
         };
+        /**
+         * Draw a circle based on a center point and radius.
+         *
+         * @param {number[]} point - The center point coordinates in EPSG:4326 format.
+         * @param {number} radius - The radius of the circle in meters.
+         * @return {Coordinate[][]} - The coordinates of the circle boundary in EPSG:4326 format.
+         */
         StringifyFeatureHelper.drawCircle = function (point, radius) {
             var tetetemp = proj.transform(point, 'EPSG:4326', 'EPSG:3857');
             // const tetetemp = point;