@artstesh/maps 1.1.10 → 1.1.11

package/README.md

@@ -1,13 +1,11 @@
-# @artstesh/maps
-
-Let's map a feature ;)
-
-### Description of the project
-
-The main purpose of the project is to make easier the process of using of [openlayers library](https://openlayers.org/) in Angular projects.
-
-It's just the first, initial version of the library, that gonna become much more functional in a few weeks.
-
-### License
-
-This project is licensed under the MIT License
+# @artstesh/maps
+
+Let's map a feature ;)
+
+### Description of the project
+
+The main purpose of the project is to make easier the process of using of [openlayers library](https://openlayers.org/) in Angular projects.
+
+### License
+
+This project is licensed under the MIT License

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

@@ -1855,6 +1855,13 @@
              * @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;
         }
         /**
          * Creates a copy of the given tile layer settings.
@@ -1869,6 +1876,7 @@
             result.projection = model.projection;
             result.opacity = model.opacity;
             result.url = model.url;
+            result.requestHeaders = model.requestHeaders;
             return result;
         };
         /**
@@ -1880,6 +1888,15 @@
         TileLayerSettings.prototype.setUrl = function (url) {
             return TileLayerSettings.copy(Object.assign(Object.assign({}, this), { url: url }));
         };
+        /**
+         * Sets the requestHeaders of the TileLayerSettings object.
+         *
+         * @param {Record<string, string>} requestHeaders - The headers which should be provided.
+         * @return {TileLayerSettings} - The updated TileLayerSettings object.
+         */
+        TileLayerSettings.prototype.setRequestHeaders = function (requestHeaders) {
+            return TileLayerSettings.copy(Object.assign(Object.assign({}, this), { requestHeaders: requestHeaders }));
+        };
         /**
          * Sets the maximum zoom level for the tile layer.
          *
@@ -1933,6 +1950,8 @@
                 return false;
             if (this.opacity !== model.opacity)
                 return false;
+            if (this.requestHeaders !== model.requestHeaders)
+                return false;
             return true;
         };
         return TileLayerSettings;
@@ -1942,6 +1961,7 @@
         function TileLayerFactory() {
         }
         TileLayerFactory.prototype.build = function (settings) {
+            var _this = this;
             var source$1 = new source.XYZ({
                 tileSize: 256,
                 maxZoom: settings.maxZoom || 14,
@@ -1949,6 +1969,9 @@
                 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,
             });
             return new TileLayer__default["default"]({ source: source$1, opacity: settings.opacity });
         };
@@ -1966,6 +1989,21 @@
                     .replace('{y}', String(bound - ((normalizedCoord === null || normalizedCoord === void 0 ? void 0 : normalizedCoord.y) || y) - 1));
             };
         };
+        TileLayerFactory.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();
+        };
         TileLayerFactory.prototype.getNormalizedCoord = function (coord, zoom) {
             var y = coord.y;
             var x = coord.x;