@artstesh/maps 6.0.1 → 6.0.2

package/dist/fesm2022/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';
@@ -163,17 +163,6 @@ class PolygonModel {
     id;
     lat;
     lng;
-    _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);
-    }
     constructor(feature, id, info) {
         this.info = info;
         this.id = id == null ? IdGenerator.get() : id;
@@ -182,9 +171,20 @@ class PolygonModel {
             this._feature?.set(MapConstants.FeatureInfo, this.info);
         [this.lng, this.lat] = getCenter(this._feature.getGeometry()?.getExtent());
     }
+    _feature;
     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;
@@ -203,7 +203,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.
@@ -531,6 +531,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());
@@ -540,11 +545,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 {
@@ -811,14 +811,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) => {
@@ -836,6 +828,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) => {
@@ -1102,12 +1102,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImpor
             type: Injectable
         }], ctorParameters: () => [{ 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 {
+    /**
+     * The maximum zoom level for a map view.
+     *
+     * @type {number}
+     * @default 19
+     */
     maxZoom = 19;
+    /**
+     * The minimum zoom level allowed.
+     *
+     * @type {number}
+     */
     minZoom = 0;
+    /**
+     * The opacity of an element.
+     *
+     * @type {number}
+     * @default 0.6
+     */
     opacity = 0.6;
+    /**
+     * Represents the tiles URL.
+     * @typedef {string} url
+     *
+     * @example
+     * 'https://example.ex/{z}/{x}/{y}.png'
+     */
     url = '';
+    /**
+     * The projection of the coordinate system.
+     *
+     * @type {string}
+     * @default 'EPSG:3857'
+     */
     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;
@@ -1117,21 +1156,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;
@@ -1201,12 +1276,6 @@ class TileLayerComponent extends DestructibleComponent {
         this.postboy = postboy;
         this.factory = factory;
     }
-    ngOnInit() {
-        this.postboy
-            .subscribe(MapRenderedEvent.ID)
-            .pipe(filter((m) => !!m), first())
-            .subscribe((m) => this.initLayer());
-    }
     _settings = new TileLayerSettings();
     set settings(value) {
         if (!value || this._settings.isSame(value))
@@ -1214,6 +1283,12 @@ class TileLayerComponent extends DestructibleComponent {
         this._settings = value;
         this.initLayer();
     }
+    ngOnInit() {
+        this.postboy
+            .subscribe(MapRenderedEvent.ID)
+            .pipe(filter((m) => !!m), first())
+            .subscribe((m) => this.initLayer());
+    }
     onDestroy = () => this.removeLayer();
     initLayer() {
         this.removeLayer();
@@ -1299,11 +1374,16 @@ class FeatureLayerSettings {
      */
     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
      */
     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}
      */
     minZoom = 0;
     /**
@@ -1311,8 +1391,10 @@ class FeatureLayerSettings {
      */
     style;
     /**
-     * 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();
@@ -1324,43 +1406,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)
@@ -1405,24 +1500,24 @@ class FeatureLayerComponent extends DestructibleComponent {
     postboy;
     factory;
     layer = null;
-    _settings = new FeatureLayerSettings();
     constructor(postboy, factory) {
         super();
         this.postboy = postboy;
         this.factory = factory;
     }
-    ngOnInit() {
-        this.postboy
-            .subscribe(MapRenderedEvent.ID)
-            .pipe(filter((m) => !!m), first())
-            .subscribe((m) => this.initLayer());
-    }
+    _settings = new FeatureLayerSettings();
     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());
+    }
     onDestroy = () => this.removeLayer();
     initLayer() {
         this.removeLayer();
@@ -1446,12 +1541,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImpor
 class ClusterLayerSettings {
     name = IdGenerator.get();
     zIndex = 1;
+    /**
+     * The maximum view zoom level (inclusive) at which this layer will be visible.
+     *
+     * @type {number}
+     * @default 19
+     */
     maxZoom = 19;
+    /**
+     * The minimum view zoom level (exclusive) at which this layer will be visible.
+     *
+     * @type {number}
+     */
     minZoom = 0;
+    /**
+     * Distance in pixels within which features will be clustered together.
+     *
+     * @type {number}
+     */
     distance = 20;
     bbox = false;
     clusterCancel = 14;
     style;
+    /**
+     * 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;
@@ -1464,30 +1581,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;
@@ -1592,28 +1765,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImpor
                 }]
         }] });
 
+/**
+ * Represents a cluster layer component.
+ */
 class ClusterLayerComponent extends DestructibleComponent {
     postboy;
     factory;
     manager = null;
-    _settings = new ClusterLayerSettings();
     constructor(postboy, factory) {
         super();
         this.postboy = postboy;
         this.factory = factory;
     }
-    ngOnInit() {
-        this.postboy
-            .subscribe(MapRenderedEvent.ID)
-            .pipe(filter((m) => !!m), first())
-            .subscribe((m) => this.initLayer());
-    }
+    _settings = new ClusterLayerSettings();
+    /**
+     * 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());
+    }
     onDestroy = () => this.removeLayer();
     initLayer() {
         this.removeLayer();
@@ -1665,6 +1846,7 @@ class MapPlateComponent extends DestructibleComponent {
     detector;
     map;
     osmUrl = '';
+    drawingLayerSettings = new FeatureLayerSettings().setName(MapConstants.DrawingLayerId);
     constructor(elementRef, postboy, mapFactory, registrator, detector) {
         super();
         this.elementRef = elementRef;
@@ -1675,7 +1857,6 @@ class MapPlateComponent extends DestructibleComponent {
         registrator.up();
     }
     _settings = new MapSettings();
-    drawingLayerSettings = new FeatureLayerSettings().setName(MapConstants.DrawingLayerId);
     set settings(value) {
         if (!value || this._settings.isSame(value))
             return;
@@ -1693,6 +1874,9 @@ class MapPlateComponent extends DestructibleComponent {
         });
         this.setOsm();
     }
+    onDestroy = () => {
+        this.registrator.down();
+    };
     setOsm() {
         if (!this.map)
             return;
@@ -1700,9 +1884,6 @@ class MapPlateComponent extends DestructibleComponent {
         this.detector.detectChanges();
         this.map.updateSize();
     }
-    onDestroy = () => {
-        this.registrator.down();
-    };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: MapPlateComponent, deps: [{ token: i0.ElementRef }, { token: MapPostboyService }, { token: MapPlateFactory }, { token: MessageRegistratorService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: MapPlateComponent, selector: "art-map-plate", inputs: { settings: "settings" }, providers: [
             MessageRegistratorService,
@@ -1735,6 +1916,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImpor
                 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 {
     postboy;
     layerName = '';
@@ -1743,6 +1929,11 @@ class MarkersComponent extends DestructibleComponent {
         this.postboy = postboy;
     }
     _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();
@@ -1773,7 +1964,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImpor
 class TooltipSettings {
     id;
     containerClass = 'custom-tooltip-class';
-    show = (e) => true;
     constructor(id) {
         this.id = id ?? IdGenerator.get();
     }
@@ -1783,6 +1973,7 @@ class TooltipSettings {
         result.containerClass = model.containerClass;
         return result;
     }
+    show = (e) => true;
     setShow(show) {
         return TooltipSettings.copy({ ...this, show });
     }
@@ -1804,26 +1995,41 @@ class TooltipComponent extends DestructibleComponent {
     postboy;
     detector;
     container;
-    _settings = new TooltipSettings();
-    map;
     overlay;
     show = false;
+    map;
+    constructor(postboy, detector) {
+        super();
+        this.postboy = postboy;
+        this.detector = detector;
+    }
+    _settings = new TooltipSettings();
     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;
-    }
     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();
+    }
+    options = (coordinates) => {
+        return {
+            element: this.container?.nativeElement,
+            autoPan: false,
+            autoPanAnimation: { duration: 0 },
+            position: coordinates,
+        };
+    };
     observeMapClick() {
         return this.postboy.subscribe(MapClickEvent.ID).subscribe((ev) => {
             this._settings.show(ev) ? this.addOverlay(ev.coordinates) : this.removeOverlay();
@@ -1844,21 +2050,6 @@ class TooltipComponent extends DestructibleComponent {
         !!this.overlay && this.map?.removeOverlay(this.overlay);
         this.show = false;
     };
-    addOverlay(coordinates) {
-        this.removeOverlay();
-        this.overlay = new Overlay(this.options(coordinates));
-        this.map?.addOverlay(this.overlay);
-        this.show = true;
-        this.detector.detectChanges();
-    }
-    options = (coordinates) => {
-        return {
-            element: this.container?.nativeElement,
-            autoPan: false,
-            autoPanAnimation: { duration: 0 },
-            position: coordinates,
-        };
-    };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: TooltipComponent, deps: [{ token: MapPostboyService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", 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 });
 }
@@ -1872,6 +2063,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImpor
                 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 {
     postboy;
     layerName = '';
@@ -1880,6 +2076,11 @@ class PolygonsComponent extends DestructibleComponent {
         this.postboy = postboy;
     }
     _polygons = [];
+    /**
+     * Sets the value of polygons.
+     *
+     * @param {PolygonModel[]} value - The new value for polygons.
+     */
     set polygons(value) {
         this._polygons = value ?? [];
         this.putPolygons();
@@ -1907,12 +2108,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImpor
                 type: Input
             }] } });
 
+/**
+ * Represents the settings for a zoom control.
+ */
 class ZoomControlSettings {
+    /**
+     * The CSS class name of the control element.
+     *
+     * @type {string}
+     */
     controlClass = 'ol-zoom';
+    /**
+     * The CSS class name for zoom in button.
+     * @type {string}
+     */
     zoomInClass = 'ol-zoom-in';
+    /**
+     * The CSS class name for the zoom out button element.
+     *
+     * @type {string}
+     */
     zoomOutClass = 'ol-zoom-out';
+    /**
+     * The label for the zoom in action.
+     *
+     * @type {string}
+     */
     zoomInLabel = 'Zoom In';
+    /**
+     * The label for the zoom out control.
+     *
+     * @type {string}
+     */
     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;
@@ -1922,6 +2156,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;
@@ -1935,38 +2176,86 @@ 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 {
     postboy;
-    _settings = new ZoomControlSettings();
     map;
     control;
+    constructor(postboy) {
+        super();
+        this.postboy = postboy;
+    }
+    _settings = new ZoomControlSettings();
+    /**
+     * 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();
     }
-    constructor(postboy) {
-        super();
-        this.postboy = postboy;
-    }
     ngOnInit() {
         this.postboy
             .subscribe(MapRenderedEvent.ID)
@@ -1976,15 +2265,15 @@ class MapControlZoomComponent extends DestructibleComponent {
             this.setControl();
         });
     }
+    onDestroy = () => {
+        this.eliminate();
+    };
     setControl() {
         if (!this.map)
             return;
         this.control = this.postboy.execute(new GenerateZoomControlExecutor(this._settings));
         this.map.addControl(this.control);
     }
-    onDestroy = () => {
-        this.eliminate();
-    };
     eliminate = () => !!this.map && !!this.control && this.map.removeControl(this.control);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: MapControlZoomComponent, deps: [{ token: MapPostboyService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: MapControlZoomComponent, selector: "art-map-control-zoom", inputs: { settings: "settings" }, usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
@@ -2046,7 +2335,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImpor
                 }]
         }] });
 
+/**
+ * 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);
@@ -2058,6 +2357,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({
@@ -2067,13 +2375,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({
@@ -2085,6 +2412,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({
@@ -2104,7 +2440,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,
@@ -2117,37 +2464,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;