@artstesh/maps 1.0.0 → 1.0.3

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/proj'), require('rxjs'), require('ol/Map'), require('ol/View'), require('ol/layer/Tile'), require('ol/source/OSM'), require('rxjs/operators'), require('ol/source'), require('ol/layer'), require('ol/style/Style'), require('ol/style')) :
-    typeof define === 'function' && define.amd ? define('maps-components/src/map', ['exports', '@angular/core', '@angular/common', 'ol', 'ol/geom', 'ol/proj', 'rxjs', 'ol/Map', 'ol/View', 'ol/layer/Tile', 'ol/source/OSM', 'rxjs/operators', 'ol/source', 'ol/layer', 'ol/style/Style', 'ol/style'], 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.proj, global.rxjs, global.Map, global.View, global.TileLayer, global.OSM, global.rxjs.operators, global.source, global.layer, global.Style, global.style));
-})(this, (function (exports, i0, i5, ol, geom, proj, rxjs, Map, View, TileLayer, OSM, operators, source, layer, Style, style) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('ol'), require('ol/geom'), require('ol/proj'), require('rxjs'), require('@artstesh/postboy'), require('ol/Map'), require('ol/View'), require('ol/layer/Tile'), require('ol/source/OSM'), require('rxjs/operators'), require('ol/source'), require('ol/layer'), require('ol/style/Style'), require('ol/style')) :
+    typeof define === 'function' && define.amd ? define('maps-components/src/map', ['exports', '@angular/core', '@angular/common', 'ol', 'ol/geom', 'ol/proj', 'rxjs', '@artstesh/postboy', 'ol/Map', 'ol/View', 'ol/layer/Tile', 'ol/source/OSM', 'rxjs/operators', 'ol/source', 'ol/layer', 'ol/style/Style', 'ol/style'], 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.proj, global.rxjs, global.postboy, global.Map, global.View, global.TileLayer, global.OSM, global.rxjs.operators, global.source, global.layer, global.Style, global.style));
+})(this, (function (exports, i0, i5, ol, geom, proj, rxjs, postboy, Map, View, TileLayer, OSM, operators, source, layer, Style, style) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -611,10 +611,8 @@
         function MarkerModel(lat, lng, id, info) {
             this.lat = lat;
             this.lng = lng;
-            this.id = id;
             this.info = info;
-            if (id == null)
-                this.id = IdGenerator.get();
+            this.id = id == null ? IdGenerator.get() : id;
             this._feature = this.getFeature();
         }
         Object.defineProperty(MarkerModel.prototype, "feature", {
@@ -625,12 +623,10 @@
             configurable: true
         });
         MarkerModel.prototype.getFeature = function () {
-            var _this = this;
             var feature = new ol.Feature(new geom.Point([this.lng, this.lat]));
             feature.setId(this.id);
-            if (this.info) {
-                Object.keys(this.info).forEach(function (k) { return feature.set(k, _this.info[k]); });
-            }
+            if (this.info)
+                feature.set('info', this.info);
             return feature;
         };
         return MarkerModel;
@@ -674,6 +670,25 @@
     }(GenericMessage));
     MapRenderedEvent.ID = 'b6121807-3b89-4cd3-82cf-089d2cefdc4f';
 
+    var MapClickEvent = /** @class */ (function (_super) {
+        __extends(MapClickEvent, _super);
+        function MapClickEvent(coordinates, entities) {
+            var _this = _super.call(this) || this;
+            _this.coordinates = coordinates;
+            _this.entities = entities;
+            return _this;
+        }
+        Object.defineProperty(MapClickEvent.prototype, "id", {
+            get: function () {
+                return MapClickEvent.ID;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return MapClickEvent;
+    }(GenericMessage));
+    MapClickEvent.ID = '323df526-8d9c-49c6-83e8-6e9a1e7762f7';
+
     var AddLayerCommand = /** @class */ (function (_super) {
         __extends(AddLayerCommand, _super);
         function AddLayerCommand(layer) {
@@ -729,100 +744,90 @@
     }(GenericMessage));
     RemoveLayerCommand.ID = 'ab484e0e-e185-45cd-8434-12101f3c7eb1';
 
-    var ClearLayerCommand = /** @class */ (function (_super) {
-        __extends(ClearLayerCommand, _super);
-        function ClearLayerCommand(layer) {
+    var AddTileCommand = /** @class */ (function (_super) {
+        __extends(AddTileCommand, _super);
+        function AddTileCommand(layer) {
             var _this = _super.call(this) || this;
             _this.layer = layer;
             return _this;
         }
-        Object.defineProperty(ClearLayerCommand.prototype, "id", {
+        Object.defineProperty(AddTileCommand.prototype, "id", {
             get: function () {
-                return ClearLayerCommand.ID;
+                return AddTileCommand.ID;
             },
             enumerable: false,
             configurable: true
         });
-        return ClearLayerCommand;
+        return AddTileCommand;
     }(GenericMessage));
-    ClearLayerCommand.ID = 'd02842b7-fa62-458d-b1e4-12dd814610c5';
+    AddTileCommand.ID = '25b7df28-72ce-4453-9fe6-54285a2fdc57';
 
-    var MapPostboyService = /** @class */ (function () {
+    var RemoveTileCommand = /** @class */ (function (_super) {
+        __extends(RemoveTileCommand, _super);
+        function RemoveTileCommand(layer) {
+            var _this = _super.call(this) || this;
+            _this.layer = layer;
+            return _this;
+        }
+        Object.defineProperty(RemoveTileCommand.prototype, "id", {
+            get: function () {
+                return RemoveTileCommand.ID;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return RemoveTileCommand;
+    }(GenericMessage));
+    RemoveTileCommand.ID = 'c36ccc0b-5638-4819-b148-2de57a59a5b7';
+
+    var MapPostboyService = /** @class */ (function (_super) {
+        __extends(MapPostboyService, _super);
         function MapPostboyService() {
-            this.applications = {};
+            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
+            _this.observe = function (id) { return _this.subscribe(id); };
+            return _this;
         }
-        MapPostboyService.prototype.register = function (id, sub) {
-            this.applications[id] = sub;
-        };
-        MapPostboyService.prototype.subscribe = function (id) {
-            if (!this.applications[id])
-                throw new Error("There is no event with id " + id);
-            return this.applications[id].asObservable();
-        };
-        MapPostboyService.prototype.fire = function (message) {
-            if (!this.applications[message.id])
-                throw new Error("There is no event with id " + message.id);
-            this.applications[message.id].next(message);
-        };
         return MapPostboyService;
-    }());
-    MapPostboyService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MapPostboyService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    }(postboy.PostboyService));
+    MapPostboyService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MapPostboyService, deps: null, target: i0__namespace.ɵɵFactoryTarget.Injectable });
     MapPostboyService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MapPostboyService });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MapPostboyService, decorators: [{
                 type: i0.Injectable
             }] });
 
-    var MessageRegistratorService = /** @class */ (function () {
-        function MessageRegistratorService(service) {
-            service.register(MapRenderedEvent.ID, new rxjs.ReplaySubject(1));
-            service.register(AddLayerCommand.ID, new rxjs.Subject());
-            service.register(PlaceLayerFeaturesCommand.ID, new rxjs.ReplaySubject(1));
-            service.register(RemoveLayerCommand.ID, new rxjs.Subject());
-            service.register(ClearLayerCommand.ID, new rxjs.Subject());
-        }
-        return MessageRegistratorService;
-    }());
-    MessageRegistratorService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MessageRegistratorService, deps: [{ token: MapPostboyService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    MessageRegistratorService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MessageRegistratorService });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MessageRegistratorService, decorators: [{
-                type: i0.Injectable
-            }], ctorParameters: function () { return [{ type: MapPostboyService }]; } });
-
-    var MapStateService = /** @class */ (function () {
-        function MapStateService(postboy) {
-            var _this = this;
-            this.postboy = postboy;
-            postboy.subscribe(MapRenderedEvent.ID).subscribe(function (m) { return (_this.map = m); });
-        }
-        return MapStateService;
-    }());
-    MapStateService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MapStateService, deps: [{ token: MapPostboyService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    MapStateService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MapStateService });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MapStateService, decorators: [{
-                type: i0.Injectable
-            }], ctorParameters: function () { return [{ type: MapPostboyService }]; } });
-
     var MapManagementService = /** @class */ (function () {
         function MapManagementService(postboy) {
             this.postboy = postboy;
             this.layers = {};
+        }
+        MapManagementService.prototype.up = function () {
             this.observeMapRender();
             this.observeAddLayer();
             this.observeRemoveLayer();
             this.observePlaceFeatures();
-            this.observeClearLayer();
-        }
-        MapManagementService.prototype.observeMapRender = function () {
+            this.observeAddTile();
+            this.observeRemoveTile();
+        };
+        MapManagementService.prototype.observeRemoveTile = function () {
             var _this = this;
-            this.postboy.subscribe(MapRenderedEvent.ID).subscribe(function (m) {
-                _this.map = m.map;
+            this.postboy.subscribe(RemoveTileCommand.ID).subscribe(function (c) {
+                if (!_this.map)
+                    return;
+                _this.map.removeLayer(c.layer);
             });
         };
-        MapManagementService.prototype.observeClearLayer = function () {
+        MapManagementService.prototype.observeAddTile = function () {
             var _this = this;
-            this.postboy.subscribe(ClearLayerCommand.ID).subscribe(function (c) {
-                var _a, _b;
-                (_b = (_a = _this.layers[c.layer]) === null || _a === void 0 ? void 0 : _a.getSource()) === null || _b === void 0 ? void 0 : _b.clear();
+            this.postboy.subscribe(AddTileCommand.ID).subscribe(function (c) {
+                if (!_this.map)
+                    return;
+                _this.map.addLayer(c.layer);
+            });
+        };
+        MapManagementService.prototype.observeMapRender = function () {
+            var _this = this;
+            this.postboy.subscribe(MapRenderedEvent.ID).subscribe(function (m) {
+                _this.map = m.map;
             });
         };
         MapManagementService.prototype.observeAddLayer = function () {
@@ -861,16 +866,94 @@
                 type: i0.Injectable
             }], ctorParameters: function () { return [{ type: MapPostboyService }]; } });
 
-    var ServiceCollector = /** @class */ (function () {
-        function ServiceCollector(registrator, management, state) {
+    var MapStateService = /** @class */ (function () {
+        function MapStateService(postboy) {
+            this.postboy = postboy;
+        }
+        MapStateService.prototype.up = function () {
+            var _this = this;
+            this.postboy.subscribe(MapRenderedEvent.ID).subscribe(function (m) { return (_this.map = m); });
+        };
+        return MapStateService;
+    }());
+    MapStateService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MapStateService, deps: [{ token: MapPostboyService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    MapStateService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MapStateService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MapStateService, decorators: [{
+                type: i0.Injectable
+            }], ctorParameters: function () { return [{ type: MapPostboyService }]; } });
+
+    var MapClickService = /** @class */ (function () {
+        function MapClickService(postboy) {
+            this.postboy = postboy;
         }
-        return ServiceCollector;
+        MapClickService.prototype.up = function () {
+            this.observeMapRender();
+        };
+        MapClickService.prototype.observeMapRender = function () {
+            var _this = this;
+            this.postboy.subscribe(MapRenderedEvent.ID).subscribe(function (m) {
+                var _a;
+                _this.map = m.map;
+                (_a = _this.map) === null || _a === void 0 ? void 0 : _a.on('singleclick', function (e) {
+                    _this.postboy.fire(_this.onClick(e));
+                });
+            });
+        };
+        MapClickService.prototype.onClick = function (ev) {
+            var _this = this;
+            var _a;
+            var model = new MapClickEvent(ev.coordinate, {});
+            (_a = this.map) === null || _a === void 0 ? void 0 : _a.forEachFeatureAtPixel(ev.pixel, function (f, l) {
+                _this.getFeatureCollectionWithInner([f])
+                    .filter(function (f) { return !!f.getId(); })
+                    .forEach(function (fs) {
+                    var layerName = l.get('name');
+                    if (!model.entities[layerName])
+                        model.entities[layerName] = [];
+                    model.entities[layerName].push(f.getId());
+                });
+            });
+            return model;
+        };
+        MapClickService.prototype.getFeatureCollectionWithInner = function (features) {
+            var result = [];
+            features === null || features === void 0 ? void 0 : features.forEach(function (f) {
+                var innerFeatures = f.get('features');
+                (innerFeatures === null || innerFeatures === void 0 ? void 0 : innerFeatures.length) ? result.push.apply(result, __spreadArray([], __read(innerFeatures))) : result.push(f);
+            });
+            return result;
+        };
+        return MapClickService;
     }());
-    ServiceCollector.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ServiceCollector, deps: [{ token: MessageRegistratorService }, { token: MapManagementService }, { token: MapStateService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    ServiceCollector.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ServiceCollector });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ServiceCollector, decorators: [{
+    MapClickService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MapClickService, deps: [{ token: MapPostboyService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    MapClickService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MapClickService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MapClickService, decorators: [{
                 type: i0.Injectable
-            }], ctorParameters: function () { return [{ type: MessageRegistratorService }, { type: MapManagementService }, { type: MapStateService }]; } });
+            }], ctorParameters: function () { return [{ type: MapPostboyService }]; } });
+
+    var MessageRegistratorService = /** @class */ (function (_super) {
+        __extends(MessageRegistratorService, _super);
+        function MessageRegistratorService(service, management, state, interaction) {
+            var _this = _super.call(this, service) || this;
+            _this.registerServices([management, state, interaction]);
+            return _this;
+        }
+        MessageRegistratorService.prototype._up = function () {
+            this.registerReplay(MapRenderedEvent.ID);
+            this.registerReplay(PlaceLayerFeaturesCommand.ID);
+            this.registerSubject(AddLayerCommand.ID);
+            this.registerSubject(RemoveLayerCommand.ID);
+            this.registerSubject(AddTileCommand.ID);
+            this.registerSubject(RemoveTileCommand.ID);
+            this.registerSubject(MapClickEvent.ID);
+        };
+        return MessageRegistratorService;
+    }(postboy.PostboyAbstractRegistrator));
+    MessageRegistratorService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MessageRegistratorService, deps: [{ token: MapPostboyService }, { token: MapManagementService }, { token: MapStateService }, { token: MapClickService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    MessageRegistratorService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MessageRegistratorService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MessageRegistratorService, decorators: [{
+                type: i0.Injectable
+            }], ctorParameters: function () { return [{ type: MapPostboyService }, { type: MapManagementService }, { type: MapStateService }, { type: MapClickService }]; } });
 
     var MapPlateFactory = /** @class */ (function () {
         function MapPlateFactory() {
@@ -975,6 +1058,7 @@
             _this.detector = detector;
             _this.osmUrl = '';
             _this._settings = new MapSettings();
+            registrator.up();
             return _this;
         }
         Object.defineProperty(MapPlateComponent.prototype, "settings", {
@@ -1008,8 +1092,8 @@
         };
         return MapPlateComponent;
     }(DestructibleComponent));
-    MapPlateComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MapPlateComponent, deps: [{ token: i0__namespace.ElementRef }, { token: MapPostboyService }, { token: MapPlateFactory }, { token: ServiceCollector }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    MapPlateComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MapPlateComponent, selector: "lib-map-plate", inputs: { settings: "settings" }, providers: [MessageRegistratorService, MapStateService, MapManagementService, ServiceCollector], usesInheritance: true, ngImport: i0__namespace, 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"], components: [{ type: OsmTileLayerComponent, selector: "lib-osm-tile-layer", inputs: ["url", "map"] }], directives: [{ type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    MapPlateComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MapPlateComponent, deps: [{ token: i0__namespace.ElementRef }, { token: MapPostboyService }, { token: MapPlateFactory }, { token: MessageRegistratorService }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    MapPlateComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MapPlateComponent, selector: "lib-map-plate", inputs: { settings: "settings" }, providers: [MessageRegistratorService, MapStateService, MapManagementService, MapClickService], usesInheritance: true, ngImport: i0__namespace, 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"], components: [{ type: OsmTileLayerComponent, selector: "lib-osm-tile-layer", inputs: ["url", "map"] }], directives: [{ type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MapPlateComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -1017,21 +1101,149 @@
                         templateUrl: './map-plate.component.html',
                         styleUrls: ['./map-plate.component.scss'],
                         changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                        providers: [MessageRegistratorService, MapStateService, MapManagementService, ServiceCollector],
+                        providers: [MessageRegistratorService, MapStateService, MapManagementService, MapClickService],
                     }]
-            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: MapPostboyService }, { type: MapPlateFactory }, { type: ServiceCollector }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { settings: [{
+            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: MapPostboyService }, { type: MapPlateFactory }, { type: MessageRegistratorService }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { settings: [{
                     type: i0.Input
                 }] } });
 
+    var TileLayerSettings = /** @class */ (function () {
+        function TileLayerSettings() {
+            this.maxZoom = 19;
+            this.minZoom = 0;
+            this.opacity = 0.6;
+            this.url = '';
+            this.projection = 'EPSG:3857';
+        }
+        TileLayerSettings.copy = function (model) {
+            var result = new TileLayerSettings();
+            result.maxZoom = model.maxZoom;
+            result.minZoom = model.minZoom;
+            result.projection = model.projection;
+            result.opacity = model.opacity;
+            result.url = model.url;
+            return result;
+        };
+        TileLayerSettings.prototype.setUrl = function (url) {
+            return TileLayerSettings.copy(Object.assign(Object.assign({}, this), { url: url }));
+        };
+        TileLayerSettings.prototype.setMaxZoom = function (maxZoom) {
+            return TileLayerSettings.copy(Object.assign(Object.assign({}, this), { maxZoom: maxZoom }));
+        };
+        TileLayerSettings.prototype.setMinZoom = function (minZoom) {
+            return TileLayerSettings.copy(Object.assign(Object.assign({}, this), { minZoom: minZoom }));
+        };
+        TileLayerSettings.prototype.setOpacity = function (opacity) {
+            return TileLayerSettings.copy(Object.assign(Object.assign({}, this), { opacity: opacity }));
+        };
+        TileLayerSettings.prototype.setProjection = function (projection) {
+            return TileLayerSettings.copy(Object.assign(Object.assign({}, this), { projection: projection }));
+        };
+        TileLayerSettings.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;
+            return true;
+        };
+        return TileLayerSettings;
+    }());
+
+    var TileLayerFactory = /** @class */ (function () {
+        function TileLayerFactory() {
+        }
+        TileLayerFactory.prototype.build = function (settings) {
+            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',
+            });
+            return new TileLayer__default["default"]({ source: source$1, opacity: settings.opacity });
+        };
+        TileLayerFactory.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));
+            };
+        };
+        TileLayerFactory.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 TileLayerFactory;
+    }());
+    TileLayerFactory.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TileLayerFactory, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    TileLayerFactory.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TileLayerFactory, providedIn: 'root' });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TileLayerFactory, decorators: [{
+                type: i0.Injectable,
+                args: [{
+                        providedIn: 'root',
+                    }]
+            }] });
+
     var TileLayerComponent = /** @class */ (function (_super) {
         __extends(TileLayerComponent, _super);
-        function TileLayerComponent() {
-            return _super.call(this) || this;
+        function TileLayerComponent(postboy, factory) {
+            var _this = _super.call(this) || this;
+            _this.postboy = postboy;
+            _this.factory = factory;
+            _this._settings = new TileLayerSettings();
+            _this.onDestroy = function () { return _this.removeLayer(); };
+            return _this;
         }
+        TileLayerComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.postboy
+                .subscribe(MapRenderedEvent.ID)
+                .pipe(operators.filter(function (m) { return !!m; }), operators.first())
+                .subscribe(function (m) { return _this.initLayer(); });
+        };
+        Object.defineProperty(TileLayerComponent.prototype, "settings", {
+            set: function (value) {
+                if (!value || this._settings.isSame(value))
+                    return;
+                this._settings = value;
+                this.initLayer();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        TileLayerComponent.prototype.initLayer = function () {
+            this.removeLayer();
+            this.layer = this.factory.build(this._settings);
+            this.postboy.fire(new AddTileCommand(this.layer));
+        };
+        TileLayerComponent.prototype.removeLayer = function () {
+            if (this.layer)
+                this.postboy.fire(new RemoveTileCommand(this.layer));
+        };
         return TileLayerComponent;
     }(DestructibleComponent));
-    TileLayerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TileLayerComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TileLayerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TileLayerComponent, selector: "lib-tile-layer", usesInheritance: true, ngImport: i0__namespace, template: '', isInline: true, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    TileLayerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TileLayerComponent, deps: [{ token: MapPostboyService }, { token: TileLayerFactory }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TileLayerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TileLayerComponent, selector: "lib-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: TileLayerComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -1040,7 +1252,9 @@
                         styleUrls: [],
                         changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     }]
-            }], ctorParameters: function () { return []; } });
+            }], ctorParameters: function () { return [{ type: MapPostboyService }, { type: TileLayerFactory }]; }, propDecorators: { settings: [{
+                    type: i0.Input
+                }] } });
 
     var FeatureLayerSettings = /** @class */ (function () {
         function FeatureLayerSettings() {
@@ -1228,7 +1442,7 @@
             TileLayerComponent,
             OsmTileLayerComponent,
             FeatureLayerComponent,
-            MarkersComponent], imports: [i5.CommonModule], exports: [MapPlateComponent, FeatureLayerComponent, MarkersComponent] });
+            MarkersComponent], imports: [i5.CommonModule], exports: [MapPlateComponent, FeatureLayerComponent, MarkersComponent, TileLayerComponent] });
     MapModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MapModule, imports: [[i5.CommonModule]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MapModule, decorators: [{
                 type: i0.NgModule,
@@ -1242,52 +1456,10 @@
                             FeatureLayerComponent,
                             MarkersComponent,
                         ],
-                        exports: [MapPlateComponent, FeatureLayerComponent, MarkersComponent],
+                        exports: [MapPlateComponent, FeatureLayerComponent, MarkersComponent, TileLayerComponent],
                     }]
             }] });
 
-    var TileLayerSettings = /** @class */ (function () {
-        function TileLayerSettings() {
-            this.name = 'tiles';
-            this.maxZoom = 19;
-            this.minZoom = 0;
-            this.opacity = 1;
-            this.url = '';
-        }
-        TileLayerSettings.copy = function (model) {
-            var result = new TileLayerSettings();
-            result.name = model.name;
-            result.maxZoom = model.maxZoom;
-            result.minZoom = model.minZoom;
-            result.url = model.url;
-            return result;
-        };
-        TileLayerSettings.prototype.setUrl = function (url) {
-            return TileLayerSettings.copy(Object.assign(Object.assign({}, this), { url: url }));
-        };
-        TileLayerSettings.prototype.setName = function (name) {
-            return TileLayerSettings.copy(Object.assign(Object.assign({}, this), { name: name }));
-        };
-        TileLayerSettings.prototype.setMaxZoom = function (maxZoom) {
-            return TileLayerSettings.copy(Object.assign(Object.assign({}, this), { maxZoom: maxZoom }));
-        };
-        TileLayerSettings.prototype.setMinZoom = function (minZoom) {
-            return TileLayerSettings.copy(Object.assign(Object.assign({}, this), { minZoom: minZoom }));
-        };
-        TileLayerSettings.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.name !== model.name)
-                return false;
-            return true;
-        };
-        return TileLayerSettings;
-    }());
-
     var MarkerStyleHelper = /** @class */ (function () {
         function MarkerStyleHelper() {
         }
@@ -1329,6 +1501,7 @@
     exports.FeatureLayerComponent = FeatureLayerComponent;
     exports.FeatureLayerSettings = FeatureLayerSettings;
     exports.GenericMessage = GenericMessage;
+    exports.MapClickEvent = MapClickEvent;
     exports.MapLyrsLabel = MapLyrsLabel;
     exports.MapModule = MapModule;
     exports.MapPlateComponent = MapPlateComponent;