@artstesh/maps 1.1.26 → 1.1.27

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/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';
+    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/source/Raster'), 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/source/Raster', '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.RasterSource, 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, RasterSource, Map, View, Overlay, Style, style, epsg4326) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -33,6 +33,7 @@
     var Cluster__default = /*#__PURE__*/_interopDefaultLegacy(Cluster);
     var Static__default = /*#__PURE__*/_interopDefaultLegacy(Static);
     var ImageLayer__default = /*#__PURE__*/_interopDefaultLegacy(ImageLayer);
+    var RasterSource__default = /*#__PURE__*/_interopDefaultLegacy(RasterSource);
     var Map__default = /*#__PURE__*/_interopDefaultLegacy(Map);
     var View__default = /*#__PURE__*/_interopDefaultLegacy(View);
     var Overlay__default = /*#__PURE__*/_interopDefaultLegacy(Overlay);
@@ -1504,6 +1505,28 @@
     }(postboy.PostboyGenericMessage));
     RemoveImageLayerCommand.ID = 'c8e7efdb-17ff-4cf9-89be-e688b8de3b95';
 
+    var AddRasterTileCommand = /** @class */ (function (_super) {
+        __extends(AddRasterTileCommand, _super);
+        function AddRasterTileCommand(layer) {
+            var _this = _super.call(this) || this;
+            _this.layer = layer;
+            return _this;
+        }
+        return AddRasterTileCommand;
+    }(postboy.PostboyGenericMessage));
+    AddRasterTileCommand.ID = 'd33447fe-eec0-4205-9b5d-0d79ddc74ad7';
+
+    var RemoveRasterTileCommand = /** @class */ (function (_super) {
+        __extends(RemoveRasterTileCommand, _super);
+        function RemoveRasterTileCommand(layer) {
+            var _this = _super.call(this) || this;
+            _this.layer = layer;
+            return _this;
+        }
+        return RemoveRasterTileCommand;
+    }(postboy.PostboyGenericMessage));
+    RemoveRasterTileCommand.ID = 'd1c4bf6a-e2f2-4385-a7a2-cecb525f8939';
+
     var MapPostboyService = /** @class */ (function (_super) {
         __extends(MapPostboyService, _super);
         function MapPostboyService() {
@@ -1534,20 +1557,11 @@
             this.observeRemoveLayer();
             this.observePlaceFeatures();
             this.observeAddTile();
-            this.observeRemoveTile();
             this.observeLayerQuery();
             this.observeFeaturesInArea();
             this.observeFeaturesInPoint();
             this.observeImageLayer();
         };
-        MapManagementService.prototype.observeRemoveTile = function () {
-            var _this = this;
-            this.postboy.sub(RemoveTileCommand).subscribe(function (c) {
-                if (!_this.map)
-                    return;
-                _this.map.removeLayer(c.layer);
-            });
-        };
         MapManagementService.prototype.observeLayerQuery = function () {
             var _this = this;
             this.postboy.sub(GetLayerQuery).subscribe(function (ev) { return ev.finish(_this.layers.take(ev.name)); });
@@ -1559,6 +1573,21 @@
                     return;
                 _this.map.addLayer(c.layer);
             });
+            this.postboy.sub(RemoveTileCommand).subscribe(function (c) {
+                if (!_this.map)
+                    return;
+                _this.map.removeLayer(c.layer);
+            });
+            this.postboy.sub(AddRasterTileCommand).subscribe(function (c) {
+                if (!_this.map)
+                    return;
+                _this.map.addLayer(c.layer);
+            });
+            this.postboy.sub(RemoveRasterTileCommand).subscribe(function (c) {
+                if (!_this.map)
+                    return;
+                _this.map.removeLayer(c.layer);
+            });
         };
         MapManagementService.prototype.observeImageLayer = function () {
             var _this = this;
@@ -2054,6 +2083,8 @@
             this.recordSubject(AddLayerCommand);
             this.recordSubject(RemoveLayerCommand);
             this.recordSubject(AddTileCommand);
+            this.recordSubject(AddRasterTileCommand);
+            this.recordSubject(RemoveRasterTileCommand);
             this.recordSubject(RemoveImageLayerCommand);
             this.recordSubject(AddImageLayerCommand);
             this.recordSubject(RemoveTileCommand);
@@ -3135,6 +3166,283 @@
                     type: i0.Input
                 }] } });
 
+    var RasterTileLayerSettings = /** @class */ (function () {
+        function RasterTileLayerSettings() {
+            /**
+             * The maximum zoom level for a map view.
+             *
+             * @type {number}
+             * @default 19
+             */
+            this.maxZoom = 19;
+            /**
+             * The minimum zoom level allowed.
+             *
+             * @type {number}
+             */
+            this.minZoom = 0;
+            /**
+             * The opacity of an element.
+             *
+             * @type {number}
+             * @default 0.6
+             */
+            this.opacity = 0.6;
+            /**
+             * Represents the tiles URL.
+             * @typedef {string} url
+             *
+             * @example
+             * 'https://example.ex/{z}/{x}/{y}.png'
+             */
+            this.url = '';
+            /**
+             * The projection of the coordinate system.
+             *
+             * @type {string}
+             * @default 'EPSG:3857'
+             */
+            this.projection = 'EPSG:3857';
+            /**
+             * Additional headers that should be added to each tile request
+             *
+             * @type {Record<string, string>}
+             * @default An empty array
+             */
+            this.requestHeaders = null;
+            this.operation = function (d) { var _a; return (_a = d[0]) !== null && _a !== void 0 ? _a : []; };
+        }
+        /**
+         * Creates a copy of the given tile layer settings.
+         *
+         * @param {RasterTileLayerSettings} model - The tile layer settings to be copied.
+         * @return {RasterTileLayerSettings} - A new instance of RasterTileLayerSettings with the same properties as the model.
+         */
+        RasterTileLayerSettings.copy = function (model) {
+            var result = new RasterTileLayerSettings();
+            result.maxZoom = model.maxZoom;
+            result.minZoom = model.minZoom;
+            result.projection = model.projection;
+            result.opacity = model.opacity;
+            result.url = model.url;
+            result.requestHeaders = model.requestHeaders;
+            result.operation = model.operation;
+            return result;
+        };
+        /**
+         * Sets the URL of the RasterTileLayerSettings object.
+         *
+         * @param {string} url - The URL to be set.
+         * @return {RasterTileLayerSettings} - The updated RasterTileLayerSettings object.
+         */
+        RasterTileLayerSettings.prototype.setUrl = function (url) {
+            return RasterTileLayerSettings.copy(Object.assign(Object.assign({}, this), { url: url }));
+        };
+        /**
+         * Sets the operation to apply on raster tile data.
+         *
+         * @param {function} operation - A function that takes an input of either a two-dimensional array of numbers or an array of ImageData objects and returns either a one-dimensional array of numbers or an ImageData object.
+         * @return {RasterTileLayerSettings} A new instance of RasterTileLayerSettings with the updated operation.
+         */
+        RasterTileLayerSettings.prototype.setOperation = function (operation) {
+            return RasterTileLayerSettings.copy(Object.assign(Object.assign({}, this), { operation: operation }));
+        };
+        /**
+         * Sets the requestHeaders of the RasterTileLayerSettings object.
+         *
+         * @param {Record<string, string>} requestHeaders - The headers which should be provided.
+         * @return {RasterTileLayerSettings} - The updated RasterTileLayerSettings object.
+         */
+        RasterTileLayerSettings.prototype.setRequestHeaders = function (requestHeaders) {
+            return RasterTileLayerSettings.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 {RasterTileLayerSettings} - The updated tile layer settings object.
+         */
+        RasterTileLayerSettings.prototype.setMaxZoom = function (maxZoom) {
+            return RasterTileLayerSettings.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 {RasterTileLayerSettings} The modified RasterTileLayerSettings object with the updated minimum zoom level.
+         */
+        RasterTileLayerSettings.prototype.setMinZoom = function (minZoom) {
+            return RasterTileLayerSettings.copy(Object.assign(Object.assign({}, this), { minZoom: minZoom }));
+        };
+        /**
+         * Sets the opacity of the RasterTileLayerSettings.
+         *
+         * @param {number} opacity - The opacity value to set. Must be a number between 0 and 1.
+         * @return {RasterTileLayerSettings} - A new instance of RasterTileLayerSettings with the opacity set.
+         */
+        RasterTileLayerSettings.prototype.setOpacity = function (opacity) {
+            return RasterTileLayerSettings.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 {RasterTileLayerSettings} - The updated tile layer settings with the new projection.
+         */
+        RasterTileLayerSettings.prototype.setProjection = function (projection) {
+            return RasterTileLayerSettings.copy(Object.assign(Object.assign({}, this), { projection: projection }));
+        };
+        /**
+         * Checks if the current instance of RasterTileLayerSettings is equal to the given model.
+         * @param {RasterTileLayerSettings} model - The model to compare against.
+         * @return {boolean} - True if all properties of the current instance matches the properties of the model;
+         *                    otherwise, false.
+         */
+        RasterTileLayerSettings.prototype.isSame = function (model) {
+            if (this.maxZoom !== model.maxZoom)
+                return false;
+            if (this.minZoom !== model.minZoom)
+                return false;
+            if (this.url !== model.url)
+                return false;
+            if (this.projection !== model.projection)
+                return false;
+            if (this.opacity !== model.opacity)
+                return false;
+            if (this.requestHeaders !== model.requestHeaders)
+                return false;
+            if (this.operation !== model.operation)
+                return false;
+            return true;
+        };
+        return RasterTileLayerSettings;
+    }());
+
+    var RasterTileLayerFactory = /** @class */ (function () {
+        function RasterTileLayerFactory() {
+        }
+        RasterTileLayerFactory.prototype.build = function (settings) {
+            var _this = this;
+            var source$1 = new source.XYZ({
+                tileSize: 256,
+                maxZoom: settings.maxZoom || 14,
+                minZoom: settings.minZoom || 1,
+                projection: proj.get(settings.projection),
+                tileUrlFunction: this.getTileFunc(settings),
+                crossOrigin: 'Anonymous',
+                tileLoadFunction: !!settings.requestHeaders
+                    ? function (tile, src) { return _this.tileLoader(tile, src, settings.requestHeaders); }
+                    : undefined,
+            });
+            var raster = new RasterSource__default["default"]({
+                sources: [source$1],
+                operationType: 'image',
+                operation: settings.operation,
+            });
+            return new ImageLayer__default["default"]({ source: raster, opacity: settings.opacity });
+        };
+        RasterTileLayerFactory.prototype.getTileFunc = function (settings) {
+            var _this = this;
+            return function (tileCoord) {
+                var zoom = tileCoord[0];
+                var x = tileCoord[1];
+                var y = tileCoord[2];
+                var normalizedCoord = _this.getNormalizedCoord({ x: x, y: y }, zoom);
+                var bound = 1 << zoom;
+                return settings.url
+                    .replace('{x}', String((normalizedCoord === null || normalizedCoord === void 0 ? void 0 : normalizedCoord.x) || x))
+                    .replace('{z}', String(zoom))
+                    .replace('{y}', String(bound - ((normalizedCoord === null || normalizedCoord === void 0 ? void 0 : normalizedCoord.y) || y) - 1));
+            };
+        };
+        RasterTileLayerFactory.prototype.tileLoader = function (tile, src, headers) {
+            var client = new XMLHttpRequest();
+            client.open('GET', src);
+            client.responseType = 'arraybuffer';
+            Object.keys(headers).forEach(function (k) { return client.setRequestHeader(k, headers[k]); });
+            client.onload = function () {
+                if (this.response !== undefined) {
+                    var arrayBufferView = new Uint8Array(this.response);
+                    var blob = new Blob([arrayBufferView], { type: 'image/png' });
+                    var urlCreator = window.URL || window.webkitURL;
+                    tile.getImage().src = urlCreator.createObjectURL(blob);
+                }
+            };
+            client.send();
+        };
+        RasterTileLayerFactory.prototype.getNormalizedCoord = function (coord, zoom) {
+            var y = coord.y;
+            var x = coord.x;
+            var tileRange = 1 << zoom;
+            if (y < 0 || y >= tileRange)
+                return null;
+            if (x < 0 || x >= tileRange)
+                x = ((x % tileRange) + tileRange) % tileRange;
+            return { x: x, y: y };
+        };
+        return RasterTileLayerFactory;
+    }());
+    RasterTileLayerFactory.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RasterTileLayerFactory, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    RasterTileLayerFactory.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RasterTileLayerFactory, providedIn: 'root' });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RasterTileLayerFactory, decorators: [{
+                type: i0.Injectable,
+                args: [{
+                        providedIn: 'root',
+                    }]
+            }] });
+
+    var RasterTileLayerComponent = /** @class */ (function (_super) {
+        __extends(RasterTileLayerComponent, _super);
+        function RasterTileLayerComponent(postboy, factory) {
+            var _this = _super.call(this) || this;
+            _this.postboy = postboy;
+            _this.factory = factory;
+            _this._settings = new RasterTileLayerSettings();
+            _this.onDestroy = function () { return _this.removeLayer(); };
+            return _this;
+        }
+        Object.defineProperty(RasterTileLayerComponent.prototype, "settings", {
+            set: function (value) {
+                if (!value || this._settings.isSame(value))
+                    return;
+                this._settings = value;
+                this.initLayer();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        RasterTileLayerComponent.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(); });
+        };
+        RasterTileLayerComponent.prototype.initLayer = function () {
+            this.removeLayer();
+            this.layer = this.factory.build(this._settings);
+            this.postboy.fire(new AddRasterTileCommand(this.layer));
+        };
+        RasterTileLayerComponent.prototype.removeLayer = function () {
+            if (this.layer)
+                this.postboy.fire(new RemoveRasterTileCommand(this.layer));
+        };
+        return RasterTileLayerComponent;
+    }(DestructibleComponent));
+    RasterTileLayerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RasterTileLayerComponent, deps: [{ token: MapPostboyService }, { token: RasterTileLayerFactory }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    RasterTileLayerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RasterTileLayerComponent, selector: "art-raster-tile-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: RasterTileLayerComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'art-raster-tile-layer',
+                        template: '',
+                        styleUrls: [],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    }]
+            }], ctorParameters: function () { return [{ type: MapPostboyService }, { type: RasterTileLayerFactory }]; }, propDecorators: { settings: [{
+                    type: i0.Input
+                }] } });
+
     var MapPlateFactory = /** @class */ (function () {
         function MapPlateFactory() {
         }
@@ -3690,7 +3998,8 @@
             PolygonsComponent,
             ClusterLayerComponent,
             MapControlZoomComponent,
-            ImageLayerComponent], imports: [i6.CommonModule], exports: [MapPlateComponent,
+            ImageLayerComponent,
+            RasterTileLayerComponent], imports: [i6.CommonModule], exports: [MapPlateComponent,
             FeatureLayerComponent,
             MarkersComponent,
             TileLayerComponent,
@@ -3698,7 +4007,8 @@
             PolygonsComponent,
             ClusterLayerComponent,
             MapControlZoomComponent,
-            ImageLayerComponent] });
+            ImageLayerComponent,
+            RasterTileLayerComponent] });
     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,
@@ -3716,6 +4026,7 @@
                             ClusterLayerComponent,
                             MapControlZoomComponent,
                             ImageLayerComponent,
+                            RasterTileLayerComponent,
                         ],
                         exports: [
                             MapPlateComponent,
@@ -3727,6 +4038,7 @@
                             ClusterLayerComponent,
                             MapControlZoomComponent,
                             ImageLayerComponent,
+                            RasterTileLayerComponent,
                         ],
                     }]
             }] });
@@ -3940,6 +4252,10 @@
      * Generated bundle index. Do not edit.
      */
 
+    Object.defineProperty(exports, 'Feature', {
+        enumerable: true,
+        get: function () { return ol.Feature; }
+    });
     Object.defineProperty(exports, 'Style', {
         enumerable: true,
         get: function () { return style.Style; }
@@ -3986,6 +4302,8 @@
     exports.PolygonSelfIntersectionExecutor = PolygonSelfIntersectionExecutor;
     exports.PolygonStyleHelper = PolygonStyleHelper;
     exports.PolygonsComponent = PolygonsComponent;
+    exports.RasterTileLayerComponent = RasterTileLayerComponent;
+    exports.RasterTileLayerSettings = RasterTileLayerSettings;
     exports.RemoveControlCommand = RemoveControlCommand;
     exports.SetMapCenterCommand = SetMapCenterCommand;
     exports.StartDrawingCommand = StartDrawingCommand;