@igo2/geo 1.13.2 → 1.13.3

package/fesm2020/igo2-geo.mjs

@@ -116,7 +116,7 @@ import * as i14 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
 import * as i7$2 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
-import * as i15$1 from '@angular/material/slide-toggle';
+import * as i23 from '@angular/material/slide-toggle';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import * as i13$1 from '@angular/material/slider';
 import { MatSliderModule, MatSlider } from '@angular/material/slider';
@@ -2991,6 +2991,7 @@ class WMSDataSource extends DataSource {
         }
         const filterQueryString = ogcFilterWriter.handleOgcFiltersAppliedValue(options, fieldNameGeometry);
         sourceParams.FILTER = filterQueryString;
+        this.ol.updateParams({ 'FILTER': sourceParams.FILTER });
         this.setOgcFilters(initOgcFilters, true);
         const timeFilterableDataSourceOptions = options;
         if (timeFilterableDataSourceOptions?.timeFilterable &&
@@ -8289,7 +8290,7 @@ class IgoMap {
     }
 }
 
-const _c0$l = ["*"];
+const _c0$m = ["*"];
 class MapBrowserComponent {
     constructor(activityService) {
         this.activityService = activityService;
@@ -8335,7 +8336,7 @@ class MapBrowserComponent {
     }
 }
 MapBrowserComponent.ɵfac = function MapBrowserComponent_Factory(t) { return new (t || MapBrowserComponent)(i0.ɵɵdirectiveInject(i2$1.ActivityService)); };
-MapBrowserComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MapBrowserComponent, selectors: [["igo-map-browser"]], inputs: { map: "map", view: "view" }, ngContentSelectors: _c0$l, decls: 2, vars: 1, consts: [[1, "igo-map-browser-target", 3, "id"]], template: function MapBrowserComponent_Template(rf, ctx) { if (rf & 1) {
+MapBrowserComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MapBrowserComponent, selectors: [["igo-map-browser"]], inputs: { map: "map", view: "view" }, ngContentSelectors: _c0$m, decls: 2, vars: 1, consts: [[1, "igo-map-browser-target", 3, "id"]], template: function MapBrowserComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵprojectionDef();
         i0.ɵɵelement(0, "div", 0);
         i0.ɵɵprojection(1);
@@ -9154,7 +9155,7 @@ function computeProjectionsConstraints(projectionsLimitations) {
     return projectionsConstraints;
 }
 
-const _c0$k = function (a0) { return { zoom: a0 }; };
+const _c0$l = function (a0) { return { zoom: a0 }; };
 class ZoomButtonComponent {
     constructor() { }
     get zoom() { return this.map.viewController.getZoom(); }
@@ -9175,9 +9176,9 @@ ZoomButtonComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ZoomBut
         i0.ɵɵelementEnd()();
     } if (rf & 2) {
         i0.ɵɵadvance(1);
-        i0.ɵɵproperty("matTooltip", i0.ɵɵpipeBind2(2, 6, "igo.geo.mapButtons.zoomIn", i0.ɵɵpureFunction1(12, _c0$k, ctx.zoom + 1)))("color", ctx.color)("disabled", ctx.zoom >= ctx.maxZoom);
+        i0.ɵɵproperty("matTooltip", i0.ɵɵpipeBind2(2, 6, "igo.geo.mapButtons.zoomIn", i0.ɵɵpureFunction1(12, _c0$l, ctx.zoom + 1)))("color", ctx.color)("disabled", ctx.zoom >= ctx.maxZoom);
         i0.ɵɵadvance(3);
-        i0.ɵɵproperty("matTooltip", i0.ɵɵpipeBind2(5, 9, "igo.geo.mapButtons.zoomOut", i0.ɵɵpureFunction1(14, _c0$k, ctx.zoom - 1)))("color", ctx.color)("disabled", ctx.zoom <= ctx.minZoom);
+        i0.ɵɵproperty("matTooltip", i0.ɵɵpipeBind2(5, 9, "igo.geo.mapButtons.zoomOut", i0.ɵɵpureFunction1(14, _c0$l, ctx.zoom - 1)))("color", ctx.color)("disabled", ctx.zoom <= ctx.minZoom);
     } }, dependencies: [i2.MatIcon, i3.MatButton, i4.MatTooltip, i7.TranslatePipe], styles: [".igo-zoom-button-container[_ngcontent-%COMP%]{width:40px}.igo-zoom-button-container[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]{background-color:#fff}.igo-zoom-button-container[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:hover{background-color:#efefef}.igo-zoom-button-container[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:first-child{margin-bottom:2px}button[_ngcontent-%COMP%], [_nghost-%COMP%]     button .mat-button-ripple-round{border-radius:0}"] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ZoomButtonComponent, [{
         type: Component,
@@ -9367,7 +9368,7 @@ HomeExtentButtonComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: H
             type: Input
         }] }); })();
 
-const _c0$j = function (a0) { return [a0]; };
+const _c0$k = function (a0) { return [a0]; };
 function OfflineButtonComponent_div_0_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 1)(1, "div")(2, "button", 2);
@@ -9379,7 +9380,7 @@ function OfflineButtonComponent_div_0_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("matTooltip", ctx_r0.checked ? i0.ɵɵpipeBind1(3, 3, "igo.geo.mapButtons.online") : i0.ɵɵpipeBind1(4, 5, "igo.geo.mapButtons.offline"))("ngClass", i0.ɵɵpureFunction1(7, _c0$j, ctx_r0.btnStyle))("color", ctx_r0.checked ? ctx_r0.color : i0.ɵɵpureFunction1(9, _c0$j, ctx_r0.colorOff));
+    i0.ɵɵproperty("matTooltip", ctx_r0.checked ? i0.ɵɵpipeBind1(3, 3, "igo.geo.mapButtons.online") : i0.ɵɵpipeBind1(4, 5, "igo.geo.mapButtons.offline"))("ngClass", i0.ɵɵpureFunction1(7, _c0$k, ctx_r0.btnStyle))("color", ctx_r0.checked ? ctx_r0.color : i0.ɵɵpureFunction1(9, _c0$k, ctx_r0.colorOff));
 } }
 class OfflineButtonComponent {
     constructor(config) {
@@ -9575,7 +9576,7 @@ function BaseLayersSwitcherComponent_div_0_igo_mini_basemap_2_Template(rf, ctx)
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("map", ctx_r2.map)("baseLayer", baseLayer_r3)("title", ctx_r2.baseLayers.length > 2 && !ctx_r2.expand ? i0.ɵɵpipeBind1(1, 5, "igo.geo.baselayersSwitcher.title") : baseLayer_r3.title)("display", ctx_r2.expand || i_r4 === 0 && !ctx_r2.useStaticIcon)("disabled", !ctx_r2.expand && ctx_r2.baseLayers.length > 1);
 } }
-const _c0$i = function (a0) { return { "container-expand": a0 }; };
+const _c0$j = function (a0) { return { "container-expand": a0 }; };
 function BaseLayersSwitcherComponent_div_0_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 1);
@@ -9587,7 +9588,7 @@ function BaseLayersSwitcherComponent_div_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(4, _c0$i, ctx_r0.expand))("@baseLayerSwitcherState", ctx_r0.expand ? "expand" : ctx_r0.useStaticIcon ? "collapseIcon" : "collapseMap");
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(4, _c0$j, ctx_r0.expand))("@baseLayerSwitcherState", ctx_r0.expand ? "expand" : ctx_r0.useStaticIcon ? "collapseIcon" : "collapseMap");
     i0.ɵɵadvance(1);
     i0.ɵɵproperty("ngIf", ctx_r0.useStaticIcon && !ctx_r0.expand && ctx_r0.showButton);
     i0.ɵɵadvance(1);
@@ -10170,7 +10171,7 @@ MiniBaseMapComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MiniBa
             type: Input
         }] }); })();
 
-const _c0$h = function (a0, a1) { return { azimuth: a0, rotation: a1 }; };
+const _c0$i = function (a0, a1) { return { azimuth: a0, rotation: a1 }; };
 function RotationButtonComponent_div_0_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 1);
@@ -10185,7 +10186,7 @@ function RotationButtonComponent_div_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("matTooltip", i0.ɵɵpipeBind1(1, 4, ctx_r0.rotated$) ? i0.ɵɵpipeBind2(2, 6, "igo.geo.mapButtons.resetRotation", i0.ɵɵpureFunction2(15, _c0$h, ctx_r0.azimuthRounded, ctx_r0.rotationRounded)) : i0.ɵɵpipeBind1(3, 9, "igo.geo.mapButtons.tipRotation"));
+    i0.ɵɵproperty("matTooltip", i0.ɵɵpipeBind1(1, 4, ctx_r0.rotated$) ? i0.ɵɵpipeBind2(2, 6, "igo.geo.mapButtons.resetRotation", i0.ɵɵpureFunction2(15, _c0$i, ctx_r0.azimuthRounded, ctx_r0.rotationRounded)) : i0.ɵɵpipeBind1(3, 9, "igo.geo.mapButtons.tipRotation"));
     i0.ɵɵadvance(4);
     i0.ɵɵproperty("color", ctx_r0.color)("disabled", i0.ɵɵpipeBind1(5, 11, ctx_r0.rotated$) === false);
     i0.ɵɵadvance(2);
@@ -12624,7 +12625,7 @@ CatalogBrowserComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Cat
             type: Input
         }] }); })();
 
-const _c0$g = ["renderedLegend"];
+const _c0$h = ["renderedLegend"];
 function LayerLegendComponent_ng_container_0_ng_container_1_ng_container_1_div_2_mat_list_item_1_Template(rf, ctx) { if (rf & 1) {
     const _r15 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "mat-list-item")(1, "mat-icon", 7);
@@ -12971,7 +12972,7 @@ class LayerLegendComponent {
 }
 LayerLegendComponent.ɵfac = function LayerLegendComponent_Factory(t) { return new (t || LayerLegendComponent)(i0.ɵɵdirectiveInject(CapabilitiesService), i0.ɵɵdirectiveInject(i2$1.LanguageService), i0.ɵɵdirectiveInject(i2$1.ConfigService), i0.ɵɵdirectiveInject(i1$2.HttpClient), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
 LayerLegendComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LayerLegendComponent, selectors: [["igo-layer-legend"]], viewQuery: function LayerLegendComponent_Query(rf, ctx) { if (rf & 1) {
-        i0.ɵɵviewQuery(_c0$g, 5);
+        i0.ɵɵviewQuery(_c0$h, 5);
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.renderedLegends = _t);
@@ -13557,7 +13558,7 @@ function LayerItemComponent_mat_checkbox_1_Template(rf, ctx) { if (rf & 1) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("checked", ctx_r0.layerCheck);
 } }
-const _c0$f = function (a0) { return { disabled: a0 }; };
+const _c0$g = function (a0) { return { disabled: a0 }; };
 function LayerItemComponent_button_4_Template(rf, ctx) { if (rf & 1) {
     const _r9 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 10);
@@ -13572,7 +13573,7 @@ function LayerItemComponent_button_4_Template(rf, ctx) { if (rf & 1) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵproperty("color", ctx_r1.layer.visible ? "primary" : "default")("matTooltip", i0.ɵɵpipeBind1(1, 5, ctx_r1.eyeTooltip));
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("matBadgeHidden", i0.ɵɵpipeBind1(3, 7, ctx_r1.queryBadgeHidden$))("ngClass", i0.ɵɵpureFunction1(13, _c0$f, i0.ɵɵpipeBind1(4, 9, ctx_r1.inResolutionRange$) === false))("svgIcon", i0.ɵɵpipeBind1(5, 11, ctx_r1.layer.visible$) ? "eye" : "eye-off");
+    i0.ɵɵproperty("matBadgeHidden", i0.ɵɵpipeBind1(3, 7, ctx_r1.queryBadgeHidden$))("ngClass", i0.ɵɵpureFunction1(13, _c0$g, i0.ɵɵpipeBind1(4, 9, ctx_r1.inResolutionRange$) === false))("svgIcon", i0.ɵɵpipeBind1(5, 11, ctx_r1.layer.visible$) ? "eye" : "eye-off");
 } }
 function LayerItemComponent_button_5_Template(rf, ctx) { if (rf & 1) {
     const _r11 = i0.ɵɵgetCurrentView();
@@ -13588,7 +13589,7 @@ function LayerItemComponent_button_5_Template(rf, ctx) { if (rf & 1) {
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵproperty("color", ctx_r2.layer.visible ? "primary" : "default")("matTooltip", ctx_r2.layer.visible ? i0.ɵɵpipeBind1(1, 5, "igo.geo.layer.hideLayer") : i0.ɵɵpipeBind1(2, 7, "igo.geo.layer.showLayer"));
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("matBadgeHidden", i0.ɵɵpipeBind1(4, 9, ctx_r2.queryBadgeHidden$))("ngClass", i0.ɵɵpureFunction1(13, _c0$f, i0.ɵɵpipeBind1(5, 11, ctx_r2.inResolutionRange$) === false))("svgIcon", ctx_r2.layer.visible ? "eye" : "eye-off");
+    i0.ɵɵproperty("matBadgeHidden", i0.ɵɵpipeBind1(4, 9, ctx_r2.queryBadgeHidden$))("ngClass", i0.ɵɵpureFunction1(13, _c0$g, i0.ɵɵpipeBind1(5, 11, ctx_r2.inResolutionRange$) === false))("svgIcon", ctx_r2.layer.visible ? "eye" : "eye-off");
 } }
 function LayerItemComponent_button_6_Template(rf, ctx) { if (rf & 1) {
     const _r13 = i0.ɵɵgetCurrentView();
@@ -13861,7 +13862,7 @@ var LayerListDisplacement;
     LayerListDisplacement["Lower"] = "lower";
 })(LayerListDisplacement || (LayerListDisplacement = {}));
 
-const _c0$e = ["igoLayerItemToolbar"];
+const _c0$f = ["igoLayerItemToolbar"];
 function LayerListComponent_igo_layer_list_tool_1_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "igo-layer-list-tool", 6);
@@ -14794,7 +14795,7 @@ class LayerListComponent {
 }
 LayerListComponent.ɵfac = function LayerListComponent_Factory(t) { return new (t || LayerListComponent)(i0.ɵɵdirectiveInject(i0.ElementRef)); };
 LayerListComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LayerListComponent, selectors: [["igo-layer-list"]], contentQueries: function LayerListComponent_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
-        i0.ɵɵcontentQuery(dirIndex, _c0$e, 5);
+        i0.ɵɵcontentQuery(dirIndex, _c0$f, 5);
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.templateLayerToolbar = _t.first);
@@ -16316,7 +16317,7 @@ function FeatureDetailsComponent_table_0_tr_2_td_4_Template(rf, ctx) { if (rf &
     const property_r3 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵproperty("innerHTML", property_r3.value, i0.ɵɵsanitizeHtml);
 } }
-const _c0$d = function () { return { "cursor": "pointer", "color": "blue" }; };
+const _c0$e = function () { return { "cursor": "pointer", "color": "blue" }; };
 function FeatureDetailsComponent_table_0_tr_2_td_5_Template(rf, ctx) { if (rf & 1) {
     const _r20 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "td")(1, "u", 13);
@@ -16327,7 +16328,7 @@ function FeatureDetailsComponent_table_0_tr_2_td_5_Template(rf, ctx) { if (rf &
     const property_r3 = i0.ɵɵnextContext().$implicit;
     const ctx_r8 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction0(2, _c0$d));
+    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction0(2, _c0$e));
     i0.ɵɵadvance(1);
     i0.ɵɵtextInterpolate(ctx_r8.getEmbeddedLinkText(property_r3.value));
 } }
@@ -16344,7 +16345,7 @@ function FeatureDetailsComponent_table_0_tr_2_td_6_Template(rf, ctx) { if (rf &
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction0(4, _c0$d));
+    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction0(4, _c0$e));
     i0.ɵɵadvance(1);
     i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(3, 2, "igo.geo.targetHtmlUrl"));
 } }
@@ -16418,13 +16419,12 @@ function FeatureDetailsComponent_iframe_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵproperty("srcdoc", ctx_r1.htmlSanitizer(ctx_r1.feature.properties), i0.ɵɵsanitizeHtml)("src", ctx_r1.urlSanitizer(ctx_r1.feature.properties.url), i0.ɵɵsanitizeResourceUrl);
 } }
 class FeatureDetailsComponent {
-    constructor(http, cdRef, sanitizer, networkService, messageService, languageService, configService) {
+    constructor(http, cdRef, sanitizer, networkService, messageService, configService) {
         this.http = http;
         this.cdRef = cdRef;
         this.sanitizer = sanitizer;
         this.networkService = networkService;
         this.messageService = messageService;
-        this.languageService = languageService;
         this.configService = configService;
         this.unsubscribe$ = new Subject();
         this.ready = false;
@@ -16509,14 +16509,17 @@ class FeatureDetailsComponent {
                 window.open(fileUrl, '_blank');
                 this.cdRef.detectChanges();
             }, (error) => {
-                const translate = this.languageService.translate;
-                const title = translate.instant('igo.geo.targetHtmlUrlUnauthorizedTitle');
-                const message = translate.instant('igo.geo.targetHtmlUrlUnauthorized');
-                this.messageService.error(message, title);
+                this.messageService.error('igo.geo.targetHtmlUrlUnauthorized', 'igo.geo.targetHtmlUrlUnauthorizedTitle');
             });
         }
         else {
-            window.open(value, '_blank');
+            let url = value;
+            if (this.isEmbeddedLink(value)) {
+                var div = document.createElement('div');
+                div.innerHTML = value;
+                url = div.children[0].getAttribute('href');
+            }
+            window.open(url, '_blank');
         }
     }
     isUrl(value) {
@@ -16635,7 +16638,7 @@ class FeatureDetailsComponent {
         }
     }
 }
-FeatureDetailsComponent.ɵfac = function FeatureDetailsComponent_Factory(t) { return new (t || FeatureDetailsComponent)(i0.ɵɵdirectiveInject(i1$2.HttpClient), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i2$3.DomSanitizer), i0.ɵɵdirectiveInject(i2$1.NetworkService), i0.ɵɵdirectiveInject(i2$1.MessageService), i0.ɵɵdirectiveInject(i2$1.LanguageService), i0.ɵɵdirectiveInject(i2$1.ConfigService)); };
+FeatureDetailsComponent.ɵfac = function FeatureDetailsComponent_Factory(t) { return new (t || FeatureDetailsComponent)(i0.ɵɵdirectiveInject(i1$2.HttpClient), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i2$3.DomSanitizer), i0.ɵɵdirectiveInject(i2$1.NetworkService), i0.ɵɵdirectiveInject(i2$1.MessageService), i0.ɵɵdirectiveInject(i2$1.ConfigService)); };
 FeatureDetailsComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FeatureDetailsComponent, selectors: [["igo-feature-details"]], inputs: { source: "source", map: "map", toolbox: "toolbox", feature: "feature" }, outputs: { routeEvent: "routeEvent", selectFeature: "selectFeature", htmlDisplayEvent: "htmlDisplayEvent" }, decls: 2, vars: 2, consts: [["class", "igo-striped mat-typography", 4, "ngIf"], [3, "srcdoc", "src", 4, "ngIf"], [1, "igo-striped", "mat-typography"], [4, "ngFor", "ngForOf"], [4, "ngIf"], ["id", "keyValue", 4, "ngIf"], [3, "innerHTML", 4, "ngIf"], ["mat-list-avatar", "", 3, "svgIcon"], ["target", "_blank", "rel", "noopener noreferrer", 3, "href"], ["mat-icon-button", "", 1, "copyClipboard", 3, "click"], ["svgIcon", "content-copy"], ["id", "keyValue"], [3, "innerHTML"], [3, "ngStyle", "click"], ["target", "_blank", "rel", "noopener noreferrer", 3, "href", "click"], ["igoImageError", "", "width", "225", "height", "auto", 3, "src"], [3, "srcdoc", "src"]], template: function FeatureDetailsComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵtemplate(0, FeatureDetailsComponent_table_0_Template, 4, 3, "table", 0);
         i0.ɵɵtemplate(1, FeatureDetailsComponent_iframe_1_Template, 1, 2, "iframe", 1);
@@ -16647,7 +16650,7 @@ FeatureDetailsComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Fea
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FeatureDetailsComponent, [{
         type: Component,
         args: [{ selector: 'igo-feature-details', changeDetection: ChangeDetectionStrategy.OnPush, template: "<table class=\"igo-striped mat-typography\" *ngIf=\"ready && feature && isObject(feature.properties) && feature.properties.target !== 'iframe'\">\r\n  <tbody>\r\n    <tr *ngFor=\"let property of filterFeatureProperties(feature) | keyvalue\">\r\n\r\n      <td *ngIf=\"feature.properties.target === '_blank' && property.key === 'url'\">\r\n        <mat-icon mat-list-avatar svgIcon=\"{{icon}}\"></mat-icon>\r\n      </td>\r\n\r\n      <td *ngIf=\"feature.properties.target === '_blank' && property.key === 'url'\">\r\n        <a href=\"{{property.value}}\" target='_blank' rel=\"noopener noreferrer\"> {{ 'igo.geo.targetHtmlUrl' | translate }} {{title}}</a>\r\n        <button class=\"copyClipboard\" mat-icon-button (click)=\"copyTextToClipboard(property.value)\">\r\n          <mat-icon svgIcon=\"content-copy\"></mat-icon>\r\n        </button>\r\n      </td>\r\n\r\n      <td id=\"keyValue\" *ngIf=\"feature.properties.target === undefined\">\r\n        {{property.key}}\r\n      </td>\r\n\r\n      <td *ngIf=\"feature.properties.target === undefined && !isObject(property.value) && !isUrl(property.value) && !isEmbeddedLink(property.value)\" [innerHTML]=\"property.value\">\r\n      </td>\r\n\r\n      <td *ngIf=\"feature.properties.target === undefined && isEmbeddedLink(property.value)\">\r\n        <u [ngStyle]=\"{'cursor': 'pointer', 'color': 'blue'}\" (click)=\"openSecureUrl(property.value)\">{{ getEmbeddedLinkText(property.value) }}</u>\r\n      </td>\r\n\r\n      <td *ngIf=\"feature.properties.target === undefined && !isObject(property.value) && (isDoc(property.value) || isUrl(property.value)) && !isImg(property.value)\">\r\n        <u [ngStyle]=\"{'cursor': 'pointer', 'color': 'blue'}\" (click)=\"openSecureUrl(property.value)\">{{ 'igo.geo.targetHtmlUrl' | translate }}</u>\r\n        <button class=\"copyClipboard\" mat-icon-button (click)=\"copyTextToClipboard(property.value)\">\r\n          <mat-icon svgIcon=\"content-copy\"></mat-icon>\r\n        </button>\r\n      </td>\r\n\r\n      <td *ngIf=\"feature.properties.target === undefined && !isObject(property.value) && isUrl(property.value) && isImg(property.value)\">\r\n        <a href=\"{{property.value}}\" target='_blank' (click)=\"openSecureUrl(property.value)\" rel=\"noopener noreferrer\">\r\n          <img igoImageError src=\"{{(property.value | secureImage) |\u00A0async}}\" width=\"225\" height=\"auto\">\r\n        </a>\r\n      </td>\r\n\r\n      <td *ngIf=\"feature.properties.target === undefined && isObject(property.value)\" [innerHTML]=\"property.value | json\">\r\n      </td>\r\n\r\n    </tr>\r\n  </tbody>\r\n</table>\r\n\r\n<iframe *ngIf=\"isHtmlDisplay()\" [srcdoc]=\"htmlSanitizer(feature.properties)\" [src]=\"urlSanitizer(feature.properties.url)\"></iframe>\r\n", styles: ["table{width:100%}table td{padding:5px}#keyValue{width:30%}table ::ng-deep .routing{cursor:pointer}iframe{height:calc(100% - 4px);width:100%;border:0}.copyClipboard{border:none;background:transparent;cursor:pointer}\n"] }]
-    }], function () { return [{ type: i1$2.HttpClient }, { type: i0.ChangeDetectorRef }, { type: i2$3.DomSanitizer }, { type: i2$1.NetworkService }, { type: i2$1.MessageService }, { type: i2$1.LanguageService }, { type: i2$1.ConfigService }]; }, { source: [{
+    }], function () { return [{ type: i1$2.HttpClient }, { type: i0.ChangeDetectorRef }, { type: i2$3.DomSanitizer }, { type: i2$1.NetworkService }, { type: i2$1.MessageService }, { type: i2$1.ConfigService }]; }, { source: [{
             type: Input
         }], map: [{
             type: Input
@@ -16663,7 +16666,7 @@ FeatureDetailsComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Fea
             type: Output
         }] }); })();
 
-const _c0$c = ["igoForm"];
+const _c0$d = ["igoForm"];
 const _c1$a = ["*", [["", "formButtons", ""]]];
 const _c2$5 = ["*", "[formButtons]"];
 /**
@@ -16738,7 +16741,7 @@ class FeatureFormComponent {
 }
 FeatureFormComponent.ɵfac = function FeatureFormComponent_Factory(t) { return new (t || FeatureFormComponent)(); };
 FeatureFormComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FeatureFormComponent, selectors: [["igo-feature-form"]], viewQuery: function FeatureFormComponent_Query(rf, ctx) { if (rf & 1) {
-        i0.ɵɵviewQuery(_c0$c, 7);
+        i0.ɵɵviewQuery(_c0$d, 7);
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.igoForm = _t.first);
@@ -17265,83 +17268,156 @@ DrawShorcutsComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DrawS
         args: [{ selector: 'igo-draw-shorcuts', template: "<mat-dialog-content>\r\n  <div>\r\n    <span class=\"shortcut mat-typography\">\r\n      <mat-icon class=\"shortcut-icon\" svgIcon=\"keyboard-return\"></mat-icon>{{'igo.geo.draw.finish' | translate}}</span>\r\n  </div>\r\n  <div>\r\n    <span class=\"shortcut mat-typography\">\r\n      <mat-icon class=\"shortcut-icon\" svgIcon=\"backspace-outline\"></mat-icon>{{'igo.geo.draw.undo' | translate}}</span>\r\n  </div>\r\n  <div>\r\n    <span class=\"shortcut mat-typography\">\r\n      <mat-icon class=\"shortcut-icon\" svgIcon=\"keyboard-esc\"></mat-icon>{{'igo.geo.draw.abort' | translate}}</span>\r\n  </div>\r\n  <div>\r\n    <span class=\"shortcut mat-typography\">\r\n      <mat-icon class=\"shortcut-icon\" svgIcon=\"keyboard-space\"></mat-icon>{{'igo.geo.draw.move' | translate}}</span>\r\n  </div>\r\n</mat-dialog-content>\r\n<mat-dialog-actions class=\"shortcuts-close\">\r\n  <button mat-raised-button mat-dialog-close color=\"primary\">OK</button>\r\n</mat-dialog-actions>", styles: [".shortcut{display:flex;align-items:center}.shortcut-icon{margin-right:10px}.shortcuts-close{display:flex;justify-content:center}\n"] }]
     }], null, null); })();
 
-function DrawComponent_button_23_Template(rf, ctx) { if (rf & 1) {
-    const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 14);
-    i0.ɵɵlistener("click", function DrawComponent_button_23_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r4 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r4.deleteDrawings()); });
+class DrawLayerPopupComponent {
+    constructor(dialogRef) {
+        this.dialogRef = dialogRef;
+        this.confirmFlag = false;
+    }
+    cancelDrawing() {
+        this.dialogRef.close();
+    }
+    confirm(labelString) {
+        this.confirmFlag = true;
+        this.dialogRef.close(labelString);
+    }
+}
+DrawLayerPopupComponent.ɵfac = function DrawLayerPopupComponent_Factory(t) { return new (t || DrawLayerPopupComponent)(i0.ɵɵdirectiveInject(i1.MatDialogRef)); };
+DrawLayerPopupComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DrawLayerPopupComponent, selectors: [["igo-draw-popup-component"]], inputs: { confirmFlag: "confirmFlag" }, decls: 14, vars: 9, consts: [["mat-dialog-content", ""], [1, "mat-typography"], [1, "example-full-width"], ["matInput", "", 3, "placeholder"], ["input", ""], ["mat-dialog-actions", ""], ["mat-raised-button", "", 3, "click"], ["mat-raised-button", "", "color", "primary", 3, "click"]], template: function DrawLayerPopupComponent_Template(rf, ctx) { if (rf & 1) {
+        const _r1 = i0.ɵɵgetCurrentView();
+        i0.ɵɵelementStart(0, "div", 0)(1, "p", 1);
+        i0.ɵɵtext(2);
+        i0.ɵɵpipe(3, "translate");
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(4, "mat-form-field", 2);
+        i0.ɵɵelement(5, "input", 3, 4);
+        i0.ɵɵpipe(7, "translate");
+        i0.ɵɵelementEnd()();
+        i0.ɵɵelementStart(8, "div", 5)(9, "button", 6);
+        i0.ɵɵlistener("click", function DrawLayerPopupComponent_Template_button_click_9_listener() { return ctx.cancelDrawing(); });
+        i0.ɵɵtext(10);
+        i0.ɵɵpipe(11, "translate");
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(12, "button", 7);
+        i0.ɵɵlistener("click", function DrawLayerPopupComponent_Template_button_click_12_listener() { i0.ɵɵrestoreView(_r1); const _r0 = i0.ɵɵreference(6); return i0.ɵɵresetView(ctx.confirm(_r0.value)); });
+        i0.ɵɵtext(13, " OK ");
+        i0.ɵɵelementEnd()();
+    } if (rf & 2) {
+        i0.ɵɵadvance(2);
+        i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(3, 3, "igo.geo.draw.layer.layerDialogInstruction"), " ");
+        i0.ɵɵadvance(3);
+        i0.ɵɵpropertyInterpolate("placeholder", i0.ɵɵpipeBind1(7, 5, "igo.geo.draw.layer.title"));
+        i0.ɵɵadvance(5);
+        i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(11, 7, "igo.geo.draw.cancel"), " ");
+    } }, dependencies: [i3.MatButton, i13.MatFormField, i14.MatInput, i1.MatDialogContent, i1.MatDialogActions, i7.TranslatePipe] });
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DrawLayerPopupComponent, [{
+        type: Component,
+        args: [{ selector: 'igo-draw-popup-component', template: "<div mat-dialog-content>\r\n  <p class=\"mat-typography\">\r\n    {{ 'igo.geo.draw.layer.layerDialogInstruction' | translate }}\r\n  </p>\r\n  <mat-form-field class=\"example-full-width\">\r\n    <input\r\n      #input\r\n      matInput\r\n      placeholder=\"{{ 'igo.geo.draw.layer.title' | translate }}\"\r\n      />\r\n  </mat-form-field>\r\n</div>\r\n<div mat-dialog-actions>\r\n  <button mat-raised-button (click)=\"cancelDrawing()\">\r\n    {{ 'igo.geo.draw.cancel' | translate }}\r\n  </button>\r\n  <button mat-raised-button color=\"primary\" (click)=\"confirm(input.value)\">\r\n    OK\r\n  </button>\r\n</div>\r\n" }]
+    }], function () { return [{ type: i1.MatDialogRef }]; }, { confirmFlag: [{
+            type: Input
+        }] }); })();
+
+const _c0$c = ["selectedLayer"];
+function DrawComponent_mat_option_30_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "mat-option", 2);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const layer_r7 = ctx.$implicit;
+    i0.ɵɵproperty("value", layer_r7);
+    i0.ɵɵadvance(1);
+    i0.ɵɵtextInterpolate1(" ", layer_r7.title, " ");
+} }
+function DrawComponent_button_34_Template(rf, ctx) { if (rf & 1) {
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 20);
+    i0.ɵɵlistener("click", function DrawComponent_button_34_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r9); const ctx_r8 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r8.activeDrawingLayer.visible = !ctx_r8.activeDrawingLayer.visible); });
+    i0.ɵɵpipe(1, "translate");
+    i0.ɵɵpipe(2, "translate");
+    i0.ɵɵelement(3, "mat-icon", 21);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("color", ctx_r2.activeDrawingLayer.visible ? "primary" : "default")("matTooltip", ctx_r2.activeDrawingLayer.visible ? i0.ɵɵpipeBind1(1, 3, "igo.geo.layer.hideLayer") : i0.ɵɵpipeBind1(2, 5, "igo.geo.layer.showLayer"));
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("svgIcon", ctx_r2.activeDrawingLayer.visible ? "eye" : "eye-off");
+} }
+function DrawComponent_button_37_Template(rf, ctx) { if (rf & 1) {
+    const _r11 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 22);
+    i0.ɵɵlistener("click", function DrawComponent_button_37_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r11); const ctx_r10 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r10.deleteDrawings()); });
     i0.ɵɵpipe(1, "translate");
     i0.ɵɵpipe(2, "async");
-    i0.ɵɵelement(3, "mat-icon", 15);
+    i0.ɵɵelement(3, "mat-icon", 23);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("matTooltip", i0.ɵɵpipeBind1(1, 2, "igo.geo.draw.delete"))("disabled", i0.ɵɵpipeBind1(2, 4, ctx_r0.selectedFeatures$).length === 0);
+    const ctx_r3 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("matTooltip", i0.ɵɵpipeBind1(1, 2, "igo.geo.draw.delete"))("disabled", i0.ɵɵpipeBind1(2, 4, ctx_r3.selectedFeatures$).length === 0);
 } }
-function DrawComponent_mat_form_field_28_div_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 19);
-    i0.ɵɵelement(1, "img", 20);
+function DrawComponent_mat_form_field_42_div_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 27);
+    i0.ɵɵelement(1, "img", 28);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r6 = i0.ɵɵnextContext(2);
+    const ctx_r12 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(1);
-    i0.ɵɵpropertyInterpolate("src", ctx_r6.icon, i0.ɵɵsanitizeUrl);
+    i0.ɵɵpropertyInterpolate("src", ctx_r12.icon, i0.ɵɵsanitizeUrl);
 } }
-function DrawComponent_mat_form_field_28_mat_option_10_Template(rf, ctx) { if (rf & 1) {
-    const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mat-option", 21);
-    i0.ɵɵlistener("click", function DrawComponent_mat_form_field_28_mat_option_10_Template_mat_option_click_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r10); const icon_html_r8 = restoredCtx.$implicit; const ctx_r9 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r9.onIconChange(icon_html_r8)); });
-    i0.ɵɵelementStart(1, "div", 19);
-    i0.ɵɵelement(2, "img", 20);
+function DrawComponent_mat_form_field_42_mat_option_10_Template(rf, ctx) { if (rf & 1) {
+    const _r16 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mat-option", 29);
+    i0.ɵɵlistener("click", function DrawComponent_mat_form_field_42_mat_option_10_Template_mat_option_click_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r16); const icon_html_r14 = restoredCtx.$implicit; const ctx_r15 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r15.onIconChange(icon_html_r14)); });
+    i0.ɵɵelementStart(1, "div", 27);
+    i0.ɵɵelement(2, "img", 28);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const icon_html_r8 = ctx.$implicit;
-    i0.ɵɵproperty("value", icon_html_r8);
+    const icon_html_r14 = ctx.$implicit;
+    i0.ɵɵproperty("value", icon_html_r14);
     i0.ɵɵadvance(2);
-    i0.ɵɵpropertyInterpolate("src", icon_html_r8, i0.ɵɵsanitizeUrl);
+    i0.ɵɵpropertyInterpolate("src", icon_html_r14, i0.ɵɵsanitizeUrl);
 } }
-function DrawComponent_mat_form_field_28_Template(rf, ctx) { if (rf & 1) {
-    const _r12 = i0.ɵɵgetCurrentView();
+function DrawComponent_mat_form_field_42_Template(rf, ctx) { if (rf & 1) {
+    const _r18 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "mat-form-field")(1, "mat-label");
     i0.ɵɵtext(2);
     i0.ɵɵpipe(3, "translate");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(4, "mat-select")(5, "mat-select-trigger");
-    i0.ɵɵtemplate(6, DrawComponent_mat_form_field_28_div_6_Template, 2, 1, "div", 16);
+    i0.ɵɵtemplate(6, DrawComponent_mat_form_field_42_div_6_Template, 2, 1, "div", 24);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "mat-option", 17);
-    i0.ɵɵlistener("click", function DrawComponent_mat_form_field_28_Template_mat_option_click_7_listener() { i0.ɵɵrestoreView(_r12); const ctx_r11 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r11.onIconChange()); });
+    i0.ɵɵelementStart(7, "mat-option", 25);
+    i0.ɵɵlistener("click", function DrawComponent_mat_form_field_42_Template_mat_option_click_7_listener() { i0.ɵɵrestoreView(_r18); const ctx_r17 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r17.onIconChange()); });
     i0.ɵɵtext(8);
     i0.ɵɵpipe(9, "translate");
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(10, DrawComponent_mat_form_field_28_mat_option_10_Template, 3, 2, "mat-option", 18);
+    i0.ɵɵtemplate(10, DrawComponent_mat_form_field_42_mat_option_10_Template, 3, 2, "mat-option", 26);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext();
+    const ctx_r5 = i0.ɵɵnextContext();
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(3, 4, "igo.geo.draw.icon"));
     i0.ɵɵadvance(4);
-    i0.ɵɵproperty("ngIf", ctx_r2.icon);
+    i0.ɵɵproperty("ngIf", ctx_r5.icon);
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(9, 6, "igo.geo.draw.noIcon"));
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngForOf", ctx_r2.icons);
+    i0.ɵɵproperty("ngForOf", ctx_r5.icons);
 } }
-function DrawComponent_button_32_Template(rf, ctx) { if (rf & 1) {
-    const _r14 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 22);
-    i0.ɵɵlistener("click", function DrawComponent_button_32_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r14); const ctx_r13 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r13.openStyleModalDialog()); });
+function DrawComponent_button_46_Template(rf, ctx) { if (rf & 1) {
+    const _r20 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 30);
+    i0.ɵɵlistener("click", function DrawComponent_button_46_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r20); const ctx_r19 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r19.openStyleModalDialog()); });
     i0.ɵɵpipe(1, "translate");
     i0.ɵɵtext(2);
     i0.ɵɵpipe(3, "translate");
-    i0.ɵɵelement(4, "mat-icon", 23);
+    i0.ɵɵelement(4, "mat-icon", 31);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r3 = i0.ɵɵnextContext();
+    const ctx_r6 = i0.ɵɵnextContext();
     i0.ɵɵproperty("matTooltip", i0.ɵɵpipeBind1(1, 3, "igo.geo.layer.style.styleModalTooltip"));
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(3, 5, "igo.geo.layer.style.styleModal"), " ");
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("matBadge", ctx_r3.selectedFeatures$.value.length);
+    i0.ɵɵproperty("matBadge", ctx_r6.selectedFeatures$.value.length);
 } }
 class DrawComponent {
     constructor(languageService, formBuilder, drawStyleService, dialog, drawIconService) {
@@ -17373,13 +17449,21 @@ class DrawComponent {
             ]
         };
         this.geometryType = GeometryType; // Reference to the GeometryType enum
+        this._stores = [];
+        this._drawControls = [];
+        this.activeLayerChange = new EventEmitter();
+        this.drawControlsEvent = new EventEmitter();
+        this.layersIDEvent = new EventEmitter();
+        this.layerCounterID = 0;
         this.draw$ = new BehaviorSubject({}); // Observable of draw
-        this.olDrawingLayerSource = new OlVectorSource();
+        this.activeDrawingLayerSource = new OlVectorSource();
         this.selectedFeatures$ = new BehaviorSubject([]);
         this.drawControlIsDisabled = true;
         this.drawControlIsActive = false;
         this.subscriptions$$ = [];
         this.position = 'bottom';
+        this.isCreatingNewLayer = false;
+        this.currGeometryType = this.geometryType.Point;
         this.buildForm();
         this.fillColor = this.drawStyleService.getFillColor();
         this.strokeColor = this.drawStyleService.getStrokeColor();
@@ -17390,19 +17474,85 @@ class DrawComponent {
         this.fontSize = this.drawStyleService.getFontSize();
         this.fontStyle = this.drawStyleService.getFontStyle();
     }
+    get stores() {
+        return this._stores;
+    }
+    set stores(value) {
+        this._stores = value;
+    }
+    get drawControls() {
+        return this._drawControls;
+    }
+    set drawControls(value) {
+        this._drawControls = value;
+    }
+    get activeDrawingLayer() {
+        return this._activeDrawingLayer;
+    }
+    set activeDrawingLayer(value) {
+        this._activeDrawingLayer = value;
+    }
     // Initialize the store that will contain the entities and create the Draw control
     ngOnInit() {
-        this.initStore();
-        this.drawControl = this.createDrawControl(this.fillColor, this.strokeColor, this.strokeWidth);
-        this.drawControl.setGeometryType(this.geometryType.Point);
-        this.toggleDrawControl();
+        if (!this.stores.length) {
+            this.activeStore = new FeatureStore([], {
+                map: this.map
+            });
+            this.initStore();
+            this.activeDrawControl = this.createDrawControl(this.fillColor, this.strokeColor, this.strokeWidth);
+            this.activeDrawControl.setGeometryType(this.geometryType.Point);
+            this.toggleDrawControl();
+            this.stores.push(this.activeStore);
+            this.drawControls.push([this.activeDrawingLayer.id, this.activeDrawControl]);
+            this.drawControlsEvent.emit(this.drawControls);
+            this.layersIDEvent.emit(this.activeDrawingLayer.id);
+            this.onLayerChange(this.activeDrawingLayer);
+        }
+        else {
+            this.activeStore = this.stores.find(store => store.layer.id === this.activeDrawingLayer.id);
+            this.activeDrawControl = this.drawControls.find(dc => dc[0] === this.activeDrawingLayer.id)[1];
+            this.deactivateDrawControl();
+            this.allLayers.forEach(layer => {
+                if (layer.id !== this.activeDrawingLayer.id) {
+                    layer.opacity = 0;
+                }
+                let store = this.stores.find(s => s.layer.id === layer.id);
+                this.subscriptions$$.push(store.stateView
+                    .manyBy$((record) => {
+                    return record.state.selected === true;
+                })
+                    .pipe(first())
+                    .subscribe((records) => {
+                    records.forEach((record) => {
+                        record.state.selected = false;
+                    });
+                }));
+                this.subscriptions$$.push(store.stateView
+                    .manyBy$((record) => {
+                    return record.state.selected === true;
+                })
+                    .pipe(skip(1) // Skip initial emission
+                )
+                    .subscribe((records) => {
+                    this.selectedFeatures$.next(records.map((record) => record.entity));
+                }));
+                this.subscriptions$$.push(store.count$.subscribe((cnt) => {
+                    cnt >= 1
+                        ? (this.activeStore.layer.options.showInLayerList = true)
+                        : (this.activeStore.layer.options.showInLayerList = false);
+                }));
+            });
+            this.onLayerChange(this.activeDrawingLayer);
+        }
     }
     /**
      * Remove the drawing layer and the interactions
      * @internal
      */
     ngOnDestroy() {
-        this.drawControl.setOlMap(undefined);
+        this.allLayers.forEach(layer => layer.opacity = 1);
+        this.activeStore.state.updateAll({ selected: false });
+        this.deactivateDrawControl();
         this.subscriptions$$.map((s) => s.unsubscribe());
     }
     /**
@@ -17413,61 +17563,20 @@ class DrawComponent {
      * @returns a Draw Control
      */
     createDrawControl(fillColor, strokeColor, strokeWidth) {
-        const drawControl = new DrawControl({
+        const activeDrawControl = new DrawControl({
             geometryType: undefined,
-            drawingLayerSource: this.olDrawingLayerSource,
+            drawingLayerSource: this.activeDrawingLayerSource,
             drawingLayerStyle: new olstyle.Style({}),
             interactionStyle: createInteractionStyle(fillColor, strokeColor, strokeWidth)
         });
-        return drawControl;
+        return activeDrawControl;
     }
     /**
      * Store initialization, including drawing layer creation
      */
-    initStore() {
-        this.map.removeLayer(this.olDrawingLayer);
-        // this.map.addLayer()
-        this.olDrawingLayer = new VectorLayer({
-            isIgoInternalLayer: true,
-            id: 'igo-draw-layer',
-            title: this.languageService.translate.instant('igo.geo.draw.drawing'),
-            zIndex: 200,
-            source: new FeatureDataSource(),
-            style: (feature, resolution) => {
-                return this.drawStyleService.createIndividualElementStyle(feature, resolution, this.labelsAreShown, feature.get('fontStyle'), feature.get('drawingStyle').fill, feature.get('drawingStyle').stroke, feature.get('offsetX'), feature.get('offsetY'), this.icon);
-            },
-            showInLayerList: true,
-            exportable: true,
-            browsable: false,
-            workspace: {
-                enabled: false
-            }
-        });
-        tryBindStoreLayer(this.store, this.olDrawingLayer);
-        tryAddLoadingStrategy(this.store, new FeatureStoreLoadingStrategy({
-            motion: FeatureMotion.None
-        }));
-        tryAddSelectionStrategy(this.store, new FeatureStoreSelectionStrategy({
-            map: this.map,
-            motion: FeatureMotion.None,
-            many: true
-        }));
-        this.store.layer.visible = true;
-        this.store.source.ol.on('removefeature', (event) => {
-            const olGeometry = event.feature.getGeometry();
-            this.clearLabelsOfOlGeometry(olGeometry);
-        });
-        this.subscriptions$$.push(this.store.stateView
-            .manyBy$((record) => {
-            return record.state.selected === true;
-        })
-            .pipe(first())
-            .subscribe((records) => {
-            records.forEach((record) => {
-                record.state.selected = false;
-            });
-        }));
-        this.subscriptions$$.push(this.store.stateView
+    initStore(newTitle, isNewLayer) {
+        this.createLayer(newTitle, isNewLayer);
+        this.subscriptions$$.push(this.activeStore.stateView
             .manyBy$((record) => {
             return record.state.selected === true;
         })
@@ -17476,13 +17585,10 @@ class DrawComponent {
             .subscribe((records) => {
             this.selectedFeatures$.next(records.map((record) => record.entity));
         }));
-        this.subscriptions$$.push(this.store.count$.subscribe((cnt) => {
-            if (cnt > 0) {
-                this.store.setLayerExtent();
-            }
+        this.subscriptions$$.push(this.activeStore.count$.subscribe((cnt) => {
             cnt >= 1
-                ? (this.store.layer.options.showInLayerList = true)
-                : (this.store.layer.options.showInLayerList = false);
+                ? (this.activeStore.layer.options.showInLayerList = true)
+                : (this.activeStore.layer.options.showInLayerList = false);
         }));
     }
     /**
@@ -17549,12 +17655,12 @@ class DrawComponent {
                 }
                 // deletes the feature
                 else {
-                    this.olDrawingLayerSource
+                    this.activeDrawingLayerSource
                         .getFeatures()
                         .forEach((drawingLayerFeature) => {
                         const geometry = drawingLayerFeature.getGeometry();
                         if (olGeometry === geometry) {
-                            this.olDrawingLayerSource.removeFeature(drawingLayerFeature);
+                            this.activeDrawingLayerSource.removeFeature(drawingLayerFeature);
                         }
                     });
                 }
@@ -17568,10 +17674,10 @@ class DrawComponent {
     onDrawEnd(olGeometry, radius) {
         this.addFeatureToStore(olGeometry, radius);
         this.clearLabelsOfOlGeometry(olGeometry);
-        this.store.layer.ol.getSource().refresh();
+        this.activeStore.layer.ol.getSource().refresh();
     }
     onModifyDraw(olGeometry) {
-        const entities = this.store.all();
+        const entities = this.activeStore.all();
         entities.forEach((entity) => {
             const entityId = entity.properties.id;
             const olGeometryId = olGeometry.ol_uid;
@@ -17585,7 +17691,7 @@ class DrawComponent {
         });
     }
     onSelectDraw(olFeature, label) {
-        const entities = this.store.all();
+        const entities = this.activeStore.all();
         const olGeometry = olFeature.getGeometry();
         olGeometry.ol_uid = olFeature.get('id');
         const olGeometryCoordinates = JSON.stringify(olGeometry.getCoordinates()[0]);
@@ -17656,7 +17762,7 @@ class DrawComponent {
             lon4326 = point4326[0];
             lat4326 = point4326[1];
         }
-        this.store.update({
+        this.activeStore.update({
             type: FEATURE,
             geometry,
             projection: projection.getCode(),
@@ -17685,6 +17791,40 @@ class DrawComponent {
             stroke: ['']
         });
     }
+    setupLayer(isNewLayer) {
+        setTimeout(() => {
+            const dialogRef = this.dialog.open(DrawLayerPopupComponent, {
+                disableClose: false,
+            });
+            dialogRef.afterClosed().subscribe((label) => {
+                if (dialogRef.componentInstance.confirmFlag) {
+                    this.activeStore.state.updateAll({ selected: false });
+                    this.activeStore = new FeatureStore([], { map: this.map });
+                    this.activeDrawingLayerSource = new OlVectorSource();
+                    this.activeDrawingLayer.opacity = 0;
+                    this.deactivateDrawControl();
+                    this.initStore(label, isNewLayer);
+                    this.activeDrawControl = this.createDrawControl(this.fillColor, this.strokeColor, this.strokeWidth);
+                    this.activeDrawControl.setGeometryType(this.currGeometryType);
+                    this.toggleDrawControl();
+                    this.stores.push(this.activeStore);
+                    this.drawControls.push([this.activeDrawingLayer.id, this.activeDrawControl]);
+                    this.drawControlsEvent.emit(this.drawControls);
+                    this.layersIDEvent.emit(this.activeDrawingLayer.id);
+                    this.isCreatingNewLayer = false;
+                    if (!this.labelsAreShown) {
+                        this.onToggleLabels();
+                    }
+                    this.activeLayerChange.emit(this.activeDrawingLayer);
+                }
+                else {
+                    this.select.value = this.activeDrawingLayer;
+                    this.select.selectionChange.emit(this.activeDrawingLayer);
+                }
+            });
+        }, 250);
+    }
+    // HTML user interactions
     /**
      * Called when the user double-clicks the selected drawing
      */
@@ -17698,12 +17838,14 @@ class DrawComponent {
         this.dialog.open(DrawShorcutsComponent);
     }
     deleteDrawings() {
-        this.store.deleteMany(this.selectedFeatures$.value);
+        this.activeStore.deleteMany(this.selectedFeatures$.value);
         this.selectedFeatures$.value.forEach((selectedFeature) => {
-            this.olDrawingLayerSource.getFeatures().forEach((drawingLayerFeature) => {
+            this.activeDrawingLayerSource
+                .getFeatures()
+                .forEach((drawingLayerFeature) => {
                 const geometry = drawingLayerFeature.getGeometry();
                 if (selectedFeature.properties.id === geometry.ol_uid) {
-                    this.olDrawingLayerSource.removeFeature(drawingLayerFeature);
+                    this.activeDrawingLayerSource.removeFeature(drawingLayerFeature);
                 }
             });
         });
@@ -17716,8 +17858,9 @@ class DrawComponent {
         this.drawStyleService.toggleLabelsAreShown();
         this.labelsAreShown = !this.labelsAreShown;
         this.icon
-            ? this.onColorChange(this.labelsAreShown, true, this.fillColor, this.strokeColor)
-            : this.onColorChange(this.labelsAreShown, false, this.fillColor, this.strokeColor);
+            ? this.elementStyle(this.labelsAreShown, true)
+            : this.elementStyle(this.labelsAreShown, false);
+        this.createDrawControl();
     }
     /**
      * Called when the user toggles the Draw control is toggled
@@ -17727,6 +17870,69 @@ class DrawComponent {
         toggleIsChecked ? this.toggleDrawControl() : this.deactivateDrawControl();
     }
     // User changes properties of a drawing element
+    /**
+     * Display the current layer with the current store and the current layerSource
+     */
+    onLayerChange(currLayer) {
+        if (currLayer) {
+            this.activeStore.state.updateAll({ selected: false });
+            this.isCreatingNewLayer = false;
+            this.activeDrawingLayer.opacity = 0;
+            this.activeDrawingLayer = currLayer;
+            this.activeDrawingLayer.opacity = 1;
+            this.deactivateDrawControl();
+            if (!this.labelsAreShown) {
+                this.onToggleLabels();
+            }
+            this.activeStore = this.stores.find(store => store.layer.id === this.activeDrawingLayer.id);
+            this.activeDrawControl = this.drawControls.find(dc => dc[0] === this.activeDrawingLayer.id)[1];
+            this.activeDrawingLayerSource = this.activeDrawControl.olDrawingLayerSource;
+            this.activeDrawControl.setGeometryType(this.currGeometryType);
+            this.toggleDrawControl();
+        }
+        else {
+            this.setupLayer(true);
+        }
+        this.activeLayerChange.emit(this.activeDrawingLayer);
+    }
+    createLayer(newTitle, isNewLayer) {
+        for (const layer of this.allLayers) {
+            let numberId = Number(layer.id.replace('igo-draw-layer', ''));
+            this.layerCounterID = Math.max(numberId, this.layerCounterID);
+        }
+        this.activeDrawingLayer = new VectorLayer({
+            isIgoInternalLayer: true,
+            id: 'igo-draw-layer' + ++this.layerCounterID,
+            title: isNewLayer
+                ? newTitle
+                : this.languageService.translate.instant('igo.geo.draw.drawing'),
+            zIndex: 200,
+            source: new FeatureDataSource(),
+            style: (feature, resolution) => {
+                return this.drawStyleService.createIndividualElementStyle(feature, resolution, this.labelsAreShown, feature.get('fontStyle'), feature.get('drawingStyle').fill, feature.get('drawingStyle').stroke, feature.get('offsetX'), feature.get('offsetY'), this.icon);
+            },
+            showInLayerList: true,
+            exportable: true,
+            browsable: false,
+            workspace: {
+                enabled: false
+            }
+        });
+        tryBindStoreLayer(this.activeStore, this.activeDrawingLayer);
+        tryAddLoadingStrategy(this.activeStore, new FeatureStoreLoadingStrategy({
+            motion: FeatureMotion.None
+        }));
+        tryAddSelectionStrategy(this.activeStore, new FeatureStoreSelectionStrategy({
+            map: this.map,
+            motion: FeatureMotion.None,
+            many: true
+        }));
+        this.activeStore.layer.visible = true;
+        this.activeStore.source.ol.on('removefeature', (event) => {
+            const olGeometry = event.feature.getGeometry();
+            this.clearLabelsOfOlGeometry(olGeometry);
+        });
+    }
     /**
      * Called when the user changes the color in a color picker
      * @param labelsAreShown wheter the labels are shown or not
@@ -17739,16 +17945,14 @@ class DrawComponent {
             this.selectedFeatures$.value.forEach((feature) => {
                 let olFeature = featureToOl(feature, this.map.ol.getView().getProjection().getCode());
                 this.updateFillAndStrokeColor(olFeature, fillColor, strokeColor);
-                const entity = this.store
+                const entity = this.activeStore
                     .all()
                     .find((e) => e.meta.id === olFeature.getId());
                 entity.properties.drawingStyle.fill = olFeature.get('fillColor_');
                 entity.properties.drawingStyle.stroke = olFeature.get('strokeColor_');
-                this.store.update(entity);
+                this.activeStore.update(entity);
             });
         }
-        this.fillColor = fillColor;
-        this.strokeColor = strokeColor;
         this.elementStyle(labelsAreShown, isAnIcon);
         this.createDrawControl();
     }
@@ -17763,12 +17967,12 @@ class DrawComponent {
             this.selectedFeatures$.value.forEach((feature) => {
                 let olFeature = featureToOl(feature, this.map.ol.getView().getProjection().getCode());
                 this.updateFontSizeAndStyle(olFeature, size, style);
-                const entity = this.store
+                const entity = this.activeStore
                     .all()
                     .find((e) => e.meta.id === olFeature.getId());
                 entity.properties.fontStyle = olFeature.get('fontStyle_');
-                this.store.update(entity);
-                olFeature = this.store.layer.ol.getSource().getFeatures().find(f => f.getId() === entity.meta.id);
+                this.activeStore.update(entity);
+                olFeature = this.activeStore.layer.ol.getSource().getFeatures().find(f => f.getId() === entity.meta.id);
                 olFeature.setProperties({ fontStyle: entity.properties.fontStyle });
                 olFeature.changed();
             });
@@ -17790,13 +17994,13 @@ class DrawComponent {
             this.selectedFeatures$.value.forEach((feature) => {
                 let olFeature = featureToOl(feature, this.map.ol.getView().getProjection().getCode());
                 this.updateOffset(olFeature, offsetX, offsetY);
-                const entity = this.store
+                const entity = this.activeStore
                     .all()
                     .find((e) => e.meta.id === olFeature.getId());
                 entity.properties.offsetX = olFeature.get('offsetX_');
                 entity.properties.offsetY = olFeature.get('offsetY_');
-                this.store.update(entity);
-                olFeature = this.store.layer.ol.getSource().getFeatures().find(f => f.getId() === entity.meta.id);
+                this.activeStore.update(entity);
+                olFeature = this.activeStore.layer.ol.getSource().getFeatures().find(f => f.getId() === entity.meta.id);
                 olFeature.setProperties({ offsetX: entity.properties.offsetX, offsetY: entity.properties.offsetY });
                 olFeature.changed();
             });
@@ -17813,7 +18017,8 @@ class DrawComponent {
      * @param geometryType the geometry type selected by the user
      */
     onGeometryTypeChange(geometryType) {
-        this.drawControl.setGeometryType(geometryType);
+        this.currGeometryType = geometryType;
+        this.activeDrawControl.setGeometryType(geometryType);
         this.toggleDrawControl();
     }
     // Updates the properties of olFeature inputted
@@ -17844,13 +18049,57 @@ class DrawComponent {
             offsetY_: offsetY
         }, true);
     }
-    /**
-     * Check the amount of rows as a possible alternative
-     */
+    // Updates values of the selected element on the HTML view
+    getFeatureFontSize() {
+        return this.selectedFeatures$.value.length > 0
+            ? this.selectedFeatures$.value[0].properties.fontStyle
+                .split(' ')[0]
+                .replace('px', '')
+            : '20';
+    }
+    getFeatureFontStyle() {
+        return this.selectedFeatures$.value.length > 0
+            ? this.selectedFeatures$.value[0].properties.fontStyle.substring(this.selectedFeatures$.value[0].properties.fontStyle.indexOf(' ') + 1)
+            : FontType.Arial;
+    }
+    getFeatureFillColor() {
+        return this.selectedFeatures$.value.length > 0
+            ? this.selectedFeatures$.value[0].properties.drawingStyle.fill
+            : 'rgba(255,255,255,0.4)';
+    }
+    getFeatureStrokeColor() {
+        return this.selectedFeatures$.value.length > 0
+            ? this.selectedFeatures$.value[0].properties.drawingStyle.stroke
+            : 'rgba(143,7,7,1)';
+    }
+    getFeatureOffsetX() {
+        return this.selectedFeatures$.value.length > 0
+            ? this.selectedFeatures$.value[0].properties.offsetX
+            : this.drawStyleService.getOffsetX();
+    }
+    getFeatureOffsetY() {
+        return this.selectedFeatures$.value.length > 0
+            ? this.selectedFeatures$.value[0].properties.offsetY
+            : '0';
+    }
+    get allFontStyles() {
+        return Object.values(FontType);
+    }
+    get allLayers() {
+        return this.map.layers.filter((layer) => layer.id.includes('igo-draw-layer'));
+    }
     updateHeightTable() {
-        this.numberOfDrawings = this.store.count$.getValue();
-        this.numberOfDrawings > 10 ? this.tableTemplate.tableHeight = '35vh' : this.tableTemplate.tableHeight = 'auto';
+        // Check the amount of rows as a possible alternative
+        this.numberOfDrawings = this.activeStore.count$.getValue();
+        this.numberOfDrawings > 10
+            ? (this.tableTemplate.tableHeight = '35vh')
+            : (this.tableTemplate.tableHeight = 'auto');
     }
+    updateActiveLayer() {
+        let currLayer = this.allLayers.find(layer => layer.title === this.activeDrawingLayer.title);
+        return currLayer ? currLayer : this.allLayers[0];
+    }
+    // Helper methods
     /**
      * Activate the correct control
      */
@@ -17875,20 +18124,20 @@ class DrawComponent {
      * @param olGeometry the new geometry to insert in the store
      */
     replaceFeatureInStore(entity, olGeometry, radius) {
-        this.store.delete(entity);
+        this.activeStore.delete(entity);
         this.onDrawEnd(olGeometry, radius);
     }
     /**
      * Deactivate the active draw control
      */
     deactivateDrawControl() {
-        if (!this.drawControl) {
+        if (!this.activeDrawControl) {
             return;
         }
         if (this.drawEnd$$) {
             this.drawEnd$$.unsubscribe();
         }
-        this.drawControl.setOlMap(undefined);
+        this.activeDrawControl.setOlMap(undefined);
         this.drawControlIsActive = false;
     }
     /**
@@ -17897,37 +18146,43 @@ class DrawComponent {
     activateDrawControl() {
         this.drawControlIsDisabled = false;
         this.drawControlIsActive = true;
-        this.drawEnd$$ = this.drawControl.end$.subscribe((olGeometry) => {
+        this.drawEnd$$ = this.activeDrawControl.end$.subscribe((olGeometry) => {
             this.openDrawDialog(olGeometry, true);
         });
-        this.drawControl.modify$.subscribe((olGeometry) => {
+        this.activeDrawControl.modify$.subscribe((olGeometry) => {
             this.onModifyDraw(olGeometry);
         });
         if (!this.drawSelect$$) {
-            this.drawSelect$$ = this.drawControl.select$.subscribe((olFeature) => {
+            this.drawSelect$$ = this.activeDrawControl.select$.subscribe((olFeature) => {
                 this.openDrawDialog(olFeature, false);
             });
         }
-        this.drawControl.setOlMap(this.map.ol, true);
+        this.activeDrawControl.setOlMap(this.map.ol, true);
     }
     /**
      * Recreates the style of the feature stored
      */
     elementStyle(labelsAreShown, isAnIcon) {
         if (isAnIcon) {
-            this.store.layer.ol.setStyle((feature, resolution) => {
+            this.activeStore.layer.ol.setStyle((feature, resolution) => {
                 return this.drawStyleService.createIndividualElementStyle(feature, resolution, labelsAreShown, feature.get('fontStyle'), feature.get('drawingStyle').fill, feature.get('drawingStyle').stroke, feature.get('offsetX'), feature.get('offsetY'), this.icon);
             });
         }
         else {
-            this.store.layer.ol.setStyle((feature, resolution) => {
+            this.activeStore.layer.ol.setStyle((feature, resolution) => {
                 return this.drawStyleService.createIndividualElementStyle(feature, resolution, labelsAreShown, feature.get('fontStyle'), feature.get('drawingStyle').fill, feature.get('drawingStyle').stroke, feature.get('offsetX'), feature.get('offsetY'));
             });
         }
     }
 }
 DrawComponent.ɵfac = function DrawComponent_Factory(t) { return new (t || DrawComponent)(i0.ɵɵdirectiveInject(i2$1.LanguageService), i0.ɵɵdirectiveInject(i2$2.UntypedFormBuilder), i0.ɵɵdirectiveInject(DrawStyleService), i0.ɵɵdirectiveInject(i1.MatDialog), i0.ɵɵdirectiveInject(DrawIconService)); };
-DrawComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DrawComponent, selectors: [["igo-draw"]], inputs: { map: "map", store: "store" }, outputs: { fillColor: "fillColor", strokeColor: "strokeColor", strokeWidth: "strokeWidth", fontSize: "fontSize", fontStyle: "fontStyle" }, decls: 33, vars: 36, consts: [[1, "geometry-type-toggle", "mat-typography"], [3, "value", "change"], [3, "value"], [1, "draw-options", "mat-typography"], [3, "disabled", "checked", "labelPosition", "change"], [3, "checked", "labelPosition", "change"], ["class", "deleteBtn", "mat-icon-button", "", "color", "warn", "tooltip-position", "below", "matTooltipShowDelay", "500", 3, "matTooltip", "disabled", "click", 4, "ngIf"], ["id", "storeElements", 1, "table-compact", 3, "store", "template", "dblclick"], ["table", ""], [1, "icon-options"], [4, "ngIf"], ["mat-icon-button", "", "color", "accent", "disableRipple", "true", 3, "click"], ["svgIcon", "keyboard-outline", "tooltip-position", "below", "matTooltipShowDelay", "500", 1, "shortcuts-icon", 3, "matTooltip"], ["mat-raised-button", "", "color", "primary", 3, "matTooltip", "click", 4, "ngIf"], ["mat-icon-button", "", "color", "warn", "tooltip-position", "below", "matTooltipShowDelay", "500", 1, "deleteBtn", 3, "matTooltip", "disabled", "click"], ["svgIcon", "delete"], ["class", "box", 4, "ngIf"], ["value", "", 3, "click"], [3, "value", "click", 4, "ngFor", "ngForOf"], [1, "box"], [3, "src"], [3, "value", "click"], ["mat-raised-button", "", "color", "primary", 3, "matTooltip", "click"], ["svgIcon", "palette", "matBadgeColor", "warn", "matBadgeSize", "medium", 1, "style-icon", 3, "matBadge"]], template: function DrawComponent_Template(rf, ctx) { if (rf & 1) {
+DrawComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DrawComponent, selectors: [["igo-draw"]], viewQuery: function DrawComponent_Query(rf, ctx) { if (rf & 1) {
+        i0.ɵɵviewQuery(_c0$c, 5);
+    } if (rf & 2) {
+        let _t;
+        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.select = _t.first);
+    } }, inputs: { map: "map", stores: "stores", drawControls: "drawControls", activeDrawingLayer: "activeDrawingLayer" }, outputs: { activeLayerChange: "activeLayerChange", drawControlsEvent: "drawControlsEvent", layersIDEvent: "layersIDEvent", fillColor: "fillColor", strokeColor: "strokeColor", strokeWidth: "strokeWidth", fontSize: "fontSize", fontStyle: "fontStyle" }, decls: 47, vars: 45, consts: [[1, "geometry-type-toggle", "mat-typography"], [3, "value", "change"], [3, "value"], [1, "draw-options", "mat-typography"], [3, "disabled", "checked", "labelPosition", "change"], [3, "checked", "labelPosition", "change"], ["appearance", "outline", 1, "layer-select"], [3, "value", "selectionChange"], ["selectedLayer", ""], [3, "value", 4, "ngFor", "ngForOf"], ["id", "createNewLayer"], ["mat-icon-button", "", "collapsibleButton", "", "tooltip-position", "below", "matTooltipShowDelay", "500", 3, "color", "matTooltip", "click", 4, "ngIf"], ["class", "deleteBtn", "mat-icon-button", "", "color", "warn", "tooltip-position", "below", "matTooltipShowDelay", "500", 3, "matTooltip", "disabled", "click", 4, "ngIf"], [1, "table-compact", 3, "store", "template", "dblclick"], ["table", ""], [1, "icon-options"], [4, "ngIf"], ["mat-icon-button", "", "color", "accent", "disableRipple", "true", 3, "click"], ["svgIcon", "keyboard-outline", "tooltip-position", "below", "matTooltipShowDelay", "500", 1, "shortcuts-icon", 3, "matTooltip"], ["mat-raised-button", "", "color", "primary", 3, "matTooltip", "click", 4, "ngIf"], ["mat-icon-button", "", "collapsibleButton", "", "tooltip-position", "below", "matTooltipShowDelay", "500", 3, "color", "matTooltip", "click"], [3, "svgIcon"], ["mat-icon-button", "", "color", "warn", "tooltip-position", "below", "matTooltipShowDelay", "500", 1, "deleteBtn", 3, "matTooltip", "disabled", "click"], ["svgIcon", "delete"], ["class", "box", 4, "ngIf"], ["value", "", 3, "click"], [3, "value", "click", 4, "ngFor", "ngForOf"], [1, "box"], [3, "src"], [3, "value", "click"], ["mat-raised-button", "", "color", "primary", 3, "matTooltip", "click"], ["svgIcon", "palette", "matBadgeColor", "warn", "matBadgeSize", "medium", 1, "style-icon", 3, "matBadge"]], template: function DrawComponent_Template(rf, ctx) { if (rf & 1) {
+        const _r21 = i0.ɵɵgetCurrentView();
         i0.ɵɵelementStart(0, "div")(1, "div", 0)(2, "mat-button-toggle-group", 1);
         i0.ɵɵlistener("change", function DrawComponent_Template_mat_button_toggle_group_change_2_listener($event) { return ctx.onGeometryTypeChange($event.value); });
         i0.ɵɵelementStart(3, "mat-button-toggle", 2);
@@ -17956,20 +18211,35 @@ DrawComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DrawComponent
         i0.ɵɵtext(20);
         i0.ɵɵpipe(21, "translate");
         i0.ɵɵelementEnd()();
-        i0.ɵɵelementStart(22, "div");
-        i0.ɵɵtemplate(23, DrawComponent_button_23_Template, 4, 6, "button", 6);
-        i0.ɵɵelementStart(24, "div")(25, "igo-entity-table", 7, 8);
-        i0.ɵɵlistener("dblclick", function DrawComponent_Template_igo_entity_table_dblclick_25_listener() { return ctx.editLabelDrawing(); });
+        i0.ɵɵelement(22, "mat-divider");
+        i0.ɵɵelementStart(23, "div")(24, "mat-form-field", 6)(25, "mat-label");
+        i0.ɵɵtext(26);
+        i0.ɵɵpipe(27, "translate");
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(28, "mat-select", 7, 8);
+        i0.ɵɵlistener("selectionChange", function DrawComponent_Template_mat_select_selectionChange_28_listener() { i0.ɵɵrestoreView(_r21); const _r0 = i0.ɵɵreference(29); return i0.ɵɵresetView(ctx.onLayerChange(_r0.value)); });
+        i0.ɵɵtemplate(30, DrawComponent_mat_option_30_Template, 2, 2, "mat-option", 9);
+        i0.ɵɵelementStart(31, "mat-option", 10);
+        i0.ɵɵtext(32);
+        i0.ɵɵpipe(33, "translate");
         i0.ɵɵelementEnd()()();
-        i0.ɵɵelementStart(27, "div", 9);
-        i0.ɵɵtemplate(28, DrawComponent_mat_form_field_28_Template, 11, 8, "mat-form-field", 10);
+        i0.ɵɵtemplate(34, DrawComponent_button_34_Template, 4, 7, "button", 11);
         i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(29, "button", 11);
-        i0.ɵɵlistener("click", function DrawComponent_Template_button_click_29_listener() { return ctx.openShorcutsDialog(); });
-        i0.ɵɵelement(30, "mat-icon", 12);
-        i0.ɵɵpipe(31, "translate");
+        i0.ɵɵelement(35, "mat-divider");
+        i0.ɵɵelementStart(36, "div");
+        i0.ɵɵtemplate(37, DrawComponent_button_37_Template, 4, 6, "button", 12);
+        i0.ɵɵelementStart(38, "div")(39, "igo-entity-table", 13, 14);
+        i0.ɵɵlistener("dblclick", function DrawComponent_Template_igo_entity_table_dblclick_39_listener() { return ctx.editLabelDrawing(); });
+        i0.ɵɵelementEnd()()();
+        i0.ɵɵelementStart(41, "div", 15);
+        i0.ɵɵtemplate(42, DrawComponent_mat_form_field_42_Template, 11, 8, "mat-form-field", 16);
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(43, "button", 17);
+        i0.ɵɵlistener("click", function DrawComponent_Template_button_click_43_listener() { return ctx.openShorcutsDialog(); });
+        i0.ɵɵelement(44, "mat-icon", 18);
+        i0.ɵɵpipe(45, "translate");
         i0.ɵɵelementEnd();
-        i0.ɵɵtemplate(32, DrawComponent_button_32_Template, 5, 7, "button", 13);
+        i0.ɵɵtemplate(46, DrawComponent_button_46_Template, 5, 7, "button", 19);
         i0.ɵɵelementEnd();
     } if (rf & 2) {
         i0.ɵɵadvance(2);
@@ -17977,38 +18247,48 @@ DrawComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DrawComponent
         i0.ɵɵadvance(1);
         i0.ɵɵproperty("value", ctx.geometryType.Point);
         i0.ɵɵadvance(1);
-        i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(5, 22, "igo.geo.draw." + ctx.geometryType.Point), " ");
+        i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(5, 27, "igo.geo.draw." + ctx.geometryType.Point), " ");
         i0.ɵɵadvance(2);
         i0.ɵɵproperty("value", ctx.geometryType.LineString);
         i0.ɵɵadvance(1);
-        i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(8, 24, "igo.geo.draw." + ctx.geometryType.LineString), " ");
+        i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(8, 29, "igo.geo.draw." + ctx.geometryType.LineString), " ");
         i0.ɵɵadvance(2);
         i0.ɵɵproperty("value", ctx.geometryType.Polygon);
         i0.ɵɵadvance(1);
-        i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(11, 26, "igo.geo.draw." + ctx.geometryType.Polygon), " ");
+        i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(11, 31, "igo.geo.draw." + ctx.geometryType.Polygon), " ");
         i0.ɵɵadvance(2);
         i0.ɵɵproperty("value", ctx.geometryType.Circle);
         i0.ɵɵadvance(1);
-        i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(14, 28, "igo.geo.draw." + ctx.geometryType.Circle), " ");
+        i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(14, 33, "igo.geo.draw." + ctx.geometryType.Circle), " ");
         i0.ɵɵadvance(3);
         i0.ɵɵproperty("disabled", ctx.drawControlIsDisabled)("checked", ctx.drawControlIsActive)("labelPosition", "before");
         i0.ɵɵadvance(1);
-        i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(18, 30, "igo.geo.spatialFilter.drawControl"), " ");
+        i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(18, 35, "igo.geo.spatialFilter.drawControl"), " ");
         i0.ɵɵadvance(2);
         i0.ɵɵproperty("checked", ctx.labelsAreShown)("labelPosition", "before");
         i0.ɵɵadvance(1);
-        i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(21, 32, "igo.geo.draw.toggleMapTooltips"), " ");
+        i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(21, 37, "igo.geo.draw.toggleMapTooltips"), " ");
+        i0.ɵɵadvance(6);
+        i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(27, 39, "igo.geo.draw.layer.title"));
+        i0.ɵɵadvance(2);
+        i0.ɵɵproperty("value", ctx.updateActiveLayer());
+        i0.ɵɵadvance(2);
+        i0.ɵɵproperty("ngForOf", ctx.allLayers);
+        i0.ɵɵadvance(2);
+        i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(33, 41, "igo.geo.draw.layer.createNewLayer"), " ");
+        i0.ɵɵadvance(2);
+        i0.ɵɵproperty("ngIf", ctx.activeDrawingLayer);
         i0.ɵɵadvance(3);
-        i0.ɵɵproperty("ngIf", ctx.store.count$.getValue() > 0);
+        i0.ɵɵproperty("ngIf", ctx.activeStore.count$.getValue() > 0);
         i0.ɵɵadvance(2);
-        i0.ɵɵproperty("store", ctx.store)("template", ctx.tableTemplate);
+        i0.ɵɵproperty("store", ctx.activeStore)("template", ctx.tableTemplate);
         i0.ɵɵadvance(3);
         i0.ɵɵproperty("ngIf", ctx.icons.length >= 1);
         i0.ɵɵadvance(2);
-        i0.ɵɵproperty("matTooltip", i0.ɵɵpipeBind1(31, 34, "igo.geo.draw.shortcuts"));
+        i0.ɵɵproperty("matTooltip", i0.ɵɵpipeBind1(45, 43, "igo.geo.draw.shortcuts"));
         i0.ɵɵadvance(2);
         i0.ɵɵproperty("ngIf", ctx.selectedFeatures$.value.length);
-    } }, dependencies: [i1$1.NgForOf, i1$1.NgIf, i3.MatButton, i18.MatButtonToggleGroup, i18.MatButtonToggle, i13.MatFormField, i13.MatLabel, i2.MatIcon, i7$1.MatBadge, i4.MatTooltip, i15.MatSelect, i15.MatSelectTrigger, i9.MatOption, i15$1.MatSlideToggle, i5$1.EntityTableComponent, i1$1.AsyncPipe, i7.TranslatePipe], styles: [".geometry-type-toggle[_ngcontent-%COMP%]{padding:10px;text-align:center}.geometry-type-toggle[_ngcontent-%COMP%]   mat-button-toggle-group[_ngcontent-%COMP%]{width:100%}.geometry-type-toggle[_ngcontent-%COMP%]   mat-button-toggle-group[_ngcontent-%COMP%]   mat-button-toggle[_ngcontent-%COMP%]{width:25%}.draw-options[_ngcontent-%COMP%]{overflow-x:hidden}.draw-options[_ngcontent-%COMP%]   mat-slide-toggle[_ngcontent-%COMP%]{width:100%;margin:10px}.draw-options[_ngcontent-%COMP%]   mat-slide-toggle[_ngcontent-%COMP%]     .mat-slide-toggle-content{width:calc(100% - 60px)}.icon-options[_ngcontent-%COMP%]{margin:5px 5px 0}.deleteBtn[_ngcontent-%COMP%]{margin-left:12px}img[_ngcontent-%COMP%]{width:100%;height:100%}.box[_ngcontent-%COMP%]{width:25px;height:25px}"], data: { animation: [
+    } }, dependencies: [i1$1.NgForOf, i1$1.NgIf, i3.MatButton, i18.MatButtonToggleGroup, i18.MatButtonToggle, i11.MatDivider, i13.MatFormField, i13.MatLabel, i2.MatIcon, i7$1.MatBadge, i4.MatTooltip, i15.MatSelect, i15.MatSelectTrigger, i9.MatOption, i23.MatSlideToggle, i5$1.EntityTableComponent, i1$1.AsyncPipe, i7.TranslatePipe], styles: [".geometry-type-toggle[_ngcontent-%COMP%]{padding:10px;text-align:center}.geometry-type-toggle[_ngcontent-%COMP%]   mat-button-toggle-group[_ngcontent-%COMP%]{width:100%}.geometry-type-toggle[_ngcontent-%COMP%]   mat-button-toggle-group[_ngcontent-%COMP%]   mat-button-toggle[_ngcontent-%COMP%]{width:25%}.draw-options[_ngcontent-%COMP%]{overflow-x:hidden}.draw-options[_ngcontent-%COMP%]   mat-slide-toggle[_ngcontent-%COMP%]{width:100%;margin:10px}.draw-options[_ngcontent-%COMP%]   mat-slide-toggle[_ngcontent-%COMP%]     .mat-slide-toggle-content{width:calc(100% - 60px)}.icon-options[_ngcontent-%COMP%]{margin:5px 5px 0}.edition-drawing[_ngcontent-%COMP%]{padding:10px 0}img[_ngcontent-%COMP%]{width:100%;height:100%}.deleteBtn[_ngcontent-%COMP%]{margin-left:12px}.storeTable[_ngcontent-%COMP%]{height:auto!important}.layer-select[_ngcontent-%COMP%]{width:85%;padding:10px 10px 0%}.input-button-container[_ngcontent-%COMP%]{padding:10px}.input-button-container[_ngcontent-%COMP%]   mat-form-field[_ngcontent-%COMP%]{width:25%}.input-button-container[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]{left:8px;bottom:10px}"], data: { animation: [
             trigger('openClose', [
                 state('open', style({
                     opacity: 1
@@ -18033,8 +18313,22 @@ DrawComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DrawComponent
                         transition('open => closed', [animate('600ms ease')]),
                         transition('closed => open', [animate('800ms ease')])
                     ])
-                ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div>\r\n  <div class=\"geometry-type-toggle mat-typography\">\r\n    <mat-button-toggle-group\r\n      (change)=\"onGeometryTypeChange($event.value)\" [value]=\"geometryType.Point\">\r\n      <mat-button-toggle [value]=\"geometryType.Point\">\r\n        {{'igo.geo.draw.' + geometryType.Point | translate}}\r\n      </mat-button-toggle>\r\n\r\n      <mat-button-toggle [value]=\"geometryType.LineString\">\r\n        {{'igo.geo.draw.' + geometryType.LineString | translate}}\r\n      </mat-button-toggle>\r\n\r\n      <mat-button-toggle [value]=\"geometryType.Polygon\">\r\n        {{'igo.geo.draw.' + geometryType.Polygon | translate}}\r\n      </mat-button-toggle>\r\n\r\n      <mat-button-toggle [value]=\"geometryType.Circle\">\r\n        {{'igo.geo.draw.' + geometryType.Circle | translate}}\r\n      </mat-button-toggle>\r\n    </mat-button-toggle-group>\r\n  </div>\r\n\r\n  <div class=\"draw-options mat-typography\">\r\n    <mat-slide-toggle\r\n      [disabled]=\"drawControlIsDisabled\"\r\n      [checked]=\"drawControlIsActive\"\r\n      [labelPosition]=\"'before'\"\r\n      (change)=\"onToggleDrawControl($event.checked)\">\r\n      {{'igo.geo.spatialFilter.drawControl' | translate}}\r\n    </mat-slide-toggle>\r\n\r\n    <mat-slide-toggle\r\n      [checked]=\"labelsAreShown\"\r\n      [labelPosition]=\"'before'\"\r\n      (change)=\"onToggleLabels()\">\r\n      {{'igo.geo.draw.toggleMapTooltips' | translate}}\r\n    </mat-slide-toggle>\r\n  </div>\r\n\r\n  <div>\r\n    <button *ngIf=\"store.count$.getValue() > 0\"\r\n      class=\"deleteBtn\"\r\n      mat-icon-button\r\n      color=\"warn\"\r\n      tooltip-position=\"below\"\r\n      matTooltipShowDelay=\"500\"\r\n      [matTooltip]=\"'igo.geo.draw.delete' | translate\"\r\n      [disabled]=\"(selectedFeatures$ | async).length === 0\"\r\n      (click)=\"deleteDrawings()\">\r\n      <mat-icon svgIcon=\"delete\"></mat-icon>\r\n    </button>\r\n\r\n    <div>\r\n      <igo-entity-table\r\n        #table\r\n        class=\"table-compact\"\r\n        id=\"storeElements\"\r\n        [store]=\"store\"\r\n        [template]=\"tableTemplate\"\r\n        (dblclick)=\"editLabelDrawing()\">\r\n      </igo-entity-table>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"icon-options\">\r\n    <mat-form-field *ngIf=\"icons.length >= 1\">\r\n      <mat-label>{{ 'igo.geo.draw.icon' | translate }}</mat-label>\r\n      <mat-select>\r\n        <mat-select-trigger>\r\n          <div *ngIf=\"icon\" class=\"box\">\r\n            <img src=\"{{ icon }}\">\r\n          </div>\r\n        </mat-select-trigger>\r\n        <mat-option value=\"\" (click)=\"onIconChange()\">{{ 'igo.geo.draw.noIcon' | translate }}</mat-option>\r\n        <mat-option\r\n          *ngFor=\"let icon_html of icons\"\r\n          [value]=\"icon_html\"\r\n          (click)=\"onIconChange(icon_html)\">\r\n          <div class=\"box\">\r\n            <img src=\"{{ icon_html }}\">\r\n          </div>\r\n        </mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <button\r\n    mat-icon-button\r\n    color=\"accent\"\r\n    disableRipple=\"true\"\r\n    (click)=\"openShorcutsDialog()\">\r\n    <mat-icon\r\n      class=\"shortcuts-icon\"\r\n      svgIcon=\"keyboard-outline\"\r\n      tooltip-position=\"below\"\r\n      matTooltipShowDelay=\"500\"\r\n      [matTooltip]=\"'igo.geo.draw.shortcuts' | translate\">\r\n    </mat-icon>\r\n  </button>\r\n\r\n  <button\r\n    *ngIf=\"selectedFeatures$.value.length\"\r\n    mat-raised-button\r\n    color=\"primary\"\r\n    (click)=\"openStyleModalDialog()\"\r\n    [matTooltip]=\"'igo.geo.layer.style.styleModalTooltip' | translate\">\r\n    {{'igo.geo.layer.style.styleModal' | translate}}\r\n    <mat-icon\r\n      class=\"style-icon\"\r\n      svgIcon=\"palette\"\r\n      [matBadge]=\"selectedFeatures$.value.length\"\r\n      matBadgeColor=\"warn\"\r\n      matBadgeSize=\"medium\">\r\n    </mat-icon>\r\n  </button>\r\n</div>\r\n", styles: [".geometry-type-toggle{padding:10px;text-align:center}.geometry-type-toggle mat-button-toggle-group{width:100%}.geometry-type-toggle mat-button-toggle-group mat-button-toggle{width:25%}.draw-options{overflow-x:hidden}.draw-options mat-slide-toggle{width:100%;margin:10px}.draw-options mat-slide-toggle ::ng-deep .mat-slide-toggle-content{width:calc(100% - 60px)}.icon-options{margin:5px 5px 0}.deleteBtn{margin-left:12px}img{width:100%;height:100%}.box{width:25px;height:25px}\n"] }]
-    }], function () { return [{ type: i2$1.LanguageService }, { type: i2$2.UntypedFormBuilder }, { type: DrawStyleService }, { type: i1.MatDialog }, { type: DrawIconService }]; }, { fillColor: [{
+                ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div>\r\n  <div class=\"geometry-type-toggle mat-typography\">\r\n    <mat-button-toggle-group\r\n      (change)=\"onGeometryTypeChange($event.value)\" [value]=\"geometryType.Point\">\r\n      <mat-button-toggle [value]=\"geometryType.Point\">\r\n        {{'igo.geo.draw.' + geometryType.Point | translate}}\r\n      </mat-button-toggle>\r\n\r\n      <mat-button-toggle [value]=\"geometryType.LineString\">\r\n        {{'igo.geo.draw.' + geometryType.LineString | translate}}\r\n      </mat-button-toggle>\r\n\r\n      <mat-button-toggle [value]=\"geometryType.Polygon\">\r\n        {{'igo.geo.draw.' + geometryType.Polygon | translate}}\r\n      </mat-button-toggle>\r\n\r\n      <mat-button-toggle [value]=\"geometryType.Circle\">\r\n        {{'igo.geo.draw.' + geometryType.Circle | translate}}\r\n      </mat-button-toggle>\r\n    </mat-button-toggle-group>\r\n  </div>\r\n\r\n  <div class=\"draw-options mat-typography\">\r\n    <mat-slide-toggle\r\n      [disabled]=\"drawControlIsDisabled\"\r\n      [checked]=\"drawControlIsActive\"\r\n      [labelPosition]=\"'before'\"\r\n      (change)=\"onToggleDrawControl($event.checked)\">\r\n      {{'igo.geo.spatialFilter.drawControl' | translate}}\r\n    </mat-slide-toggle>\r\n\r\n    <mat-slide-toggle\r\n      [checked]=\"labelsAreShown\"\r\n      [labelPosition]=\"'before'\"\r\n      (change)=\"onToggleLabels()\"\r\n    >\r\n      {{ 'igo.geo.draw.toggleMapTooltips' | translate }}\r\n    </mat-slide-toggle>\r\n  </div>\r\n\r\n  <mat-divider></mat-divider>\r\n\r\n  <div>\r\n    <mat-form-field appearance=\"outline\" class=\"layer-select\">\r\n      <mat-label>{{'igo.geo.draw.layer.title' | translate}}</mat-label>\r\n      <mat-select #selectedLayer (selectionChange)=\"onLayerChange(selectedLayer.value)\" [value]=\"updateActiveLayer()\">\r\n        <mat-option *ngFor=\"let layer of allLayers\" [value]=\"layer\">\r\n          {{ layer.title }}\r\n        </mat-option>\r\n        <mat-option id=\"createNewLayer\" >\r\n          {{'igo.geo.draw.layer.createNewLayer' | translate}}\r\n        </mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <button\r\n      *ngIf=\"activeDrawingLayer\"\r\n      mat-icon-button\r\n      [color]=\"activeDrawingLayer.visible ? 'primary' : 'default'\"\r\n      collapsibleButton\r\n      tooltip-position=\"below\"\r\n      matTooltipShowDelay=\"500\"\r\n      [matTooltip]=\"activeDrawingLayer.visible ?\r\n                    ('igo.geo.layer.hideLayer' | translate) :\r\n                    ('igo.geo.layer.showLayer' | translate)\"\r\n      (click)=\"activeDrawingLayer.visible = !activeDrawingLayer.visible\">\r\n      <mat-icon\r\n        [svgIcon]=\"activeDrawingLayer.visible ? 'eye' : 'eye-off'\">\r\n      </mat-icon>\r\n    </button>\r\n  </div>\r\n  <mat-divider></mat-divider>\r\n  <div>\r\n    <button\r\n      *ngIf=\"activeStore.count$.getValue() > 0\"\r\n      class=\"deleteBtn\"\r\n      mat-icon-button\r\n      color=\"warn\"\r\n      tooltip-position=\"below\"\r\n      matTooltipShowDelay=\"500\"\r\n      [matTooltip]=\"'igo.geo.draw.delete' | translate\"\r\n      [disabled]=\"(selectedFeatures$ | async).length === 0\"\r\n      (click)=\"deleteDrawings()\">\r\n      <mat-icon svgIcon=\"delete\"></mat-icon>\r\n    </button>\r\n\r\n    <div>\r\n      <igo-entity-table\r\n        #table\r\n        class=\"table-compact\"\r\n        [store]=\"activeStore\"\r\n        [template]=\"tableTemplate\"\r\n        (dblclick)=\"editLabelDrawing()\">\r\n      </igo-entity-table>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"icon-options\">\r\n    <mat-form-field *ngIf=\"icons.length >= 1\">\r\n      <mat-label>{{ 'igo.geo.draw.icon' | translate }}</mat-label>\r\n      <mat-select>\r\n        <mat-select-trigger>\r\n          <div *ngIf=\"icon\" class=\"box\">\r\n            <img src=\"{{ icon }}\">\r\n          </div>\r\n        </mat-select-trigger>\r\n        <mat-option value=\"\" (click)=\"onIconChange()\">{{ 'igo.geo.draw.noIcon' | translate }}</mat-option>\r\n        <mat-option\r\n          *ngFor=\"let icon_html of icons\"\r\n          [value]=\"icon_html\"\r\n          (click)=\"onIconChange(icon_html)\">\r\n          <div class=\"box\">\r\n            <img src=\"{{ icon_html }}\">\r\n          </div>\r\n        </mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <button\r\n    mat-icon-button\r\n    color=\"accent\"\r\n    disableRipple=\"true\"\r\n    (click)=\"openShorcutsDialog()\"\r\n  >\r\n    <mat-icon\r\n      class=\"shortcuts-icon\"\r\n      svgIcon=\"keyboard-outline\"\r\n      tooltip-position=\"below\"\r\n      matTooltipShowDelay=\"500\"\r\n      [matTooltip]=\"'igo.geo.draw.shortcuts' | translate\"\r\n    >\r\n    </mat-icon>\r\n  </button>\r\n\r\n  <button\r\n    *ngIf=\"selectedFeatures$.value.length\"\r\n    mat-raised-button\r\n    color=\"primary\"\r\n    (click)=\"openStyleModalDialog()\"\r\n    [matTooltip]=\"'igo.geo.layer.style.styleModalTooltip' | translate\">\r\n    {{'igo.geo.layer.style.styleModal' | translate}}\r\n    <mat-icon\r\n      class=\"style-icon\"\r\n      svgIcon=\"palette\"\r\n      [matBadge]=\"selectedFeatures$.value.length\"\r\n      matBadgeColor=\"warn\"\r\n      matBadgeSize=\"medium\">\r\n    </mat-icon>\r\n  </button>\r\n</div>\r\n", styles: [".geometry-type-toggle{padding:10px;text-align:center}.geometry-type-toggle mat-button-toggle-group{width:100%}.geometry-type-toggle mat-button-toggle-group mat-button-toggle{width:25%}.draw-options{overflow-x:hidden}.draw-options mat-slide-toggle{width:100%;margin:10px}.draw-options mat-slide-toggle ::ng-deep .mat-slide-toggle-content{width:calc(100% - 60px)}.icon-options{margin:5px 5px 0}.edition-drawing{padding:10px 0}img{width:100%;height:100%}.deleteBtn{margin-left:12px}.storeTable{height:auto!important}.layer-select{width:85%;padding:10px 10px 0%}.input-button-container{padding:10px}.input-button-container mat-form-field{width:25%}.input-button-container button{left:8px;bottom:10px}\n"] }]
+    }], function () { return [{ type: i2$1.LanguageService }, { type: i2$2.UntypedFormBuilder }, { type: DrawStyleService }, { type: i1.MatDialog }, { type: DrawIconService }]; }, { map: [{
+            type: Input
+        }], stores: [{
+            type: Input
+        }], drawControls: [{
+            type: Input
+        }], activeDrawingLayer: [{
+            type: Input
+        }], activeLayerChange: [{
+            type: Output
+        }], drawControlsEvent: [{
+            type: Output
+        }], layersIDEvent: [{
+            type: Output
+        }], fillColor: [{
             type: Output
         }], strokeColor: [{
             type: Output
@@ -18044,10 +18338,9 @@ DrawComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DrawComponent
             type: Output
         }], fontStyle: [{
             type: Output
-        }], map: [{
-            type: Input
-        }], store: [{
-            type: Input
+        }], select: [{
+            type: ViewChild,
+            args: ['selectedLayer']
         }] }); })();
 
 function StyleModalComponent_div_6_Template(rf, ctx) { if (rf & 1) {
@@ -18456,7 +18749,7 @@ i0.ɵɵsetComponentScope(LayerItemComponent, [i1$1.NgClass, i1$1.NgIf, i2.MatIco
 i0.ɵɵsetComponentScope(LayerLegendItemComponent, [i4.MatTooltip, i5.MatListItem, i9.MatLine, LayerLegendComponent], []);
 i0.ɵɵsetComponentScope(LayerListComponent, [i2$2.NgControlStatus, i1$1.NgClass, i1$1.NgForOf, i1$1.NgIf, i1$1.NgTemplateOutlet, i2$2.NgModel, i11.MatDivider, i7$2.MatMenu, i7$2.MatMenuTrigger, i2.MatIcon, i3.MatButton, i4.MatTooltip, i5.MatList, i5.MatListItem, i13$1.MatSlider, i7$1.MatBadge, i12$1.MatCheckbox, i5$1.ListItemDirective, i5$1.ListComponent, i5$1.PanelComponent, LayerItemComponent,
     LayerListToolComponent], [i1$1.AsyncPipe, i7.TranslatePipe]);
-i0.ɵɵsetComponentScope(LayerLegendListComponent, [i1$1.NgForOf, i1$1.NgIf, i11.MatDivider, i15$1.MatSlideToggle, i4.MatTooltip, i5$1.ListItemDirective, i5$1.ListComponent, LayerLegendItemComponent], [i1$1.AsyncPipe, i7.TranslatePipe]);
+i0.ɵɵsetComponentScope(LayerLegendListComponent, [i1$1.NgForOf, i1$1.NgIf, i11.MatDivider, i23.MatSlideToggle, i4.MatTooltip, i5$1.ListItemDirective, i5$1.ListComponent, LayerLegendItemComponent], [i1$1.AsyncPipe, i7.TranslatePipe]);
 
 /**
  * @ignore
@@ -19805,11 +20098,11 @@ IgoDrawModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [FormsModul
                     BrowserModule,
                     BrowserAnimationsModule
                 ],
-                declarations: [DrawComponent, DrawPopupComponent, DrawShorcutsComponent],
+                declarations: [DrawComponent, DrawPopupComponent, DrawLayerPopupComponent, DrawShorcutsComponent],
                 exports: [DrawComponent]
             }]
     }], null, null); })();
-(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(IgoDrawModule, { declarations: [DrawComponent, DrawPopupComponent, DrawShorcutsComponent], imports: [FormsModule,
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(IgoDrawModule, { declarations: [DrawComponent, DrawPopupComponent, DrawLayerPopupComponent, DrawShorcutsComponent], imports: [FormsModule,
         ReactiveFormsModule,
         CommonModule,
         MatButtonModule,
@@ -23430,7 +23723,7 @@ TimeFilterFormComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Tim
         i0.ɵɵproperty("ngIf", !ctx.isRange && ctx.style === "slider" && ctx.type === "year");
         i0.ɵɵadvance(1);
         i0.ɵɵproperty("ngIf", ctx.style === "slider" && ctx.type !== "year");
-    } }, dependencies: [i1$1.NgForOf, i1$1.NgIf, i2$2.DefaultValueAccessor, i2$2.NgControlStatus, i2$2.NgModel, i9.MatOption, i2.MatIcon, i3.MatButton, i13$1.MatSlider, i15$1.MatSlideToggle, i13.MatFormField, i13.MatSuffix, i14.MatInput, i15.MatSelect, i4.MatTooltip, i12$2.MatDatetimepickerComponent, i12$2.MatDatetimepickerToggleComponent, i12$2.MatDatetimepickerInputDirective, i7.TranslatePipe], styles: [".igo-layer-filters-container[_ngcontent-%COMP%]{padding-left:5px}mat-slider[_ngcontent-%COMP%]     div.mat-slider-thumb-label{width:32px;height:32px;margin:0 auto}mat-slider[_ngcontent-%COMP%]     span.mat-slider-thumb-label-text{font-size:10px}#time-slider[_ngcontent-%COMP%]{width:70%;margin:0 auto}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){#time-slider[_ngcontent-%COMP%]{width:60%;margin:0 auto}}.date-below[_ngcontent-%COMP%]{margin:0}mat-form-field[_ngcontent-%COMP%]{text-align:center}mat-datetimepicker-toggle[_ngcontent-%COMP%]     .mat-icon{padding-bottom:30px}.igo-layer-actions-container[_ngcontent-%COMP%] > .mat-slide-toggle[_ngcontent-%COMP%]{vertical-align:middle}.time-filter-mat-datetimepicker-toggle[_ngcontent-%COMP%]     .mat-icon{width:auto}"] });
+    } }, dependencies: [i1$1.NgForOf, i1$1.NgIf, i2$2.DefaultValueAccessor, i2$2.NgControlStatus, i2$2.NgModel, i9.MatOption, i2.MatIcon, i3.MatButton, i13$1.MatSlider, i23.MatSlideToggle, i13.MatFormField, i13.MatSuffix, i14.MatInput, i15.MatSelect, i4.MatTooltip, i12$2.MatDatetimepickerComponent, i12$2.MatDatetimepickerToggleComponent, i12$2.MatDatetimepickerInputDirective, i7.TranslatePipe], styles: [".igo-layer-filters-container[_ngcontent-%COMP%]{padding-left:5px}mat-slider[_ngcontent-%COMP%]     div.mat-slider-thumb-label{width:32px;height:32px;margin:0 auto}mat-slider[_ngcontent-%COMP%]     span.mat-slider-thumb-label-text{font-size:10px}#time-slider[_ngcontent-%COMP%]{width:70%;margin:0 auto}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){#time-slider[_ngcontent-%COMP%]{width:60%;margin:0 auto}}.date-below[_ngcontent-%COMP%]{margin:0}mat-form-field[_ngcontent-%COMP%]{text-align:center}mat-datetimepicker-toggle[_ngcontent-%COMP%]     .mat-icon{padding-bottom:30px}.igo-layer-actions-container[_ngcontent-%COMP%] > .mat-slide-toggle[_ngcontent-%COMP%]{vertical-align:middle}.time-filter-mat-datetimepicker-toggle[_ngcontent-%COMP%]     .mat-icon{width:auto}"] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TimeFilterFormComponent, [{
         type: Component,
         args: [{ selector: 'igo-time-filter-form', template: "<div *ngIf=\"style === 'calendar' && type !=='year'\">\r\n  <div *ngIf=\"!isRange\" class=\"igo-col igo-col-100 igo-col-100-m\">\r\n    <mat-form-field>\r\n      <mat-datetimepicker-toggle class=\"time-filter-mat-datetimepicker-toggle\" [for]=\"datetimePicker\" matSuffix></mat-datetimepicker-toggle>\r\n      <mat-datetimepicker #datetimePicker type=\"{{type}}\" openOnFocus=\"true\" timeInterval=\"5\"></mat-datetimepicker>\r\n      <input matInput autocomplete=\"false\"\r\n        placeholder=\"{{'igo.geo.timeFilter.date' | translate}}\"\r\n        [matDatetimepicker]=\"datetimePicker\"\r\n        [(ngModel)]=\"date\"\r\n        [min]=\"min\"\r\n        [max]=\"max\"\r\n        readonly=\"readonly\"\r\n        (dateChange)=\"handleDateChange($event)\">\r\n    </mat-form-field>\r\n\r\n  </div>\r\n\r\n  <div *ngIf=\"isRange\">\r\n    <div class=\"igo-col igo-col-100\">\r\n      <mat-form-field>\r\n        <mat-datetimepicker-toggle class=\"time-filter-mat-datetimepicker-toggle\" [for]=\"minDatetimePicker\" matSuffix></mat-datetimepicker-toggle>\r\n        <mat-datetimepicker #minDatetimePicker type=\"{{type}}\" openOnFocus=\"true\" timeInterval=\"5\"></mat-datetimepicker>\r\n        <input matInput autocomplete=\"false\"\r\n          placeholder=\"{{'igo.geo.timeFilter.startDate' | translate}}\"\r\n          [matDatetimepicker]=\"minDatetimePicker\"\r\n          [(ngModel)]=\"startDate\"\r\n          [min]=\"min\"\r\n          [max]=\"getRangeMaxDate()\"\r\n          readonly=\"readonly\"\r\n          (input)=\"startDate\"\r\n          (dateChange)=\"handleDateChange($event)\">\r\n      </mat-form-field>\r\n    </div>\r\n\r\n    <div class=\"igo-col igo-col-100\">\r\n      <mat-form-field>\r\n        <mat-datetimepicker-toggle class=\"time-filter-mat-datetimepicker-toggle\" [for]=\"maxDatetimePicker\" matSuffix></mat-datetimepicker-toggle>\r\n        <mat-datetimepicker #maxDatetimePicker type=\"{{type}}\" openOnFocus=\"true\" timeInterval=\"5\"></mat-datetimepicker>\r\n        <input matInput autocomplete=\"false\"\r\n          placeholder=\"{{'igo.geo.timeFilter.endDate' | translate}}\"\r\n          [matDatetimepicker]=\"maxDatetimePicker\"\r\n          [(ngModel)]=\"endDate\"\r\n          [min]=\"getRangeMinDate()\"\r\n          [max]=\"max\"\r\n          readonly=\"readonly\"\r\n          (dateChange)=\"handleDateChange($event)\">\r\n      </mat-form-field>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div *ngIf=\"style === 'calendar' && type ==='year'\">\r\n\r\n  <div *ngIf=\"!isRange\" class=\"igo-col igo-col-100 igo-col-100-m\">\r\n        <mat-form-field>\r\n            <mat-select placeholder=\"{{'igo.geo.timeFilter.date' | translate}}\" [(ngModel)]=\"year\" (selectionChange)=\"handleYearChange($event)\">\r\n                  <mat-option [value]=\"year\" *ngFor=\"let year of listYears\">{{year}}</mat-option>\r\n            </mat-select>\r\n        </mat-form-field>\r\n  </div>\r\n\r\n  <div *ngIf=\"isRange\">\r\n    <div class=\"igo-col igo-col-100\">\r\n        <mat-form-field>\r\n            <mat-select placeholder=\"{{'igo.geo.timeFilter.startDate' | translate}}\" [(ngModel)]=\"startYear\" (selectionChange)=\"handleYearChange($event)\">\r\n              <mat-option [value]=\"startYear\" *ngFor=\"let startYear of startListYears\">{{startYear}}</mat-option>\r\n            </mat-select>\r\n      </mat-form-field>\r\n    </div>\r\n\r\n    <div class=\"igo-col igo-col-100\">\r\n    <mat-form-field>\r\n        <mat-select placeholder=\"{{'igo.geo.timeFilter.endDate' | translate}}\" [(ngModel)]=\"endYear\" (selectionChange)=\"handleYearChange($event)\">\r\n              <mat-option [value]=\"endYear\" *ngFor=\"let endYear of endListYears\">{{endYear}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </div>\r\n  </div>\r\n\r\n</div>\r\n\r\n\r\n  <br>\r\n  <div *ngIf=\"!isRange && style === 'slider' && type === 'year'\" class=\"igo-col igo-col-100 igo-col-100-m mat-typography\">\r\n    <span>{{startYear}}</span>\r\n    <mat-slider\r\n        id=\"time-slider\"\r\n        tickInterval=\"auto\"\r\n        step=\"{{step}}\"\r\n        [min]=\"startYear\"\r\n        [max]=\"endYear\"\r\n        [value]=\"handleSliderValue()\"\r\n        [color]=\"color\"\r\n        thumbLabel\r\n        (input)=\"handleSliderYearChange($event)\"\r\n        (change)=\"handleSliderYearChange($event)\"\r\n        [disabled]= \"!options.enabled || !layer.visible\">\r\n    </mat-slider>\r\n    <span>{{endYear}}</span>\r\n    <p *ngIf= \"options.enabled\" class=\"date-below\">{{year}}</p>\r\n    <div #actions class=\"igo-layer-actions-container\">\r\n      <mat-slide-toggle (change)=\"toggleFilterState()\" tooltip-position=\"below\" matTooltipShowDelay=\"500\"\r\n        [matTooltip]=\"'igo.geo.filter.toggleFilterState' | translate\" [color]=\"color\" [checked]=\"options.enabled\"\r\n        [disabled]=\"!layer.visible\">\r\n      </mat-slide-toggle>\r\n      <button [disabled]= \"!options.enabled  || !layer.visible\" mat-icon-button color=\"primary\" (click)=\"playYear($event)\">\r\n        <mat-icon svgIcon=\"{{playIcon}}\"></mat-icon>\r\n       </button>\r\n      <button [disabled]=\"!options.enabled  || !layer.visible\" mat-icon-button color=\"primary\" (click)=\"resetFilter($event)\">\r\n        <mat-icon svgIcon=\"{{resetIcon}}\"></mat-icon>\r\n      </button>\r\n    </div>\r\n  </div>\r\n\r\n<div *ngIf=\"style === 'slider' && type !== 'year'\" class=\"igo-col igo-col-100 igo-col-100-m\">\r\n  <mat-slider\r\n      id=\"time-slider\"\r\n      tickInterval=\"auto\"\r\n      step=\"{{step}}\"\r\n      [min]=\"dateToNumber(min)\"\r\n      [max]=\"dateToNumber(max)\"\r\n      [value]=\"handleSliderValue()\"\r\n      thumbLabel\r\n      (input)=\"handleSliderDateChange($event)\"\r\n      (selectionChange)=\"handleSliderDateChange($event)\">\r\n  </mat-slider>\r\n  <p class=\"date-below\">{{handleSliderTooltip()}}</p>\r\n  <button mat-icon-button color=\"primary\" (click)=\"playFilter($event)\">\r\n   <mat-icon svgIcon=\"{{playIcon}}\"></mat-icon>\r\n  </button>\r\n</div>\r\n", styles: [".igo-layer-filters-container{padding-left:5px}mat-slider ::ng-deep div.mat-slider-thumb-label{width:32px;height:32px;margin:0 auto}mat-slider ::ng-deep span.mat-slider-thumb-label-text{font-size:10px}#time-slider{width:70%;margin:0 auto}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){#time-slider{width:60%;margin:0 auto}}.date-below{margin:0}mat-form-field{text-align:center}mat-datetimepicker-toggle ::ng-deep .mat-icon{padding-bottom:30px}.igo-layer-actions-container>.mat-slide-toggle{vertical-align:middle}.time-filter-mat-datetimepicker-toggle ::ng-deep .mat-icon{width:auto}\n"] }]
@@ -29058,8 +29351,8 @@ i0.ɵɵsetComponentScope(OgcFilterableFormComponent, [i1$1.NgForOf, i1$1.NgIf, i
 i0.ɵɵsetComponentScope(OgcFilterableItemComponent, [i1$1.NgClass, i1$1.NgIf, i1$1.NgStyle, i2$2.NgControlStatus, i2$2.NgModel, i2.MatIcon, i3.MatButton, i12$1.MatCheckbox, i5.MatListItem, i5.MatListAvatarCssMatStyler, i9.MatLine, i11.MatDivider, i4.MatTooltip, LayerLegendComponent, i5$1.CollapseDirective, OgcFilterableFormComponent], [i1$1.AsyncPipe, i7.TranslatePipe]);
 i0.ɵɵsetComponentScope(OgcFilterableListComponent, [i1$1.NgForOf, i1$1.NgIf, i5$1.ListItemDirective, i5$1.ListComponent, OgcFilterableItemComponent], [i7.TranslatePipe, FilterableDataSourcePipe]);
 i0.ɵɵsetComponentScope(SpatialFilterTypeComponent, [i1$1.NgForOf, i9.MatOption, i2.MatIcon, i20.MatTabGroup, i20.MatTab, i18.MatButtonToggleGroup, i18.MatButtonToggle, i13.MatFormField, i13.MatLabel, i15.MatSelect, i4.MatTooltip, SpatialFilterListComponent], [i7.TranslatePipe]);
-i0.ɵɵsetComponentScope(SpatialFilterItemComponent, [i1$1.NgForOf, i1$1.NgIf, i2$2.ɵNgNoValidate, i2$2.DefaultValueAccessor, i2$2.NumberValueAccessor, i2$2.NgControlStatus, i2$2.NgControlStatusGroup, i2$2.NgForm, i2$2.FormControlDirective, i9.MatOption, i2.MatIcon, i3.MatButton, i17.MatRadioGroup, i17.MatRadioButton, i21.MatTable, i21.MatHeaderCellDef, i21.MatHeaderRowDef, i21.MatColumnDef, i21.MatRowDef, i21.MatHeaderCell, i21.MatHeaderRow, i21.MatRow, i22.MatNestedTreeNode, i22.MatTreeNodeDef, i22.MatTreeNodeToggle, i22.MatTree, i22.MatTreeNode, i22.MatTreeNodeOutlet, i12$1.MatCheckbox, i15$1.MatSlideToggle, i13.MatFormField, i13.MatLabel, i14.MatInput, i15.MatSelect, i4.MatTooltip, i5$1.EntityTableComponent, GeometryFormFieldInputComponent], [i1$1.AsyncPipe, i7.TranslatePipe]);
-i0.ɵɵsetComponentScope(OgcFilterTimeComponent, [i1$1.NgForOf, i1$1.NgIf, i2$2.NgControlStatus, i2$2.NgModel, i2$2.FormControlDirective, i9.MatOption, i2.MatIcon, i3.MatButton, i15$1.MatSlideToggle, i13.MatFormField, i13.MatLabel, i13.MatSuffix, i14.MatInput, i15.MatSelect, i4.MatTooltip, i25.MatDatepicker, i25.MatDatepickerInput, i25.MatDatepickerToggle, OgcFilterTimeSliderComponent], [i7.TranslatePipe]);
+i0.ɵɵsetComponentScope(SpatialFilterItemComponent, [i1$1.NgForOf, i1$1.NgIf, i2$2.ɵNgNoValidate, i2$2.DefaultValueAccessor, i2$2.NumberValueAccessor, i2$2.NgControlStatus, i2$2.NgControlStatusGroup, i2$2.NgForm, i2$2.FormControlDirective, i9.MatOption, i2.MatIcon, i3.MatButton, i17.MatRadioGroup, i17.MatRadioButton, i21.MatTable, i21.MatHeaderCellDef, i21.MatHeaderRowDef, i21.MatColumnDef, i21.MatRowDef, i21.MatHeaderCell, i21.MatHeaderRow, i21.MatRow, i22.MatNestedTreeNode, i22.MatTreeNodeDef, i22.MatTreeNodeToggle, i22.MatTree, i22.MatTreeNode, i22.MatTreeNodeOutlet, i12$1.MatCheckbox, i23.MatSlideToggle, i13.MatFormField, i13.MatLabel, i14.MatInput, i15.MatSelect, i4.MatTooltip, i5$1.EntityTableComponent, GeometryFormFieldInputComponent], [i1$1.AsyncPipe, i7.TranslatePipe]);
+i0.ɵɵsetComponentScope(OgcFilterTimeComponent, [i1$1.NgForOf, i1$1.NgIf, i2$2.NgControlStatus, i2$2.NgModel, i2$2.FormControlDirective, i9.MatOption, i2.MatIcon, i3.MatButton, i23.MatSlideToggle, i13.MatFormField, i13.MatLabel, i13.MatSuffix, i14.MatInput, i15.MatSelect, i4.MatTooltip, i25.MatDatepicker, i25.MatDatepickerInput, i25.MatDatepickerToggle, OgcFilterTimeSliderComponent], [i7.TranslatePipe]);
 
 function ExportButtonComponent_button_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "button", 1);
@@ -31034,7 +31327,7 @@ ImportExportComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Impor
         i0.ɵɵproperty("ngIf", i0.ɵɵpipeBind1(11, 13, ctx.exportableLayers$).length === 0 && ctx.selectedMode === "export");
         i0.ɵɵadvance(2);
         i0.ɵɵproperty("ngIf", i0.ɵɵpipeBind1(13, 15, ctx.exportableLayers$).length > 0 && ctx.selectedMode === "export");
-    } }, dependencies: [i4.MatTooltip, i2$2.ɵNgNoValidate, i2$2.DefaultValueAccessor, i2$2.NgControlStatus, i2$2.NgControlStatusGroup, i2$2.FormGroupDirective, i2$2.FormControlName, i1$1.NgClass, i1$1.NgForOf, i1$1.NgIf, i3.MatButton, i18.MatButtonToggleGroup, i18.MatButtonToggle, i13.MatFormField, i13.MatLabel, i15.MatSelect, i15.MatSelectTrigger, i9.MatOption, i14.MatInput, i15$1.MatSlideToggle, i5$1.SpinnerComponent, i5$1.CustomHtmlComponent, i1$1.AsyncPipe, i7.TranslatePipe, i5$1.KeyValuePipe], styles: ["mat-option.igo-export-layer-mat-option[_ngcontent-%COMP%]{height:5em;line-height:1em}.import-export-toggle[_ngcontent-%COMP%]{padding:10px;text-align:center}.import-export-toggle[_ngcontent-%COMP%]   mat-button-toggle-group[_ngcontent-%COMP%]{width:100%}.import-export-toggle[_ngcontent-%COMP%]   mat-button-toggle-group[_ngcontent-%COMP%]   mat-button-toggle[_ngcontent-%COMP%]{width:50%}h4[_ngcontent-%COMP%]{padding:0 5px}.igo-form[_ngcontent-%COMP%]{padding:15px 5px}.igo-input-container[_ngcontent-%COMP%]   mat-form-field[_ngcontent-%COMP%]{width:100%}.igo-form-button-group[_ngcontent-%COMP%]{text-align:center;padding-top:10px}igo-spinner[_ngcontent-%COMP%]{position:absolute;padding-left:10px}.export-options[_ngcontent-%COMP%], .export-combine-layers[_ngcontent-%COMP%], .export-separator[_ngcontent-%COMP%]{overflow-x:hidden}.export-options[_ngcontent-%COMP%]   mat-slide-toggle[_ngcontent-%COMP%], .export-combine-layers[_ngcontent-%COMP%]   mat-slide-toggle[_ngcontent-%COMP%], .export-separator[_ngcontent-%COMP%]   mat-slide-toggle[_ngcontent-%COMP%]{width:100%;margin:10px}.export-options[_ngcontent-%COMP%]   mat-slide-toggle[_ngcontent-%COMP%]     .mat-slide-toggle-content, .export-combine-layers[_ngcontent-%COMP%]   mat-slide-toggle[_ngcontent-%COMP%]     .mat-slide-toggle-content, .export-separator[_ngcontent-%COMP%]   mat-slide-toggle[_ngcontent-%COMP%]     .mat-slide-toggle-content{width:calc(100% - 60px)}.export-select-trigger[_ngcontent-%COMP%]{opacity:.75;font-size:.75em}"] });
+    } }, dependencies: [i4.MatTooltip, i2$2.ɵNgNoValidate, i2$2.DefaultValueAccessor, i2$2.NgControlStatus, i2$2.NgControlStatusGroup, i2$2.FormGroupDirective, i2$2.FormControlName, i1$1.NgClass, i1$1.NgForOf, i1$1.NgIf, i3.MatButton, i18.MatButtonToggleGroup, i18.MatButtonToggle, i13.MatFormField, i13.MatLabel, i15.MatSelect, i15.MatSelectTrigger, i9.MatOption, i14.MatInput, i23.MatSlideToggle, i5$1.SpinnerComponent, i5$1.CustomHtmlComponent, i1$1.AsyncPipe, i7.TranslatePipe, i5$1.KeyValuePipe], styles: ["mat-option.igo-export-layer-mat-option[_ngcontent-%COMP%]{height:5em;line-height:1em}.import-export-toggle[_ngcontent-%COMP%]{padding:10px;text-align:center}.import-export-toggle[_ngcontent-%COMP%]   mat-button-toggle-group[_ngcontent-%COMP%]{width:100%}.import-export-toggle[_ngcontent-%COMP%]   mat-button-toggle-group[_ngcontent-%COMP%]   mat-button-toggle[_ngcontent-%COMP%]{width:50%}h4[_ngcontent-%COMP%]{padding:0 5px}.igo-form[_ngcontent-%COMP%]{padding:15px 5px}.igo-input-container[_ngcontent-%COMP%]   mat-form-field[_ngcontent-%COMP%]{width:100%}.igo-form-button-group[_ngcontent-%COMP%]{text-align:center;padding-top:10px}igo-spinner[_ngcontent-%COMP%]{position:absolute;padding-left:10px}.export-options[_ngcontent-%COMP%], .export-combine-layers[_ngcontent-%COMP%], .export-separator[_ngcontent-%COMP%]{overflow-x:hidden}.export-options[_ngcontent-%COMP%]   mat-slide-toggle[_ngcontent-%COMP%], .export-combine-layers[_ngcontent-%COMP%]   mat-slide-toggle[_ngcontent-%COMP%], .export-separator[_ngcontent-%COMP%]   mat-slide-toggle[_ngcontent-%COMP%]{width:100%;margin:10px}.export-options[_ngcontent-%COMP%]   mat-slide-toggle[_ngcontent-%COMP%]     .mat-slide-toggle-content, .export-combine-layers[_ngcontent-%COMP%]   mat-slide-toggle[_ngcontent-%COMP%]     .mat-slide-toggle-content, .export-separator[_ngcontent-%COMP%]   mat-slide-toggle[_ngcontent-%COMP%]     .mat-slide-toggle-content{width:calc(100% - 60px)}.export-select-trigger[_ngcontent-%COMP%]{opacity:.75;font-size:.75em}"] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ImportExportComponent, [{
         type: Component,
         args: [{ selector: 'igo-import-export', template: "<div class=\"import-export-toggle mat-typography\">\r\n  <mat-button-toggle-group\r\n        [value]=\"selectedMode\"\r\n        (change)=\"onImportExportChange($event)\">\r\n        <mat-button-toggle [value]=\"'import'\">\r\n          {{'igo.geo.importExportForm.importTabTitle' | translate}}\r\n        </mat-button-toggle>\r\n        <mat-button-toggle [value]=\"'export'\">\r\n          {{'igo.geo.importExportForm.exportTabTitle' | translate}}\r\n        </mat-button-toggle>\r\n  </mat-button-toggle-group>\r\n</div>\r\n\r\n<form class=\"igo-form\" [formGroup]=\"importForm\" *ngIf=\"selectedMode === 'import'\">\r\n  <div class=\"igo-input-container\">\r\n    <mat-form-field>\r\n      <mat-label>{{'igo.geo.importExportForm.importProjPlaceholder' | translate}}</mat-label>\r\n      <mat-select\r\n        [(value)]=\"inputProj\">\r\n        <mat-option\r\n          *ngFor=\"let projection of (projections$ | async)\"\r\n          [value]=\"projection\"\r\n          (click)=\"$event.stopPropagation()\">\r\n          <p mat-line *ngIf=\"projection.translateKey\">{{('igo.geo.importExportForm.projections.' + projection.translateKey) | translate: projection}}</p>\r\n          <p mat-line *ngIf=\"!projection.translateKey\">{{projection.alias}}</p>\r\n        </mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div\r\n    tooltip-position=\"below\"\r\n    matTooltipShowDelay=\"500\"\r\n    [matTooltip]=\"importForm.invalid ? ('igo.geo.importExportForm.projections.choose' | translate) : ('igo.geo.importExportForm.importButton' | translate)\"\r\n    class=\"igo-form-button-group\">\r\n    <button\r\n      [disabled]=\"importForm.invalid || (loading$ | async)\"\r\n      mat-raised-button\r\n      type=\"button\"\r\n      (click)=\"fileInput.click()\">\r\n        {{'igo.geo.importExportForm.importButton' | translate}}\r\n    </button>\r\n    <igo-spinner [shown]=\"loading$ | async\"></igo-spinner>\r\n    <input\r\n      hidden\r\n      #fileInput\r\n      type=\"file\"\r\n      [style.display]=\"'none'\"\r\n      (click)=\"fileInput.value = null\"\r\n      (change)=\"importFiles($event.target.files)\">\r\n  </div>\r\n</form>\r\n<section class=\"mat-typography\" *ngIf=\"selectedMode === 'import'\">\r\n  <div *ngIf=\"importHtmlClarifications === ''\">\r\n    <h4>{{'igo.geo.importExportForm.importClarifications' | translate}}</h4>\r\n    <ul>\r\n      <li>{{'igo.geo.importExportForm.importSizeMax' | translate: {size: fileSizeMb} }}</li>\r\n      <li>{{'igo.geo.importExportForm.importFormatAuthorized' | translate}}</li>\r\n      <li>{{'igo.geo.importExportForm.importShpZip' | translate}}</li>\r\n    </ul>\r\n  </div>\r\n  <igo-custom-html *ngIf=\"importHtmlClarifications !== ''\" class=\"mat-typography\"\r\n    [html]=\"importHtmlClarifications\">\r\n  </igo-custom-html>\r\n</section>\r\n\r\n<section class=\"mat-typography\" *ngIf=\"(exportableLayers$ | async).length === 0 && selectedMode === 'export'\">\r\n  <h4>{{'igo.geo.importExportForm.exportNoLayersExportable' | translate}}</h4>\r\n</section>\r\n\r\n<form class=\"igo-form\" [formGroup]=\"form\" *ngIf=\"(exportableLayers$ | async).length > 0 && selectedMode === 'export'\">\r\n  <div class=\"igo-input-container\">\r\n    <mat-form-field>\r\n      <mat-label>{{'igo.geo.importExportForm.exportLayerPlaceholder' | translate}}</mat-label>\r\n      <mat-select\r\n        [(value)]=\"layers\" multiple>\r\n        <mat-select-trigger>\r\n          {{layers.length ? getLayerTitleById(layers[0]) : ''}}\r\n          <span *ngIf=\"layers.length > 1\" class=\"export-select-trigger\">\r\n            (+{{layers.length - 1}} {{(layers?.length === 2 ? 'igo.geo.importExportForm.other' : 'igo.geo.importExportForm.others') | translate }})\r\n          </span>\r\n        </mat-select-trigger>\r\n        <mat-option\r\n          *ngFor=\"let layer of (exportableLayers$ | async)\"\r\n          [ngClass]=\"{'igo-export-layer-mat-option': layerHasSelectedFeatures(layer)}\"\r\n          [value]=\"layer.id\"\r\n          (click)=\"$event.stopPropagation()\">\r\n          <p mat-line>{{layer.title}}</p>\r\n          <p mat-line>\r\n            <mat-slide-toggle *ngIf=\"layerHasSelectedFeatures(layer)\"\r\n              [labelPosition]=\"'after'\"\r\n              (click)=\"onlySelectedClick($event,layer.id)\"\r\n              (checked)=\"inLayersIdToExportSelectionOnly(layer)\"\r\n              (change)=\"onlySelected($event,layer.id)\">\r\n              <small>{{'igo.geo.importExportForm.exportSelectedFeature' | translate}}</small>\r\n            </mat-slide-toggle>\r\n          </p>\r\n        </mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div class=\"igo-input-container\">\r\n    <mat-form-field>\r\n      <mat-label>{{'igo.geo.importExportForm.exportFormatPlaceholder' | translate}}</mat-label>\r\n      <mat-select\r\n        formControlName=\"format\">\r\n        <ng-container *ngIf=\"(formats$ | async).length !== 0\">\r\n          <mat-option *ngFor=\"let format of (formats$ | async) | keyvalue\" [value]=\"format.key\">\r\n            {{'igo.geo.export.format.' + format.value | translate}}\r\n          </mat-option>\r\n        </ng-container>\r\n        <mat-option *ngIf=\"(formats$ | async).length === 0\" disabled=\"true\">\r\n          {{'igo.geo.export.noFormat.title' | translate}}\r\n        </mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div class=\"igo-input-container\" *ngIf=\"forceNaming && form.value.format !== 'URL'\">\r\n    <mat-form-field>\r\n        <input matInput formControlName=\"name\" placeholder=\"{{'igo.geo.importExportForm.exportFileNamePlaceholder' | translate}}\">\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div class=\"igo-input-container\" *ngIf=\"form.value.format === 'CSVcomma' || form.value.format === 'CSVsemicolon'\">\r\n    <mat-form-field>\r\n      <mat-label>{{'igo.geo.importExportForm.encodingPlaceholder' | translate}}</mat-label>\r\n      <mat-select\r\n        formControlName=\"encoding\">\r\n        <ng-container *ngIf=\"(encodings$ | async).length !== 0\">\r\n          <mat-option *ngFor=\"let encoding of (encodings$ | async) | keyvalue\" [value]=\"encoding.key\">\r\n            {{'igo.geo.export.encoding.' + encoding.value | translate}}\r\n          </mat-option>\r\n        </ng-container>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div class=\"export-combine-layers mat-typography\" *ngIf=\"layers.length > 1 && (form.value.format === 'CSVcomma' || form.value.format === 'CSVsemicolon')\">\r\n    <mat-slide-toggle\r\n        formControlName=\"combineLayers\"\r\n        [labelPosition]=\"'before'\">\r\n          {{'igo.geo.importExportForm.exportCombineResults' | translate}}\r\n    </mat-slide-toggle>\r\n  </div>\r\n\r\n  <div class=\"export-separator mat-typography\" *ngIf=\"layers.length > 1 && (form.value.format === 'CSVcomma' || form.value.format === 'CSVsemicolon') && form.value.combineLayers\">\r\n    <mat-slide-toggle\r\n        formControlName=\"separator\"\r\n        [labelPosition]=\"'before'\">\r\n          {{'igo.geo.importExportForm.exportSeparator' | translate}}\r\n    </mat-slide-toggle>\r\n  </div>\r\n\r\n  <div class=\"export-options mat-typography\" *ngIf=\"form.value.format !== 'URL'\">\r\n    <mat-slide-toggle\r\n        formControlName=\"featureInMapExtent\"\r\n        [labelPosition]=\"'before'\">\r\n          {{'igo.geo.importExportForm.exportFeatureInExtent' | translate}}\r\n    </mat-slide-toggle>\r\n  </div>\r\n\r\n  <div class=\"igo-form-button-group\">\r\n    <button\r\n      mat-raised-button\r\n      type=\"button\"\r\n      [disabled]=\"!form.valid || (loading$ | async)\"\r\n      (click)=\"handleExportFormSubmit(form.value)\">\r\n      {{form.value.format !== 'URL'  ? ('igo.geo.importExportForm.exportButton' | translate): (form.value.layers.length > 1  ? ('igo.geo.importExportForm.exportButtonLinks' | translate): ('igo.geo.importExportForm.exportButtonLink' | translate))}}\r\n    </button>\r\n    <igo-spinner [shown]=\"loading$ | async\"></igo-spinner>\r\n  </div>\r\n\r\n  <igo-custom-html *ngIf=\"exportHtmlClarifications !== ''\" class=\"mat-typography\"\r\n    [html]=\"exportHtmlClarifications\">\r\n  </igo-custom-html>\r\n\r\n</form>\r\n", styles: ["mat-option.igo-export-layer-mat-option{height:5em;line-height:1em}.import-export-toggle{padding:10px;text-align:center}.import-export-toggle mat-button-toggle-group{width:100%}.import-export-toggle mat-button-toggle-group mat-button-toggle{width:50%}h4{padding:0 5px}.igo-form{padding:15px 5px}.igo-input-container mat-form-field{width:100%}.igo-form-button-group{text-align:center;padding-top:10px}igo-spinner{position:absolute;padding-left:10px}.export-options,.export-combine-layers,.export-separator{overflow-x:hidden}.export-options mat-slide-toggle,.export-combine-layers mat-slide-toggle,.export-separator mat-slide-toggle{width:100%;margin:10px}.export-options mat-slide-toggle ::ng-deep .mat-slide-toggle-content,.export-combine-layers mat-slide-toggle ::ng-deep .mat-slide-toggle-content,.export-separator mat-slide-toggle ::ng-deep .mat-slide-toggle-content{width:calc(100% - 60px)}.export-select-trigger{opacity:.75;font-size:.75em}\n"] }]
@@ -31584,7 +31877,7 @@ IgoMeasurerModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [Common
         IgoLanguageModule,
         IgoEntityTableModule], exports: [MeasureFormatPipe,
         MeasurerComponent] }); })();
-i0.ɵɵsetComponentScope(MeasurerComponent, [i1$1.NgIf, i3.MatButton, i18.MatButtonToggleGroup, i18.MatButtonToggle, i2.MatIcon, i4.MatTooltip, i15$1.MatSlideToggle, i11.MatDivider, i5$1.EntityTableComponent, MeasurerItemComponent], [i1$1.AsyncPipe, i7.TranslatePipe]);
+i0.ɵɵsetComponentScope(MeasurerComponent, [i1$1.NgIf, i3.MatButton, i18.MatButtonToggleGroup, i18.MatButtonToggle, i2.MatIcon, i4.MatTooltip, i23.MatSlideToggle, i11.MatDivider, i5$1.EntityTableComponent, MeasurerItemComponent], [i1$1.AsyncPipe, i7.TranslatePipe]);
 i0.ɵɵsetComponentScope(MeasurerDialogComponent, [i1$1.NgIf], [i7.TranslatePipe, MeasureFormatPipe]);
 
 class IgoMeasureModule {
@@ -32860,7 +33153,7 @@ PrintFormComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrintFor
         i0.ɵɵproperty("disabled", !ctx.form.valid || i0.ɵɵpipeBind1(62, 68, ctx.disabled$));
         i0.ɵɵadvance(2);
         i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(64, 70, "igo.geo.printForm.saveBtn"), " ");
-    } }, dependencies: [i1$1.NgForOf, i2$2.ɵNgNoValidate, i2$2.DefaultValueAccessor, i2$2.NgControlStatus, i2$2.NgControlStatusGroup, i2$2.FormGroupDirective, i2$2.FormControlName, i3.MatButton, i13.MatFormField, i15.MatSelect, i9.MatOption, i14.MatInput, i15$1.MatSlideToggle, i1$1.AsyncPipe, i7.TranslatePipe, i5$1.KeyValuePipe], styles: ["mat-form-field[_ngcontent-%COMP%]{width:100%}.print-slide-toggle-container[_ngcontent-%COMP%]{overflow-x:hidden}.print-slide-toggle-container[_ngcontent-%COMP%]   mat-slide-toggle[_ngcontent-%COMP%]{width:100%;margin:10px}.print-slide-toggle-container[_ngcontent-%COMP%]   mat-slide-toggle[_ngcontent-%COMP%]     .mat-slide-toggle-content{width:calc(100% - 60px)}.print-option[_ngcontent-%COMP%]{display:block;margin-right:10px;margin-bottom:15px}.print-button-top-padding[_ngcontent-%COMP%]{padding-top:25px}.igo-form[_ngcontent-%COMP%]{padding:10px 5px 5px}.igo-form-button-group[_ngcontent-%COMP%]{text-align:center}"] });
+    } }, dependencies: [i1$1.NgForOf, i2$2.ɵNgNoValidate, i2$2.DefaultValueAccessor, i2$2.NgControlStatus, i2$2.NgControlStatusGroup, i2$2.FormGroupDirective, i2$2.FormControlName, i3.MatButton, i13.MatFormField, i15.MatSelect, i9.MatOption, i14.MatInput, i23.MatSlideToggle, i1$1.AsyncPipe, i7.TranslatePipe, i5$1.KeyValuePipe], styles: ["mat-form-field[_ngcontent-%COMP%]{width:100%}.print-slide-toggle-container[_ngcontent-%COMP%]{overflow-x:hidden}.print-slide-toggle-container[_ngcontent-%COMP%]   mat-slide-toggle[_ngcontent-%COMP%]{width:100%;margin:10px}.print-slide-toggle-container[_ngcontent-%COMP%]   mat-slide-toggle[_ngcontent-%COMP%]     .mat-slide-toggle-content{width:calc(100% - 60px)}.print-option[_ngcontent-%COMP%]{display:block;margin-right:10px;margin-bottom:15px}.print-button-top-padding[_ngcontent-%COMP%]{padding-top:25px}.igo-form[_ngcontent-%COMP%]{padding:10px 5px 5px}.igo-form-button-group[_ngcontent-%COMP%]{text-align:center}"] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrintFormComponent, [{
         type: Component,
         args: [{ selector: 'igo-print-form', template: "<form class=\"igo-form\" [formGroup]=\"form\">\r\n  <div class=\"igo-input-container\">\r\n    <mat-form-field>\r\n      <input\r\n        matInput\r\n        formControlName=\"title\"\r\n        placeholder=\"{{'igo.geo.printForm.title' | translate}}\">\r\n    </mat-form-field>\r\n  </div>\r\n  <div class=\"igo-input-container\">\r\n    <mat-form-field>\r\n      <input\r\n        matInput\r\n        formControlName=\"subtitle\"\r\n        placeholder=\"{{'igo.geo.printForm.subtitle' | translate}}\">\r\n    </mat-form-field>\r\n  </div>\r\n  <div class=\"igo-input-container\">\r\n    <mat-form-field>\r\n      <input\r\n        matInput\r\n        formControlName=\"comment\"\r\n        placeholder=\"{{'igo.geo.printForm.comment' | translate}}\">\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div class=\"igo-input-container\">\r\n    <div class=\"print-slide-toggle-container mat-typography\">\r\n      <mat-slide-toggle\r\n        class=\"print-option\"\r\n        formControlName=\"showProjection\"\r\n        [labelPosition]=\"'before'\">\r\n        {{'igo.geo.printForm.showProjection' | translate}}\r\n      </mat-slide-toggle>\r\n      <mat-slide-toggle\r\n        class=\"print-option\"\r\n        formControlName=\"showScale\"\r\n        [labelPosition]=\"'before'\">\r\n        {{'igo.geo.printForm.showScale' | translate}}\r\n      </mat-slide-toggle>\r\n      <mat-slide-toggle\r\n        class=\"print-option\"\r\n        formControlName=\"doZipFile\"\r\n        [labelPosition]=\"'before'\"\r\n        [style.display]=\"isPrintService ? 'none' : ''\">\r\n        {{'igo.geo.printForm.doZipFile' | translate}}\r\n      </mat-slide-toggle>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"igo-input-container\">\r\n    <mat-form-field>\r\n      <mat-select\r\n        formControlName=\"legendPosition\"\r\n        placeholder=\"{{'igo.geo.printForm.legendPosition' | translate}}\">\r\n        <mat-option *ngFor=\"let legendPosition of legendPositions | keyvalue \" [value]=\"legendPosition.key\">\r\n            {{'igo.geo.printForm.legendPositions.' + legendPosition.value | translate}}\r\n        </mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div class=\"igo-input-container\">\r\n    <mat-form-field>\r\n      <mat-select (selectionChange)=\"toggleImageSaveProp()\"\r\n        formControlName=\"outputFormat\"\r\n        placeholder=\"{{'igo.geo.printForm.outputFormat' | translate}}\">\r\n        <mat-option *ngFor=\"let outputFormat of outputFormats | keyvalue \" [value]=\"outputFormat.key\">\r\n            {{outputFormat.value}}\r\n        </mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div class=\"igo-input-container\" [style.display]=\"isPrintService ? 'block' : 'none'\">\r\n    <mat-form-field>\r\n      <mat-select\r\n        formControlName=\"paperFormat\"\r\n        placeholder=\"{{'igo.geo.printForm.paperFormat' | translate}}\">\r\n        <mat-option *ngFor=\"let paperFormat of paperFormats | keyvalue \" [value]=\"paperFormat.key\">\r\n          {{('igo.geo.printForm.paperFormats.' + paperFormat.value) | translate}}\r\n        </mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div class=\"igo-input-container\" [style.display]=\"isPrintService ? 'none' : 'block'\">\r\n    <mat-form-field>\r\n      <mat-select\r\n        formControlName=\"imageFormat\"\r\n        placeholder=\"{{'igo.geo.printForm.imageFormat' | translate}}\">\r\n        <mat-option *ngFor=\"let imageFormat of imageFormats | keyvalue \" [value]=\"imageFormat.key\">\r\n          {{imageFormat.value}}\r\n        </mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div class=\"igo-input-container\" style=\"display: none;\">\r\n    <mat-form-field>\r\n      <mat-select\r\n        formControlName=\"resolution\"\r\n        placeholder=\"{{'igo.geo.printForm.resolution' | translate}}\">\r\n        <mat-option *ngFor=\"let resolution of resolutions | keyvalue \" [value]=\"resolution.key\">\r\n          {{resolution.value + ' PPI'}}\r\n        </mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div class=\"igo-input-container\" [style.display]=\"isPrintService ? 'block' : 'none'\">\r\n    <mat-form-field>\r\n      <mat-select\r\n        formControlName=\"orientation\"\r\n        placeholder=\"{{'igo.geo.printForm.orientation' | translate}}\">\r\n        <mat-option *ngFor=\"let orientation of orientations | keyvalue \" [value]=\"orientation.key\">\r\n          {{('igo.geo.printForm.' + orientation.value) | translate}}\r\n        </mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div class=\"igo-form-button-group print-button-top-padding\">\r\n    <button\r\n      mat-raised-button\r\n      type=\"button\"\r\n      [disabled]=\"!form.valid || (disabled$ | async)\"\r\n      (click)=\"handleFormSubmit(form.value, form.valid)\">\r\n      {{'igo.geo.printForm.saveBtn' | translate}}\r\n    </button>\r\n  </div>\r\n\r\n</form>\r\n", styles: ["mat-form-field{width:100%}.print-slide-toggle-container{overflow-x:hidden}.print-slide-toggle-container mat-slide-toggle{width:100%;margin:10px}.print-slide-toggle-container mat-slide-toggle ::ng-deep .mat-slide-toggle-content{width:calc(100% - 60px)}.print-option{display:block;margin-right:10px;margin-bottom:15px}.print-button-top-padding{padding-top:25px}.igo-form{padding:10px 5px 5px}.igo-form-button-group{text-align:center}\n"] }]
@@ -36817,7 +37110,7 @@ SearchSettingsComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Sea
         i0.ɵɵproperty("ngForOf", ctx.getSearchSources());
         i0.ɵɵadvance(1);
         i0.ɵɵproperty("ngIf", ctx.hasPointerReverseSearchSource && !ctx.isTouchScreen);
-    } }, dependencies: [i1$1.NgForOf, i1$1.NgIf, i1$1.NgSwitch, i1$1.NgSwitchCase, i4.MatTooltip, i2.MatIcon, i3.MatButton, i7$2.MatMenu, i7$2.MatMenuItem, i7$2.MatMenuTrigger, i17.MatRadioGroup, i17.MatRadioButton, i12$1.MatCheckbox, i11.MatDivider, i15$1.MatSlideToggle, i7.TranslatePipe], styles: [".checkAllButton[_ngcontent-%COMP%]{text-align:center;padding:0 5px}.igo-search-settings-button[_ngcontent-%COMP%]     div.mat-button-ripple-round{border-radius:0}.igo-search-settings-radio-group[_ngcontent-%COMP%]{display:flex;flex-direction:column}.igo-search-settings-radio-group[_ngcontent-%COMP%]   mat-radio-button[_ngcontent-%COMP%]{margin:5px}.igo-search-settings-checkbox[_ngcontent-%COMP%]   mat-radio-button[_ngcontent-%COMP%]{display:flex}.igo-search-settings-search-source[_ngcontent-%COMP%]{display:flex;width:100%}.igo-search-settings-search-source[_ngcontent-%COMP%]   mat-checkbox[_ngcontent-%COMP%]{display:flex;margin-left:5px;margin-right:5px}.pointer-summary-option[_ngcontent-%COMP%]{display:block;margin-right:10px;margin-bottom:15px}.pointer-summary-slide-toggle-container[_ngcontent-%COMP%]{overflow-x:hidden}.pointer-summary-slide-toggle-container[_ngcontent-%COMP%]   mat-slide-toggle[_ngcontent-%COMP%]{margin:10px}"], changeDetection: 0 });
+    } }, dependencies: [i1$1.NgForOf, i1$1.NgIf, i1$1.NgSwitch, i1$1.NgSwitchCase, i4.MatTooltip, i2.MatIcon, i3.MatButton, i7$2.MatMenu, i7$2.MatMenuItem, i7$2.MatMenuTrigger, i17.MatRadioGroup, i17.MatRadioButton, i12$1.MatCheckbox, i11.MatDivider, i23.MatSlideToggle, i7.TranslatePipe], styles: [".checkAllButton[_ngcontent-%COMP%]{text-align:center;padding:0 5px}.igo-search-settings-button[_ngcontent-%COMP%]     div.mat-button-ripple-round{border-radius:0}.igo-search-settings-radio-group[_ngcontent-%COMP%]{display:flex;flex-direction:column}.igo-search-settings-radio-group[_ngcontent-%COMP%]   mat-radio-button[_ngcontent-%COMP%]{margin:5px}.igo-search-settings-checkbox[_ngcontent-%COMP%]   mat-radio-button[_ngcontent-%COMP%]{display:flex}.igo-search-settings-search-source[_ngcontent-%COMP%]{display:flex;width:100%}.igo-search-settings-search-source[_ngcontent-%COMP%]   mat-checkbox[_ngcontent-%COMP%]{display:flex;margin-left:5px;margin-right:5px}.pointer-summary-option[_ngcontent-%COMP%]{display:block;margin-right:10px;margin-bottom:15px}.pointer-summary-slide-toggle-container[_ngcontent-%COMP%]{overflow-x:hidden}.pointer-summary-slide-toggle-container[_ngcontent-%COMP%]   mat-slide-toggle[_ngcontent-%COMP%]{margin:10px}"], changeDetection: 0 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SearchSettingsComponent, [{
         type: Component,
         args: [{ selector: 'igo-search-settings', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"igo-search-settings\">\r\n\r\n  <button\r\n    mat-icon-button\r\n    class=\"igo-search-settings-button\"\r\n    color=\"primary\"\r\n    tooltip-position=\"below\"\r\n    matTooltipShowDelay=\"500\"\r\n    [matTooltip]=\"'igo.geo.search.menu.tooltip' | translate\"\r\n    [matMenuTriggerFor]=\"searchSettingsMenu\">\r\n    <mat-icon svgIcon=\"chevron-down\"></mat-icon>\r\n  </button>\r\n  <mat-menu\r\n    #searchSettingsMenu=\"matMenu\"\r\n    class=\"no-border-radius\">\r\n    <div class=\"checkAllButton\" *ngIf=\"getSearchSources().length>4\">\r\n      <button mat-raised-button\r\n        (click)=\"checkUncheckAllSources($event)\">{{!searchSourcesAllEnabled  ? ('igo.geo.search.searchSources.unselectAll' | translate): ('igo.geo.search.searchSources.selectAll' | translate)}}</button>\r\n    </div>\r\n      <ng-container *ngFor=\"let source of getSearchSources()\">\r\n        <span class=\"igo-search-settings-search-source\">\r\n          <mat-checkbox\r\n            class=\"igo-search-settings-checkbox\"\r\n            [checked]=\"source.enabled\"\r\n            [value]=\"source\"\r\n            (click)=\"$event.stopPropagation()\"\r\n            (change)=\"onCheckSearchSource($event, source)\">\r\n          </mat-checkbox>\r\n          <button *ngIf=\"source.settings.length\u00A0>\u00A00\"\r\n            [matMenuTriggerFor]=\"sub_menu\"\r\n            mat-menu-item>{{source.title}}\r\n          </button>\r\n          <button\r\n            mat-menu-item\r\n            *ngIf=\"source.settings.length\u00A0===\u00A00\">\r\n            {{source.title}}\r\n          </button>\r\n        </span>\r\n          <mat-menu #sub_menu=\"matMenu\">\r\n            <ng-container *ngFor=\"let setting of source.settings\">\r\n              <button\r\n                  mat-menu-item\r\n                  [matMenuTriggerFor]=\"test_sub_menu\">\r\n                {{'igo.geo.search.searchSources.settings.'+ setting.title | translate}}\r\n              </button>\r\n              <mat-menu #test_sub_menu=\"matMenu\"\r\n                [ngSwitch]=\"setting.type\"\r\n                yPosition=\"above\">\r\n                <span *ngSwitchCase=\"'radiobutton'\">\r\n                  <mat-radio-group\r\n                    class=\"igo-search-settings-radio-group\"\r\n                    [value]=\"setting\">\r\n                    <mat-radio-button *ngFor=\"let settingValue of setting.values\"\r\n                      class=\"mat-typography\"\r\n                      [value]=\"settingValue\"\r\n                      [matTooltip]=\"getAvailableHashtagsValues(settingValue)\"\r\n                      [checked]=\"settingValue.enabled\"\r\n                      (click)=\"$event.stopPropagation()\"\r\n                      (change)=\"settingsValueCheckedRadioButton($event, source, setting, settingValue)\">\r\n                      {{settingValue.title | translate}}\r\n                    </mat-radio-button>\r\n                  </mat-radio-group>\r\n                </span>\r\n                <span *ngSwitchCase=\"'checkbox'\">\r\n                  <div class=\"checkAllButton\" *ngIf=\"setting.values.length\u00A0>\u00A03\">\r\n                    <button mat-raised-button\r\n                      (click)=\"checkUncheckAll($event, source, setting)\">{{setting.allEnabled || setting.allEnabled === undefined  ? ('igo.geo.search.searchSources.settings.unselectAll' | translate): ('igo.geo.search.searchSources.settings.selectAll' | translate)}}</button>\r\n                  </div>\r\n                  <mat-checkbox *ngFor=\"let settingValue of getAvailableValues(setting)\"\r\n                    class=\"mat-menu-item\"\r\n                    [style.display]=\"displayBlock\"\r\n                    [checked]=\"settingValue.enabled\"\r\n                    [value]=\"setting\"\r\n                    [matTooltip]=\"getAvailableHashtagsValues(settingValue)\"\r\n                    (click)=\"$event.stopPropagation()\"\r\n                    (change)=\"settingsValueCheckedCheckbox($event, source, setting, settingValue)\">\r\n                    {{settingValue.title | translate}}\r\n                  </mat-checkbox>\r\n                </span>\r\n              </mat-menu>\r\n            </ng-container>\r\n          </mat-menu>\r\n      </ng-container>\r\n      <span *ngIf=\"hasPointerReverseSearchSource && !isTouchScreen\">\r\n        <mat-divider></mat-divider>\r\n        <span class=\"pointer-summary-slide-toggle-container mat-typography\">\r\n          <mat-slide-toggle class=\"pointer-summary-option\" (change)=\"changePointerReverseSearch($event)\" tooltip-position=\"below\"\r\n            matTooltipShowDelay=\"500\" [matTooltip]=\"'igo.geo.search.pointerSearchSummary.tooltip' | translate\"\r\n            (click)=\"$event.stopPropagation()\" [checked]=\"pointerSummaryEnabled\" [labelPosition]=\"'after'\">\r\n            {{'igo.geo.search.pointerSearchSummary.title' | translate}}\r\n          </mat-slide-toggle>\r\n          <mat-slide-toggle class=\"pointer-summary-option\" (change)=\"changeSearchResultsGeometry($event)\" tooltip-position=\"below\"\r\n            matTooltipShowDelay=\"500\" [matTooltip]=\"'igo.geo.search.searchResultsGeometry.tooltip' | translate\"\r\n            (click)=\"$event.stopPropagation()\" [checked]=\"searchResultsGeometryEnabled\" [labelPosition]=\"'after'\">\r\n            {{'igo.geo.search.searchResultsGeometry.title' | translate}}\r\n          </mat-slide-toggle>\r\n        </span>\r\n      </span>\r\n  </mat-menu>\r\n</div>\r\n", styles: [".checkAllButton{text-align:center;padding:0 5px}.igo-search-settings-button ::ng-deep div.mat-button-ripple-round{border-radius:0}.igo-search-settings-radio-group{display:flex;flex-direction:column}.igo-search-settings-radio-group mat-radio-button{margin:5px}.igo-search-settings-checkbox mat-radio-button{display:flex}.igo-search-settings-search-source{display:flex;width:100%}.igo-search-settings-search-source mat-checkbox{display:flex;margin-left:5px;margin-right:5px}.pointer-summary-option{display:block;margin-right:10px;margin-bottom:15px}.pointer-summary-slide-toggle-container{overflow-x:hidden}.pointer-summary-slide-toggle-container mat-slide-toggle{margin:10px}\n"] }]