@artstesh/maps 6.1.15 → 6.2.0

package/dist/fesm2022/maps-components.mjs

@@ -1,7 +1,3 @@
-import * as i0 from '@angular/core';
-import { Component, Injectable, ChangeDetectionStrategy, Input, ViewEncapsulation, ViewChild, NgModule } from '@angular/core';
-import * as i4 from '@angular/common';
-import { CommonModule } from '@angular/common';
 import { Feature, Collection } from 'ol';
 export { Feature } from 'ol';
 import { Point, LineString } from 'ol/geom';
@@ -10,6 +6,8 @@ import { GeoJSON, WKT } from 'ol/format';
 import { getCenter, createEmpty, extend } from 'ol/extent';
 import Polygon, { circular, fromExtent } from 'ol/geom/Polygon';
 import { Control, Zoom } from 'ol/control';
+import * as i0 from '@angular/core';
+import { Component, Injectable, ChangeDetectionStrategy, Input, input, ViewEncapsulation, ViewChild } from '@angular/core';
 import { get, useGeographic, transform } from 'ol/proj';
 import { PostboyGenericMessage, PostboyCallbackMessage, PostboyExecutor, PostboyService, PostboyAbstractRegistrator } from '@artstesh/postboy';
 import * as Sphere from 'ol/sphere';
@@ -28,32 +26,17 @@ import Cluster from 'ol/source/Cluster';
 import Static from 'ol/source/ImageStatic';
 import ImageLayer from 'ol/layer/Image';
 import RasterSource from 'ol/source/Raster';
+import { NgTemplateOutlet, NgIf } from '@angular/common';
 import Map from 'ol/Map';
 import View from 'ol/View';
-import Overlay from 'ol/Overlay';
 import Style from 'ol/style/Style';
 import { Icon, Circle as Circle$1, Fill, Stroke, Text } from 'ol/style';
 export { Fill, RegularShape, Stroke, Style, Text } from 'ol/style';
 import { METERS_PER_UNIT } from 'ol/proj/epsg4326';
+import Overlay from 'ol/Overlay';
 import * as Circle from 'ol/style/Circle';
 export { Circle as CircleStyle };
 
-class DestructibleComponent {
-    subs = [];
-    onDestroy;
-    ngOnDestroy() {
-        this.subs.forEach((s) => s.unsubscribe());
-        if (this.onDestroy)
-            this.onDestroy();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: DestructibleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: DestructibleComponent, selector: "ng-component", ngImport: i0, template: '', isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: DestructibleComponent, decorators: [{
-            type: Component,
-            args: [{ template: '' }]
-        }] });
-
 var MapLyrs;
 (function (MapLyrs) {
     MapLyrs[MapLyrs["Hybrid"] = 1] = "Hybrid";
@@ -84,6 +67,7 @@ class MapSettings {
     zoom = 4;
     lyrs = MapLyrs.Hybrid;
     language = 'en';
+    osmOpacity = 1;
     interactionSettings = {};
     static copy(model) {
         const result = new MapSettings();
@@ -94,6 +78,7 @@ class MapSettings {
         result.lyrs = model.lyrs;
         result.interactionSettings = model.interactionSettings;
         result.language = model.language;
+        result.osmOpacity = model.osmOpacity;
         return result;
     }
     /**
@@ -160,6 +145,15 @@ class MapSettings {
     setLanguage(language) {
         return MapSettings.copy({ ...this, language });
     }
+    /**
+     * Sets the opacity level for the OpenStreetMap layer.
+     *
+     * @param {number} osmOpacity - The opacity value for the OpenStreetMap layer, where 0 is fully transparent and 1 is fully opaque.
+     * @return {MapSettings} A new MapSettings instance with the updated OpenStreetMap opacity.
+     */
+    setOsmOpacity(osmOpacity) {
+        return MapSettings.copy({ ...this, osmOpacity });
+    }
     /**
      * Compares the current MapSettings instance with another to determine if they are identical.
      *
@@ -179,6 +173,8 @@ class MapSettings {
             return false;
         if (this.interactionSettings !== model.interactionSettings)
             return false;
+        if (this.osmOpacity !== model.osmOpacity)
+            return false;
         return this.center.length === model.center.length && !this.center.filter((c, i) => c !== model.center[i]).length;
     }
 }
@@ -313,6 +309,25 @@ class MapControl extends Control {
     }
 }
 
+class DestructibleComponent {
+    subs = [];
+    onDestroy;
+    ngOnDestroy() {
+        this.subs.forEach((s) => s.unsubscribe());
+        if (this.onDestroy)
+            this.onDestroy();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: DestructibleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: DestructibleComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: '', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: DestructibleComponent, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    template: '',
+                }]
+        }] });
+
 /**
  * Represents a command to add a custom control to a map.
  */
@@ -1776,11 +1791,11 @@ class TileLayerComponent extends DestructibleComponent {
             this.postboy.fire(new RemoveTileCommand(this.layer));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: TileLayerComponent, deps: [{ token: MapPostboyService }, { token: TileLayerFactory }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: TileLayerComponent, selector: "art-tile-layer", inputs: { settings: "settings" }, usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: TileLayerComponent, isStandalone: true, selector: "art-tile-layer", inputs: { settings: "settings" }, usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: TileLayerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'art-tile-layer', template: '', changeDetection: ChangeDetectionStrategy.OnPush }]
+            args: [{ selector: 'art-tile-layer', standalone: true, template: '', changeDetection: ChangeDetectionStrategy.OnPush }]
         }], ctorParameters: () => [{ type: MapPostboyService }, { type: TileLayerFactory }], propDecorators: { settings: [{
                 type: Input
             }] } });
@@ -1791,13 +1806,20 @@ class OsmTileLayerComponent extends DestructibleComponent {
         super();
     }
     _url = '';
+    _map;
+    _opacity = 1;
     set url(value) {
         if (!value || this._url === value)
             return;
         this._url = value;
         this.initLayer();
     }
-    _map;
+    set opacity(value) {
+        if (!value || this._opacity === value)
+            return;
+        this._opacity = value;
+        this.initLayer();
+    }
     set map(value) {
         if (!value || this._map === value)
             return;
@@ -1821,18 +1843,21 @@ class OsmTileLayerComponent extends DestructibleComponent {
             source: new OSM({
                 url: this._url,
             }),
+            opacity: this._opacity,
         });
         this.layer.set('name', 'osm-tile-layer');
         this._map.addLayer(this.layer);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: OsmTileLayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: OsmTileLayerComponent, selector: "art-osm-tile-layer", inputs: { url: "url", map: "map" }, usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: OsmTileLayerComponent, isStandalone: true, selector: "art-osm-tile-layer", inputs: { url: "url", opacity: "opacity", map: "map" }, usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: OsmTileLayerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'art-osm-tile-layer', template: '', changeDetection: ChangeDetectionStrategy.OnPush }]
+            args: [{ selector: 'art-osm-tile-layer', standalone: true, template: '', changeDetection: ChangeDetectionStrategy.OnPush }]
         }], ctorParameters: () => [], propDecorators: { url: [{
                 type: Input
+            }], opacity: [{
+                type: Input
             }], map: [{
                 type: Input
             }] } });
@@ -2032,11 +2057,11 @@ class FeatureLayerComponent extends DestructibleComponent {
             this.postboy.fire(new RemoveLayerCommand(this.layer));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: FeatureLayerComponent, deps: [{ token: MapPostboyService }, { token: FeatureLayerFactory }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: FeatureLayerComponent, selector: "art-feature-layer", inputs: { settings: "settings" }, usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: FeatureLayerComponent, isStandalone: true, selector: "art-feature-layer", inputs: { settings: "settings" }, usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: FeatureLayerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'art-feature-layer', template: '', changeDetection: ChangeDetectionStrategy.OnPush }]
+            args: [{ selector: 'art-feature-layer', standalone: true, template: '', changeDetection: ChangeDetectionStrategy.OnPush }]
         }], ctorParameters: () => [{ type: MapPostboyService }, { type: FeatureLayerFactory }], propDecorators: { settings: [{
                 type: Input
             }] } });
@@ -2309,11 +2334,11 @@ class ClusterLayerComponent extends DestructibleComponent {
             this.postboy.fire(new RemoveLayerCommand(this.manager.layer));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: ClusterLayerComponent, deps: [{ token: MapPostboyService }, { token: ClusterLayerFactory }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: ClusterLayerComponent, selector: "art-cluster-layer", inputs: { settings: "settings" }, usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: ClusterLayerComponent, isStandalone: true, selector: "art-cluster-layer", inputs: { settings: "settings" }, usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: ClusterLayerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'art-cluster-layer', template: '', changeDetection: ChangeDetectionStrategy.OnPush }]
+            args: [{ selector: 'art-cluster-layer', standalone: true, template: '', changeDetection: ChangeDetectionStrategy.OnPush }]
         }], ctorParameters: () => [{ type: MapPostboyService }, { type: ClusterLayerFactory }], propDecorators: { settings: [{
                 type: Input
             }] } });
@@ -2506,11 +2531,11 @@ class ImageLayerComponent extends DestructibleComponent {
             this.postboy.fire(new RemoveImageLayerCommand(this.layer));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: ImageLayerComponent, deps: [{ token: MapPostboyService }, { token: ImageLayerFactory }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: ImageLayerComponent, selector: "art-image-layer", inputs: { settings: "settings" }, usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: ImageLayerComponent, isStandalone: true, selector: "art-image-layer", inputs: { settings: "settings" }, usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: ImageLayerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'art-image-layer', template: '', changeDetection: ChangeDetectionStrategy.OnPush }]
+            args: [{ selector: 'art-image-layer', standalone: true, template: '', changeDetection: ChangeDetectionStrategy.OnPush }]
         }], ctorParameters: () => [{ type: MapPostboyService }, { type: ImageLayerFactory }], propDecorators: { settings: [{
                 type: Input
             }] } });
@@ -2781,11 +2806,11 @@ class RasterTileLayerComponent extends DestructibleComponent {
             this.postboy.fire(new RemoveRasterTileCommand(this.layer));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: RasterTileLayerComponent, deps: [{ token: MapPostboyService }, { token: RasterTileLayerFactory }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: RasterTileLayerComponent, selector: "art-raster-tile-layer", inputs: { settings: "settings" }, usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: RasterTileLayerComponent, isStandalone: true, selector: "art-raster-tile-layer", inputs: { settings: "settings" }, usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: RasterTileLayerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'art-raster-tile-layer', template: '', changeDetection: ChangeDetectionStrategy.OnPush }]
+            args: [{ selector: 'art-raster-tile-layer', standalone: true, template: '', changeDetection: ChangeDetectionStrategy.OnPush }]
         }], ctorParameters: () => [{ type: MapPostboyService }, { type: RasterTileLayerFactory }], propDecorators: { settings: [{
                 type: Input
             }] } });
@@ -2820,6 +2845,7 @@ class MapPlateComponent extends DestructibleComponent {
     mapFactory;
     registrator;
     detector;
+    contentRef = input(null);
     renderTryCount = 0;
     map;
     osmUrl = '';
@@ -2879,7 +2905,7 @@ class MapPlateComponent extends DestructibleComponent {
         this.map.updateSize();
     }
     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: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.7", type: MapPlateComponent, isStandalone: true, selector: "art-map-plate", inputs: { contentRef: { classPropertyName: "contentRef", publicName: "contentRef", isSignal: true, isRequired: false, transformFunction: null }, settings: { classPropertyName: "settings", publicName: "settings", isSignal: false, isRequired: false, transformFunction: null } }, providers: [
             MessageRegistratorService,
             MapStateService,
             MapManagementService,
@@ -2890,11 +2916,11 @@ class MapPlateComponent extends DestructibleComponent {
             FeatureService,
             FeatureModificationService,
             ControlsService,
-        ], usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\r\n<art-osm-tile-layer *ngIf=\"osmUrl && map\" [map]=\"map\" [url]=\"osmUrl\"></art-osm-tile-layer>\r\n<art-feature-layer *ngIf=\"map\" [settings]=\"drawingLayerSettings\"></art-feature-layer>\r\n", styles: ["art-map-plate{display:block;width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: OsmTileLayerComponent, selector: "art-osm-tile-layer", inputs: ["url", "map"] }, { kind: "component", type: FeatureLayerComponent, selector: "art-feature-layer", inputs: ["settings"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], usesInheritance: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"contentRef()\"> </ng-container>\r\n<art-osm-tile-layer *ngIf=\"osmUrl && map\" [map]=\"map\" [url]=\"osmUrl\" [opacity]=\"_settings.osmOpacity\"></art-osm-tile-layer>\r\n<art-feature-layer *ngIf=\"map\" [settings]=\"drawingLayerSettings\"></art-feature-layer>\r\n", styles: ["art-map-plate{display:block;width:100%;height:100%}\n"], dependencies: [{ kind: "component", type: OsmTileLayerComponent, selector: "art-osm-tile-layer", inputs: ["url", "opacity", "map"] }, { kind: "component", type: FeatureLayerComponent, selector: "art-feature-layer", inputs: ["settings"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: MapPlateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'art-map-plate', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+            args: [{ selector: 'art-map-plate', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         MessageRegistratorService,
                         MapStateService,
                         MapManagementService,
@@ -2905,7 +2931,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImpor
                         FeatureService,
                         FeatureModificationService,
                         ControlsService,
-                    ], encapsulation: ViewEncapsulation.None, template: "<ng-content></ng-content>\r\n<art-osm-tile-layer *ngIf=\"osmUrl && map\" [map]=\"map\" [url]=\"osmUrl\"></art-osm-tile-layer>\r\n<art-feature-layer *ngIf=\"map\" [settings]=\"drawingLayerSettings\"></art-feature-layer>\r\n", styles: ["art-map-plate{display:block;width:100%;height:100%}\n"] }]
+                    ], encapsulation: ViewEncapsulation.None, imports: [OsmTileLayerComponent, FeatureLayerComponent, NgTemplateOutlet, NgIf], template: "<ng-container *ngTemplateOutlet=\"contentRef()\"> </ng-container>\r\n<art-osm-tile-layer *ngIf=\"osmUrl && map\" [map]=\"map\" [url]=\"osmUrl\" [opacity]=\"_settings.osmOpacity\"></art-osm-tile-layer>\r\n<art-feature-layer *ngIf=\"map\" [settings]=\"drawingLayerSettings\"></art-feature-layer>\r\n", styles: ["art-map-plate{display:block;width:100%;height:100%}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: MapPostboyService }, { type: MapPlateFactory }, { type: MessageRegistratorService }, { type: i0.ChangeDetectorRef }], propDecorators: { settings: [{
                 type: Input
             }] } });
@@ -2944,119 +2970,17 @@ class MarkersComponent extends DestructibleComponent {
         this.postboy.fire(new PlaceLayerFeaturesCommand(this.layerName, this._markers.map((m) => m.feature)));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: MarkersComponent, deps: [{ token: MapPostboyService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: MarkersComponent, selector: "art-markers", inputs: { layerName: "layerName", markers: "markers" }, usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: MarkersComponent, isStandalone: true, selector: "art-markers", inputs: { layerName: "layerName", markers: "markers" }, usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: MarkersComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'art-markers', template: '', changeDetection: ChangeDetectionStrategy.OnPush }]
+            args: [{ selector: 'art-markers', standalone: true, template: '', changeDetection: ChangeDetectionStrategy.OnPush }]
         }], ctorParameters: () => [{ type: MapPostboyService }], propDecorators: { layerName: [{
                 type: Input
             }], markers: [{
                 type: Input
             }] } });
 
-class TooltipSettings {
-    id;
-    containerClass = 'custom-tooltip-class';
-    constructor(id) {
-        this.id = id ?? IdGenerator.get();
-    }
-    static copy(model) {
-        const result = new TooltipSettings(model.id);
-        result.show = model.show;
-        result.containerClass = model.containerClass;
-        return result;
-    }
-    show = (e) => true;
-    setShow(show) {
-        return TooltipSettings.copy({ ...this, show });
-    }
-    setClass(containerClass) {
-        return TooltipSettings.copy({ ...this, containerClass });
-    }
-    isSame(model) {
-        if (this.show !== model.show)
-            return false;
-        if (this.containerClass !== model.containerClass)
-            return false;
-        if (this.id !== model.id)
-            return false;
-        return true;
-    }
-}
-
-class TooltipComponent extends DestructibleComponent {
-    postboy;
-    detector;
-    container;
-    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();
-    }
-    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.sub(MapClickEvent).subscribe((ev) => {
-            this._settings.show(ev) ? this.addOverlay(ev.coordinates) : this.removeOverlay();
-        });
-    }
-    observeClose() {
-        return this.postboy
-            .sub(CloseTooltipCommand)
-            .pipe(filter((ev) => ev.tooltipId === this._settings.id))
-            .subscribe(() => this.removeOverlay());
-    }
-    observeMapRender() {
-        return this.postboy.sub(MapRenderedEvent).subscribe((m) => {
-            this.map = m.map;
-        });
-    }
-    removeOverlay = () => {
-        !!this.overlay && this.map?.removeOverlay(this.overlay);
-        this.show = false;
-    };
-    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 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: TooltipComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'art-tooltip', changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
-        }], ctorParameters: () => [{ type: MapPostboyService }, { type: i0.ChangeDetectorRef }], propDecorators: { container: [{
-                type: ViewChild,
-                args: ['tip']
-            }], settings: [{
-                type: Input
-            }] } });
-
 /**
  * Component for rendering polygons on a map.
  * It listens for changes in the `polygons` input property and
@@ -3094,11 +3018,11 @@ class PolygonsComponent extends DestructibleComponent {
         })));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: PolygonsComponent, deps: [{ token: MapPostboyService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: PolygonsComponent, selector: "art-polygons", inputs: { layerName: "layerName", polygons: "polygons" }, usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: PolygonsComponent, isStandalone: true, selector: "art-polygons", inputs: { layerName: "layerName", polygons: "polygons" }, usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: PolygonsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'art-polygons', template: '', changeDetection: ChangeDetectionStrategy.OnPush }]
+            args: [{ selector: 'art-polygons', standalone: true, template: '', changeDetection: ChangeDetectionStrategy.OnPush }]
         }], ctorParameters: () => [{ type: MapPostboyService }], propDecorators: { layerName: [{
                 type: Input
             }], polygons: [{
@@ -3106,64 +3030,256 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImpor
             }] } });
 
 /**
- * Represents the settings for a zoom control.
+ * Helper class to create and modify marker styles.
  */
-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';
+class MarkerStyleHelper {
     /**
-     * The CSS class name for the zoom out button element.
-     *
-     * @type {string}
+     * 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.
      */
-    zoomOutClass = 'ol-zoom-out';
+    static fromSvg(svg, size = [30, 30], zIndex = 400) {
+        let image = new Image();
+        image.src = 'data:image/svg+xml,' + escape(svg);
+        return new Style({
+            image: new Icon({
+                img: image,
+                imgSize: size,
+            }),
+            zIndex,
+        });
+    }
     /**
-     * The label for the zoom in action.
+     * Returns a Style object with a circle style.
      *
-     * @type {string}
+     * @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.
      */
-    zoomInLabel = 'Zoom In';
+    static circle(radius, fill, strokeColor, strokeWidth = 1) {
+        return new Style({
+            image: new Circle$1({
+                radius,
+                fill: new Fill({ color: fill }),
+                stroke: new Stroke({ color: strokeColor, width: strokeWidth }),
+            }),
+        });
+    }
     /**
-     * The label for the zoom out control.
+     * Applies the given Text to the provided Style.
      *
-     * @type {string}
+     * @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.
      */
-    zoomOutLabel = 'Zoom Out';
+    static withText(style, text) {
+        style.setText(text);
+        return style;
+    }
+}
+
+/**
+ * A helper class for creating polygon styles.
+ * @class
+ */
+class PolygonStyleHelper {
     /**
-     * Copies the provided ZoomControlSettings object.
+     * Creates a Style object with the given fill color, stroke color, and stroke width.
      *
-     * @param {ZoomControlSettings} model - The ZoomControlSettings object to be copied.
-     * @return {ZoomControlSettings} - The copied ZoomControlSettings object.
+     * @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 copy(model) {
-        const result = new ZoomControlSettings();
-        result.controlClass = model.controlClass;
-        result.zoomInClass = model.zoomInClass;
-        result.zoomOutClass = model.zoomOutClass;
-        result.zoomInLabel = model.zoomInLabel;
-        result.zoomOutLabel = model.zoomOutLabel;
-        return result;
+    static simple(fill, stroke, strokeWidth = 1) {
+        return new Style({
+            fill: new Fill({
+                color: fill,
+            }),
+            stroke: new Stroke({
+                color: stroke,
+                width: strokeWidth,
+            }),
+        });
     }
     /**
-     * Checks if the current ZoomControlSettings object is equal to the given model.
-     *
-     * @param {ZoomControlSettings} model - The ZoomControlSettings object to compare with.
+     * Creates a new Style object with the given fill, stroke, stroke width, and pin radius.
      *
-     * @return {boolean} - true if the current object is equal to the given model, false otherwise.
+     * @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.
      */
-    isSame(model) {
-        if (this.zoomInClass !== model.zoomInClass)
-            return false;
-        if (this.zoomOutClass !== model.zoomOutClass)
+    static edit(fill, stroke, strokeWidth = 1, pinRadius = 5) {
+        return new Style({
+            image: new Circle$1({
+                fill: new Fill({
+                    color: stroke,
+                }),
+                radius: pinRadius,
+            }),
+            fill: new Fill({
+                color: fill,
+            }),
+            stroke: new Stroke({
+                color: stroke,
+                width: strokeWidth,
+            }),
+        });
+    }
+}
+
+/**
+ * Helper class for creating text styles.
+ */
+class TextStyleHelper {
+    /**
+     * Creates and returns a new Text instance with specified styling properties.
+     *
+     * @param {string} text - The text content to display.
+     * @param {string} font - The font style to use for the text.
+     * @param {string} color - The color of the text.
+     * @param {string|null|undefined} [backColor] - The background color of the text. Optional.
+     * @param {number[]|null|undefined} [padding] - The padding around the text in pixels. Optional.
+     * @param {string|null|undefined} [textBaseline] - The text baseline alignment. Optional.
+     * @param {number|null|undefined} [offsetY] - The vertical offset for the text. Optional.
+     * @return {Text} A new Text instance configured with the specified properties.
+     */
+    static get(text, font, color, backColor, padding, textBaseline, offsetY) {
+        return new Text({
+            text: text,
+            font: font,
+            textAlign: 'center',
+            fill: new Fill({
+                color: color,
+            }),
+            backgroundFill: backColor ? new Fill({ color: backColor }) : undefined,
+            padding: padding ?? undefined,
+            textBaseline: textBaseline ?? undefined,
+            offsetY: offsetY ?? undefined,
+        });
+    }
+}
+
+/**
+ * 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 circle = feature.getGeometry();
+        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 = (coords[2] - coords[0]) / 2;
+        const polygonGeom = new Polygon(StringifyFeatureHelper.drawCircle(circle.getCenter(), radius));
+        return StringifyFeatureHelper.polygon(new Feature(polygonGeom), 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;
+        const radians = Math.PI / 180; // degrees to radians
+        const degrees = 180 / Math.PI; // radians to degrees
+        const earthsradius = 6378137.0;
+        const rlat = (radius / earthsradius) * degrees;
+        const rlng = rlat / Math.cos(tetetemp[1] * radians);
+        const extp = [];
+        for (let i = 0; i <= 32; i++) {
+            const theta = Math.PI * (i / 16);
+            extp.push([
+                tetetemp[0] + rlng * Math.cos(theta) * METERS_PER_UNIT,
+                tetetemp[1] + rlat * Math.sin(theta) * METERS_PER_UNIT,
+            ]);
+        }
+        return [extp.map((e) => transform(e, 'EPSG:3857', 'EPSG:4326'))];
+    }
+}
+
+/**
+ * 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;
+        result.zoomInClass = model.zoomInClass;
+        result.zoomOutClass = model.zoomOutClass;
+        result.zoomInLabel = model.zoomInLabel;
+        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;
+        if (this.zoomOutClass !== model.zoomOutClass)
             return false;
         if (this.zoomInLabel !== model.zoomInLabel)
             return false;
@@ -3273,264 +3389,117 @@ class MapControlZoomComponent extends DestructibleComponent {
     }
     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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: MapControlZoomComponent, isStandalone: true, selector: "art-map-control-zoom", inputs: { settings: "settings" }, usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: MapControlZoomComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'art-map-control-zoom', template: '', changeDetection: ChangeDetectionStrategy.OnPush }]
+            args: [{ selector: 'art-map-control-zoom', standalone: true, template: '', changeDetection: ChangeDetectionStrategy.OnPush }]
         }], ctorParameters: () => [{ type: MapPostboyService }], propDecorators: { settings: [{
                 type: Input
             }] } });
 
-class MapModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: MapModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.7", ngImport: i0, type: MapModule, declarations: [DestructibleComponent,
-            MapPlateComponent,
-            TileLayerComponent,
-            OsmTileLayerComponent,
-            FeatureLayerComponent,
-            MarkersComponent,
-            TooltipComponent,
-            PolygonsComponent,
-            ClusterLayerComponent,
-            MapControlZoomComponent,
-            ImageLayerComponent,
-            RasterTileLayerComponent], imports: [CommonModule], exports: [MapPlateComponent,
-            FeatureLayerComponent,
-            MarkersComponent,
-            TileLayerComponent,
-            TooltipComponent,
-            PolygonsComponent,
-            ClusterLayerComponent,
-            MapControlZoomComponent,
-            ImageLayerComponent,
-            RasterTileLayerComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: MapModule, imports: [CommonModule] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: MapModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule],
-                    declarations: [
-                        DestructibleComponent,
-                        MapPlateComponent,
-                        TileLayerComponent,
-                        OsmTileLayerComponent,
-                        FeatureLayerComponent,
-                        MarkersComponent,
-                        TooltipComponent,
-                        PolygonsComponent,
-                        ClusterLayerComponent,
-                        MapControlZoomComponent,
-                        ImageLayerComponent,
-                        RasterTileLayerComponent,
-                    ],
-                    exports: [
-                        MapPlateComponent,
-                        FeatureLayerComponent,
-                        MarkersComponent,
-                        TileLayerComponent,
-                        TooltipComponent,
-                        PolygonsComponent,
-                        ClusterLayerComponent,
-                        MapControlZoomComponent,
-                        ImageLayerComponent,
-                        RasterTileLayerComponent,
-                    ],
-                }]
-        }] });
-
-/**
- * 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);
-        return new Style({
-            image: new Icon({
-                img: image,
-                imgSize: size,
-            }),
-            zIndex,
-        });
+class TooltipSettings {
+    id;
+    containerClass = 'custom-tooltip-class';
+    constructor(id) {
+        this.id = id ?? IdGenerator.get();
     }
-    /**
-     * 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$1({
-                radius,
-                fill: new Fill({ color: fill }),
-                stroke: new Stroke({ color: strokeColor, width: strokeWidth }),
-            }),
-        });
+    static copy(model) {
+        const result = new TooltipSettings(model.id);
+        result.show = model.show;
+        result.containerClass = model.containerClass;
+        return result;
     }
-    /**
-     * 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;
+    show = (e) => true;
+    setShow(show) {
+        return TooltipSettings.copy({ ...this, show });
     }
-}
-
-/**
- * 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({
-                color: fill,
-            }),
-            stroke: new Stroke({
-                color: stroke,
-                width: strokeWidth,
-            }),
-        });
+    setClass(containerClass) {
+        return TooltipSettings.copy({ ...this, containerClass });
     }
-    /**
-     * 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$1({
-                fill: new Fill({
-                    color: stroke,
-                }),
-                radius: pinRadius,
-            }),
-            fill: new Fill({
-                color: fill,
-            }),
-            stroke: new Stroke({
-                color: stroke,
-                width: strokeWidth,
-            }),
-        });
+    isSame(model) {
+        if (this.show !== model.show)
+            return false;
+        if (this.containerClass !== model.containerClass)
+            return false;
+        if (this.id !== model.id)
+            return false;
+        return true;
     }
 }
 
-/**
- * Helper class for creating text styles.
- */
-class TextStyleHelper {
-    /**
-     * Creates and returns a new Text instance with specified styling properties.
-     *
-     * @param {string} text - The text content to display.
-     * @param {string} font - The font style to use for the text.
-     * @param {string} color - The color of the text.
-     * @param {string|null|undefined} [backColor] - The background color of the text. Optional.
-     * @param {number[]|null|undefined} [padding] - The padding around the text in pixels. Optional.
-     * @param {string|null|undefined} [textBaseline] - The text baseline alignment. Optional.
-     * @param {number|null|undefined} [offsetY] - The vertical offset for the text. Optional.
-     * @return {Text} A new Text instance configured with the specified properties.
-     */
-    static get(text, font, color, backColor, padding, textBaseline, offsetY) {
-        return new Text({
-            text: text,
-            font: font,
-            textAlign: 'center',
-            fill: new Fill({
-                color: color,
-            }),
-            backgroundFill: backColor ? new Fill({ color: backColor }) : undefined,
-            padding: padding ?? undefined,
-            textBaseline: textBaseline ?? undefined,
-            offsetY: offsetY ?? undefined,
-        });
+class TooltipComponent extends DestructibleComponent {
+    postboy;
+    detector;
+    contentRef = input(null, {});
+    container;
+    overlay;
+    show = false;
+    map;
+    constructor(postboy, detector) {
+        super();
+        this.postboy = postboy;
+        this.detector = detector;
     }
-}
-
-/**
- * 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);
+    _settings = new TooltipSettings();
+    set settings(value) {
+        if (!value || this._settings.isSame(value))
+            return;
+        this._settings = value;
+        this.detector.detectChanges();
     }
-    /**
-     * 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 circle = feature.getGeometry();
-        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 = (coords[2] - coords[0]) / 2;
-        const polygonGeom = new Polygon(StringifyFeatureHelper.drawCircle(circle.getCenter(), radius));
-        return StringifyFeatureHelper.polygon(new Feature(polygonGeom), format);
+    ngOnInit() {
+        this.subs.push(this.observeMapRender());
+        this.subs.push(this.observeMapClick());
+        this.subs.push(this.observeClose());
     }
-    /**
-     * 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;
-        const radians = Math.PI / 180; // degrees to radians
-        const degrees = 180 / Math.PI; // radians to degrees
-        const earthsradius = 6378137.0;
-        const rlat = (radius / earthsradius) * degrees;
-        const rlng = rlat / Math.cos(tetetemp[1] * radians);
-        const extp = [];
-        for (let i = 0; i <= 32; i++) {
-            const theta = Math.PI * (i / 16);
-            extp.push([
-                tetetemp[0] + rlng * Math.cos(theta) * METERS_PER_UNIT,
-                tetetemp[1] + rlat * Math.sin(theta) * METERS_PER_UNIT,
-            ]);
-        }
-        return [extp.map((e) => transform(e, 'EPSG:3857', 'EPSG:4326'))];
+    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.sub(MapClickEvent).subscribe((ev) => {
+            this._settings.show(ev) ? this.addOverlay(ev.coordinates) : this.removeOverlay();
+        });
+    }
+    observeClose() {
+        return this.postboy
+            .sub(CloseTooltipCommand)
+            .pipe(filter((ev) => ev.tooltipId === this._settings.id))
+            .subscribe(() => this.removeOverlay());
+    }
+    observeMapRender() {
+        return this.postboy.sub(MapRenderedEvent).subscribe((m) => {
+            this.map = m.map;
+        });
     }
+    removeOverlay = () => {
+        !!this.overlay && this.map?.removeOverlay(this.overlay);
+        this.show = false;
+    };
+    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: "17.1.0", version: "17.3.7", type: TooltipComponent, isStandalone: true, selector: "art-tooltip", inputs: { contentRef: { classPropertyName: "contentRef", publicName: "contentRef", isSignal: true, isRequired: false, transformFunction: null }, settings: { classPropertyName: "settings", publicName: "settings", isSignal: false, isRequired: false, transformFunction: null } }, 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-container *ngTemplateOutlet=\"contentRef()\"> </ng-container>\r\n</div>\r\n", styles: [".tooltip-wrapper{position:absolute}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: TooltipComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'art-tooltip', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], template: "<div #tip [class]=\"['tooltip-wrapper', _settings.containerClass]\" [hidden]=\"!show\">\r\n  <ng-container *ngTemplateOutlet=\"contentRef()\"> </ng-container>\r\n</div>\r\n", styles: [".tooltip-wrapper{position:absolute}\n"] }]
+        }], ctorParameters: () => [{ type: MapPostboyService }, { type: i0.ChangeDetectorRef }], propDecorators: { container: [{
+                type: ViewChild,
+                args: ['tip']
+            }], settings: [{
+                type: Input
+            }] } });
 
 /*
  * Public API Surface of maps
@@ -3544,5 +3513,5 @@ class StringifyFeatureHelper {
  * Generated bundle index. Do not edit.
  */
 
-export { AddControlCommand, CalculateAreaExecutor, CancelDrawingCommand, CancelFeatureModificationCommand, CloseTooltipCommand, ClusterLayerComponent, ClusterLayerSettings, DrawSelectionAreaCommand, DrawingType, FeatureLayerComponent, FeatureLayerSettings, FeatureOutputFormat, FilterFeaturesInAreaExecutor, FilterFeaturesInPointExecutor, FitToFeaturesCommand, FitToPolygonsCommand, GetFeaturesInAreaQuery, GetFeaturesInPointQuery, GetGeometryLengthExecutor, GetMapPositionExecutor, ImageLayerComponent, ImageLayerSettings, MapClickEvent, MapConstants, MapControl, MapControlZoomComponent, MapFeatureHoveredEvent, MapLyrs, MapLyrsLabel, MapModule, MapMoveEndEvent, MapPlateComponent, MapPointerMoveEvent, MapPostboyService, MapRenderedEvent, MapSettings, MarkerModel, MarkerStyleHelper, MarkersComponent, MessageRegistratorService, ModifyFeatureCommand, OsmTileLayerComponent, PolygonModel, PolygonSelfIntersectionExecutor, PolygonStyleHelper, PolygonsComponent, RasterTileLayerComponent, RasterTileLayerSettings, RemoveControlCommand, SetMapCenterCommand, StartDrawingCommand, StringifyFeatureHelper, TextStyleHelper, TileLayerComponent, TileLayerSettings, TooltipComponent, TooltipSettings, ZoomControlSettings };
+export { AddControlCommand, CalculateAreaExecutor, CancelDrawingCommand, CancelFeatureModificationCommand, CloseTooltipCommand, ClusterLayerComponent, ClusterLayerSettings, DrawSelectionAreaCommand, DrawingType, FeatureLayerComponent, FeatureLayerSettings, FeatureOutputFormat, FilterFeaturesInAreaExecutor, FilterFeaturesInPointExecutor, FitToFeaturesCommand, FitToPolygonsCommand, GetFeaturesInAreaQuery, GetFeaturesInPointQuery, GetGeometryLengthExecutor, GetMapPositionExecutor, ImageLayerComponent, ImageLayerSettings, MapClickEvent, MapConstants, MapControl, MapControlZoomComponent, MapFeatureHoveredEvent, MapLyrs, MapLyrsLabel, MapMoveEndEvent, MapPlateComponent, MapPointerMoveEvent, MapPostboyService, MapRenderedEvent, MapSettings, MarkerModel, MarkerStyleHelper, MarkersComponent, MessageRegistratorService, ModifyFeatureCommand, OsmTileLayerComponent, PolygonModel, PolygonSelfIntersectionExecutor, PolygonStyleHelper, PolygonsComponent, RasterTileLayerComponent, RasterTileLayerSettings, RemoveControlCommand, SetMapCenterCommand, StartDrawingCommand, StringifyFeatureHelper, TextStyleHelper, TileLayerComponent, TileLayerSettings, TooltipComponent, TooltipSettings, ZoomControlSettings };
 //# sourceMappingURL=maps-components.mjs.map