@artstesh/maps 1.1.25 → 1.1.26

package/dist/bundles/maps-components-src-map.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('ol'), require('ol/geom'), require('ol/format'), require('ol/extent'), require('ol/geom/Polygon'), require('ol/control'), require('ol/proj'), require('@artstesh/postboy'), require('ol/interaction'), require('ol/interaction/Draw'), require('ol/sphere'), require('rxjs'), require('rxjs/operators'), require('@artstesh/collections'), require('ol/source'), require('ol/layer/Tile'), require('ol/source/OSM'), require('ol/layer'), require('ol/loadingstrategy'), require('ol/source/Cluster'), require('ol/Map'), require('ol/View'), require('ol/Overlay'), require('ol/style/Style'), require('ol/style'), require('ol/proj/epsg4326')) :
-    typeof define === 'function' && define.amd ? define('maps-components/src/map', ['exports', '@angular/core', '@angular/common', 'ol', 'ol/geom', 'ol/format', 'ol/extent', 'ol/geom/Polygon', 'ol/control', 'ol/proj', '@artstesh/postboy', 'ol/interaction', 'ol/interaction/Draw', 'ol/sphere', 'rxjs', 'rxjs/operators', '@artstesh/collections', 'ol/source', 'ol/layer/Tile', 'ol/source/OSM', 'ol/layer', 'ol/loadingstrategy', 'ol/source/Cluster', 'ol/Map', 'ol/View', 'ol/Overlay', 'ol/style/Style', 'ol/style', 'ol/proj/epsg4326'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["maps-components"] = global["maps-components"] || {}, global["maps-components"].src = global["maps-components"].src || {}, global["maps-components"].src.map = {}), global.ng.core, global.ng.common, global.ol, global.geom, global.format, global.extent, global.Polygon, global.control, global.proj, global.postboy, global.interaction, global.Draw, global.Sphere, global.rxjs, global.rxjs.operators, global.collections, global.source, global.TileLayer, global.OSM, global.layer, global.loadingstrategy, global.Cluster, global.Map, global.View, global.Overlay, global.Style, global.style, global.epsg4326));
-})(this, (function (exports, i0, i6, ol, geom, format, extent, Polygon, control, proj, postboy, interaction, Draw, Sphere, rxjs, operators, collections, source, TileLayer, OSM, layer, loadingstrategy, Cluster, Map, View, Overlay, Style, style, epsg4326) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('ol'), require('ol/geom'), require('ol/format'), require('ol/extent'), require('ol/geom/Polygon'), require('ol/control'), require('ol/proj'), require('@artstesh/postboy'), require('ol/interaction'), require('ol/interaction/Draw'), require('ol/sphere'), require('rxjs'), require('rxjs/operators'), require('@artstesh/collections'), require('ol/source'), require('ol/layer/Tile'), require('ol/source/OSM'), require('ol/layer'), require('ol/loadingstrategy'), require('ol/source/Cluster'), require('ol/source/ImageStatic'), require('ol/layer/Image'), require('ol/Map'), require('ol/View'), require('ol/Overlay'), require('ol/style/Style'), require('ol/style'), require('ol/proj/epsg4326')) :
+    typeof define === 'function' && define.amd ? define('maps-components/src/map', ['exports', '@angular/core', '@angular/common', 'ol', 'ol/geom', 'ol/format', 'ol/extent', 'ol/geom/Polygon', 'ol/control', 'ol/proj', '@artstesh/postboy', 'ol/interaction', 'ol/interaction/Draw', 'ol/sphere', 'rxjs', 'rxjs/operators', '@artstesh/collections', 'ol/source', 'ol/layer/Tile', 'ol/source/OSM', 'ol/layer', 'ol/loadingstrategy', 'ol/source/Cluster', 'ol/source/ImageStatic', 'ol/layer/Image', 'ol/Map', 'ol/View', 'ol/Overlay', 'ol/style/Style', 'ol/style', 'ol/proj/epsg4326'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["maps-components"] = global["maps-components"] || {}, global["maps-components"].src = global["maps-components"].src || {}, global["maps-components"].src.map = {}), global.ng.core, global.ng.common, global.ol, global.geom, global.format, global.extent, global.Polygon, global.control, global.proj, global.postboy, global.interaction, global.Draw, global.Sphere, global.rxjs, global.rxjs.operators, global.collections, global.source, global.TileLayer, global.OSM, global.layer, global.loadingstrategy, global.Cluster, global.Static, global.ImageLayer, global.Map, global.View, global.Overlay, global.Style, global.style, global.epsg4326));
+})(this, (function (exports, i0, i6, ol, geom, format, extent, Polygon, control, proj, postboy, interaction, Draw, Sphere, rxjs, operators, collections, source, TileLayer, OSM, layer, loadingstrategy, Cluster, Static, ImageLayer, Map, View, Overlay, Style, style, epsg4326) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -31,6 +31,8 @@
     var TileLayer__default = /*#__PURE__*/_interopDefaultLegacy(TileLayer);
     var OSM__default = /*#__PURE__*/_interopDefaultLegacy(OSM);
     var Cluster__default = /*#__PURE__*/_interopDefaultLegacy(Cluster);
+    var Static__default = /*#__PURE__*/_interopDefaultLegacy(Static);
+    var ImageLayer__default = /*#__PURE__*/_interopDefaultLegacy(ImageLayer);
     var Map__default = /*#__PURE__*/_interopDefaultLegacy(Map);
     var View__default = /*#__PURE__*/_interopDefaultLegacy(View);
     var Overlay__default = /*#__PURE__*/_interopDefaultLegacy(Overlay);
@@ -1480,6 +1482,28 @@
         return ZoomControlFactory;
     }());
 
+    var AddImageLayerCommand = /** @class */ (function (_super) {
+        __extends(AddImageLayerCommand, _super);
+        function AddImageLayerCommand(layer) {
+            var _this = _super.call(this) || this;
+            _this.layer = layer;
+            return _this;
+        }
+        return AddImageLayerCommand;
+    }(postboy.PostboyGenericMessage));
+    AddImageLayerCommand.ID = '70f9b86f-8bc2-4f28-ae79-a13fc0b1ee5d';
+
+    var RemoveImageLayerCommand = /** @class */ (function (_super) {
+        __extends(RemoveImageLayerCommand, _super);
+        function RemoveImageLayerCommand(layer) {
+            var _this = _super.call(this) || this;
+            _this.layer = layer;
+            return _this;
+        }
+        return RemoveImageLayerCommand;
+    }(postboy.PostboyGenericMessage));
+    RemoveImageLayerCommand.ID = 'c8e7efdb-17ff-4cf9-89be-e688b8de3b95';
+
     var MapPostboyService = /** @class */ (function (_super) {
         __extends(MapPostboyService, _super);
         function MapPostboyService() {
@@ -1514,6 +1538,7 @@
             this.observeLayerQuery();
             this.observeFeaturesInArea();
             this.observeFeaturesInPoint();
+            this.observeImageLayer();
         };
         MapManagementService.prototype.observeRemoveTile = function () {
             var _this = this;
@@ -1535,6 +1560,19 @@
                 _this.map.addLayer(c.layer);
             });
         };
+        MapManagementService.prototype.observeImageLayer = function () {
+            var _this = this;
+            this.postboy.sub(AddImageLayerCommand).subscribe(function (c) {
+                if (!_this.map)
+                    return;
+                _this.map.addLayer(c.layer);
+            });
+            this.postboy.sub(RemoveImageLayerCommand).subscribe(function (c) {
+                if (!_this.map)
+                    return;
+                _this.map.removeLayer(c.layer);
+            });
+        };
         MapManagementService.prototype.observeMapRender = function () {
             var _this = this;
             this.postboy.sub(MapRenderedEvent).subscribe(function (m) {
@@ -2016,6 +2054,8 @@
             this.recordSubject(AddLayerCommand);
             this.recordSubject(RemoveLayerCommand);
             this.recordSubject(AddTileCommand);
+            this.recordSubject(RemoveImageLayerCommand);
+            this.recordSubject(AddImageLayerCommand);
             this.recordSubject(RemoveTileCommand);
             this.recordSubject(MapClickEvent);
             this.recordSubject(CloseTooltipCommand);
@@ -2882,6 +2922,219 @@
                     type: i0.Input
                 }] } });
 
+    var ImageLayerSettings = /** @class */ (function () {
+        function ImageLayerSettings() {
+            /**
+             * Represents the tiles URL.
+             * @typedef {string} url
+             *
+             * @example
+             * 'https://example.ex/{z}/{x}/{y}.png'
+             */
+            this.url = '';
+            /**
+             * Use interpolated values when resampling.
+             * By default, linear interpolation is used when resampling.
+             * Set to false to use the nearest neighbor instead.
+             */
+            this.interpolate = undefined;
+            /**
+             * The projection of the coordinate system.
+             *
+             * @type {string}
+             * @default 'EPSG:3857'
+             */
+            this.projection = 'EPSG:3857';
+            this.extent = [0, 0, 0, 0];
+            /**
+             * Additional headers that should be added to each tile request
+             *
+             * @type {Record<string, string>}
+             * @default An empty array
+             */
+            this.requestHeaders = null;
+        }
+        /**
+         * Creates a copy of the given tile layer settings.
+         *
+         * @param {ImageLayerSettings} model - The tile layer settings to be copied.
+         * @return {ImageLayerSettings} - A new instance of ImageLayerSettings with the same properties as the model.
+         */
+        ImageLayerSettings.copy = function (model) {
+            var result = new ImageLayerSettings();
+            result.interpolate = model.interpolate;
+            result.projection = model.projection;
+            result.extent = model.extent;
+            result.url = model.url;
+            result.requestHeaders = model.requestHeaders;
+            return result;
+        };
+        /**
+         * Sets the URL of the ImageLayerSettings object.
+         *
+         * @param {string} url - The URL to be set.
+         * @return {ImageLayerSettings} - The updated ImageLayerSettings object.
+         */
+        ImageLayerSettings.prototype.setUrl = function (url) {
+            return ImageLayerSettings.copy(Object.assign(Object.assign({}, this), { url: url }));
+        };
+        /**
+         * Sets the interpolation state for the image layer settings.
+         *
+         * @param {boolean} [interpolate] - Use interpolated values when resampling.
+         * By default, linear interpolation is used when resampling.
+         * Set to false to use the nearest neighbor instead.
+         * @return {ImageLayerSettings} A new instance of ImageLayerSettings with the updated interpolation setting.
+         */
+        ImageLayerSettings.prototype.setInterpolate = function (interpolate) {
+            return ImageLayerSettings.copy(Object.assign(Object.assign({}, this), { interpolate: interpolate }));
+        };
+        ImageLayerSettings.prototype.setExtent = function (extent) {
+            return ImageLayerSettings.copy(Object.assign(Object.assign({}, this), { extent: extent }));
+        };
+        /**
+         * Sets the requestHeaders of the ImageLayerSettings object.
+         *
+         * @param {Record<string, string>} requestHeaders - The headers which should be provided.
+         * @return {ImageLayerSettings} - The updated ImageLayerSettings object.
+         */
+        ImageLayerSettings.prototype.setRequestHeaders = function (requestHeaders) {
+            return ImageLayerSettings.copy(Object.assign(Object.assign({}, this), { requestHeaders: requestHeaders }));
+        };
+        /**
+         * Sets the maximum zoom level for the tile layer.
+         *
+         * @param {number} maxZoom - The maximum zoom level.
+         * @returns {ImageLayerSettings} - The updated tile layer settings object.
+         */
+        ImageLayerSettings.prototype.setMaxZoom = function (maxZoom) {
+            return ImageLayerSettings.copy(Object.assign(Object.assign({}, this), { maxZoom: maxZoom }));
+        };
+        /**
+         * Sets the minimum zoom level for the Tile Layer.
+         *
+         * @param {number} minZoom - The minimum zoom level to be set.
+         * @return {ImageLayerSettings} The modified ImageLayerSettings object with the updated minimum zoom level.
+         */
+        ImageLayerSettings.prototype.setMinZoom = function (minZoom) {
+            return ImageLayerSettings.copy(Object.assign(Object.assign({}, this), { minZoom: minZoom }));
+        };
+        /**
+         * Sets the opacity of the ImageLayerSettings.
+         *
+         * @param {number} opacity - The opacity value to set. Must be a number between 0 and 1.
+         * @return {ImageLayerSettings} - A new instance of ImageLayerSettings with the opacity set.
+         */
+        ImageLayerSettings.prototype.setOpacity = function (opacity) {
+            return ImageLayerSettings.copy(Object.assign(Object.assign({}, this), { opacity: opacity }));
+        };
+        /**
+         * Sets the projection for the tile layer settings.
+         *
+         * @param {string} projection - The desired projection for the tile layer settings.
+         * @return {ImageLayerSettings} - The updated tile layer settings with the new projection.
+         */
+        ImageLayerSettings.prototype.setProjection = function (projection) {
+            return ImageLayerSettings.copy(Object.assign(Object.assign({}, this), { projection: projection }));
+        };
+        /**
+         * Checks if the current instance of ImageLayerSettings is equal to the given model.
+         * @param {ImageLayerSettings} model - The model to compare against.
+         * @return {boolean} - True if all properties of the current instance matches the properties of the model;
+         *                    otherwise, false.
+         */
+        ImageLayerSettings.prototype.isSame = function (model) {
+            if (this.url !== model.url)
+                return false;
+            if (this.projection !== model.projection)
+                return false;
+            if (this.extent !== model.extent)
+                return false;
+            if (this.interpolate !== model.interpolate)
+                return false;
+            if (this.requestHeaders !== model.requestHeaders)
+                return false;
+            return true;
+        };
+        return ImageLayerSettings;
+    }());
+
+    var ImageLayerFactory = /** @class */ (function () {
+        function ImageLayerFactory() {
+        }
+        ImageLayerFactory.prototype.build = function (settings) {
+            var source = new Static__default["default"]({
+                url: settings.url,
+                interpolate: settings.interpolate,
+                crossOrigin: 'Anonymous',
+                projection: proj.get(settings.projection),
+                imageExtent: settings.extent,
+            });
+            return new ImageLayer__default["default"]({ source: source });
+        };
+        return ImageLayerFactory;
+    }());
+    ImageLayerFactory.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ImageLayerFactory, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    ImageLayerFactory.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ImageLayerFactory, providedIn: 'root' });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ImageLayerFactory, decorators: [{
+                type: i0.Injectable,
+                args: [{
+                        providedIn: 'root',
+                    }]
+            }] });
+
+    var ImageLayerComponent = /** @class */ (function (_super) {
+        __extends(ImageLayerComponent, _super);
+        function ImageLayerComponent(postboy, factory) {
+            var _this = _super.call(this) || this;
+            _this.postboy = postboy;
+            _this.factory = factory;
+            _this._settings = new ImageLayerSettings();
+            _this.onDestroy = function () { return _this.removeLayer(); };
+            return _this;
+        }
+        Object.defineProperty(ImageLayerComponent.prototype, "settings", {
+            set: function (value) {
+                if (!value || this._settings.isSame(value))
+                    return;
+                this._settings = value;
+                this.initLayer();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        ImageLayerComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.postboy
+                .sub(MapRenderedEvent)
+                .pipe(operators.filter(function (m) { return !!m; }), operators.first())
+                .subscribe(function (m) { return _this.initLayer(); });
+        };
+        ImageLayerComponent.prototype.initLayer = function () {
+            this.removeLayer();
+            this.layer = this.factory.build(this._settings);
+            this.postboy.fire(new AddImageLayerCommand(this.layer));
+        };
+        ImageLayerComponent.prototype.removeLayer = function () {
+            if (this.layer)
+                this.postboy.fire(new RemoveImageLayerCommand(this.layer));
+        };
+        return ImageLayerComponent;
+    }(DestructibleComponent));
+    ImageLayerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ImageLayerComponent, deps: [{ token: MapPostboyService }, { token: ImageLayerFactory }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ImageLayerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ImageLayerComponent, selector: "art-image-layer", inputs: { settings: "settings" }, usesInheritance: true, ngImport: i0__namespace, template: '', isInline: true, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ImageLayerComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'art-image-layer',
+                        template: '',
+                        styleUrls: [],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    }]
+            }], ctorParameters: function () { return [{ type: MapPostboyService }, { type: ImageLayerFactory }]; }, propDecorators: { settings: [{
+                    type: i0.Input
+                }] } });
+
     var MapPlateFactory = /** @class */ (function () {
         function MapPlateFactory() {
         }
@@ -3436,14 +3689,16 @@
             TooltipComponent,
             PolygonsComponent,
             ClusterLayerComponent,
-            MapControlZoomComponent], imports: [i6.CommonModule], exports: [MapPlateComponent,
+            MapControlZoomComponent,
+            ImageLayerComponent], imports: [i6.CommonModule], exports: [MapPlateComponent,
             FeatureLayerComponent,
             MarkersComponent,
             TileLayerComponent,
             TooltipComponent,
             PolygonsComponent,
             ClusterLayerComponent,
-            MapControlZoomComponent] });
+            MapControlZoomComponent,
+            ImageLayerComponent] });
     MapModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MapModule, imports: [[i6.CommonModule]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MapModule, decorators: [{
                 type: i0.NgModule,
@@ -3460,6 +3715,7 @@
                             PolygonsComponent,
                             ClusterLayerComponent,
                             MapControlZoomComponent,
+                            ImageLayerComponent,
                         ],
                         exports: [
                             MapPlateComponent,
@@ -3470,6 +3726,7 @@
                             PolygonsComponent,
                             ClusterLayerComponent,
                             MapControlZoomComponent,
+                            ImageLayerComponent,
                         ],
                     }]
             }] });
@@ -3704,6 +3961,8 @@
     exports.GetFeaturesInAreaQuery = GetFeaturesInAreaQuery;
     exports.GetFeaturesInPointQuery = GetFeaturesInPointQuery;
     exports.GetMapPositionExecutor = GetMapPositionExecutor;
+    exports.ImageLayerComponent = ImageLayerComponent;
+    exports.ImageLayerSettings = ImageLayerSettings;
     exports.MapClickEvent = MapClickEvent;
     exports.MapConstants = MapConstants;
     exports.MapControl = MapControl;