@artstesh/maps 5.2.13 → 5.2.15

package/dist/fesm2022/maps-components.mjs

@@ -84,6 +84,7 @@ class MapSettings {
     zoom = 4;
     lyrs = MapLyrs.Hybrid;
     language = 'en';
+    osmOpacity = 1;
     interactionSettings = {};
     static copy(model) {
         const result = new MapSettings();
@@ -94,6 +95,7 @@ class MapSettings {
         result.lyrs = model.lyrs;
         result.interactionSettings = model.interactionSettings;
         result.language = model.language;
+        result.osmOpacity = model.osmOpacity;
         return result;
     }
     /**
@@ -160,6 +162,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 +190,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;
     }
 }
@@ -1791,13 +1804,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 +1841,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: "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: "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: "16.2.12", type: OsmTileLayerComponent, 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: "16.2.12", ngImport: i0, type: OsmTileLayerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'art-osm-tile-layer', template: '', changeDetection: ChangeDetectionStrategy.OnPush }]
         }], ctorParameters: function () { return []; }, propDecorators: { url: [{
                 type: Input
+            }], opacity: [{
+                type: Input
             }], map: [{
                 type: Input
             }] } });
@@ -2558,6 +2581,10 @@ class RasterTileLayerSettings {
      * @default An empty array
      */
     requestHeaders = null;
+    /**
+     * The priority of showing - layers with higher zIndex cover others in case of collisions
+     */
+    zIndex = 1;
     operation = (d) => d[0] ?? [];
     /**
      * Creates a copy of the given tile layer settings.
@@ -2569,6 +2596,7 @@ class RasterTileLayerSettings {
         const result = new RasterTileLayerSettings();
         result.maxZoom = model.maxZoom;
         result.minZoom = model.minZoom;
+        result.zIndex = model.zIndex;
         result.projection = model.projection;
         result.opacity = model.opacity;
         result.url = model.url;
@@ -2612,6 +2640,15 @@ class RasterTileLayerSettings {
     setMaxZoom(maxZoom) {
         return RasterTileLayerSettings.copy({ ...this, maxZoom });
     }
+    /**
+     * Sets the z-index for the RasterTileLayerSettings.
+     *
+     * @param {number} zIndex - The new z-index to be assigned.
+     * @return {RasterTileLayerSettings} A new RasterTileLayerSettings instance with the updated z-index.
+     */
+    setZIndex(zIndex) {
+        return RasterTileLayerSettings.copy({ ...this, zIndex });
+    }
     /**
      * Sets the minimum zoom level for the Tile Layer.
      *
@@ -2650,6 +2687,8 @@ class RasterTileLayerSettings {
             return false;
         if (this.minZoom !== model.minZoom)
             return false;
+        if (this.zIndex !== model.zIndex)
+            return false;
         if (this.url !== model.url)
             return false;
         if (this.projection !== model.projection)
@@ -2682,7 +2721,7 @@ class RasterTileLayerFactory {
             operationType: 'image',
             operation: settings.operation,
         });
-        return new ImageLayer({ source: raster, opacity: settings.opacity });
+        return new ImageLayer({ source: raster, opacity: settings.opacity, zIndex: settings.zIndex });
     }
     getTileFunc(settings) {
         return (tileCoord) => {
@@ -2874,7 +2913,7 @@ 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-content></ng-content>\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: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: OsmTileLayerComponent, selector: "art-osm-tile-layer", inputs: ["url", "opacity", "map"] }, { kind: "component", type: FeatureLayerComponent, selector: "art-feature-layer", inputs: ["settings"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MapPlateComponent, decorators: [{
             type: Component,
@@ -2889,7 +2928,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         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, template: "<ng-content></ng-content>\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: function () { return [{ type: i0.ElementRef }, { type: MapPostboyService }, { type: MapPlateFactory }, { type: MessageRegistratorService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { settings: [{
                 type: Input
             }] } });