@artstesh/maps 4.1.8 → 4.1.9

package/dist/fesm2020/maps-components-src-map.mjs

@@ -3,7 +3,7 @@ import { Component, Injectable, ChangeDetectionStrategy, Input, ViewChild, NgMod
 import * as i4 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { Feature, Collection } from 'ol';
-import { Point, LineString } from 'ol/geom';
+import { Point } from 'ol/geom';
 import { GeoJSON, WKT } from 'ol/format';
 import { getCenter, createEmpty, extend } from 'ol/extent';
 import { Control, Zoom } from 'ol/control';
@@ -157,16 +157,6 @@ class MarkerModel {
 }
 
 class PolygonModel {
-    static fromGeoJson(id, json, info) {
-        let feature = new GeoJSON().readFeature(json);
-        feature.setId(id);
-        return new PolygonModel(feature, id, info);
-    }
-    static fromWKT(id, wkt, info) {
-        let feature = new WKT().readFeature(wkt);
-        feature.setId(id);
-        return new PolygonModel(feature, id, info);
-    }
     constructor(feature, id, info) {
         this.info = info;
         this.id = id == null ? IdGenerator.get() : id;
@@ -178,6 +168,16 @@ class PolygonModel {
     get feature() {
         return this._feature;
     }
+    static fromGeoJson(id, json, info) {
+        let feature = new GeoJSON().readFeature(json);
+        feature.setId(id);
+        return new PolygonModel(feature, id, info);
+    }
+    static fromWKT(id, wkt, info) {
+        let feature = new WKT().readFeature(wkt);
+        feature.setId(id);
+        return new PolygonModel(feature, id, info);
+    }
 }
 
 var DrawingType;
@@ -196,7 +196,7 @@ var FeatureOutputFormat;
 
 /**
  *
- * 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.
@@ -491,6 +491,11 @@ class FeatureService {
     static filterFeaturesInArea(query) {
         return query.features.filter((f) => FeatureService.booleanIntersects(query.area, f.getGeometry()));
     }
+    static calculateArea(g) {
+        if (!g)
+            return 0;
+        return Sphere.getArea(g, { projection: 'EPSG:4326' });
+    }
     static booleanIntersects(g1, g2) {
         if (g2.getType() === 'Point')
             return g1.intersectsCoordinate(g2.getCoordinates());
@@ -500,11 +505,6 @@ class FeatureService {
             return g1.intersectsCoordinate(g2.getInteriorPoint().getCoordinates());
         return false;
     }
-    static calculateArea(g) {
-        if (!g)
-            return 0;
-        return Sphere.getArea(g, { projection: 'EPSG:4326' });
-    }
 }
 
 class GetFeaturesInAreaQuery extends PostboyCallbackMessage {
@@ -754,14 +754,6 @@ class MapClickService {
     up() {
         this.observeMapRender();
     }
-    observeMapRender() {
-        this.postboy.subscribe(MapRenderedEvent.ID).subscribe((m) => {
-            this.map = m.map;
-            this.map?.on('singleclick', (e) => {
-                this.postboy.fire(this.onClick(e));
-            });
-        });
-    }
     onClick(ev) {
         const model = new MapClickEvent(ev.coordinate, {}, {});
         this.map?.forEachFeatureAtPixel(ev.pixel, (f, l) => {
@@ -779,6 +771,14 @@ class MapClickService {
         });
         return model;
     }
+    observeMapRender() {
+        this.postboy.subscribe(MapRenderedEvent.ID).subscribe((m) => {
+            this.map = m.map;
+            this.map?.on('singleclick', (e) => {
+                this.postboy.fire(this.onClick(e));
+            });
+        });
+    }
     getFeatureCollectionWithInner(features) {
         const result = [];
         features?.forEach((f) => {
@@ -1036,14 +1036,53 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             type: 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.
+ */
 class TileLayerSettings {
     constructor() {
+        /**
+         * 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.
+     */
     static copy(model) {
         const result = new TileLayerSettings();
         result.maxZoom = model.maxZoom;
@@ -1053,21 +1092,57 @@ class TileLayerSettings {
         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.
+     */
     setUrl(url) {
         return TileLayerSettings.copy({ ...this, 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.
+     */
     setMaxZoom(maxZoom) {
         return TileLayerSettings.copy({ ...this, 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.
+     */
     setMinZoom(minZoom) {
         return TileLayerSettings.copy({ ...this, 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.
+     */
     setOpacity(opacity) {
         return TileLayerSettings.copy({ ...this, 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.
+     */
     setProjection(projection) {
         return TileLayerSettings.copy({ ...this, 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.
+     */
     isSame(model) {
         if (this.maxZoom !== model.maxZoom)
             return false;
@@ -1136,18 +1211,18 @@ class TileLayerComponent extends DestructibleComponent {
         this._settings = new TileLayerSettings();
         this.onDestroy = () => this.removeLayer();
     }
-    ngOnInit() {
-        this.postboy
-            .subscribe(MapRenderedEvent.ID)
-            .pipe(filter((m) => !!m), first())
-            .subscribe((m) => this.initLayer());
-    }
     set settings(value) {
         if (!value || this._settings.isSame(value))
             return;
         this._settings = value;
         this.initLayer();
     }
+    ngOnInit() {
+        this.postboy
+            .subscribe(MapRenderedEvent.ID)
+            .pipe(filter((m) => !!m), first())
+            .subscribe((m) => this.initLayer());
+    }
     initLayer() {
         this.removeLayer();
         this.layer = this.factory.build(this._settings);
@@ -1231,17 +1306,24 @@ class FeatureLayerSettings {
          */
         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
      */
     static copy(model) {
         const result = new FeatureLayerSettings();
@@ -1253,43 +1335,56 @@ class FeatureLayerSettings {
         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.
      */
     setZIndex(zIndex) {
         return FeatureLayerSettings.copy({ ...this, 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.
      */
     setName(name) {
         return FeatureLayerSettings.copy({ ...this, 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.
      */
     setMaxZoom(maxZoom) {
         return FeatureLayerSettings.copy({ ...this, 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.
      */
     setMinZoom(minZoom) {
         return FeatureLayerSettings.copy({ ...this, 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.
      */
     setStyle(style) {
         return FeatureLayerSettings.copy({ ...this, 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.
      */
     isSame(model) {
         if (this.maxZoom !== model.maxZoom)
@@ -1339,18 +1434,18 @@ class FeatureLayerComponent extends DestructibleComponent {
         this._settings = new FeatureLayerSettings();
         this.onDestroy = () => this.removeLayer();
     }
-    ngOnInit() {
-        this.postboy
-            .subscribe(MapRenderedEvent.ID)
-            .pipe(filter((m) => !!m), first())
-            .subscribe((m) => this.initLayer());
-    }
     set settings(value) {
         if (!value || this._settings.isSame(value))
             return;
         this._settings = value;
         this.initLayer();
     }
+    ngOnInit() {
+        this.postboy
+            .subscribe(MapRenderedEvent.ID)
+            .pipe(filter((m) => !!m), first())
+            .subscribe((m) => this.initLayer());
+    }
     initLayer() {
         this.removeLayer();
         this.layer = this.factory.build(this._settings);
@@ -1374,12 +1469,34 @@ class ClusterLayerSettings {
     constructor() {
         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.
+     */
     static copy(model) {
         const result = new ClusterLayerSettings();
         result.name = model.name;
@@ -1392,30 +1509,86 @@ class ClusterLayerSettings {
         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.
+     */
     setZIndex(zIndex) {
         return ClusterLayerSettings.copy({ ...this, zIndex });
     }
+    /**
+     * Sets the distance value for ClusterLayerSettings.
+     *
+     * @param {number} distance - The distance value to be set.
+     * @return {ClusterLayerSettings} - The modified ClusterLayerSettings object.
+     */
     setDistance(distance) {
         return ClusterLayerSettings.copy({ ...this, 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.
+     */
     setName(name) {
         return ClusterLayerSettings.copy({ ...this, 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.
+     */
     setMaxZoom(maxZoom) {
         return ClusterLayerSettings.copy({ ...this, maxZoom });
     }
+    /**
+     * Sets the minimum zoom level for the ClusterLayerSettings.
+     *
+     * @param {number} minZoom - The minimum zoom level to set.
+     * @return {ClusterLayerSettings} - The updated ClusterLayerSettings object.
+     */
     setMinZoom(minZoom) {
         return ClusterLayerSettings.copy({ ...this, minZoom });
     }
+    /**
+     * Sets the cluster cancel number for the ClusterLayerSettings.
+     *
+     * @param {number} clusterCancel - The new cluster cancel number.
+     * @returns {ClusterLayerSettings} - The updated ClusterLayerSettings object.
+     */
     setClusterCancel(clusterCancel) {
         return ClusterLayerSettings.copy({ ...this, 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.
+     */
     setBbox(bbox) {
         return ClusterLayerSettings.copy({ ...this, 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.
+     */
     setStyle(style) {
         return ClusterLayerSettings.copy({ ...this, 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.
+     */
     isSame(model) {
         if (this.maxZoom !== model.maxZoom)
             return false;
@@ -1517,6 +1690,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 }]
         }] });
 
+/**
+ * Represents a cluster layer component.
+ */
 class ClusterLayerComponent extends DestructibleComponent {
     constructor(postboy, factory) {
         super();
@@ -1526,18 +1702,23 @@ class ClusterLayerComponent extends DestructibleComponent {
         this._settings = new ClusterLayerSettings();
         this.onDestroy = () => this.removeLayer();
     }
-    ngOnInit() {
-        this.postboy
-            .subscribe(MapRenderedEvent.ID)
-            .pipe(filter((m) => !!m), first())
-            .subscribe((m) => this.initLayer());
-    }
+    /**
+     * Sets the settings for the cluster layer.
+     *
+     * @param {ClusterLayerSettings | undefined} value - The settings for the cluster layer.
+     */
     set settings(value) {
         if (!value || this._settings.isSame(value))
             return;
         this._settings = value;
         this.initLayer();
     }
+    ngOnInit() {
+        this.postboy
+            .subscribe(MapRenderedEvent.ID)
+            .pipe(filter((m) => !!m), first())
+            .subscribe((m) => this.initLayer());
+    }
     initLayer() {
         this.removeLayer();
         this.manager = this.factory.build(this._settings, this.postboy);
@@ -1589,8 +1770,8 @@ class MapPlateComponent extends DestructibleComponent {
         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 = () => {
             this.registrator.down();
         };
@@ -1652,6 +1833,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: 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.
+ */
 class MarkersComponent extends DestructibleComponent {
     constructor(postboy) {
         super();
@@ -1659,6 +1845,11 @@ class MarkersComponent extends DestructibleComponent {
         this.layerName = '';
         this._markers = [];
     }
+    /**
+     * Sets the markers property.
+     *
+     * @param {MarkerModel[]} value - The array of MarkerModel objects to set as markers.
+     */
     set markers(value) {
         this._markers = value ?? [];
         this.putMarkers();
@@ -1716,22 +1907,12 @@ class TooltipSettings {
 }
 
 class TooltipComponent extends DestructibleComponent {
-    set settings(value) {
-        if (!value || this._settings.isSame(value))
-            return;
-        this._settings = value;
-        this.detector.detectChanges();
-    }
     constructor(postboy, detector) {
         super();
         this.postboy = postboy;
         this.detector = detector;
-        this._settings = new TooltipSettings();
         this.show = false;
-        this.removeOverlay = () => {
-            !!this.overlay && this.map?.removeOverlay(this.overlay);
-            this.show = false;
-        };
+        this._settings = new TooltipSettings();
         this.options = (coordinates) => {
             return {
                 element: this.container?.nativeElement,
@@ -1740,12 +1921,29 @@ class TooltipComponent extends DestructibleComponent {
                 position: coordinates,
             };
         };
+        this.removeOverlay = () => {
+            !!this.overlay && this.map?.removeOverlay(this.overlay);
+            this.show = false;
+        };
+    }
+    set settings(value) {
+        if (!value || this._settings.isSame(value))
+            return;
+        this._settings = value;
+        this.detector.detectChanges();
     }
     ngOnInit() {
         this.subs.push(this.observeMapRender());
         this.subs.push(this.observeMapClick());
         this.subs.push(this.observeClose());
     }
+    addOverlay(coordinates) {
+        this.removeOverlay();
+        this.overlay = new Overlay(this.options(coordinates));
+        this.map?.addOverlay(this.overlay);
+        this.show = true;
+        this.detector.detectChanges();
+    }
     observeMapClick() {
         return this.postboy.subscribe(MapClickEvent.ID).subscribe((ev) => {
             this._settings.show(ev) ? this.addOverlay(ev.coordinates) : this.removeOverlay();
@@ -1762,13 +1960,6 @@ class TooltipComponent extends DestructibleComponent {
             this.map = m.map;
         });
     }
-    addOverlay(coordinates) {
-        this.removeOverlay();
-        this.overlay = new Overlay(this.options(coordinates));
-        this.map?.addOverlay(this.overlay);
-        this.show = true;
-        this.detector.detectChanges();
-    }
 }
 TooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TooltipComponent, deps: [{ token: MapPostboyService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 TooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TooltipComponent, selector: "art-tooltip", inputs: { settings: "settings" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["tip"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div #tip [class]=\"['tooltip-wrapper', _settings.containerClass]\" [hidden]=\"!show\">\r\n  <ng-content></ng-content>\r\n</div>\r\n", styles: [".tooltip-wrapper{position:absolute}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
@@ -1782,6 +1973,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: 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.
+ */
 class PolygonsComponent extends DestructibleComponent {
     constructor(postboy) {
         super();
@@ -1789,6 +1985,11 @@ class PolygonsComponent extends DestructibleComponent {
         this.layerName = '';
         this._polygons = [];
     }
+    /**
+     * Sets the value of polygons.
+     *
+     * @param {PolygonModel[]} value - The new value for polygons.
+     */
     set polygons(value) {
         this._polygons = value ?? [];
         this.putPolygons();
@@ -1816,14 +2017,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }] } });
 
+/**
+ * Represents the settings for a zoom control.
+ */
 class ZoomControlSettings {
     constructor() {
+        /**
+         * 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.
+     */
     static copy(model) {
         const result = new ZoomControlSettings();
         result.controlClass = model.controlClass;
@@ -1833,6 +2067,13 @@ class ZoomControlSettings {
         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.
+     */
     isSame(model) {
         if (this.zoomInClass !== model.zoomInClass)
             return false;
@@ -1846,30 +2087,61 @@ class ZoomControlSettings {
             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.
+     */
     setZoomInLabel(zoomInLabel) {
         return ZoomControlSettings.copy({ ...this, 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.
+     */
     setZoomOutClass(zoomOutClass) {
         return ZoomControlSettings.copy({ ...this, 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.
+     */
     setZoomInClass(zoomInClass) {
         return ZoomControlSettings.copy({ ...this, 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.
+     */
     setZoomOutLabel(zoomOutLabel) {
         return ZoomControlSettings.copy({ ...this, 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.
+     */
     setControlClass(controlClass) {
         return ZoomControlSettings.copy({ ...this, controlClass });
     }
 }
 
+/**
+ * @class
+ * @classdesc Represents a component for the Zoom control on a map.
+ * @extends DestructibleComponent
+ * @implements OnInit
+ */
 class MapControlZoomComponent extends DestructibleComponent {
-    set settings(value) {
-        if (!value || this._settings.isSame(value))
-            return;
-        this._settings = value;
-        this.setControl();
-    }
     constructor(postboy) {
         super();
         this.postboy = postboy;
@@ -1879,6 +2151,23 @@ class MapControlZoomComponent extends DestructibleComponent {
         };
         this.eliminate = () => !!this.map && !!this.control && this.map.removeControl(this.control);
     }
+    /**
+     * 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 settings(value) {
+        if (!value || this._settings.isSame(value))
+            return;
+        this._settings = value;
+        this.setControl();
+    }
     ngOnInit() {
         this.postboy
             .subscribe(MapRenderedEvent.ID)
@@ -1954,7 +2243,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 }]
         }] });
 
+/**
+ * Helper class to create and modify marker styles.
+ */
 class 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.
+     */
     static fromSvg(svg, size = [30, 30], zIndex = 400) {
         let image = new Image();
         image.src = 'data:image/svg+xml,' + escape(svg);
@@ -1966,6 +2265,15 @@ class MarkerStyleHelper {
             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.
+     */
     static circle(radius, fill, strokeColor, strokeWidth = 1) {
         return new Style({
             image: new Circle({
@@ -1975,13 +2283,32 @@ class MarkerStyleHelper {
             }),
         });
     }
+    /**
+     * 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.
+     */
     static withText(style, text) {
         style.setText(text);
         return style;
     }
 }
 
+/**
+ * A helper class for creating polygon styles.
+ * @class
+ */
 class 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.
+     */
     static simple(fill, stroke, strokeWidth = 1) {
         return new Style({
             fill: new Fill({
@@ -1993,6 +2320,15 @@ class PolygonStyleHelper {
             }),
         });
     }
+    /**
+     * 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.
+     */
     static edit(fill, stroke, strokeWidth = 1, pinRadius = 5) {
         return new Style({
             image: new Circle({
@@ -2012,7 +2348,18 @@ class PolygonStyleHelper {
     }
 }
 
+/**
+ * Helper class for creating text styles.
+ */
 class 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.
+     */
     static get(text, font, color) {
         return new Text({
             text: text,
@@ -2025,37 +2372,41 @@ class TextStyleHelper {
     }
 }
 
+/**
+ * A helper class for converting and stringify features.
+ */
 class StringifyFeatureHelper {
     static polygon(feature, format = FeatureOutputFormat.GeoJson) {
         return format === FeatureOutputFormat.GeoJson
             ? new GeoJSON().writeFeature(feature)
             : new 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.
+     */
     static circle(feature, format = FeatureOutputFormat.GeoJson) {
-        // const clone = feature.clone();
-        // clone.setGeometry(fromCircle(feature.getGeometry()! as Circle));
-        const tetemp = feature.getGeometryName();
         const circle = feature.getGeometry();
-        // const temp = StringifyFeatureHelper.drawCircle(circle.getCenter(), circle.getRadius());
-        const ttt = feature.getGeometry().getExtent();
-        const eastPoint = [ttt[2], (ttt[1] + ttt[3]) / 2];
-        const aaa = [
-            ...transform([ttt[0], ttt[1]], 'EPSG:4326', 'EPSG:3857'),
-            ...transform([ttt[2], ttt[3]], 'EPSG:4326', 'EPSG:3857'),
+        const ext = feature.getGeometry().getExtent();
+        const coords = [
+            ...transform([ext[0], ext[1]], 'EPSG:4326', 'EPSG:3857'),
+            ...transform([ext[2], ext[3]], 'EPSG:4326', 'EPSG:3857'),
         ];
-        const radius = (aaa[2] - aaa[0]) / 2;
-        const radius2 = new LineString([circle.getCenter(), eastPoint]).getLength();
+        const radius = (coords[2] - coords[0]) / 2;
         const polygonGeom = new Polygon(StringifyFeatureHelper.drawCircle(circle.getCenter(), radius));
-        // var edgeCoordinate = [circle.getCenter()[0] + radius, circle.getCenter()[1]];
-        // var wgs84Sphere = new Sphere(6378137);
         return StringifyFeatureHelper.polygon(new 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.
+     */
     static drawCircle(point, radius) {
         const tetetemp = transform(point, 'EPSG:4326', 'EPSG:3857');
         // const tetetemp = point;