@artstesh/maps 1.1.1 → 1.1.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/format'), require('ol/extent'), require('ol/proj'), require('@artstesh/postboy'), require('ol/interaction'), require('ol/interaction/Draw'), require('ol/control'), require('rxjs/operators'), require('ol/source'), require('ol/layer/Tile'), require('ol/source/OSM'), require('ol/layer'), require('ol/loadingstrategy'), require('ol/geom/Polygon'), require('ol/source/Cluster'), require('rxjs'), 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/proj', '@artstesh/postboy', 'ol/interaction', 'ol/interaction/Draw', 'ol/control', 'rxjs/operators', 'ol/source', 'ol/layer/Tile', 'ol/source/OSM', 'ol/layer', 'ol/loadingstrategy', 'ol/geom/Polygon', 'ol/source/Cluster', 'rxjs', '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.proj, global.postboy, global.interaction, global.Draw, global.control, global.rxjs.operators, global.source, global.TileLayer, global.OSM, global.layer, global.loadingstrategy, global.Polygon, global.Cluster, global.rxjs, global.Map, global.View, global.Overlay, global.Style, global.style, global.epsg4326));
-})(this, (function (exports, i0, i6, ol, geom, format, extent, proj, postboy, interaction, Draw, control, operators, source, TileLayer, OSM, layer, loadingstrategy, Polygon, Cluster, rxjs, 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/control'), require('ol/proj'), require('@artstesh/postboy'), require('ol/interaction'), require('ol/interaction/Draw'), require('rxjs/operators'), require('ol/source'), require('ol/layer/Tile'), require('ol/source/OSM'), require('ol/layer'), require('ol/loadingstrategy'), require('ol/geom/Polygon'), require('ol/source/Cluster'), require('rxjs'), 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/control', 'ol/proj', '@artstesh/postboy', 'ol/interaction', 'ol/interaction/Draw', 'rxjs/operators', 'ol/source', 'ol/layer/Tile', 'ol/source/OSM', 'ol/layer', 'ol/loadingstrategy', 'ol/geom/Polygon', 'ol/source/Cluster', 'rxjs', '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.control, global.proj, global.postboy, global.interaction, global.Draw, global.rxjs.operators, global.source, global.TileLayer, global.OSM, global.layer, global.loadingstrategy, global.Polygon, global.Cluster, global.rxjs, global.Map, global.View, global.Overlay, global.Style, global.style, global.epsg4326));
+})(this, (function (exports, i0, i6, ol, geom, format, extent, control, proj, postboy, interaction, Draw, operators, source, TileLayer, OSM, layer, loadingstrategy, Polygon, Cluster, rxjs, Map, View, Overlay, Style, style, epsg4326) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -752,6 +752,22 @@
         return Dictionary;
     }());
 
+    /**
+     *
+     * A control is a visible widget with a DOM element in a fixed position on the screen. They can involve user input (buttons), or be informational only; the position is determined using CSS. By default these are placed in the container with CSS class name ol-overlaycontainer-stopevent, but can use any outside DOM element.
+     * This is the base class for controls. You can use it for simple custom controls by creating the element with listeners, creating an instance:
+     * var myControl = new Control({element: myElement}); and then adding this to the map.
+     * The main advantage of having this as a control rather than a simple separate DOM element is that preventing propagation is handled for you. Controls will also be objects in a module:ol/Collection~Collection, so you can use their methods.
+     * You can also extend this base for your own control class. See examples/custom-controls for an example of how to do this.
+     */
+    var MapControl = /** @class */ (function (_super) {
+        __extends(MapControl, _super);
+        function MapControl(options) {
+            return _super.call(this, options) || this;
+        }
+        return MapControl;
+    }(control.Control));
+
     var MapRenderedEvent = /** @class */ (function (_super) {
         __extends(MapRenderedEvent, _super);
         function MapRenderedEvent(map) {
@@ -922,6 +938,71 @@
     }(postboy.PostboyGenericMessage));
     CancelFeatureModificationCommand.ID = '9c9fb40f-ea95-4704-8177-0e9ecabf36fa';
 
+    var AddControlCommand = /** @class */ (function (_super) {
+        __extends(AddControlCommand, _super);
+        function AddControlCommand(item) {
+            var _this = _super.call(this) || this;
+            _this.item = item;
+            return _this;
+        }
+        Object.defineProperty(AddControlCommand.prototype, "id", {
+            get: function () {
+                return AddControlCommand.ID;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return AddControlCommand;
+    }(postboy.PostboyGenericMessage));
+    AddControlCommand.ID = '8e1c06eb-b395-4fe1-929c-ebf0805eeb49';
+
+    var RemoveControlCommand = /** @class */ (function (_super) {
+        __extends(RemoveControlCommand, _super);
+        function RemoveControlCommand(item) {
+            var _this = _super.call(this) || this;
+            _this.item = item;
+            return _this;
+        }
+        Object.defineProperty(RemoveControlCommand.prototype, "id", {
+            get: function () {
+                return RemoveControlCommand.ID;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return RemoveControlCommand;
+    }(postboy.PostboyGenericMessage));
+    RemoveControlCommand.ID = '361641e0-804a-4930-8c27-0cea6330dbfc';
+
+    /**
+     * Forces map to move to a specific point
+     */
+    var SetMapCenterCommand = /** @class */ (function (_super) {
+        __extends(SetMapCenterCommand, _super);
+        /**
+         *
+         * @param lat - the desired latitude
+         * @param lng - the desired longitude
+         * @param zoom - the desired zoom; doesn't change zoom if undefined
+         */
+        function SetMapCenterCommand(lat, lng, zoom) {
+            var _this = _super.call(this) || this;
+            _this.lat = lat;
+            _this.lng = lng;
+            _this.zoom = zoom;
+            return _this;
+        }
+        Object.defineProperty(SetMapCenterCommand.prototype, "id", {
+            get: function () {
+                return SetMapCenterCommand.ID;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return SetMapCenterCommand;
+    }(postboy.PostboyGenericMessage));
+    SetMapCenterCommand.ID = 'd50e89c9-6707-4f8c-ab57-65fcef232182';
+
     var AddLayerCommand = /** @class */ (function (_super) {
         __extends(AddLayerCommand, _super);
         function AddLayerCommand(layer) {
@@ -1270,14 +1351,14 @@
         MapManagementService.prototype.observePlaceFeatures = function () {
             var _this = this;
             this.postboy.subscribe(PlaceLayerFeaturesCommand.ID).subscribe(function (c) {
-                var _a;
+                var _a, _b;
                 if (!_this.layers.has(c.layer))
                     return;
                 var source = _this.layers.take(c.layer).getSource();
                 if (!!source['getSource'])
                     source = (_a = source) === null || _a === void 0 ? void 0 : _a.getSource();
                 source === null || source === void 0 ? void 0 : source.clear();
-                source === null || source === void 0 ? void 0 : source.addFeatures(c.features);
+                !!((_b = c.features) === null || _b === void 0 ? void 0 : _b.length) && (source === null || source === void 0 ? void 0 : source.addFeatures(c.features));
             });
         };
         MapManagementService.prototype.observeRemoveLayer = function () {
@@ -1320,8 +1401,15 @@
             this.postboy = postboy;
         }
         MapStateService.prototype.up = function () {
+            this.observeMapRendering();
+            this.observeCenter();
+        };
+        MapStateService.prototype.observeMapRendering = function () {
             var _this = this;
-            this.postboy.subscribe(MapRenderedEvent.ID).subscribe(function (ev) {
+            this.postboy
+                .subscribe(MapRenderedEvent.ID)
+                .pipe(operators.first())
+                .subscribe(function (ev) {
                 var _a;
                 _this.map = ev.map;
                 (_a = _this.map) === null || _a === void 0 ? void 0 : _a.on('moveend', function () {
@@ -1332,6 +1420,15 @@
                 });
             });
         };
+        MapStateService.prototype.observeCenter = function () {
+            var _this = this;
+            this.postboy.subscribe(SetMapCenterCommand.ID).subscribe(function (c) {
+                var _a, _b;
+                (_a = _this.map) === null || _a === void 0 ? void 0 : _a.getView().setCenter([c.lng, c.lat]);
+                if (c.zoom)
+                    (_b = _this.map) === null || _b === void 0 ? void 0 : _b.getView().setZoom(c.zoom);
+            });
+        };
         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 });
@@ -1614,16 +1711,55 @@
                 type: i0.Injectable
             }], ctorParameters: function () { return [{ type: MapPostboyService }]; } });
 
+    var ControlsService = /** @class */ (function () {
+        function ControlsService(postboy) {
+            this.postboy = postboy;
+        }
+        ControlsService.prototype.up = function () {
+            this.observeMapRender();
+        };
+        ControlsService.prototype.observeMapRender = function () {
+            var _this = this;
+            this.postboy
+                .subscribe(MapRenderedEvent.ID)
+                .pipe(operators.first())
+                .subscribe(function (m) {
+                _this.map = m.map;
+                _this.observeAdding();
+                _this.observeRemoving();
+            });
+        };
+        ControlsService.prototype.observeAdding = function () {
+            var _this = this;
+            this.postboy.subscribe(AddControlCommand.ID).subscribe(function (c) { var _a; return (_a = _this.map) === null || _a === void 0 ? void 0 : _a.addControl(c.item); });
+        };
+        ControlsService.prototype.observeRemoving = function () {
+            var _this = this;
+            this.postboy
+                .subscribe(RemoveControlCommand.ID)
+                .subscribe(function (c) { var _a; return (_a = _this.map) === null || _a === void 0 ? void 0 : _a.removeControl(c.item); });
+        };
+        return ControlsService;
+    }());
+    ControlsService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ControlsService, deps: [{ token: MapPostboyService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    ControlsService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ControlsService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ControlsService, decorators: [{
+                type: i0.Injectable
+            }], ctorParameters: function () { return [{ type: MapPostboyService }]; } });
+
     var MessageRegistratorService = /** @class */ (function (_super) {
         __extends(MessageRegistratorService, _super);
-        function MessageRegistratorService(service, management, state, mapFeature, interaction, drawing, featureModification) {
+        function MessageRegistratorService(service, management, state, mapFeature, interaction, drawing, featureModification, controls) {
             var _this = _super.call(this, service) || this;
-            _this.registerServices([management, state, interaction, mapFeature, drawing, featureModification]);
+            _this.registerServices([management, state, interaction, mapFeature, drawing, featureModification, controls]);
             return _this;
         }
         MessageRegistratorService.prototype._up = function () {
             this.registerReplay(MapRenderedEvent.ID);
             this.registerReplay(PlaceLayerFeaturesCommand.ID);
+            this.registerReplay(RemoveControlCommand.ID);
+            this.registerReplay(AddControlCommand.ID);
+            this.registerReplay(SetMapCenterCommand.ID);
             this.registerSubject(AddLayerCommand.ID);
             this.registerSubject(RemoveLayerCommand.ID);
             this.registerSubject(AddTileCommand.ID);
@@ -1649,11 +1785,11 @@
         };
         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: MapFeatureService }, { token: MapClickService }, { token: DrawingService }, { token: FeatureModificationService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    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: MapFeatureService }, { token: MapClickService }, { token: DrawingService }, { token: FeatureModificationService }, { token: ControlsService }], 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: MapFeatureService }, { type: MapClickService }, { type: DrawingService }, { type: FeatureModificationService }]; } });
+            }], ctorParameters: function () { return [{ type: MapPostboyService }, { type: MapManagementService }, { type: MapStateService }, { type: MapFeatureService }, { type: MapClickService }, { type: DrawingService }, { type: FeatureModificationService }, { type: ControlsService }]; } });
 
     var TileLayerSettings = /** @class */ (function () {
         function TileLayerSettings() {
@@ -1871,13 +2007,32 @@
                     type: i0.Input
                 }] } });
 
+    /**
+     * A layer that is responsible for showing and styling main features on the map, such as markers and polygons
+     */
     var FeatureLayerSettings = /** @class */ (function () {
         function FeatureLayerSettings() {
+            /**
+             * The identifier of the field, it is autogenerated by default, but can be set manually
+             */
             this.name = IdGenerator.get();
+            /**
+             * The priority of showing - layers with higher zIndex cover others in case of collisions
+             */
             this.zIndex = 1;
+            /**
+             * The maximum zoom at which the layer is visible. 19 by default
+             */
             this.maxZoom = 19;
+            /**
+             * The minimum zoom at which the layer is visible. 0 by default
+             */
             this.minZoom = 0;
         }
+        /**
+         * Creates a clone of the existing settings
+         * @param model
+         */
         FeatureLayerSettings.copy = function (model) {
             var result = new FeatureLayerSettings();
             result.name = model.name;
@@ -1887,21 +2042,45 @@
             result.style = model.style;
             return result;
         };
+        /**
+         Setter for {@link FeatureLayerSettings.zIndex}
+         * @param zIndex
+         */
         FeatureLayerSettings.prototype.setZIndex = function (zIndex) {
             return FeatureLayerSettings.copy(Object.assign(Object.assign({}, this), { zIndex: zIndex }));
         };
+        /**
+         * Setter for {@link FeatureLayerSettings.name}
+         * @param name
+         */
         FeatureLayerSettings.prototype.setName = function (name) {
             return FeatureLayerSettings.copy(Object.assign(Object.assign({}, this), { name: name }));
         };
+        /**
+         * Setter for {@link FeatureLayerSettings.maxZoom}
+         * @param maxZoom
+         */
         FeatureLayerSettings.prototype.setMaxZoom = function (maxZoom) {
             return FeatureLayerSettings.copy(Object.assign(Object.assign({}, this), { maxZoom: maxZoom }));
         };
+        /**
+         * Setter for {@link FeatureLayerSettings.minZoom}
+         * @param minZoom
+         */
         FeatureLayerSettings.prototype.setMinZoom = function (minZoom) {
             return FeatureLayerSettings.copy(Object.assign(Object.assign({}, this), { minZoom: minZoom }));
         };
+        /**
+         * Setter for {@link FeatureLayerSettings.style}
+         * @param style
+         */
         FeatureLayerSettings.prototype.setStyle = function (style) {
             return FeatureLayerSettings.copy(Object.assign(Object.assign({}, this), { style: style }));
         };
+        /**
+         * Checks if the model has the same content
+         * @param model - the object to compare
+         */
         FeatureLayerSettings.prototype.isSame = function (model) {
             if (this.maxZoom !== model.maxZoom)
                 return false;
@@ -2296,6 +2475,7 @@
             DrawingGenerationService,
             FeatureService,
             FeatureModificationService,
+            ControlsService,
         ], usesInheritance: true, ngImport: i0__namespace, 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{position:relative;display:flex;flex-direction:column;height:100%}\n"], components: [{ type: OsmTileLayerComponent, selector: "art-osm-tile-layer", inputs: ["url", "map"] }, { type: FeatureLayerComponent, selector: "art-feature-layer", inputs: ["settings"] }], directives: [{ type: i6__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,
@@ -2314,6 +2494,7 @@
                             DrawingGenerationService,
                             FeatureService,
                             FeatureModificationService,
+                            ControlsService,
                         ],
                     }]
             }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: MapPostboyService }, { type: MapPlateFactory }, { type: MessageRegistratorService }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { settings: [{
@@ -2331,7 +2512,7 @@
         }
         Object.defineProperty(MarkersComponent.prototype, "markers", {
             set: function (value) {
-                this._markers = value;
+                this._markers = value !== null && value !== void 0 ? value : [];
                 this.putMarkers();
             },
             enumerable: false,
@@ -2345,8 +2526,7 @@
                 .subscribe(function () { return _this.putMarkers(); });
         };
         MarkersComponent.prototype.putMarkers = function () {
-            var _a;
-            if (!((_a = this._markers) === null || _a === void 0 ? void 0 : _a.length))
+            if (!this._markers)
                 return;
             this.postboy.fire(new PlaceLayerFeaturesCommand(this.layerName, this._markers.map(function (m) { return m.feature; })));
         };
@@ -2494,7 +2674,7 @@
         }
         Object.defineProperty(PolygonsComponent.prototype, "polygons", {
             set: function (value) {
-                this._polygons = value;
+                this._polygons = value !== null && value !== void 0 ? value : [];
                 this.putPolygons();
             },
             enumerable: false,
@@ -2832,6 +3012,7 @@
      * Generated bundle index. Do not edit.
      */
 
+    exports.AddControlCommand = AddControlCommand;
     exports.CancelDrawingCommand = CancelDrawingCommand;
     exports.CancelFeatureModificationCommand = CancelFeatureModificationCommand;
     exports.CloseTooltipCommand = CloseTooltipCommand;
@@ -2842,6 +3023,7 @@
     exports.FeatureLayerComponent = FeatureLayerComponent;
     exports.FeatureLayerSettings = FeatureLayerSettings;
     exports.MapClickEvent = MapClickEvent;
+    exports.MapControl = MapControl;
     exports.MapControlZoomComponent = MapControlZoomComponent;
     exports.MapLyrsLabel = MapLyrsLabel;
     exports.MapModule = MapModule;
@@ -2859,6 +3041,8 @@
     exports.PolygonModel = PolygonModel;
     exports.PolygonStyleHelper = PolygonStyleHelper;
     exports.PolygonsComponent = PolygonsComponent;
+    exports.RemoveControlCommand = RemoveControlCommand;
+    exports.SetMapCenterCommand = SetMapCenterCommand;
     exports.StartDrawingCommand = StartDrawingCommand;
     exports.StringifyFeatureHelper = StringifyFeatureHelper;
     exports.TextStyleHelper = TextStyleHelper;