@artstesh/maps 5.0.6 → 5.0.8

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

@@ -5,20 +5,24 @@ import { CommonModule } from '@angular/common';
 import { Feature } from 'ol';
 import { Point } from 'ol/geom';
 import { GeoJSON, WKT } from 'ol/format';
-import { getCenter } from 'ol/extent';
-import { useGeographic, get } from 'ol/proj';
-import { Subject } from 'rxjs';
-import { PostboyService, PostboyAbstractRegistrator } from '@artstesh/postboy';
-import Map from 'ol/Map';
-import View from 'ol/View';
+import { getCenter, createEmpty, extend } from 'ol/extent';
+import { get, useGeographic } from 'ol/proj';
+import { PostboyGenericMessage, PostboyCallbackMessage, PostboyService, PostboyAbstractRegistrator } from '@artstesh/postboy';
+import { first, filter, auditTime } from 'rxjs/operators';
+import { Vector, XYZ } from 'ol/source';
+import { Draw } from 'ol/interaction';
 import TileLayer from 'ol/layer/Tile';
 import OSM from 'ol/source/OSM';
-import { filter, first } from 'rxjs/operators';
-import { XYZ, Vector } from 'ol/source';
 import { Vector as Vector$1 } from 'ol/layer';
+import { bbox } from 'ol/loadingstrategy';
+import { fromExtent } from 'ol/geom/Polygon';
+import Cluster from 'ol/source/Cluster';
+import { combineLatest } from 'rxjs';
+import Map from 'ol/Map';
+import View from 'ol/View';
 import Overlay from 'ol/Overlay';
 import Style from 'ol/style/Style';
-import { Icon, Circle, Fill, Stroke } from 'ol/style';
+import { Icon, Circle, Fill, Stroke, Text } from 'ol/style';
 
 class DestructibleComponent {
     subs = [];
@@ -119,6 +123,11 @@ class IdGenerator {
     }
 }
 
+class MapConstants {
+    static FeatureInfo = 'f-info';
+    static DrawingLayerId = '93a981756ec7';
+}
+
 class MarkerModel {
     lat;
     lng;
@@ -139,7 +148,7 @@ class MarkerModel {
         const feature = new Feature(new Point([this.lng, this.lat]));
         feature.setId(this.id);
         if (this.info)
-            feature.set('info', this.info);
+            feature.set(MapConstants.FeatureInfo, this.info);
         return feature;
     }
 }
@@ -171,18 +180,18 @@ class PolygonModel {
     }
 }
 
-class GenericMessage {
-}
-class CallbackMessage extends GenericMessage {
-    result$ = new Subject();
-    result = this.result$.asObservable();
-    finish(value) {
-        this.result$.next(value);
-        this.result$.complete();
-    }
-}
+var DrawingType;
+(function (DrawingType) {
+    DrawingType[DrawingType["Polygon"] = 1] = "Polygon";
+})(DrawingType || (DrawingType = {}));
+
+var FeatureOutputFormat;
+(function (FeatureOutputFormat) {
+    FeatureOutputFormat[FeatureOutputFormat["GeoJson"] = 1] = "GeoJson";
+    FeatureOutputFormat[FeatureOutputFormat["WKT"] = 2] = "WKT";
+})(FeatureOutputFormat || (FeatureOutputFormat = {}));
 
-class MapRenderedEvent extends GenericMessage {
+class MapRenderedEvent extends PostboyGenericMessage {
     map;
     static ID = 'b6121807-3b89-4cd3-82cf-089d2cefdc4f';
     constructor(map) {
@@ -194,21 +203,37 @@ class MapRenderedEvent extends GenericMessage {
     }
 }
 
-class MapClickEvent extends GenericMessage {
+class MapClickEvent extends PostboyGenericMessage {
     coordinates;
     entities;
+    features;
     static ID = '323df526-8d9c-49c6-83e8-6e9a1e7762f7';
-    constructor(coordinates, entities) {
+    constructor(coordinates, entities, features) {
         super();
         this.coordinates = coordinates;
         this.entities = entities;
+        this.features = features;
     }
     get id() {
         return MapClickEvent.ID;
     }
 }
 
-class CloseTooltipCommand extends GenericMessage {
+class MapMoveEndEvent extends PostboyGenericMessage {
+    zoom;
+    extent;
+    static ID = 'f21f783e-b5af-4489-9fec-8027fd07a8ad';
+    constructor(zoom, extent) {
+        super();
+        this.zoom = zoom;
+        this.extent = extent;
+    }
+    get id() {
+        return MapMoveEndEvent.ID;
+    }
+}
+
+class CloseTooltipCommand extends PostboyGenericMessage {
     tooltipId;
     static ID = '4896d52c-e34f-4994-bcfd-32832d12dbe4';
     constructor(tooltipId) {
@@ -220,7 +245,30 @@ class CloseTooltipCommand extends GenericMessage {
     }
 }
 
-class AddLayerCommand extends GenericMessage {
+class StartDrawingCommand extends PostboyCallbackMessage {
+    type;
+    style;
+    format;
+    static ID = 'da904f4b-a1c8-4db7-a6af-14d9ee18ec8c';
+    constructor(type, style, format = FeatureOutputFormat.GeoJson) {
+        super();
+        this.type = type;
+        this.style = style;
+        this.format = format;
+    }
+    get id() {
+        return StartDrawingCommand.ID;
+    }
+}
+
+class CancelDrawingCommand extends PostboyGenericMessage {
+    static ID = '7d38d983-feba-4176-a66b-18175e5ecd6b';
+    get id() {
+        return CancelDrawingCommand.ID;
+    }
+}
+
+class AddLayerCommand extends PostboyGenericMessage {
     layer;
     static ID = 'd93e250f-92bc-43ac-9c6a-46c521a1aaa5';
     constructor(layer) {
@@ -232,7 +280,7 @@ class AddLayerCommand extends GenericMessage {
     }
 }
 
-class PlaceLayerFeaturesCommand extends GenericMessage {
+class PlaceLayerFeaturesCommand extends PostboyGenericMessage {
     layer;
     features;
     static ID = '8caf86bc-869b-426f-b36d-4642f6b8aab0';
@@ -246,7 +294,7 @@ class PlaceLayerFeaturesCommand extends GenericMessage {
     }
 }
 
-class RemoveLayerCommand extends GenericMessage {
+class RemoveLayerCommand extends PostboyGenericMessage {
     layer;
     static ID = 'ab484e0e-e185-45cd-8434-12101f3c7eb1';
     constructor(layer) {
@@ -258,7 +306,7 @@ class RemoveLayerCommand extends GenericMessage {
     }
 }
 
-class AddTileCommand extends GenericMessage {
+class AddTileCommand extends PostboyGenericMessage {
     layer;
     static ID = '25b7df28-72ce-4453-9fe6-54285a2fdc57';
     constructor(layer) {
@@ -270,7 +318,7 @@ class AddTileCommand extends GenericMessage {
     }
 }
 
-class RemoveTileCommand extends GenericMessage {
+class RemoveTileCommand extends PostboyGenericMessage {
     layer;
     static ID = 'c36ccc0b-5638-4819-b148-2de57a59a5b7';
     constructor(layer) {
@@ -282,14 +330,53 @@ class RemoveTileCommand extends GenericMessage {
     }
 }
 
+class FitToFeaturesCommand extends PostboyGenericMessage {
+    features;
+    zoomAfter;
+    static ID = '76cdc091-3793-4b6c-82f7-1e0334cf08a8';
+    constructor(features, zoomAfter = 0) {
+        super();
+        this.features = features;
+        this.zoomAfter = zoomAfter;
+    }
+    get id() {
+        return FitToFeaturesCommand.ID;
+    }
+}
+
+class GetLayerQuery extends PostboyCallbackMessage {
+    name;
+    static ID = '5c04c87b-8a93-4c2a-979e-d1e313d860ed';
+    constructor(name) {
+        super();
+        this.name = name;
+    }
+    get id() {
+        return GetLayerQuery.ID;
+    }
+}
+
+class DrawingFinishedEvent extends PostboyGenericMessage {
+    static ID = 'c724b68e-b4eb-4783-90f1-a8e31973fd36';
+    constructor() {
+        super();
+    }
+    get id() {
+        return DrawingFinishedEvent.ID;
+    }
+}
+
 class MapPostboyService extends PostboyService {
-    observe = (id) => this.subscribe(id);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MapPostboyService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    constructor() {
+        super();
+        this.addLocker({ locker: StartDrawingCommand.ID, unlocker: DrawingFinishedEvent.ID, locking: [MapClickEvent.ID] });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MapPostboyService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MapPostboyService });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MapPostboyService, decorators: [{
             type: Injectable
-        }] });
+        }], ctorParameters: function () { return []; } });
 
 class MapManagementService {
     postboy;
@@ -305,6 +392,7 @@ class MapManagementService {
         this.observePlaceFeatures();
         this.observeAddTile();
         this.observeRemoveTile();
+        this.observeLayerQuery();
     }
     observeRemoveTile() {
         this.postboy.subscribe(RemoveTileCommand.ID).subscribe((c) => {
@@ -313,6 +401,9 @@ class MapManagementService {
             this.map.removeLayer(c.layer);
         });
     }
+    observeLayerQuery() {
+        this.postboy.subscribe(GetLayerQuery.ID).subscribe((ev) => ev.finish(this.layers[ev.name] ?? null));
+    }
     observeAddTile() {
         this.postboy.subscribe(AddTileCommand.ID).subscribe((c) => {
             if (!this.map)
@@ -337,8 +428,11 @@ class MapManagementService {
         this.postboy.subscribe(PlaceLayerFeaturesCommand.ID).subscribe((c) => {
             if (!this.layers[c.layer])
                 return;
-            this.layers[c.layer]?.getSource()?.clear();
-            this.layers[c.layer].getSource()?.addFeatures(c.features);
+            let source = this.layers[c.layer]?.getSource();
+            if (!!source['getSource'])
+                source = source?.getSource();
+            source?.clear();
+            source?.addFeatures(c.features);
         });
     }
     observeRemoveLayer() {
@@ -363,7 +457,14 @@ class MapStateService {
         this.postboy = postboy;
     }
     up() {
-        this.postboy.subscribe(MapRenderedEvent.ID).subscribe((m) => (this.map = m));
+        this.postboy.subscribe(MapRenderedEvent.ID).subscribe((ev) => {
+            this.map = ev.map;
+            this.map?.on('moveend', () => {
+                const zoom = Math.floor(this.map?.getView().getZoom() || -1);
+                const extent = this.map?.getView().calculateExtent() || [];
+                this.postboy.fire(new MapMoveEndEvent(zoom, extent));
+            });
+        });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MapStateService, deps: [{ token: MapPostboyService }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MapStateService });
@@ -372,6 +473,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             type: Injectable
         }], ctorParameters: function () { return [{ type: MapPostboyService }]; } });
 
+class MapFeatureService {
+    postboy;
+    map;
+    constructor(postboy) {
+        this.postboy = postboy;
+    }
+    up() {
+        this.observeMapRender();
+        this.observeFitToFeatures();
+    }
+    observeMapRender() {
+        this.postboy.subscribe(MapRenderedEvent.ID).subscribe((m) => {
+            this.map = m.map;
+        });
+    }
+    observeFitToFeatures() {
+        this.postboy.subscribe(FitToFeaturesCommand.ID).subscribe((m) => {
+            this.fitToGeometries(m.features.map((f) => f.getGeometry()), m.zoomAfter);
+        });
+    }
+    fitToGeometries(geometries, zoomAfter) {
+        if (!geometries?.length || !this.map)
+            return;
+        const extent = createEmpty();
+        geometries.forEach((g) => extend(extent, g.getExtent()));
+        this.map.getView().fit(extent);
+        this.map.getView().setZoom(this.map.getView().getZoom() + zoomAfter);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MapFeatureService, deps: [{ token: MapPostboyService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MapFeatureService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MapFeatureService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: MapPostboyService }]; } });
+
 class MapClickService {
     postboy;
     map;
@@ -390,7 +526,7 @@ class MapClickService {
         });
     }
     onClick(ev) {
-        const model = new MapClickEvent(ev.coordinate, {});
+        const model = new MapClickEvent(ev.coordinate, {}, {});
         this.map?.forEachFeatureAtPixel(ev.pixel, (f, l) => {
             this.getFeatureCollectionWithInner([f])
                 .filter((f) => f.getId() != null)
@@ -398,7 +534,10 @@ class MapClickService {
                 let layerName = l.get('name');
                 if (!model.entities[layerName])
                     model.entities[layerName] = [];
-                model.entities[layerName].push(f.getId());
+                if (!model.features[layerName])
+                    model.features[layerName] = [];
+                model.entities[layerName].push({ id: fs.getId(), ...fs.get(MapConstants.FeatureInfo) });
+                model.features[layerName].push(fs);
             });
         });
         return model;
@@ -418,10 +557,78 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             type: Injectable
         }], ctorParameters: function () { return [{ type: MapPostboyService }]; } });
 
+class DrawingService {
+    postboy;
+    drawInteraction;
+    map;
+    constructor(postboy) {
+        this.postboy = postboy;
+    }
+    up() {
+        this.postboy.subscribe(StartDrawingCommand.ID).subscribe((ev) => {
+            this.draw((l) => {
+                if (!l || !this.map) {
+                    this.clearInteraction(l);
+                    return;
+                }
+                const cancelSub = this.observeCancelation(ev, l);
+                this.drawInteraction = new Draw({
+                    source: l.getSource(),
+                    type: DrawingType[ev.type],
+                    style: ev.style,
+                });
+                this.map.addInteraction(this.drawInteraction);
+                this.drawInteraction.on('drawend', (evt) => {
+                    cancelSub.unsubscribe();
+                    this.onEnd(evt, ev, l);
+                });
+            });
+        });
+        this.observeMapRender();
+    }
+    onEnd(evt, command, layer) {
+        command.finish(command.format === FeatureOutputFormat.GeoJson
+            ? new GeoJSON().writeFeature(evt.feature)
+            : new WKT().writeFeature(evt.feature));
+        this.clearInteraction(layer);
+    }
+    observeMapRender() {
+        this.postboy.subscribe(MapRenderedEvent.ID).subscribe((m) => {
+            this.map = m.map;
+        });
+    }
+    draw(action) {
+        const query = new GetLayerQuery(MapConstants.DrawingLayerId);
+        query.result.subscribe((l) => action(l));
+        this.postboy.fire(query);
+    }
+    observeCancelation(ev, layer) {
+        return this.postboy
+            .subscribe(CancelDrawingCommand.ID)
+            .pipe(first())
+            .subscribe(() => {
+            ev.finish(null);
+            this.clearInteraction(layer);
+        });
+    }
+    clearInteraction(layer) {
+        if (!!this.drawInteraction) {
+            this.map?.removeInteraction(this.drawInteraction);
+            layer?.setSource(new Vector({}));
+        }
+        setTimeout(() => this.postboy.fire(new DrawingFinishedEvent()), 300);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DrawingService, deps: [{ token: MapPostboyService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DrawingService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DrawingService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: MapPostboyService }]; } });
+
 class MessageRegistratorService extends PostboyAbstractRegistrator {
-    constructor(service, management, state, interaction) {
+    constructor(service, management, state, feature, interaction, drawing) {
         super(service);
-        this.registerServices([management, state, interaction]);
+        this.registerServices([management, state, interaction, feature, drawing]);
     }
     _up() {
         this.registerReplay(MapRenderedEvent.ID);
@@ -432,143 +639,19 @@ class MessageRegistratorService extends PostboyAbstractRegistrator {
         this.registerSubject(RemoveTileCommand.ID);
         this.registerSubject(MapClickEvent.ID);
         this.registerSubject(CloseTooltipCommand.ID);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MessageRegistratorService, deps: [{ token: MapPostboyService }, { token: MapManagementService }, { token: MapStateService }, { token: MapClickService }], target: i0.ɵɵFactoryTarget.Injectable });
+        this.registerSubject(FitToFeaturesCommand.ID);
+        this.registerSubject(MapMoveEndEvent.ID);
+        this.registerSubject(CancelDrawingCommand.ID);
+        this.registerSubject(StartDrawingCommand.ID);
+        this.registerSubject(GetLayerQuery.ID);
+        this.registerSubject(DrawingFinishedEvent.ID);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MessageRegistratorService, deps: [{ token: MapPostboyService }, { token: MapManagementService }, { token: MapStateService }, { token: MapFeatureService }, { token: MapClickService }, { token: DrawingService }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MessageRegistratorService });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MessageRegistratorService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: MapPostboyService }, { type: MapManagementService }, { type: MapStateService }, { type: MapClickService }]; } });
-
-class MapPlateFactory {
-    build(settings) {
-        return new Map({
-            controls: [],
-            view: new View({
-                center: settings?.center || [0, 0],
-                zoom: settings?.zoom || 4,
-                minZoom: settings?.minZoom || 0,
-                maxZoom: settings?.maxZoom || 19,
-            }),
-            layers: [],
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MapPlateFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MapPlateFactory, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MapPlateFactory, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
-
-class OsmTileLayerComponent extends DestructibleComponent {
-    layer;
-    constructor() {
-        super();
-    }
-    _url = '';
-    set url(value) {
-        if (!value || this._url === value)
-            return;
-        this._url = value;
-        this.initLayer();
-    }
-    _map;
-    set map(value) {
-        if (!value || this._map === value)
-            return;
-        this._map = value;
-        this.initLayer();
-    }
-    ngOnInit() { }
-    ngOnDestroy() {
-        if (this.layer) {
-            this._map?.removeLayer(this.layer);
-        }
-        // @ts-ignore
-        this.layer?.setMap(null);
-    }
-    initLayer() {
-        if (!this._url || !this._map)
-            return;
-        if (this.layer)
-            this._map.removeLayer(this.layer);
-        this.layer = new TileLayer({
-            source: new OSM({
-                url: this._url,
-            }),
-        });
-        this.layer.set('name', 'osm-tile-layer');
-        this._map.addLayer(this.layer);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OsmTileLayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: OsmTileLayerComponent, selector: "lib-osm-tile-layer", inputs: { url: "url", map: "map" }, usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OsmTileLayerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-osm-tile-layer', template: '', changeDetection: ChangeDetectionStrategy.OnPush }]
-        }], ctorParameters: function () { return []; }, propDecorators: { url: [{
-                type: Input
-            }], map: [{
-                type: Input
-            }] } });
-
-class MapPlateComponent extends DestructibleComponent {
-    elementRef;
-    postboy;
-    mapFactory;
-    registrator;
-    detector;
-    map;
-    osmUrl = '';
-    constructor(elementRef, postboy, mapFactory, registrator, detector) {
-        super();
-        this.elementRef = elementRef;
-        this.postboy = postboy;
-        this.mapFactory = mapFactory;
-        this.registrator = registrator;
-        this.detector = detector;
-        registrator.up();
-    }
-    _settings = new MapSettings();
-    set settings(value) {
-        if (!value || this._settings.isSame(value))
-            return;
-        this._settings = value;
-        this.setOsm();
-    }
-    ngOnInit() {
-        useGeographic();
-        this.map = this.mapFactory.build(this._settings);
-        this.map.setTarget(this.elementRef.nativeElement);
-        this.detector.detectChanges();
-        this.map.once('postrender', () => {
-            this.map.updateSize();
-            this.postboy.fire(new MapRenderedEvent(this.map));
-        });
-        this.setOsm();
-    }
-    setOsm() {
-        if (!this.map)
-            return;
-        this.osmUrl = `https://mt{0-3}.google.com/vt/lyrs=${MapLyrsLabel.get(this._settings.lyrs)}&hl=${this._settings.language}&x={x}&y={y}&z={z}`;
-        this.detector.detectChanges();
-        this.map.updateSize();
-    }
-    onDestroy = () => {
-        this.registrator.down();
-    };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", 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: "16.2.12", type: MapPlateComponent, selector: "lib-map-plate", inputs: { settings: "settings" }, providers: [MessageRegistratorService, MapStateService, MapManagementService, MapClickService], usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n<lib-osm-tile-layer *ngIf=\"osmUrl && map\" [map]=\"map\" [url]=\"osmUrl\"></lib-osm-tile-layer>\n", styles: ["lib-map-plate{position:relative;display:flex;flex-direction:column;height:100%}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: OsmTileLayerComponent, selector: "lib-osm-tile-layer", inputs: ["url", "map"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MapPlateComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-map-plate', changeDetection: ChangeDetectionStrategy.OnPush, providers: [MessageRegistratorService, MapStateService, MapManagementService, MapClickService], template: "<ng-content></ng-content>\n<lib-osm-tile-layer *ngIf=\"osmUrl && map\" [map]=\"map\" [url]=\"osmUrl\"></lib-osm-tile-layer>\n", styles: ["lib-map-plate{position:relative;display:flex;flex-direction:column;height:100%}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: MapPostboyService }, { type: MapPlateFactory }, { type: MessageRegistratorService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { settings: [{
-                type: Input
-            }] } });
+        }], ctorParameters: function () { return [{ type: MapPostboyService }, { type: MapManagementService }, { type: MapStateService }, { type: MapFeatureService }, { type: MapClickService }, { type: DrawingService }]; } });
 
 class TileLayerSettings {
     maxZoom = 19;
@@ -702,6 +785,58 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }] } });
 
+class OsmTileLayerComponent extends DestructibleComponent {
+    layer;
+    constructor() {
+        super();
+    }
+    _url = '';
+    set url(value) {
+        if (!value || this._url === value)
+            return;
+        this._url = value;
+        this.initLayer();
+    }
+    _map;
+    set map(value) {
+        if (!value || this._map === value)
+            return;
+        this._map = value;
+        this.initLayer();
+    }
+    ngOnInit() { }
+    ngOnDestroy() {
+        if (this.layer) {
+            this._map?.removeLayer(this.layer);
+        }
+        // @ts-ignore
+        this.layer?.setMap(null);
+    }
+    initLayer() {
+        if (!this._url || !this._map)
+            return;
+        if (this.layer)
+            this._map.removeLayer(this.layer);
+        this.layer = new TileLayer({
+            source: new OSM({
+                url: this._url,
+            }),
+        });
+        this.layer.set('name', 'osm-tile-layer');
+        this._map.addLayer(this.layer);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OsmTileLayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: OsmTileLayerComponent, selector: "lib-osm-tile-layer", inputs: { url: "url", map: "map" }, usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OsmTileLayerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-osm-tile-layer', template: '', changeDetection: ChangeDetectionStrategy.OnPush }]
+        }], ctorParameters: function () { return []; }, propDecorators: { url: [{
+                type: Input
+            }], map: [{
+                type: Input
+            }] } });
+
 class FeatureLayerSettings {
     name = IdGenerator.get();
     zIndex = 1;
@@ -813,6 +948,290 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }] } });
 
+class ClusterLayerSettings {
+    name = IdGenerator.get();
+    zIndex = 1;
+    maxZoom = 19;
+    minZoom = 0;
+    distance = 20;
+    bbox = false;
+    clusterCancel = 14;
+    style;
+    static copy(model) {
+        const result = new ClusterLayerSettings();
+        result.name = model.name;
+        result.maxZoom = model.maxZoom;
+        result.minZoom = model.minZoom;
+        result.zIndex = model.zIndex;
+        result.bbox = model.bbox;
+        result.clusterCancel = model.clusterCancel;
+        result.distance = model.distance;
+        result.style = model.style;
+        return result;
+    }
+    setZIndex(zIndex) {
+        return ClusterLayerSettings.copy({ ...this, zIndex });
+    }
+    setDistance(distance) {
+        return ClusterLayerSettings.copy({ ...this, distance });
+    }
+    setName(name) {
+        return ClusterLayerSettings.copy({ ...this, name });
+    }
+    setMaxZoom(maxZoom) {
+        return ClusterLayerSettings.copy({ ...this, maxZoom });
+    }
+    setMinZoom(minZoom) {
+        return ClusterLayerSettings.copy({ ...this, minZoom });
+    }
+    setClusterCancel(clusterCancel) {
+        return ClusterLayerSettings.copy({ ...this, clusterCancel });
+    }
+    setBbox(bbox) {
+        return ClusterLayerSettings.copy({ ...this, bbox });
+    }
+    setStyle(style) {
+        return ClusterLayerSettings.copy({ ...this, style });
+    }
+    isSame(model) {
+        if (this.maxZoom !== model.maxZoom)
+            return false;
+        if (this.minZoom !== model.minZoom)
+            return false;
+        if (this.zIndex !== model.zIndex)
+            return false;
+        if (this.name !== model.name)
+            return false;
+        if (this.distance !== model.distance)
+            return false;
+        if (this.clusterCancel !== model.clusterCancel)
+            return false;
+        if (this.bbox !== model.bbox)
+            return false;
+        if (this.style !== model.style)
+            return false;
+        return true;
+    }
+}
+
+class ClusterLayerManager {
+    settings;
+    layer;
+    postboy;
+    constructor(settings, layer, postboy) {
+        this.settings = settings;
+        this.layer = layer;
+        this.postboy = postboy;
+        this.observeClick();
+        this.observeMapMovement();
+    }
+    observeMapMovement() {
+        combineLatest([
+            this.postboy.subscribe(MapMoveEndEvent.ID).pipe(auditTime(250)),
+            this.postboy.subscribe(MapRenderedEvent.ID),
+        ]).subscribe(([movement, renderEvent]) => {
+            this.checkClusterNecessity(renderEvent.map);
+        });
+    }
+    observeClick() {
+        this.postboy.subscribe(MapClickEvent.ID).subscribe((m) => {
+            if ((m.features[this.settings.name]?.length ?? 0) > 1) {
+                this.postboy.fire(new FitToFeaturesCommand(m.features[this.settings.name], -1));
+            }
+        });
+    }
+    checkClusterNecessity(map) {
+        let zoom = map.getView().getZoom() ?? 0;
+        const distance = zoom > this.settings.clusterCancel ? 0 : this.settings.distance;
+        this.layer?.getSource()?.setDistance(distance);
+    }
+}
+
+class ClusterLayerFactory {
+    build(settings, postboy) {
+        const source = new Vector({
+            strategy: settings.bbox ? bbox : undefined,
+        });
+        const cluster = new Cluster({
+            distance: settings.distance,
+            source: source,
+            geometryFunction: (feature) => {
+                const geom = feature.getGeometry();
+                if (geom?.getType() == 'Point') {
+                    return geom;
+                }
+                else if (geom?.getType() == 'Polygon') {
+                    return geom?.getInteriorPoint();
+                }
+                else if (geom?.getType() == 'MultiPolygon') {
+                    return fromExtent(geom.getExtent())?.getInteriorPoint();
+                }
+                return undefined;
+            },
+        });
+        const layer = new Vector$1({
+            source: cluster,
+            maxZoom: settings.maxZoom || undefined,
+            minZoom: settings.minZoom || undefined,
+            zIndex: settings.zIndex || 0,
+        });
+        layer.setStyle(this.styleFunc(settings));
+        layer.set('name', settings.name);
+        return new ClusterLayerManager(settings, layer, postboy);
+    }
+    styleFunc(settings) {
+        return (feature) => {
+            const features = feature.get('features');
+            if (!settings.style)
+                return undefined;
+            return settings.style(features.map((f) => ({ id: f.getId(), ...f.get(MapConstants.FeatureInfo) })));
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ClusterLayerFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ClusterLayerFactory, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ClusterLayerFactory, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+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());
+    }
+    set settings(value) {
+        if (!value || this._settings.isSame(value))
+            return;
+        this._settings = value;
+        this.initLayer();
+    }
+    onDestroy = () => this.removeLayer();
+    initLayer() {
+        this.removeLayer();
+        this.manager = this.factory.build(this._settings, this.postboy);
+        this.postboy.fire(new AddLayerCommand(this.manager.layer));
+    }
+    removeLayer() {
+        if (this.manager?.layer)
+            this.postboy.fire(new RemoveLayerCommand(this.manager.layer));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ClusterLayerComponent, deps: [{ token: MapPostboyService }, { token: ClusterLayerFactory }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ClusterLayerComponent, selector: "lib-cluster-layer", inputs: { settings: "settings" }, usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ClusterLayerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-cluster-layer', template: '', changeDetection: ChangeDetectionStrategy.OnPush }]
+        }], ctorParameters: function () { return [{ type: MapPostboyService }, { type: ClusterLayerFactory }]; }, propDecorators: { settings: [{
+                type: Input
+            }] } });
+
+class MapPlateFactory {
+    build(settings) {
+        return new Map({
+            controls: [],
+            view: new View({
+                center: settings?.center || [0, 0],
+                zoom: settings?.zoom || 4,
+                minZoom: settings?.minZoom || 0,
+                maxZoom: settings?.maxZoom || 19,
+            }),
+            layers: [],
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MapPlateFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MapPlateFactory, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MapPlateFactory, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class MapPlateComponent extends DestructibleComponent {
+    elementRef;
+    postboy;
+    mapFactory;
+    registrator;
+    detector;
+    map;
+    osmUrl = '';
+    constructor(elementRef, postboy, mapFactory, registrator, detector) {
+        super();
+        this.elementRef = elementRef;
+        this.postboy = postboy;
+        this.mapFactory = mapFactory;
+        this.registrator = registrator;
+        this.detector = detector;
+        registrator.up();
+    }
+    _settings = new MapSettings();
+    drawingLayerSettings = new FeatureLayerSettings().setName(MapConstants.DrawingLayerId);
+    set settings(value) {
+        if (!value || this._settings.isSame(value))
+            return;
+        this._settings = value;
+        this.setOsm();
+    }
+    ngOnInit() {
+        useGeographic();
+        this.map = this.mapFactory.build(this._settings);
+        this.map.setTarget(this.elementRef.nativeElement);
+        this.detector.detectChanges();
+        this.map.once('postrender', () => {
+            this.map.updateSize();
+            this.postboy.fire(new MapRenderedEvent(this.map));
+        });
+        this.setOsm();
+    }
+    setOsm() {
+        if (!this.map)
+            return;
+        this.osmUrl = `https://mt{0-3}.google.com/vt/lyrs=${MapLyrsLabel.get(this._settings.lyrs)}&hl=${this._settings.language}&x={x}&y={y}&z={z}`;
+        this.detector.detectChanges();
+        this.map.updateSize();
+    }
+    onDestroy = () => {
+        this.registrator.down();
+    };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", 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: "16.2.12", type: MapPlateComponent, selector: "lib-map-plate", inputs: { settings: "settings" }, providers: [
+            MessageRegistratorService,
+            MapStateService,
+            MapManagementService,
+            MapClickService,
+            MapFeatureService,
+            DrawingService,
+        ], usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\r\n<lib-osm-tile-layer *ngIf=\"osmUrl && map\" [map]=\"map\" [url]=\"osmUrl\"></lib-osm-tile-layer>\r\n<lib-feature-layer *ngIf=\"map\" [settings]=\"drawingLayerSettings\"></lib-feature-layer>\r\n", styles: ["lib-map-plate{position:relative;display:flex;flex-direction:column;height:100%}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: OsmTileLayerComponent, selector: "lib-osm-tile-layer", inputs: ["url", "map"] }, { kind: "component", type: FeatureLayerComponent, selector: "lib-feature-layer", inputs: ["settings"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MapPlateComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-map-plate', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        MessageRegistratorService,
+                        MapStateService,
+                        MapManagementService,
+                        MapClickService,
+                        MapFeatureService,
+                        DrawingService,
+                    ], template: "<ng-content></ng-content>\r\n<lib-osm-tile-layer *ngIf=\"osmUrl && map\" [map]=\"map\" [url]=\"osmUrl\"></lib-osm-tile-layer>\r\n<lib-feature-layer *ngIf=\"map\" [settings]=\"drawingLayerSettings\"></lib-feature-layer>\r\n", styles: ["lib-map-plate{position:relative;display:flex;flex-direction:column;height:100%}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: MapPostboyService }, { type: MapPlateFactory }, { type: MessageRegistratorService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { settings: [{
+                type: Input
+            }] } });
+
 class MarkersComponent extends DestructibleComponent {
     postboy;
     layerName = '';
@@ -969,7 +1388,7 @@ class PolygonsComponent extends DestructibleComponent {
             .subscribe(() => this.putPolygons());
     }
     putPolygons() {
-        if (!this._polygons?.length)
+        if (!this._polygons)
             return;
         this.postboy.fire(new PlaceLayerFeaturesCommand(this.layerName, this._polygons.map((m) => m.feature)));
     }
@@ -994,12 +1413,14 @@ class MapModule {
             FeatureLayerComponent,
             MarkersComponent,
             TooltipComponent,
-            PolygonsComponent], imports: [CommonModule], exports: [MapPlateComponent,
+            PolygonsComponent,
+            ClusterLayerComponent], imports: [CommonModule], exports: [MapPlateComponent,
             FeatureLayerComponent,
             MarkersComponent,
             TileLayerComponent,
             TooltipComponent,
-            PolygonsComponent] });
+            PolygonsComponent,
+            ClusterLayerComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MapModule, imports: [CommonModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MapModule, decorators: [{
@@ -1015,6 +1436,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         MarkersComponent,
                         TooltipComponent,
                         PolygonsComponent,
+                        ClusterLayerComponent,
                     ],
                     exports: [
                         MapPlateComponent,
@@ -1023,6 +1445,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         TileLayerComponent,
                         TooltipComponent,
                         PolygonsComponent,
+                        ClusterLayerComponent,
                     ],
                 }]
         }] });
@@ -1048,6 +1471,10 @@ class MarkerStyleHelper {
             }),
         });
     }
+    static withText(style, text) {
+        style.setText(text);
+        return style;
+    }
 }
 
 class PolygonStyleHelper {
@@ -1064,6 +1491,19 @@ class PolygonStyleHelper {
     }
 }
 
+class TextStyleHelper {
+    static get(text, font, color) {
+        return new Text({
+            text: text,
+            font: font,
+            textAlign: 'center',
+            fill: new Fill({
+                color: color,
+            }),
+        });
+    }
+}
+
 /*
  * Public API Surface of maps
  */
@@ -1072,5 +1512,5 @@ class PolygonStyleHelper {
  * Generated bundle index. Do not edit.
  */
 
-export { CallbackMessage, CloseTooltipCommand, FeatureLayerComponent, FeatureLayerSettings, GenericMessage, MapClickEvent, MapLyrs, MapLyrsLabel, MapModule, MapPlateComponent, MapPostboyService, MapRenderedEvent, MapSettings, MarkerModel, MarkerStyleHelper, MarkersComponent, MessageRegistratorService, OsmTileLayerComponent, PolygonModel, PolygonStyleHelper, PolygonsComponent, TileLayerComponent, TileLayerSettings, TooltipComponent, TooltipSettings };
+export { CancelDrawingCommand, CloseTooltipCommand, ClusterLayerComponent, ClusterLayerSettings, DrawingType, FeatureLayerComponent, FeatureLayerSettings, FeatureOutputFormat, MapClickEvent, MapLyrs, MapLyrsLabel, MapModule, MapMoveEndEvent, MapPlateComponent, MapPostboyService, MapRenderedEvent, MapSettings, MarkerModel, MarkerStyleHelper, MarkersComponent, MessageRegistratorService, OsmTileLayerComponent, PolygonModel, PolygonStyleHelper, PolygonsComponent, StartDrawingCommand, TextStyleHelper, TileLayerComponent, TileLayerSettings, TooltipComponent, TooltipSettings };
 //# sourceMappingURL=maps-components-src-map.mjs.map