@igo2/geo 1.14.1 → 1.14.2

package/fesm2020/igo2-geo.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { Injectable, Component, ChangeDetectionStrategy, Input, ViewEncapsulation, Inject, NgModule, Optional, Directive, EventEmitter, Self, Output, HostListener, ViewChildren, ContentChild, ViewChild, Pipe, InjectionToken, APP_INITIALIZER, Injector } from '@angular/core';
-import * as i1$1 from '@angular/common';
+import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i7$1 from '@angular/material/badge';
 import { MatBadgeModule } from '@angular/material/badge';
@@ -12,15 +12,15 @@ import * as i4 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import * as i5$1 from '@igo2/common';
 import { getEntityId, getEntityTitle, getEntityProperty, getEntityRevision, getEntityIcon, EntityStore, EntityStoreStrategy, EntityStoreWatcher, SecureImagePipe, EntityTableColumnRenderer, IgoListModule, IgoCollapsibleModule, IgoImageModule, IgoPanelModule, IgoMatBadgeIconModule, IgoCustomHtmlModule, IgoEntityTableModule, IgoKeyValueModule, IgoFormModule, IgoFormFieldComponent, DOMService, EntityStoreFilterSelectionStrategy, IgoEntityModule, IgoDOMModule, DragAndDropDirective, IgoSpinnerModule, IgoDrapDropModule, IgoConfirmDialogModule, getEntityTitleHtml, EntityStoreFilterCustomFuncStrategy, IgoStopPropagationModule, IgoFlexibleModule, WidgetService, Workspace, ActionStore, IgoWidgetModule } from '@igo2/common';
-import * as i3 from '@angular/material/button';
+import * as i3$1 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i2$1 from '@igo2/core';
 import { IgoLanguageModule, ConfigService, Media, StorageScope, IgoMessageModule, LanguageService, StorageService } from '@igo2/core';
-import * as i1 from '@angular/material/dialog';
+import * as i3 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
 import * as i7 from '@ngx-translate/core';
-import { BehaviorSubject, combineLatest, of, Observable, forkJoin, Subject, interval, skipWhile as skipWhile$1, zip, EMPTY, ReplaySubject, timer, fromEvent, Subscription, throwError } from 'rxjs';
-import { map, concatMap, first, catchError, skipWhile, debounceTime, skip, distinctUntilChanged, switchMap, take, mergeMap, debounce, takeUntil } from 'rxjs/operators';
+import { BehaviorSubject, combineLatest, of, Observable, forkJoin, Subject, interval, skipWhile as skipWhile$1, zip, EMPTY, ReplaySubject, timer, fromEvent, Subscription, throwError, take as take$1 } from 'rxjs';
+import { map, concatMap, first, catchError, skipWhile, debounceTime, skip, distinctUntilChanged, switchMap, take, mergeMap, debounce, takeUntil, startWith } from 'rxjs/operators';
 import { Watcher, uuid, SubjectStatus, NumberUtils, ObjectUtils, userAgent, Clipboard, downloadContent, strEnum, ChangeUtils } from '@igo2/utils';
 import olMap from 'ol/Map';
 import olView from 'ol/View';
@@ -64,7 +64,7 @@ import olFormatOSMXML from 'ol/format/OSMXML';
 import olSourceOSM from 'ol/source/OSM';
 import olSourceXYZ from 'ol/source/XYZ';
 import * as OlLoadingStrategy from 'ol/loadingstrategy';
-import * as i1$2 from '@angular/common/http';
+import * as i1$1 from '@angular/common/http';
 import { HttpParams, HttpClient, HttpHeaders } from '@angular/common/http';
 import olSourceImageWMS from 'ol/source/ImageWMS';
 import olSourceWMTS from 'ol/source/WMTS';
@@ -96,7 +96,7 @@ import RenderFeature from 'ol/render/Feature';
 import NoSleep from 'nosleep.js';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 import { stylefunction } from 'ol-mapbox-style';
-import * as i1$3 from 'ngx-indexed-db';
+import * as i1$2 from 'ngx-indexed-db';
 import { DBMode } from 'ngx-indexed-db';
 import { bearingToAzimuth, lineString } from '@turf/helpers';
 import striptags from 'striptags';
@@ -160,7 +160,7 @@ import { saveAs } from 'file-saver';
 import jsPDF from 'jspdf';
 import html2canvas from 'html2canvas';
 import JSZip from 'jszip';
-import * as i3$1 from '@angular/cdk/drag-drop';
+import * as i3$2 from '@angular/cdk/drag-drop';
 import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
 import pointOnFeature from '@turf/point-on-feature';
 import Collection from 'ol/Collection';
@@ -261,16 +261,16 @@ class MetadataButtonComponent {
         return this.layer.options;
     }
 }
-MetadataButtonComponent.ɵfac = function MetadataButtonComponent_Factory(t) { return new (t || MetadataButtonComponent)(i0.ɵɵdirectiveInject(MetadataService), i0.ɵɵdirectiveInject(i1.MatDialog)); };
+MetadataButtonComponent.ɵfac = function MetadataButtonComponent_Factory(t) { return new (t || MetadataButtonComponent)(i0.ɵɵdirectiveInject(MetadataService), i0.ɵɵdirectiveInject(i3.MatDialog)); };
 MetadataButtonComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MetadataButtonComponent, selectors: [["igo-metadata-button"]], inputs: { layer: "layer", color: "color" }, decls: 1, vars: 1, consts: [["mat-icon-button", "", "tooltip-position", "below", "matTooltipShowDelay", "500", 3, "matTooltip", "color", "click", 4, "ngIf"], ["mat-icon-button", "", "tooltip-position", "below", "matTooltipShowDelay", "500", 3, "matTooltip", "color", "click"], ["svgIcon", "information-outline"]], template: function MetadataButtonComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵtemplate(0, MetadataButtonComponent_button_0_Template, 3, 4, "button", 0);
     } if (rf & 2) {
         i0.ɵɵproperty("ngIf", ctx.options && ctx.options.metadata && ctx.options.metadata.url || ctx.options && ctx.options.metadata && ctx.options.metadata.abstract);
-    } }, dependencies: [i1$1.NgIf, i2.MatIcon, i3.MatButton, i4.MatTooltip, i7.TranslatePipe], changeDetection: 0 });
+    } }, dependencies: [i1.NgIf, i2.MatIcon, i3$1.MatButton, i4.MatTooltip, i7.TranslatePipe], changeDetection: 0 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MetadataButtonComponent, [{
         type: Component,
         args: [{ selector: 'igo-metadata-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  *ngIf=\"(options && options.metadata && options.metadata.url) || (options && options.metadata && options.metadata.abstract)\"\n  mat-icon-button\n  tooltip-position=\"below\"\n  matTooltipShowDelay=\"500\"\n  [matTooltip]=\"'igo.geo.metadata.show' | translate\"\n  [color]=\"color\"\n  (click)=\"openMetadata(options.metadata)\">\n  <mat-icon svgIcon=\"information-outline\"></mat-icon>\n</button>\n" }]
-    }], function () { return [{ type: MetadataService }, { type: i1.MatDialog }]; }, { layer: [{
+    }], function () { return [{ type: MetadataService }, { type: i3.MatDialog }]; }, { layer: [{
             type: Input
         }], color: [{
             type: Input
@@ -297,7 +297,7 @@ MetadataAbstractComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: M
         i0.ɵɵproperty("ngIf", ctx.data.type !== "arcgisrest");
         i0.ɵɵadvance(1);
         i0.ɵɵproperty("ngIf", ctx.data.type === "arcgisrest");
-    } }, dependencies: [i1$1.NgIf, i3.MatButton, i1.MatDialogClose, i1.MatDialogTitle, i1.MatDialogContent], styles: [".close-button{top:5px;right:5px;padding:7px;line-height:10px;position:absolute!important;min-width:auto}mat-dialog-container{position:relative}\n"], encapsulation: 2 });
+    } }, dependencies: [i1.NgIf, i3$1.MatButton, i3.MatDialogClose, i3.MatDialogTitle, i3.MatDialogContent], styles: [".close-button{top:5px;right:5px;padding:7px;line-height:10px;position:absolute!important;min-width:auto}mat-dialog-container{position:relative}\n"], encapsulation: 2 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MetadataAbstractComponent, [{
         type: Component,
         args: [{ selector: 'igo-metadata-abstract', encapsulation: ViewEncapsulation.None, template: "<h2 mat-dialog-title>{{ data.layerTitle }}</h2>\n<button class=\"close-button\" mat-button mat-dialog-close>X</button>\n<mat-dialog-content *ngIf=\"data.type !== 'arcgisrest'\" class=\"mat-typography\">\n  <h3>{{ data.abstract }}</h3>\n</mat-dialog-content>\n<mat-dialog-content *ngIf=\"data.type === 'arcgisrest'\" class=\"mat-typography\">\n  <h3 [innerHTML]=\"data.abstract\"></h3>\n</mat-dialog-content>\n", styles: [".close-button{top:5px;right:5px;padding:7px;line-height:10px;position:absolute!important;min-width:auto}mat-dialog-container{position:relative}\n"] }]
@@ -1104,6 +1104,7 @@ function roundCoordToString(coord, decimal = 3) {
  * and for the current UTM zone and MTM zone.
  * @param lonLat [number, number] array of the coordinate to transform.
  * @param projections  Projection[] Array of destination projection.
+ * @param reverseCoords To reverse coords from latLon to lonLat (search option)
  * @returns Returns an array of converted coordinates.
  */
 function lonLatConversion(lonLat, projections) {
@@ -2866,14 +2867,14 @@ class WFSService extends DataService {
         return sourceFields;
     }
 }
-WFSService.ɵfac = function WFSService_Factory(t) { return new (t || WFSService)(i0.ɵɵinject(i1$2.HttpClient)); };
+WFSService.ɵfac = function WFSService_Factory(t) { return new (t || WFSService)(i0.ɵɵinject(i1$1.HttpClient)); };
 WFSService.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: WFSService, factory: WFSService.ɵfac, providedIn: 'root' });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WFSService, [{
         type: Injectable,
         args: [{
                 providedIn: 'root'
             }]
-    }], function () { return [{ type: i1$2.HttpClient }]; }, null); })();
+    }], function () { return [{ type: i1$1.HttpClient }]; }, null); })();
 
 var QueryFormat;
 (function (QueryFormat) {
@@ -4347,7 +4348,7 @@ class CapabilitiesService {
         return legendOptions;
     }
 }
-CapabilitiesService.ɵfac = function CapabilitiesService_Factory(t) { return new (t || CapabilitiesService)(i0.ɵɵinject(i1$2.HttpClient), i0.ɵɵinject(MapService)); };
+CapabilitiesService.ɵfac = function CapabilitiesService_Factory(t) { return new (t || CapabilitiesService)(i0.ɵɵinject(i1$1.HttpClient), i0.ɵɵinject(MapService)); };
 CapabilitiesService.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: CapabilitiesService, factory: CapabilitiesService.ɵfac, providedIn: 'root' });
 __decorate([
     Cacheable({
@@ -4374,7 +4375,7 @@ __decorate([
         args: [{
                 providedIn: 'root'
             }]
-    }], function () { return [{ type: i1$2.HttpClient }, { type: MapService }]; }, { getArcgisOptions: [], getImageArcgisOptions: [], getTileArcgisOptions: [], getCapabilities: [] }); })();
+    }], function () { return [{ type: i1$1.HttpClient }, { type: MapService }]; }, { getArcgisOptions: [], getImageArcgisOptions: [], getTileArcgisOptions: [], getCapabilities: [] }); })();
 
 class OptionsService {
 }
@@ -4724,14 +4725,14 @@ class OptionsApiService extends OptionsService {
         }));
     }
 }
-OptionsApiService.ɵfac = function OptionsApiService_Factory(t) { return new (t || OptionsApiService)(i0.ɵɵinject(i1$2.HttpClient), i0.ɵɵinject('options')); };
+OptionsApiService.ɵfac = function OptionsApiService_Factory(t) { return new (t || OptionsApiService)(i0.ɵɵinject(i1$1.HttpClient), i0.ɵɵinject('options')); };
 OptionsApiService.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: OptionsApiService, factory: OptionsApiService.ɵfac, providedIn: 'root' });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(OptionsApiService, [{
         type: Injectable,
         args: [{
                 providedIn: 'root'
             }]
-    }], function () { return [{ type: i1$2.HttpClient }, { type: undefined, decorators: [{
+    }], function () { return [{ type: i1$1.HttpClient }, { type: undefined, decorators: [{
                 type: Inject,
                 args: ['options']
             }] }]; }, null); })();
@@ -8293,7 +8294,7 @@ class IgoMap {
     }
 }
 
-const _c0$m = ["*"];
+const _c0$n = ["*"];
 class MapBrowserComponent {
     constructor(activityService) {
         this.activityService = activityService;
@@ -8339,7 +8340,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$m, 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$n, 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);
@@ -9158,7 +9159,7 @@ function computeProjectionsConstraints(projectionsLimitations) {
     return projectionsConstraints;
 }
 
-const _c0$l = function (a0) { return { zoom: a0 }; };
+const _c0$m = function (a0) { return { zoom: a0 }; };
 class ZoomButtonComponent {
     constructor() { }
     get zoom() { return this.map.viewController.getZoom(); }
@@ -9179,10 +9180,10 @@ 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$l, 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$m, 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$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}"] });
+        i0.ɵɵproperty("matTooltip", i0.ɵɵpipeBind2(5, 9, "igo.geo.mapButtons.zoomOut", i0.ɵɵpureFunction1(14, _c0$m, ctx.zoom - 1)))("color", ctx.color)("disabled", ctx.zoom <= ctx.minZoom);
+    } }, dependencies: [i2.MatIcon, i3$1.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,
         args: [{ selector: 'igo-zoom-button', template: "<div class=\"igo-zoom-button-container\">\n  <button\n    mat-icon-button\n    [matTooltip]=\"'igo.geo.mapButtons.zoomIn' | translate: {zoom: zoom + 1}\"\n    matTooltipPosition=\"left\"\n    [color]=\"color\"\n    [disabled]=\"zoom >= maxZoom\"\n    (click)=\"map.viewController.zoomIn()\">\n    <mat-icon svgIcon=\"plus\"></mat-icon>\n  </button>\n\n  <button\n    mat-icon-button\n    [matTooltip]=\"'igo.geo.mapButtons.zoomOut' | translate: {zoom: zoom - 1}\"\n    matTooltipPosition=\"left\"\n    [color]=\"color\"\n    [disabled]=\"zoom <= minZoom\"\n    (click)=\"map.viewController.zoomOut()\">\n    <mat-icon svgIcon=\"minus\"></mat-icon>\n  </button>\n</div>\n", styles: [".igo-zoom-button-container{width:40px}.igo-zoom-button-container button{background-color:#fff}.igo-zoom-button-container button:hover{background-color:#efefef}.igo-zoom-button-container button:first-child{margin-bottom:2px}button,:host ::ng-deep button .mat-button-ripple-round{border-radius:0}\n"] }]
@@ -9236,7 +9237,7 @@ MenuButtonComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MenuBut
         i0.ɵɵelementEnd();
     } if (rf & 2) {
         i0.ɵɵproperty("ngClass", ctx.menuButtonClass)("matTooltip", i0.ɵɵpipeBind1(1, 2, ctx.sidenavOpened ? "menu.close" : "menu.open"));
-    } }, dependencies: [i1$1.NgClass, i2.MatIcon, i3.MatButton, i4.MatTooltip, i7.TranslatePipe], styles: ["#menu-button[_ngcontent-%COMP%]{background-color:#fff;border-radius:0;left:5px;top:5px}#menu-button.menu-button-reverse-color[_ngcontent-%COMP%]{height:40px;border-radius:0;height:45px;width:48px;left:0px;top:3px}#menu-button.menu-button-reverse-color-close[_ngcontent-%COMP%]{border-radius:0;left:5px;top:5px}mat-icon.disabled[_ngcontent-%COMP%]{color:#00000061}#menu-button[_ngcontent-%COMP%]     div.mat-button-ripple-round{border-radius:0}"] });
+    } }, dependencies: [i1.NgClass, i2.MatIcon, i3$1.MatButton, i4.MatTooltip, i7.TranslatePipe], styles: ["#menu-button[_ngcontent-%COMP%]{background-color:#fff;border-radius:0;left:5px;top:5px}#menu-button.menu-button-reverse-color[_ngcontent-%COMP%]{height:40px;border-radius:0;height:45px;width:48px;left:0px;top:3px}#menu-button.menu-button-reverse-color-close[_ngcontent-%COMP%]{border-radius:0;left:5px;top:5px}mat-icon.disabled[_ngcontent-%COMP%]{color:#00000061}#menu-button[_ngcontent-%COMP%]     div.mat-button-ripple-round{border-radius:0}"] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuButtonComponent, [{
         type: Component,
         args: [{ selector: 'igo-menu-button', template: "<button\n    mat-icon-button\n    id= \"menu-button\"\n    [ngClass]=\"menuButtonClass\"\n    tooltip-position=\"below\"\n    matTooltipShowDelay=\"500\"\n    [matTooltip]=\"(sidenavOpened ? 'menu.close' : 'menu.open') | translate\"\n    (click)=\"onToggleSidenavClick()\">\n    <mat-icon svgIcon=\"menu\"></mat-icon>\n</button>\n", styles: ["#menu-button{background-color:#fff;border-radius:0;left:5px;top:5px}#menu-button.menu-button-reverse-color{height:40px;border-radius:0;height:45px;width:48px;left:0px;top:3px}#menu-button.menu-button-reverse-color-close{border-radius:0;left:5px;top:5px}mat-icon.disabled{color:#00000061}#menu-button ::ng-deep div.mat-button-ripple-round{border-radius:0}\n"] }]
@@ -9306,7 +9307,7 @@ GeolocateButtonComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Ge
         i0.ɵɵtemplate(0, GeolocateButtonComponent_div_0_Template, 6, 9, "div", 0);
     } if (rf & 2) {
         i0.ɵɵproperty("ngIf", ctx.map.geolocationController);
-    } }, dependencies: [i1$1.NgIf, i2.MatIcon, i3.MatButton, i4.MatTooltip, i1$1.AsyncPipe, i7.TranslatePipe], styles: [".igo-geolocate-button-container[_ngcontent-%COMP%]{width:40px;background-color:#fff}.igo-geolocate-button-container[_ngcontent-%COMP%]:hover{background-color:#efefef}button[_ngcontent-%COMP%], [_nghost-%COMP%]     button .mat-button-ripple-round{border-radius:0}"] });
+    } }, dependencies: [i1.NgIf, i2.MatIcon, i3$1.MatButton, i4.MatTooltip, i1.AsyncPipe, i7.TranslatePipe], styles: [".igo-geolocate-button-container[_ngcontent-%COMP%]{width:40px;background-color:#fff}.igo-geolocate-button-container[_ngcontent-%COMP%]:hover{background-color:#efefef}button[_ngcontent-%COMP%], [_nghost-%COMP%]     button .mat-button-ripple-round{border-radius:0}"] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(GeolocateButtonComponent, [{
         type: Component,
         args: [{ selector: 'igo-geolocate-button', template: "<div class=\"igo-geolocate-button-container\" *ngIf=\"map.geolocationController\">\n  <button\n    mat-icon-button\n    [matTooltip]=\"map.geolocationController.tracking ? ('igo.geo.mapButtons.geolocateInactive' | translate) :('igo.geo.mapButtons.geolocate' | translate)\"\n    matTooltipPosition=\"left\"\n    [color]=\"color\"\n    (click)=\"onGeolocationClick()\">\n    <mat-icon svgIcon=\"{{icon$ | async}}\"></mat-icon>\n  </button>\n</div>\n", styles: [".igo-geolocate-button-container{width:40px;background-color:#fff}.igo-geolocate-button-container:hover{background-color:#efefef}button,:host ::ng-deep button .mat-button-ripple-round{border-radius:0}\n"] }]
@@ -9355,7 +9356,7 @@ HomeExtentButtonComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: H
     } if (rf & 2) {
         i0.ɵɵadvance(1);
         i0.ɵɵproperty("matTooltip", i0.ɵɵpipeBind1(2, 2, "igo.geo.mapButtons.home-extent"))("color", ctx.color);
-    } }, dependencies: [i2.MatIcon, i3.MatButton, i4.MatTooltip, i7.TranslatePipe], styles: ["@charset \"UTF-8\";.igo-home-extent-button-container[_ngcontent-%COMP%]{width:40px;background-color:#fff}\\a0[_ngcontent-%COMP%]   .igo-home-extent-button-container[_ngcontent-%COMP%]:hover{background-color:#efefef}button[_ngcontent-%COMP%], [_nghost-%COMP%]     button .mat-button-ripple-round{border-radius:0}"] });
+    } }, dependencies: [i2.MatIcon, i3$1.MatButton, i4.MatTooltip, i7.TranslatePipe], styles: ["@charset \"UTF-8\";.igo-home-extent-button-container[_ngcontent-%COMP%]{width:40px;background-color:#fff}\\a0[_ngcontent-%COMP%]   .igo-home-extent-button-container[_ngcontent-%COMP%]:hover{background-color:#efefef}button[_ngcontent-%COMP%], [_nghost-%COMP%]     button .mat-button-ripple-round{border-radius:0}"] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HomeExtentButtonComponent, [{
         type: Component,
         args: [{ selector: 'igo-home-extent-button', template: "<div class=\"igo-home-extent-button-container\"><button\r\n  \u00A0 \u00A0 mat-icon-button\r\n  \u00A0 \u00A0 [matTooltip]=\"'igo.geo.mapButtons.home-extent' | translate\"\r\n            matTooltipPosition=\"left\"\r\n  \u00A0 \u00A0 [color]=\"color\"\r\n  \u00A0 \u00A0 (click)=\"onToggleClick()\"><mat-icon svgIcon = \"home-map-marker\"></mat-icon></button></div>\r\n", styles: ["@charset \"UTF-8\";.igo-home-extent-button-container{width:40px;background-color:#fff}\\a0  .igo-home-extent-button-container:hover{background-color:#efefef}button,:host ::ng-deep button .mat-button-ripple-round{border-radius:0}\n"] }]
@@ -9371,7 +9372,7 @@ HomeExtentButtonComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: H
             type: Input
         }] }); })();
 
-const _c0$k = function (a0) { return [a0]; };
+const _c0$l = 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);
@@ -9383,7 +9384,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$k, ctx_r0.btnStyle))("color", ctx_r0.checked ? ctx_r0.color : i0.ɵɵpureFunction1(9, _c0$k, 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$l, ctx_r0.btnStyle))("color", ctx_r0.checked ? ctx_r0.color : i0.ɵɵpureFunction1(9, _c0$l, ctx_r0.colorOff));
 } }
 class OfflineButtonComponent {
     constructor(config) {
@@ -9425,7 +9426,7 @@ OfflineButtonComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Offl
         i0.ɵɵtemplate(0, OfflineButtonComponent_div_0_Template, 6, 11, "div", 0);
     } if (rf & 2) {
         i0.ɵɵproperty("ngIf", ctx.visible);
-    } }, dependencies: [i1$1.NgClass, i1$1.NgIf, i2.MatIcon, i3.MatButton, i4.MatTooltip, i7.TranslatePipe], styles: [".baseStyle[_ngcontent-%COMP%]{width:40px;background-color:#fff}.baseStyle[_ngcontent-%COMP%]:hover{background-color:#efefef}.toggleStyle[_ngcontent-%COMP%]{width:40px;background-color:#b9b9b9}button[_ngcontent-%COMP%], [_nghost-%COMP%]     button .mat-button-ripple-round{border-radius:0}"] });
+    } }, dependencies: [i1.NgClass, i1.NgIf, i2.MatIcon, i3$1.MatButton, i4.MatTooltip, i7.TranslatePipe], styles: [".baseStyle[_ngcontent-%COMP%]{width:40px;background-color:#fff}.baseStyle[_ngcontent-%COMP%]:hover{background-color:#efefef}.toggleStyle[_ngcontent-%COMP%]{width:40px;background-color:#b9b9b9}button[_ngcontent-%COMP%], [_nghost-%COMP%]     button .mat-button-ripple-round{border-radius:0}"] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(OfflineButtonComponent, [{
         type: Component,
         args: [{ selector: 'igo-offline-button', template: "<div *ngIf=\"visible\" class=\"igo-user-button-container\">\n  <div>\n    <button\n      mat-icon-button\n      [matTooltip]=\"checked ? ('igo.geo.mapButtons.online' | translate): ('igo.geo.mapButtons.offline' | translate)\"\n      matTooltipPosition=\"left\"\n      [ngClass]=\"[btnStyle]\"\n      [color]=\"checked ? color : [colorOff]\"\n      (click)=\"onToggle()\"\n      (click)=\"map.onOfflineToggle(check)\">\n      <mat-icon svgIcon=\"wifi-strength-off\"></mat-icon>\n    </button>\n  </div>\n</div>", styles: [".baseStyle{width:40px;background-color:#fff}.baseStyle:hover{background-color:#efefef}.toggleStyle{width:40px;background-color:#b9b9b9}button,:host ::ng-deep button .mat-button-ripple-round{border-radius:0}\n"] }]
@@ -9530,7 +9531,7 @@ WakeLockButtonComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Wak
         i0.ɵɵtemplate(0, WakeLockButtonComponent_div_0_Template, 7, 9, "div", 0);
     } if (rf & 2) {
         i0.ɵɵproperty("ngIf", ctx.visible);
-    } }, dependencies: [i1$1.NgIf, i2.MatIcon, i3.MatButton, i4.MatTooltip, i1$1.AsyncPipe, i7.TranslatePipe], styles: [".igo-wake-lock-button-container[_ngcontent-%COMP%]{width:40px;background-color:#fff}.igo-wake-lock-button-container[_ngcontent-%COMP%]:hover{background-color:#efefef}button[_ngcontent-%COMP%], [_nghost-%COMP%]     button .mat-button-ripple-round{border-radius:0}"] });
+    } }, dependencies: [i1.NgIf, i2.MatIcon, i3$1.MatButton, i4.MatTooltip, i1.AsyncPipe, i7.TranslatePipe], styles: [".igo-wake-lock-button-container[_ngcontent-%COMP%]{width:40px;background-color:#fff}.igo-wake-lock-button-container[_ngcontent-%COMP%]:hover{background-color:#efefef}button[_ngcontent-%COMP%], [_nghost-%COMP%]     button .mat-button-ripple-round{border-radius:0}"] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WakeLockButtonComponent, [{
         type: Component,
         args: [{ selector: 'igo-wake-lock-button', template: "<div *ngIf=\"visible\" class=\"igo-wake-lock-button-container\">\n  <div>\n    <button \n      [color]=\"color\"\n      mat-icon-button\n      [matTooltip]=\"enabled ? ('igo.geo.mapButtons.preventSreenLock' | translate): ('igo.geo.mapButtons.letScreenLock' | translate)\"\n      matTooltipPosition=\"left\"\n      (click)=\"toggleWakeLock()\">\n      <mat-icon svgIcon=\"{{icon$ | async}}\"></mat-icon>\n    </button>\n  </div>\n</div>", styles: [".igo-wake-lock-button-container{width:40px;background-color:#fff}.igo-wake-lock-button-container:hover{background-color:#efefef}button,:host ::ng-deep button .mat-button-ripple-round{border-radius:0}\n"] }]
@@ -9579,7 +9580,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$j = function (a0) { return { "container-expand": a0 }; };
+const _c0$k = 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);
@@ -9591,7 +9592,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$j, ctx_r0.expand))("@baseLayerSwitcherState", ctx_r0.expand ? "expand" : ctx_r0.useStaticIcon ? "collapseIcon" : "collapseMap");
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(4, _c0$k, 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);
@@ -9804,14 +9805,14 @@ class GeoDBService {
         return this._newData;
     }
 }
-GeoDBService.ɵfac = function GeoDBService_Factory(t) { return new (t || GeoDBService)(i0.ɵɵinject(i1$3.NgxIndexedDBService), i0.ɵɵinject(i2$1.CompressionService)); };
+GeoDBService.ɵfac = function GeoDBService_Factory(t) { return new (t || GeoDBService)(i0.ɵɵinject(i1$2.NgxIndexedDBService), i0.ɵɵinject(i2$1.CompressionService)); };
 GeoDBService.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: GeoDBService, factory: GeoDBService.ɵfac, providedIn: 'root' });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(GeoDBService, [{
         type: Injectable,
         args: [{
                 providedIn: 'root'
             }]
-    }], function () { return [{ type: i1$3.NgxIndexedDBService }, { type: i2$1.CompressionService }]; }, null); })();
+    }], function () { return [{ type: i1$2.NgxIndexedDBService }, { type: i2$1.CompressionService }]; }, null); })();
 
 var ResponseType;
 (function (ResponseType) {
@@ -9865,14 +9866,14 @@ class GeoNetworkService {
         return this.networkOnline && window.navigator.onLine;
     }
 }
-GeoNetworkService.ɵfac = function GeoNetworkService_Factory(t) { return new (t || GeoNetworkService)(i0.ɵɵinject(i1$2.HttpClient), i0.ɵɵinject(GeoDBService), i0.ɵɵinject(i2$1.NetworkService)); };
+GeoNetworkService.ɵfac = function GeoNetworkService_Factory(t) { return new (t || GeoNetworkService)(i0.ɵɵinject(i1$1.HttpClient), i0.ɵɵinject(GeoDBService), i0.ɵɵinject(i2$1.NetworkService)); };
 GeoNetworkService.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: GeoNetworkService, factory: GeoNetworkService.ɵfac, providedIn: 'root' });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(GeoNetworkService, [{
         type: Injectable,
         args: [{
                 providedIn: 'root'
             }]
-    }], function () { return [{ type: i1$2.HttpClient }, { type: GeoDBService }, { type: i2$1.NetworkService }]; }, null); })();
+    }], function () { return [{ type: i1$1.HttpClient }, { type: GeoDBService }, { type: i2$1.NetworkService }]; }, null); })();
 
 class LayerService {
     constructor(http, styleService, dataSourceService, geoNetwork, messageService, languageService, authInterceptor) {
@@ -10034,14 +10035,14 @@ class LayerService {
         }
     }
 }
-LayerService.ɵfac = function LayerService_Factory(t) { return new (t || LayerService)(i0.ɵɵinject(i1$2.HttpClient), i0.ɵɵinject(StyleService), i0.ɵɵinject(DataSourceService), i0.ɵɵinject(GeoNetworkService), i0.ɵɵinject(i2$1.MessageService), i0.ɵɵinject(i2$1.LanguageService), i0.ɵɵinject(i6.AuthInterceptor, 8)); };
+LayerService.ɵfac = function LayerService_Factory(t) { return new (t || LayerService)(i0.ɵɵinject(i1$1.HttpClient), i0.ɵɵinject(StyleService), i0.ɵɵinject(DataSourceService), i0.ɵɵinject(GeoNetworkService), i0.ɵɵinject(i2$1.MessageService), i0.ɵɵinject(i2$1.LanguageService), i0.ɵɵinject(i6.AuthInterceptor, 8)); };
 LayerService.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: LayerService, factory: LayerService.ɵfac, providedIn: 'root' });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LayerService, [{
         type: Injectable,
         args: [{
                 providedIn: 'root'
             }]
-    }], function () { return [{ type: i1$2.HttpClient }, { type: StyleService }, { type: DataSourceService }, { type: GeoNetworkService }, { type: i2$1.MessageService }, { type: i2$1.LanguageService }, { type: i6.AuthInterceptor, decorators: [{
+    }], function () { return [{ type: i1$1.HttpClient }, { type: StyleService }, { type: DataSourceService }, { type: GeoNetworkService }, { type: i2$1.MessageService }, { type: i2$1.LanguageService }, { type: i6.AuthInterceptor, decorators: [{
                 type: Optional
             }] }]; }, null); })();
 
@@ -10069,14 +10070,23 @@ function MiniBaseMapComponent_div_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵproperty("ngIf", ctx_r0.title);
 } }
 class MiniBaseMapComponent {
-    constructor(layerService, appRef) {
+    constructor(layerService, appRef, cdRef) {
         this.layerService = layerService;
         this.appRef = appRef;
+        this.cdRef = cdRef;
         this.basemap = new IgoMap({
             controls: {},
             interactions: false
         });
     }
+    get display() {
+        return this._display;
+    }
+    set display(value) {
+        this._display = value;
+        this.cdRef.detectChanges();
+        this.basemap.ol.getView().changed();
+    }
     get baseLayer() {
         return this._baseLayer;
     }
@@ -10150,8 +10160,8 @@ class MiniBaseMapComponent {
         }
     }
 }
-MiniBaseMapComponent.ɵfac = function MiniBaseMapComponent_Factory(t) { return new (t || MiniBaseMapComponent)(i0.ɵɵdirectiveInject(LayerService), i0.ɵɵdirectiveInject(i0.ApplicationRef)); };
-MiniBaseMapComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MiniBaseMapComponent, selectors: [["igo-mini-basemap"]], inputs: { map: "map", disabled: "disabled", display: "display", title: "title", baseLayer: "baseLayer" }, decls: 2, vars: 1, consts: [[1, "igo-mini-basemap-container"], [3, "click", 4, "ngIf"], [3, "click"], [3, "map"], ["class", "igo-mini-basemap-title", 4, "ngIf"], [1, "igo-mini-basemap-title"]], template: function MiniBaseMapComponent_Template(rf, ctx) { if (rf & 1) {
+MiniBaseMapComponent.ɵfac = function MiniBaseMapComponent_Factory(t) { return new (t || MiniBaseMapComponent)(i0.ɵɵdirectiveInject(LayerService), i0.ɵɵdirectiveInject(i0.ApplicationRef), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
+MiniBaseMapComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MiniBaseMapComponent, selectors: [["igo-mini-basemap"]], inputs: { map: "map", disabled: "disabled", title: "title", display: "display", baseLayer: "baseLayer" }, decls: 2, vars: 1, consts: [[1, "igo-mini-basemap-container"], [3, "click", 4, "ngIf"], [3, "click"], [3, "map"], ["class", "igo-mini-basemap-title", 4, "ngIf"], [1, "igo-mini-basemap-title"]], template: function MiniBaseMapComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵelementStart(0, "div", 0);
         i0.ɵɵtemplate(1, MiniBaseMapComponent_div_1_Template, 3, 2, "div", 1);
         i0.ɵɵelementEnd();
@@ -10162,19 +10172,19 @@ MiniBaseMapComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MiniBa
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MiniBaseMapComponent, [{
         type: Component,
         args: [{ selector: 'igo-mini-basemap', template: "<div class=\"igo-mini-basemap-container\">\n\n  <div *ngIf=\"display\" (click)=\"changeBaseLayer(baseLayer)\">\n    <igo-map-browser [map]=\"basemap\"></igo-map-browser>\n    <div *ngIf='title' class='igo-mini-basemap-title'> {{title}} </div>\n  </div>\n\n</div>\n", styles: [".igo-mini-basemap-container{width:80px;height:80px;background-color:#ffffff03;border:2px solid white;box-shadow:0 1px 4px #0000004d;cursor:pointer;margin-top:5px}.igo-mini-basemap-container:hover .igo-mini-basemap-title{color:#000;text-shadow:0 0 5px white}.igo-mini-basemap-container>div{width:100%;height:100%}.igo-mini-basemap-title{position:relative;top:-76px;height:76px;width:76px;text-align:center;vertical-align:bottom;color:#fff;text-shadow:0 0 5px black;white-space:normal;display:flex;align-items:flex-end;justify-content:center}\n"] }]
-    }], function () { return [{ type: LayerService }, { type: i0.ApplicationRef }]; }, { map: [{
+    }], function () { return [{ type: LayerService }, { type: i0.ApplicationRef }, { type: i0.ChangeDetectorRef }]; }, { map: [{
             type: Input
         }], disabled: [{
             type: Input
-        }], display: [{
-            type: Input
         }], title: [{
             type: Input
+        }], display: [{
+            type: Input
         }], baseLayer: [{
             type: Input
         }] }); })();
 
-const _c0$i = function (a0, a1) { return { azimuth: a0, rotation: a1 }; };
+const _c0$j = 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);
@@ -10189,7 +10199,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$i, 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$j, 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);
@@ -10223,7 +10233,7 @@ RotationButtonComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Rot
         i0.ɵɵpipe(1, "async");
     } if (rf & 2) {
         i0.ɵɵproperty("ngIf", i0.ɵɵpipeBind1(1, 1, ctx.rotated$) && !ctx.showIfNoRotation || ctx.showIfNoRotation);
-    } }, dependencies: [i1$1.NgIf, i1$1.NgStyle, i2.MatIcon, i3.MatButton, i4.MatTooltip, i1$1.AsyncPipe, i7.TranslatePipe], styles: [".igo-rotation-button-container[_ngcontent-%COMP%]{width:40px;background-color:#fff}.igo-rotation-button-container[_ngcontent-%COMP%]:hover{background-color:#efefef}button[_ngcontent-%COMP%], [_nghost-%COMP%]     button .mat-button-ripple-round{border-radius:0}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){button[_ngcontent-%COMP%]:disabled, [_nghost-%COMP%]     button .mat-button-ripple-round:disabled{display:none}}"] });
+    } }, dependencies: [i1.NgIf, i1.NgStyle, i2.MatIcon, i3$1.MatButton, i4.MatTooltip, i1.AsyncPipe, i7.TranslatePipe], styles: [".igo-rotation-button-container[_ngcontent-%COMP%]{width:40px;background-color:#fff}.igo-rotation-button-container[_ngcontent-%COMP%]:hover{background-color:#efefef}button[_ngcontent-%COMP%], [_nghost-%COMP%]     button .mat-button-ripple-round{border-radius:0}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){button[_ngcontent-%COMP%]:disabled, [_nghost-%COMP%]     button .mat-button-ripple-round:disabled{display:none}}"] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(RotationButtonComponent, [{
         type: Component,
         args: [{ selector: 'igo-rotation-button', template: "<div *ngIf=\"((rotated$ | async) && !showIfNoRotation) || showIfNoRotation\" class=\"igo-rotation-button-container\"\n  [matTooltip]=\"(rotated$ | async) ? ('igo.geo.mapButtons.resetRotation' | translate: {azimuth: azimuthRounded, rotation: rotationRounded}): ('igo.geo.mapButtons.tipRotation' | translate)\"\n  matTooltipPosition=\"left\">\n  <button mat-icon-button matTooltipPosition=\"left\" [color]=\"color\" [disabled]=\"(rotated$ | async) === false\"\n    (click)=\"map.viewController.resetRotation()\">\n    <mat-icon [ngStyle]=\"currentStyle$ | async\" svgIcon=\"navigation\">\n    </mat-icon>\n  </button>\n</div>\n", styles: [".igo-rotation-button-container{width:40px;background-color:#fff}.igo-rotation-button-container:hover{background-color:#efefef}button,:host ::ng-deep button .mat-button-ripple-round{border-radius:0}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){button:disabled,:host ::ng-deep button .mat-button-ripple-round:disabled{display:none}}\n"] }]
@@ -10492,7 +10502,7 @@ InfoSectionComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: InfoSe
         i0.ɵɵtemplate(0, InfoSectionComponent_div_0_Template, 3, 1, "div", 0);
     } if (rf & 2) {
         i0.ɵɵproperty("ngIf", ctx.infoContent && ctx.infoContent.length);
-    } }, dependencies: [i1$1.NgIf], styles: [".infoSection[_ngcontent-%COMP%]{border-radius:10px;background-color:#6e6e6e66;padding:2.5px;position:absolute;text-align:center;top:5px;left:50%;text-shadow:0 0 5px white,0 0 10px white,0 0 15px white}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){.infoSection[_ngcontent-%COMP%]{top:50px;left:10%}}"] });
+    } }, dependencies: [i1.NgIf], styles: [".infoSection[_ngcontent-%COMP%]{border-radius:10px;background-color:#6e6e6e66;padding:2.5px;position:absolute;text-align:center;top:5px;left:50%;text-shadow:0 0 5px white,0 0 10px white,0 0 15px white}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){.infoSection[_ngcontent-%COMP%]{top:50px;left:10%}}"] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(InfoSectionComponent, [{
         type: Component,
         args: [{ selector: 'igo-info-section', template: "<div *ngIf=\"infoContent && infoContent.length\" class=\"infoSection\">\n    <pre>{{infoContent}}</pre>\n</div>", styles: [".infoSection{border-radius:10px;background-color:#6e6e6e66;padding:2.5px;position:absolute;text-align:center;top:5px;left:50%;text-shadow:0 0 5px white,0 0 10px white,0 0 15px white}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){.infoSection{top:50px;left:10%}}\n"] }]
@@ -10626,29 +10636,119 @@ class QueryService {
                 this.messageService.remove(id);
             });
         }
-        return layers
-            .filter((layer) => layer.visible && layer.isInResolutionsRange)
+        const newLayers = layers.filter((layer) => layer.visible && layer.isInResolutionsRange)
             .map((layer) => this.queryLayer(layer, options));
+        // the directive accept array in this format [observable, observable...]
+        // if we use multiple 'url' in queryUrl so the result => this form [observable, observable, [observable, observable]]
+        // so we need to flat the array
+        let flatArray = [].concat.apply([], newLayers);
+        return flatArray;
     }
     queryLayer(layer, options) {
         const url = this.getQueryUrl(layer.dataSource, options, false, layer.map.viewController.getExtent());
         if (!url) {
             return of([]);
         }
-        if (layer.dataSource.options.queryFormat ===
-            QueryFormat.HTMLGML2) {
-            const urlGml = this.getQueryUrl(layer.dataSource, options, true);
-            return this.http.get(urlGml, { responseType: 'text' }).pipe(mergeMap(gmlRes => {
-                const mergedGML = this.mergeGML(gmlRes, url, layer);
-                const imposedGeom = mergedGML[0];
-                const imposedProperties = mergedGML[1];
-                return this.http
-                    .get(url, { responseType: 'text' })
-                    .pipe(map(res => this.extractData(res, layer, options, url, imposedGeom, imposedProperties)));
-            }));
+        const resolution = layer.map.viewController.getResolution();
+        const scale = layer.map.viewController.getScale();
+        if (layer.dataSource.options.queryFormat === QueryFormat.HTMLGML2) {
+            if (typeof url === 'string') {
+                const urlGml = this.getQueryUrl(layer.dataSource, options, true);
+                return this.http.get(urlGml, { responseType: 'text' }).pipe(mergeMap(gmlRes => {
+                    const mergedGML = this.mergeGML(gmlRes, url, layer);
+                    const imposedGeom = mergedGML[0];
+                    const imposedProperties = mergedGML[1];
+                    return this.http
+                        .get(url, { responseType: 'text' })
+                        .pipe(map(res => this.extractData(res, layer, options, url, imposedGeom, imposedProperties)));
+                }));
+            }
+            const urlGmls = this.getQueryUrl(layer.dataSource, options, true);
+            let observables = [];
+            for (let i = 0; i < urlGmls.length; i++) {
+                const element = urlGmls[i];
+                if (this.checkScaleAndResolution(resolution, scale, element)) {
+                    observables.push(this.requestDataForHTMLGML2(element.url, url[i].url, layer, options));
+                }
+            }
+            return observables;
+        }
+        else {
+            if (typeof url === 'string') {
+                const request = this.http.get(url, { responseType: 'text' });
+                return request.pipe(map(res => this.extractData(res, layer, options, url)));
+            }
+            let observables = [];
+            for (let i = 0; i < url.length; i++) {
+                const element = url[i];
+                if (this.checkScaleAndResolution(resolution, scale, element)) {
+                    const request = this.http.get(element.url, { responseType: 'text' });
+                    observables.push(request.pipe(map(res => this.extractData(res, layer, options, element.url))));
+                }
+            }
+            return observables;
+        }
+    }
+    requestDataForHTMLGML2(urlGml, url, layer, options) {
+        return this.http.get(urlGml, { responseType: 'text' }).pipe(mergeMap(gmlRes => {
+            const mergedGML = this.mergeGML(gmlRes, url, layer);
+            const imposedGeom = mergedGML[0];
+            const imposedProperties = mergedGML[1];
+            return this.http
+                .get(url, { responseType: 'text' })
+                .pipe(map(res => this.extractData(res, layer, options, url, imposedGeom, imposedProperties)));
+        }));
+    }
+    checkScaleAndResolution(resolution, scale, element) {
+        let checkScale;
+        let checkResolution;
+        if (!element.minResolution && !element.maxResolution && !element.minScale && !element.maxScale) {
+            return true;
+        }
+        else {
+            /******************* checking Resolution *******************/
+            if (element.minResolution && element.maxResolution) {
+                // if "minResolution" and "maxResolution" exists check if resoltion is between
+                if ((resolution >= element.minResolution) && (resolution <= element.maxResolution)) {
+                    checkResolution = true;
+                }
+            }
+            else {
+                // check if "minResolution" or "maxResolution" exists
+                if (element.minResolution && resolution >= element.minResolution) {
+                    checkResolution = true;
+                }
+                if (element.maxResolution && resolution <= element.maxResolution) {
+                    checkResolution = true;
+                }
+            }
+            /******************* checking Scale *******************/
+            if (element.minScale && element.maxScale) {
+                // if "minScale" and "maxScale" exists check if scale is between
+                if ((scale > element.minScale) && (scale < element.maxScale)) {
+                    checkScale = true;
+                }
+            }
+            else {
+                // check if "minScale" or "maxScale" exists
+                if (element.maxScale && scale <= element.maxScale) {
+                    checkScale = true;
+                }
+                if (element.minScale && scale >= element.minScale) {
+                    checkScale = true;
+                }
+            }
+            /******************* result of checking *******************/
+            if (checkScale === true && checkResolution === true) {
+                return true;
+            }
+            else if ((checkResolution === true && !checkScale) || (checkScale === true && !checkResolution)) {
+                return true;
+            }
+            else {
+                return false;
+            }
         }
-        const request = this.http.get(url, { responseType: 'text' });
-        return request.pipe(map(res => this.extractData(res, layer, options, url)));
     }
     mergeGML(gmlRes, url, layer) {
         const parser = new olFormatGML2();
@@ -10741,18 +10841,22 @@ class QueryService {
                     type: olmline.getType(),
                     coordinates: olmline.getCoordinates()
                 };
+                break;
             case 'Point':
                 returnGeometry = olmpts;
+                break;
             case 'Polygon':
                 returnGeometry = {
                     type: olmpoly.getType(),
                     coordinates: olmpoly.getCoordinates()
                 };
+                break;
             case 'MultiPolygon':
                 returnGeometry = {
                     type: olmpoly.getType(),
                     coordinates: olmpoly.getCoordinates()
                 };
+                break;
         }
         const imposedProperties = {};
         if (queryTileField) {
@@ -11054,7 +11158,7 @@ class QueryService {
     }
     getQueryUrl(datasource, options, forceGML2 = false, mapExtent) {
         let url;
-        if (datasource.options.queryUrl) {
+        if (datasource.options.queryUrls) {
             return this.getCustomQueryUrl(datasource, options, mapExtent);
         }
         switch (datasource.constructor) {
@@ -11191,26 +11295,46 @@ class QueryService {
      */
     getCustomQueryUrl(datasource, options, mapExtent) {
         const extent = olextent.getForViewAndSize(options.coordinates, options.resolution, 0, [101, 101]);
-        let url = datasource.options.queryUrl.replace(/\{bbox\}/g, extent.join(','))
-            .replace(/\{xmin\}/g, mapExtent[0].toString())
-            .replace(/\{ymin\}/g, mapExtent[1].toString())
-            .replace(/\{xmax\}/g, mapExtent[2].toString())
-            .replace(/\{ymax\}/g, mapExtent[3].toString())
-            .replace(/\{x\}/g, options.coordinates[0].toString())
-            .replace(/\{y\}/g, options.coordinates[1].toString())
-            .replace(/\{resolution\}/g, options.resolution.toString())
-            .replace(/\{srid\}/g, options.projection.replace('EPSG:', ''));
-        return url;
+        return datasource.options.queryUrls.map(item => {
+            let data = {
+                url: item.url.replace(/\{bbox\}/g, extent.join(','))
+                    .replace(/\{x\}/g, options.coordinates[0].toString())
+                    .replace(/\{y\}/g, options.coordinates[1].toString())
+                    .replace(/\{resolution\}/g, options.resolution.toString())
+                    .replace(/\{srid\}/g, options.projection.replace('EPSG:', ''))
+            };
+            // if the queryFormat changed to "QueryFormat.HTMLGML2": mapExtent will be undefined
+            // we need to check "mapExtent" befor replace variables in the url
+            if (mapExtent) {
+                data.url.replace(/\{xmin\}/g, mapExtent[0].toString())
+                    .replace(/\{ymin\}/g, mapExtent[1].toString())
+                    .replace(/\{xmax\}/g, mapExtent[2].toString())
+                    .replace(/\{ymax\}/g, mapExtent[3].toString());
+            }
+            if (item.maxResolution) {
+                data.maxResolution = item.maxResolution;
+            }
+            if (item.minResolution) {
+                data.minResolution = item.minResolution;
+            }
+            if (item.minScale) {
+                data.minScale = item.minScale;
+            }
+            if (item.maxScale) {
+                data.maxScale = item.maxScale;
+            }
+            return data;
+        });
     }
 }
-QueryService.ɵfac = function QueryService_Factory(t) { return new (t || QueryService)(i0.ɵɵinject(i1$2.HttpClient), i0.ɵɵinject(i2$1.MessageService), i0.ɵɵinject(i2$1.LanguageService)); };
+QueryService.ɵfac = function QueryService_Factory(t) { return new (t || QueryService)(i0.ɵɵinject(i1$1.HttpClient), i0.ɵɵinject(i2$1.MessageService), i0.ɵɵinject(i2$1.LanguageService)); };
 QueryService.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: QueryService, factory: QueryService.ɵfac, providedIn: 'root' });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(QueryService, [{
         type: Injectable,
         args: [{
                 providedIn: 'root'
             }]
-    }], function () { return [{ type: i1$2.HttpClient }, { type: i2$1.MessageService }, { type: i2$1.LanguageService }]; }, null); })();
+    }], function () { return [{ type: i1$1.HttpClient }, { type: i2$1.MessageService }, { type: i2$1.LanguageService }]; }, null); })();
 
 /**
  * Whether a layer is queryable
@@ -12384,14 +12508,14 @@ class CatalogService {
         return layersQueryFormat;
     }
 }
-CatalogService.ɵfac = function CatalogService_Factory(t) { return new (t || CatalogService)(i0.ɵɵinject(i1$2.HttpClient), i0.ɵɵinject(i2$1.ConfigService), i0.ɵɵinject(i2$1.LanguageService), i0.ɵɵinject(i2$1.MessageService), i0.ɵɵinject(CapabilitiesService)); };
+CatalogService.ɵfac = function CatalogService_Factory(t) { return new (t || CatalogService)(i0.ɵɵinject(i1$1.HttpClient), i0.ɵɵinject(i2$1.ConfigService), i0.ɵɵinject(i2$1.LanguageService), i0.ɵɵinject(i2$1.MessageService), i0.ɵɵinject(CapabilitiesService)); };
 CatalogService.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: CatalogService, factory: CatalogService.ɵfac, providedIn: 'root' });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CatalogService, [{
         type: Injectable,
         args: [{
                 providedIn: 'root'
             }]
-    }], function () { return [{ type: i1$2.HttpClient }, { type: i2$1.ConfigService }, { type: i2$1.LanguageService }, { type: i2$1.MessageService }, { type: CapabilitiesService }]; }, null); })();
+    }], function () { return [{ type: i1$1.HttpClient }, { type: i2$1.ConfigService }, { type: i2$1.LanguageService }, { type: i2$1.MessageService }, { type: CapabilitiesService }]; }, null); })();
 
 function CatalogBrowserComponent_ng_template_1_ng_container_0_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
@@ -12405,7 +12529,7 @@ function CatalogBrowserComponent_ng_template_1_ng_container_0_Template(rf, ctx)
     const item_r1 = i0.ɵɵnextContext().$implicit;
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("catalog", ctx_r2.catalog)("group", item_r1)("state", ctx_r2.store.state)("resolution", i0.ɵɵpipeBind1(2, 7, ctx_r2.resolution$))("catalogAllowLegend", ctx_r2.catalogAllowLegend)("collapsed", ctx_r2.store.count === 1 ? false : true)("toggleCollapsed", ctx_r2.toggleCollapsedGroup);
+    i0.ɵɵproperty("catalog", ctx_r2.catalog)("group", item_r1)("map", ctx_r2.map)("state", ctx_r2.store.state)("resolution", i0.ɵɵpipeBind1(2, 8, ctx_r2.resolution$))("catalogAllowLegend", ctx_r2.catalogAllowLegend)("collapsed", ctx_r2.store.count === 1 ? false : true)("toggleCollapsed", ctx_r2.toggleCollapsedGroup);
 } }
 function CatalogBrowserComponent_ng_template_1_ng_container_1_Template(rf, ctx) { if (rf & 1) {
     const _r9 = i0.ɵɵgetCurrentView();
@@ -12419,11 +12543,11 @@ function CatalogBrowserComponent_ng_template_1_ng_container_1_Template(rf, ctx)
     const item_r1 = i0.ɵɵnextContext().$implicit;
     const ctx_r3 = i0.ɵɵnextContext();
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("layer", item_r1)("resolution", i0.ɵɵpipeBind1(2, 4, ctx_r3.resolution$))("catalogAllowLegend", ctx_r3.catalogAllowLegend)("added", ctx_r3.store.state.get(item_r1).added);
+    i0.ɵɵproperty("layer", item_r1)("map", ctx_r3.map)("resolution", i0.ɵɵpipeBind1(2, 5, ctx_r3.resolution$))("catalogAllowLegend", ctx_r3.catalogAllowLegend)("added", ctx_r3.store.state.get(item_r1).added);
 } }
 function CatalogBrowserComponent_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, CatalogBrowserComponent_ng_template_1_ng_container_0_Template, 3, 9, "ng-container", 2);
-    i0.ɵɵtemplate(1, CatalogBrowserComponent_ng_template_1_ng_container_1_Template, 3, 6, "ng-container", 2);
+    i0.ɵɵtemplate(0, CatalogBrowserComponent_ng_template_1_ng_container_0_Template, 3, 10, "ng-container", 2);
+    i0.ɵɵtemplate(1, CatalogBrowserComponent_ng_template_1_ng_container_1_Template, 3, 7, "ng-container", 2);
 } if (rf & 2) {
     const item_r1 = ctx.$implicit;
     const ctx_r0 = i0.ɵɵnextContext();
@@ -12609,7 +12733,7 @@ class CatalogBrowserComponent {
     }
 }
 CatalogBrowserComponent.ɵfac = function CatalogBrowserComponent_Factory(t) { return new (t || CatalogBrowserComponent)(i0.ɵɵdirectiveInject(LayerService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
-CatalogBrowserComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CatalogBrowserComponent, selectors: [["igo-catalog-browser"]], inputs: { catalogAllowLegend: "catalogAllowLegend", catalog: "catalog", store: "store", map: "map", toggleCollapsedGroup: "toggleCollapsedGroup" }, decls: 3, vars: 5, consts: [[3, "navigation", "selection"], ["ngFor", "", 3, "ngForOf"], [4, "ngIf"], [3, "catalog", "group", "state", "resolution", "catalogAllowLegend", "collapsed", "toggleCollapsed", "addedChange", "layerAddedChange"], ["igoListItem", "", 3, "layer", "resolution", "catalogAllowLegend", "added", "addedChange"]], template: function CatalogBrowserComponent_Template(rf, ctx) { if (rf & 1) {
+CatalogBrowserComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CatalogBrowserComponent, selectors: [["igo-catalog-browser"]], inputs: { catalogAllowLegend: "catalogAllowLegend", catalog: "catalog", store: "store", map: "map", toggleCollapsedGroup: "toggleCollapsedGroup" }, decls: 3, vars: 5, consts: [[3, "navigation", "selection"], ["ngFor", "", 3, "ngForOf"], [4, "ngIf"], [3, "catalog", "group", "map", "state", "resolution", "catalogAllowLegend", "collapsed", "toggleCollapsed", "addedChange", "layerAddedChange"], ["igoListItem", "", 3, "layer", "map", "resolution", "catalogAllowLegend", "added", "addedChange"]], template: function CatalogBrowserComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵelementStart(0, "igo-list", 0);
         i0.ɵɵtemplate(1, CatalogBrowserComponent_ng_template_1_Template, 2, 2, "ng-template", 1);
         i0.ɵɵpipe(2, "async");
@@ -12621,7 +12745,7 @@ CatalogBrowserComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Cat
     } }, encapsulation: 2, changeDetection: 0 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CatalogBrowserComponent, [{
         type: Component,
-        args: [{ selector: 'igo-catalog-browser', changeDetection: ChangeDetectionStrategy.OnPush, template: "<igo-list [navigation]=\"false\" [selection]=\"false\">\n  <ng-template ngFor let-item [ngForOf]=\"store.view.all$() | async\">\n    <ng-container *ngIf=\"isGroup(item)\">\n      <igo-catalog-browser-group\n        [catalog]=\"catalog\"\n        [group]=\"item\"\n        [state]=\"store.state\"\n        [resolution]=\"resolution$ | async\"\n        [catalogAllowLegend]=\"catalogAllowLegend\"\n        [collapsed]=\"(store.count === 1) ? false : true\"\n        [toggleCollapsed]=\"toggleCollapsedGroup\"\n        (addedChange)=\"onGroupAddedChange($event)\"\n        (layerAddedChange)=\"onLayerAddedChange($event)\">\n      </igo-catalog-browser-group>\n    </ng-container>\n\n    <ng-container *ngIf=\"isLayer(item)\">\n      <igo-catalog-browser-layer\n        igoListItem\n        [layer]=\"item\"\n        [resolution]=\"resolution$ | async\"\n        [catalogAllowLegend]=\"catalogAllowLegend\"\n        [added]=\"store.state.get(item).added\"\n        (addedChange)=\"onLayerAddedChange($event)\">\n      </igo-catalog-browser-layer>\n    </ng-container>\n  </ng-template>\n</igo-list>\n" }]
+        args: [{ selector: 'igo-catalog-browser', changeDetection: ChangeDetectionStrategy.OnPush, template: "<igo-list [navigation]=\"false\" [selection]=\"false\">\n  <ng-template ngFor let-item [ngForOf]=\"store.view.all$() | async\">\n    <ng-container *ngIf=\"isGroup(item)\">\n      <igo-catalog-browser-group\n        [catalog]=\"catalog\"\n        [group]=\"item\"\n        [map]=\"map\"\n        [state]=\"store.state\"\n        [resolution]=\"resolution$ | async\"\n        [catalogAllowLegend]=\"catalogAllowLegend\"\n        [collapsed]=\"(store.count === 1) ? false : true\"\n        [toggleCollapsed]=\"toggleCollapsedGroup\"\n        (addedChange)=\"onGroupAddedChange($event)\"\n        (layerAddedChange)=\"onLayerAddedChange($event)\">\n      </igo-catalog-browser-group>\n    </ng-container>\n\n    <ng-container *ngIf=\"isLayer(item)\">\n      <igo-catalog-browser-layer\n        igoListItem\n        [layer]=\"item\"\n        [map]=\"map\"\n        [resolution]=\"resolution$ | async\"\n        [catalogAllowLegend]=\"catalogAllowLegend\"\n        [added]=\"store.state.get(item).added\"\n        (addedChange)=\"onLayerAddedChange($event)\">\n      </igo-catalog-browser-layer>\n    </ng-container>\n  </ng-template>\n</igo-list>\n" }]
     }], function () { return [{ type: LayerService }, { type: i0.ChangeDetectorRef }]; }, { catalogAllowLegend: [{
             type: Input
         }], catalog: [{
@@ -12634,7 +12758,7 @@ CatalogBrowserComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Cat
             type: Input
         }] }); })();
 
-const _c0$h = ["renderedLegend"];
+const _c0$i = ["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);
@@ -12979,9 +13103,9 @@ class LayerLegendComponent {
         this.imagesHeight[id] = elemRef.height;
     }
 }
-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.ɵ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$1.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$h, 5);
+        i0.ɵɵviewQuery(_c0$i, 5);
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.renderedLegends = _t);
@@ -12990,11 +13114,11 @@ LayerLegendComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LayerL
         i0.ɵɵpipe(1, "async");
     } if (rf & 2) {
         i0.ɵɵproperty("ngIf", i0.ɵɵpipeBind1(1, 1, ctx.legendItems$));
-    } }, dependencies: [i13.MatFormField, i2$2.NgControlStatus, i1$1.NgClass, i1$1.NgForOf, i1$1.NgIf, i1$1.NgStyle, i2$2.NgModel, i2.MatIcon, i15.MatSelect, i9.MatOption, i4.MatTooltip, i5.MatListItem, i5.MatListAvatarCssMatStyler, i9.MatLine, i5$1.CollapseDirective, i5$1.ImageErrorDirective, i1$1.AsyncPipe, i7.TranslatePipe, i5$1.SanitizeHtmlPipe], styles: [".igo-layer-legend.with-title[_ngcontent-%COMP%]{padding-left:18px}img[_ngcontent-%COMP%]:after{content:\" \";position:relative;height:17px;float:left;width:17px;top:-3px;right:19px;background-color:#fff;border:3px solid #f3f3f3;border-radius:50%;-webkit-animation:2s linear infinite spin;animation:2s linear infinite spin}@-moz-document url-prefix(){img:after{margin-left:19px}}@-webkit-keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}"], changeDetection: 0 });
+    } }, dependencies: [i13.MatFormField, i2$2.NgControlStatus, i1.NgClass, i1.NgForOf, i1.NgIf, i1.NgStyle, i2$2.NgModel, i2.MatIcon, i15.MatSelect, i9.MatOption, i4.MatTooltip, i5.MatListItem, i5.MatListAvatarCssMatStyler, i9.MatLine, i5$1.CollapseDirective, i5$1.ImageErrorDirective, i1.AsyncPipe, i7.TranslatePipe, i5$1.SanitizeHtmlPipe], styles: [".igo-layer-legend.with-title[_ngcontent-%COMP%]{padding-left:18px}img[_ngcontent-%COMP%]:after{content:\" \";position:relative;height:17px;float:left;width:17px;top:-3px;right:19px;background-color:#fff;border:3px solid #f3f3f3;border-radius:50%;-webkit-animation:2s linear infinite spin;animation:2s linear infinite spin}@-moz-document url-prefix(){img:after{margin-left:19px}}@-webkit-keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}"], changeDetection: 0 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LayerLegendComponent, [{
         type: Component,
         args: [{ selector: 'igo-layer-legend', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"legendItems$ | async as items\">\n  <ng-container *ngIf=\"items.length; else noItems\">\n    <ng-container *ngFor=\"let item of items.slice().reverse()\" #renderedLegends>\n      <div *ngIf=\"getLegend; else noItems\">\n        <mat-list-item *ngIf=\"item.title\">\n          <mat-icon\n            id=\"legend-toggle\"\n            class=\"igo-chevron\"\n            mat-list-avatar\n            igoCollapse\n            [target]=\"legend\"\n            [collapsed]=\"(item.collapsed)\"\n            (toggle)=\"toggleLegendItem($event, item)\"\n            svgIcon=\"chevron-up\">\n          </mat-icon>\n          <h4 matLine>{{computeItemTitle(item) | async}} </h4>\n        </mat-list-item>\n        <div #legend class=\"igo-layer-legend\" [ngClass]=\"{'with-title': item.title}\">\n          <div *ngIf=\"currentStyle !== undefined\">\n              <mat-form-field>\n                <mat-select tooltip-position=\"below\" matTooltipShowDelay=\"500\"\n                  [matTooltip]=\"'igo.geo.layer.legend.selectStyle' | translate\" [(ngModel)]=\"currentStyle\"\n                  (selectionChange)=\"onChangeStyle()\">\n                  <mat-option *ngFor=\"let style of styles\" [value]=\"style.name\">{{style.title}}</mat-option>\n                </mat-select>\n            </mat-form-field>\n          </div>\n          <div *ngIf=\"!(item.collapsed)\">\n            <div *ngIf=\"item.url\">\n              <img igoImageError *ngIf=\"item.imgGraphValue\" hideError=\"true\" #renderedLegend id=\"{{item.title}}\" (load)=\"onLoadImage(item.title)\"\n                [src]=\"item.imgGraphValue\"\n                alt=\"{{'igo.geo.layer.legend.loadingLegendText' | translate}}\">\n              <small *ngIf=\"imagesHeight[item.title]<16\">\n                  {{'igo.geo.layer.legend.noLegendScale' | translate}}\n              </small>\n            </div>\n            <div\n              [ngStyle]=\"item.style\"\n              [innerHTML]=\"item.html | sanitizeHtml\"\n              *ngIf=\"item.html\">\n            </div>\n          </div>\n        </div>\n      </div>\n    </ng-container>\n  </ng-container>\n\n  <ng-template #noItems>\n    <small>\n      {{'igo.geo.layer.legend.noLegendText' | translate}}\n    </small>\n  </ng-template>\n\n</ng-container>\n", styles: [".igo-layer-legend.with-title{padding-left:18px}img:after{content:\" \";position:relative;height:17px;float:left;width:17px;top:-3px;right:19px;background-color:#fff;border:3px solid #f3f3f3;border-radius:50%;-webkit-animation:2s linear infinite spin;animation:2s linear infinite spin}@-moz-document url-prefix(){img:after{margin-left:19px}}@-webkit-keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
-    }], function () { return [{ type: CapabilitiesService }, { type: i2$1.LanguageService }, { type: i2$1.ConfigService }, { type: i1$2.HttpClient }, { type: i0.ChangeDetectorRef }]; }, { updateLegendOnResolutionChange: [{
+    }], function () { return [{ type: CapabilitiesService }, { type: i2$1.LanguageService }, { type: i2$1.ConfigService }, { type: i1$1.HttpClient }, { type: i0.ChangeDetectorRef }]; }, { updateLegendOnResolutionChange: [{
             type: Input
         }], renderedLegends: [{
             type: ViewChildren,
@@ -13023,7 +13147,7 @@ function CatalogBrowserLayerComponent_button_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(1);
     i0.ɵɵproperty("ngIf", ctx_r1.layer.externalProvider);
 } }
-function CatalogBrowserLayerComponent_igo_layer_legend_13_Template(rf, ctx) { if (rf & 1) {
+function CatalogBrowserLayerComponent_igo_layer_legend_19_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "igo-layer-legend", 3);
     i0.ɵɵpipe(1, "async");
 } if (rf & 2) {
@@ -13038,6 +13162,7 @@ class CatalogBrowserLayerComponent {
         this.layerService = layerService;
         this.inRange$ = new BehaviorSubject(true);
         this.isPreview$ = new BehaviorSubject(false);
+        this.isVisible$ = new BehaviorSubject(false);
         this.layerLegendShown$ = new BehaviorSubject(false);
         this.igoLayer$ = new BehaviorSubject(undefined);
         this.mouseInsideAdd = false;
@@ -13065,11 +13190,19 @@ class CatalogBrowserLayerComponent {
         return getEntityIcon(this.layer) || 'layers';
     }
     ngOnInit() {
-        this.isInResolutionsRange();
         this.isPreview$$ = this.isPreview$.subscribe(value => this.addedLayerIsPreview.emit(value));
+        this.layers$$ = this.map.layers$.subscribe(() => {
+            this.isVisible();
+        });
+        this.resolution$$ = this.map.viewController.resolution$.subscribe((resolution) => {
+            this.isInResolutionsRange(resolution);
+            this.isVisible();
+        });
     }
     ngOnDestroy() {
         this.isPreview$$.unsubscribe();
+        this.resolution$$.unsubscribe();
+        this.layers$$.unsubscribe();
     }
     computeTitleTooltip() {
         const layerOptions = this.layer.options;
@@ -13175,19 +13308,40 @@ class CatalogBrowserLayerComponent {
     haveGroup() {
         return !(!this.layer.address || this.layer.address.split('.').length === 1);
     }
-    isInResolutionsRange() {
-        const minResolution = this.layer.options.minResolution || 0;
-        const maxResolution = this.layer.options.maxResolution || Infinity;
-        this.inRange$.next(this.resolution >= minResolution && this.resolution <= maxResolution);
-        return this.inRange$.value;
+    isInResolutionsRange(resolution) {
+        const minResolution = (!this.layer.options.minResolution || Number.isNaN(this.layer.options.minResolution))
+            ? 0 : this.layer.options.minResolution;
+        const maxResolution = (!this.layer.options.maxResolution || Number.isNaN(this.layer.options.maxResolution))
+            ? Infinity : this.layer.options.maxResolution;
+        this.inRange$.next(resolution >= minResolution && resolution <= maxResolution);
+    }
+    isVisible() {
+        if (this.layer?.id) {
+            const oLayer = this.map.getLayerById(this.layer?.id);
+            oLayer ? this.isVisible$.next(oLayer.visible) : this.isVisible$.next(false);
+        }
+    }
+    getBadgeIcon() {
+        if (this.inRange$.getValue()) {
+            return this.isVisible$.getValue() ? '' : 'eye-off';
+        }
+        else {
+            return 'eye-off';
+        }
     }
     computeTooltip() {
         if (this.added) {
-            return this.isPreview$.value
-                ? 'igo.geo.catalog.layer.addToMap'
-                : this.inRange$.value
+            if (this.isPreview$.value) {
+                return 'igo.geo.catalog.layer.addToMap';
+            }
+            else if (this.inRange$.value) {
+                return this.isVisible$.value
                     ? 'igo.geo.catalog.layer.removeFromMap'
-                    : 'igo.geo.catalog.layer.removeFromMapOutRange';
+                    : 'igo.geo.catalog.layer.removeFromMapNotVisible';
+            }
+            else {
+                return 'igo.geo.catalog.layer.removeFromMapOutRange';
+            }
         }
         else {
             return this.inRange$.value
@@ -13197,7 +13351,7 @@ class CatalogBrowserLayerComponent {
     }
 }
 CatalogBrowserLayerComponent.ɵfac = function CatalogBrowserLayerComponent_Factory(t) { return new (t || CatalogBrowserLayerComponent)(i0.ɵɵdirectiveInject(LayerService)); };
-CatalogBrowserLayerComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CatalogBrowserLayerComponent, selectors: [["igo-catalog-browser-layer"]], inputs: { resolution: "resolution", catalogAllowLegend: "catalogAllowLegend", layer: "layer", added: "added" }, outputs: { addedChange: "addedChange", addedLayerIsPreview: "addedLayerIsPreview" }, decls: 16, vars: 21, consts: [["mat-list-avatar", "", "svgIcon", "blank", 4, "ngIf"], ["mat-line", "", "matTooltipShowDelay", "500", 3, "ngClass", "matTooltip", "click"], ["disabled", "true", "mat-icon-button", "", 4, "ngIf"], [3, "layer"], ["mat-icon-button", "", "tooltip-position", "below", "matTooltipShowDelay", "500", 3, "matTooltip", "color", "mouseenter", "mouseleave", "click"], ["matBadge", "icon", "igoMatBadgeIcon", "eye-off", "igoMatBadgeInverseColor", "true", "matBadgeDisabled", "true", "matBadgeSize", "small", "matBadgePosition", "after", 3, "matBadgeHidden", "svgIcon"], [1, "igo-cataloglayer-legend-container"], ["legend", ""], [3, "layer", 4, "ngIf"], ["mat-list-avatar", "", "svgIcon", "blank"], ["disabled", "true", "mat-icon-button", ""], ["class", "igo-cataloglayer-external-icon", "tooltip-position", "below", "matTooltipShowDelay", "500", "color", "primary", "svgIcon", "earth-arrow-right", 3, "matTooltip", "click", 4, "ngIf"], ["tooltip-position", "below", "matTooltipShowDelay", "500", "color", "primary", "svgIcon", "earth-arrow-right", 1, "igo-cataloglayer-external-icon", 3, "matTooltip", "click"]], template: function CatalogBrowserLayerComponent_Template(rf, ctx) { if (rf & 1) {
+CatalogBrowserLayerComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CatalogBrowserLayerComponent, selectors: [["igo-catalog-browser-layer"]], inputs: { resolution: "resolution", catalogAllowLegend: "catalogAllowLegend", layer: "layer", map: "map", added: "added" }, outputs: { addedChange: "addedChange", addedLayerIsPreview: "addedLayerIsPreview" }, decls: 22, vars: 35, consts: [["mat-list-avatar", "", "svgIcon", "blank", 4, "ngIf"], ["mat-line", "", "matTooltipShowDelay", "500", 3, "ngClass", "matTooltip", "click"], ["disabled", "true", "mat-icon-button", "", 4, "ngIf"], [3, "layer"], ["mat-icon-button", "", "tooltip-position", "below", "matTooltipShowDelay", "500", 3, "matTooltip", "color", "mouseenter", "mouseleave", "click"], ["matBadge", "icon", "igoMatBadgeColor", "rgba(0,0,0,0.87)", "igoMatBadgeBackgroundColor", "none", "igoMatBadgeInverseColor", "true", "matBadgeSize", "small", "matBadgePosition", "after", 3, "igoMatBadgeIcon", "matBadgeHidden", "matBadgeDisabled", "svgIcon"], [1, "igo-cataloglayer-legend-container"], ["legend", ""], [3, "layer", 4, "ngIf"], ["mat-list-avatar", "", "svgIcon", "blank"], ["disabled", "true", "mat-icon-button", ""], ["class", "igo-cataloglayer-external-icon", "tooltip-position", "below", "matTooltipShowDelay", "500", "color", "primary", "svgIcon", "earth-arrow-right", 3, "matTooltip", "click", 4, "ngIf"], ["tooltip-position", "below", "matTooltipShowDelay", "500", "color", "primary", "svgIcon", "earth-arrow-right", 1, "igo-cataloglayer-external-icon", 3, "matTooltip", "click"]], template: function CatalogBrowserLayerComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵelementStart(0, "mat-list-item");
         i0.ɵɵtemplate(1, CatalogBrowserLayerComponent_mat_icon_1_Template, 1, 0, "mat-icon", 0);
         i0.ɵɵelementStart(2, "h4", 1);
@@ -13212,11 +13366,17 @@ CatalogBrowserLayerComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type
         i0.ɵɵpipe(8, "async");
         i0.ɵɵelement(9, "mat-icon", 5);
         i0.ɵɵpipe(10, "async");
-        i0.ɵɵelementEnd()();
-        i0.ɵɵelementStart(11, "div", 6, 7);
-        i0.ɵɵtemplate(13, CatalogBrowserLayerComponent_igo_layer_legend_13_Template, 2, 3, "igo-layer-legend", 8);
+        i0.ɵɵpipe(11, "async");
+        i0.ɵɵpipe(12, "async");
+        i0.ɵɵpipe(13, "async");
         i0.ɵɵpipe(14, "async");
         i0.ɵɵpipe(15, "async");
+        i0.ɵɵpipe(16, "async");
+        i0.ɵɵelementEnd()();
+        i0.ɵɵelementStart(17, "div", 6, 7);
+        i0.ɵɵtemplate(19, CatalogBrowserLayerComponent_igo_layer_legend_19_Template, 2, 3, "igo-layer-legend", 8);
+        i0.ɵɵpipe(20, "async");
+        i0.ɵɵpipe(21, "async");
         i0.ɵɵelementEnd();
     } if (rf & 2) {
         i0.ɵɵadvance(1);
@@ -13230,21 +13390,23 @@ CatalogBrowserLayerComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type
         i0.ɵɵadvance(1);
         i0.ɵɵproperty("layer", ctx.layer);
         i0.ɵɵadvance(1);
-        i0.ɵɵproperty("matTooltip", i0.ɵɵpipeBind1(7, 11, ctx.computeTooltip()))("color", i0.ɵɵpipeBind1(8, 13, ctx.isPreview$) ? "" : ctx.added ? "warn" : "");
+        i0.ɵɵproperty("matTooltip", i0.ɵɵpipeBind1(7, 13, ctx.computeTooltip()))("color", i0.ɵɵpipeBind1(8, 15, ctx.isPreview$) ? "" : ctx.added ? "warn" : "");
         i0.ɵɵadvance(3);
-        i0.ɵɵproperty("matBadgeHidden", ctx.isInResolutionsRange())("svgIcon", i0.ɵɵpipeBind1(10, 15, ctx.isPreview$) ? "plus" : ctx.added ? "delete" : "plus");
-        i0.ɵɵadvance(4);
-        i0.ɵɵproperty("ngIf", i0.ɵɵpipeBind1(14, 17, ctx.layerLegendShown$) && i0.ɵɵpipeBind1(15, 19, ctx.igoLayer$) && ctx.catalogAllowLegend);
-    } }, dependencies: [i1$1.NgClass, i1$1.NgIf, i7$1.MatBadge, i3.MatButton, i2.MatIcon, i5.MatListItem, i5.MatListAvatarCssMatStyler, i9.MatLine, i4.MatTooltip, i5$1.IgoBadgeIconDirective, MetadataButtonComponent, LayerLegendComponent, i1$1.AsyncPipe, i7.TranslatePipe], styles: [".igo-cataloglayer-title[_ngcontent-%COMP%]{cursor:pointer}.igo-cataloglayer-legend-container[_ngcontent-%COMP%]{padding-left:18px;width:calc(100% - 18px);margin-left:40px}.igo-cataloglayer-external-icon[_ngcontent-%COMP%]{cursor:help}"], changeDetection: 0 });
+        i0.ɵɵproperty("igoMatBadgeIcon", ctx.getBadgeIcon())("matBadgeHidden", i0.ɵɵpipeBind1(10, 17, ctx.inRange$) && i0.ɵɵpipeBind1(11, 19, ctx.isVisible$) === true || i0.ɵɵpipeBind1(12, 21, ctx.inRange$) && !ctx.added || i0.ɵɵpipeBind1(13, 23, ctx.inRange$) && i0.ɵɵpipeBind1(14, 25, ctx.isPreview$))("matBadgeDisabled", i0.ɵɵpipeBind1(15, 27, ctx.inRange$) === false)("svgIcon", i0.ɵɵpipeBind1(16, 29, ctx.isPreview$) ? "plus" : ctx.added ? "delete" : "plus");
+        i0.ɵɵadvance(10);
+        i0.ɵɵproperty("ngIf", i0.ɵɵpipeBind1(20, 31, ctx.layerLegendShown$) && i0.ɵɵpipeBind1(21, 33, ctx.igoLayer$) && ctx.catalogAllowLegend);
+    } }, dependencies: [i1.NgClass, i1.NgIf, i7$1.MatBadge, i3$1.MatButton, i2.MatIcon, i5.MatListItem, i5.MatListAvatarCssMatStyler, i9.MatLine, i4.MatTooltip, i5$1.IgoBadgeIconDirective, MetadataButtonComponent, LayerLegendComponent, i1.AsyncPipe, i7.TranslatePipe], styles: [".igo-cataloglayer-title[_ngcontent-%COMP%]{cursor:pointer}.igo-cataloglayer-legend-container[_ngcontent-%COMP%]{padding-left:18px;width:calc(100% - 18px);margin-left:40px}.igo-cataloglayer-external-icon[_ngcontent-%COMP%]{cursor:help}"], changeDetection: 0 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CatalogBrowserLayerComponent, [{
         type: Component,
-        args: [{ selector: 'igo-catalog-browser-layer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-list-item>\n  <mat-icon *ngIf=\"haveGroup()\" mat-list-avatar svgIcon=\"blank\"></mat-icon>\n  <h4 mat-line matTooltipShowDelay=\"500\" [ngClass]=\"(catalogAllowLegend)?'igo-cataloglayer-title':''\" (click)=\"askForLegend($event)\" [matTooltip]=\"computeTitleTooltip()\">{{title}}</h4>\n\n    <button *ngIf=\"layer.externalProvider\"\n      disabled=\"true\"\n      mat-icon-button>\n    <mat-icon\n      class=\"igo-cataloglayer-external-icon\"\n      *ngIf=\"layer.externalProvider\"\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"'igo.geo.catalog.externalProvider.layer' | translate\"\n      color=\"primary\"\n      (click)=\"$event.stopPropagation()\"\n      svgIcon=\"earth-arrow-right\">\n    </mat-icon>\n  </button>\n  <igo-metadata-button [layer]=\"layer\"></igo-metadata-button>\n\n  <button\n    (mouseenter)=\"onMouseEvent($event)\" (mouseleave)=\"onMouseEvent($event)\"\n    mat-icon-button\n    tooltip-position=\"below\"\n    matTooltipShowDelay=\"500\"\n    [matTooltip]=\"computeTooltip() | translate\"\n    [color]=\"(isPreview$ | async) ? '' : added ? 'warn' : ''\"\n    (click)=\"onToggleClick($event)\">\n    <mat-icon\n       matBadge=\"icon\"\n       igoMatBadgeIcon=\"eye-off\"\n       igoMatBadgeInverseColor=\"true\"\n       [matBadgeHidden]=\"isInResolutionsRange()\"\n       matBadgeDisabled=\"true\"\n       matBadgeSize=\"small\"\n       matBadgePosition=\"after\"\n       [svgIcon]=\"(isPreview$ | async) ? 'plus' : added ? 'delete' : 'plus'\">\n    </mat-icon>\n  </button>\n\n</mat-list-item>\n\n<div #legend class=\"igo-cataloglayer-legend-container\">\n  <igo-layer-legend\n    *ngIf=\"(layerLegendShown$ | async) && (igoLayer$ | async) && catalogAllowLegend\"\n    [layer]=\"igoLayer$ | async\">\n  </igo-layer-legend>\n</div>\n", styles: [".igo-cataloglayer-title{cursor:pointer}.igo-cataloglayer-legend-container{padding-left:18px;width:calc(100% - 18px);margin-left:40px}.igo-cataloglayer-external-icon{cursor:help}\n"] }]
+        args: [{ selector: 'igo-catalog-browser-layer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-list-item>\n  <mat-icon *ngIf=\"haveGroup()\" mat-list-avatar svgIcon=\"blank\"></mat-icon>\n  <h4 mat-line matTooltipShowDelay=\"500\" [ngClass]=\"(catalogAllowLegend)?'igo-cataloglayer-title':''\" (click)=\"askForLegend($event)\" [matTooltip]=\"computeTitleTooltip()\">{{title}}</h4>\n\n    <button *ngIf=\"layer.externalProvider\"\n      disabled=\"true\"\n      mat-icon-button>\n    <mat-icon\n      class=\"igo-cataloglayer-external-icon\"\n      *ngIf=\"layer.externalProvider\"\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"'igo.geo.catalog.externalProvider.layer' | translate\"\n      color=\"primary\"\n      (click)=\"$event.stopPropagation()\"\n      svgIcon=\"earth-arrow-right\">\n    </mat-icon>\n  </button>\n  <igo-metadata-button [layer]=\"layer\"></igo-metadata-button>\n\n  <button\n    (mouseenter)=\"onMouseEvent($event)\" (mouseleave)=\"onMouseEvent($event)\"\n    mat-icon-button\n    tooltip-position=\"below\"\n    matTooltipShowDelay=\"500\"\n    [matTooltip]=\"computeTooltip() | translate\"\n    [color]=\"(isPreview$ | async) ? '' : added ? 'warn' : ''\"\n    (click)=\"onToggleClick($event)\">\n    <mat-icon\n       matBadge=\"icon\"\n       [igoMatBadgeIcon]=\"getBadgeIcon()\"\n       igoMatBadgeColor=\"rgba(0,0,0,0.87)\"\n       igoMatBadgeBackgroundColor=\"none\"\n       igoMatBadgeInverseColor=\"true\"\n       [matBadgeHidden]=\"((inRange$ | async) && (isVisible$ | async) === true) || ((inRange$ | async) && !added) || ((inRange$ | async) && (isPreview$ | async))\"\n       [matBadgeDisabled]=\"(inRange$ | async) === false\"\n       matBadgeSize=\"small\"\n       matBadgePosition=\"after\"\n       [svgIcon]=\"(isPreview$ | async) ? 'plus' : added ? 'delete' : 'plus'\">\n    </mat-icon>\n  </button>\n\n</mat-list-item>\n\n<div #legend class=\"igo-cataloglayer-legend-container\">\n  <igo-layer-legend\n    *ngIf=\"(layerLegendShown$ | async) && (igoLayer$ | async) && catalogAllowLegend\"\n    [layer]=\"igoLayer$ | async\">\n  </igo-layer-legend>\n</div>\n", styles: [".igo-cataloglayer-title{cursor:pointer}.igo-cataloglayer-legend-container{padding-left:18px;width:calc(100% - 18px);margin-left:40px}.igo-cataloglayer-external-icon{cursor:help}\n"] }]
     }], function () { return [{ type: LayerService }]; }, { resolution: [{
             type: Input
         }], catalogAllowLegend: [{
             type: Input
         }], layer: [{
             type: Input
+        }], map: [{
+            type: Input
         }], added: [{
             type: Input
         }], addedChange: [{
@@ -13311,11 +13473,11 @@ function CatalogBrowserGroupComponent_ng_template_12_ng_container_1_Template(rf,
     const item_r12 = i0.ɵɵnextContext().$implicit;
     const ctx_r14 = i0.ɵɵnextContext();
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("layer", item_r12)("resolution", ctx_r14.resolution)("catalogAllowLegend", ctx_r14.catalogAllowLegend)("added", ctx_r14.state.get(item_r12).added);
+    i0.ɵɵproperty("layer", item_r12)("resolution", ctx_r14.resolution)("map", ctx_r14.map)("catalogAllowLegend", ctx_r14.catalogAllowLegend)("added", ctx_r14.state.get(item_r12).added);
 } }
 function CatalogBrowserGroupComponent_ng_template_12_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtemplate(0, CatalogBrowserGroupComponent_ng_template_12_ng_container_0_Template, 1, 0, "ng-container", 14);
-    i0.ɵɵtemplate(1, CatalogBrowserGroupComponent_ng_template_12_ng_container_1_Template, 2, 4, "ng-container", 14);
+    i0.ɵɵtemplate(1, CatalogBrowserGroupComponent_ng_template_12_ng_container_1_Template, 2, 5, "ng-container", 14);
 } if (rf & 2) {
     const item_r12 = ctx.$implicit;
     const ctx_r5 = i0.ɵɵnextContext();
@@ -13481,7 +13643,7 @@ class CatalogBrowserGroupComponent {
     }
 }
 CatalogBrowserGroupComponent.ɵfac = function CatalogBrowserGroupComponent_Factory(t) { return new (t || CatalogBrowserGroupComponent)(); };
-CatalogBrowserGroupComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CatalogBrowserGroupComponent, selectors: [["igo-catalog-browser-group"]], inputs: { catalog: "catalog", group: "group", collapsed: "collapsed", resolution: "resolution", catalogAllowLegend: "catalogAllowLegend", toggleCollapsed: "toggleCollapsed", state: "state" }, outputs: { addedChange: "addedChange", layerAddedChange: "layerAddedChange" }, decls: 14, vars: 14, consts: [["mat-list-avatar", "", "svgIcon", "chevron-up", "igoCollapse", "", 1, "igo-chevron", 3, "target", "collapsed", "toggle"], ["id", "catalog-group-title", "mat-line", "", "matTooltipShowDelay", "500", 1, "igo-catalog-group-title", 3, "matTooltip", "click"], ["disabled", "true", "mat-icon-button", "", 4, "ngIf"], [4, "ngIf", "ngIfElse"], ["notadded", ""], ["items", ""], ["ngFor", "", 3, "ngForOf"], ["disabled", "true", "mat-icon-button", ""], ["class", "igo-cataloggroup-external-icon", "tooltip-position", "below", "matTooltipShowDelay", "500", "color", "primary", "svgIcon", "earth-arrow-right", 3, "matTooltip", "click", 4, "ngIf"], ["tooltip-position", "below", "matTooltipShowDelay", "500", "color", "primary", "svgIcon", "earth-arrow-right", 1, "igo-cataloggroup-external-icon", 3, "matTooltip", "click"], ["mat-icon-button", "", "tooltip-position", "below", "matTooltipShowDelay", "500", "color", "warn", 3, "matTooltip", "disabled", "click"], ["svgIcon", "delete"], ["mat-icon-button", "", "tooltip-position", "below", "matTooltipShowDelay", "500", 3, "matTooltip", "disabled", "click"], ["svgIcon", "plus"], [4, "ngIf"], ["igoListItem", "", 3, "layer", "resolution", "catalogAllowLegend", "added", "addedLayerIsPreview", "addedChange"]], template: function CatalogBrowserGroupComponent_Template(rf, ctx) { if (rf & 1) {
+CatalogBrowserGroupComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CatalogBrowserGroupComponent, selectors: [["igo-catalog-browser-group"]], inputs: { catalog: "catalog", group: "group", map: "map", collapsed: "collapsed", resolution: "resolution", catalogAllowLegend: "catalogAllowLegend", toggleCollapsed: "toggleCollapsed", state: "state" }, outputs: { addedChange: "addedChange", layerAddedChange: "layerAddedChange" }, decls: 14, vars: 14, consts: [["mat-list-avatar", "", "svgIcon", "chevron-up", "igoCollapse", "", 1, "igo-chevron", 3, "target", "collapsed", "toggle"], ["id", "catalog-group-title", "mat-line", "", "matTooltipShowDelay", "500", 1, "igo-catalog-group-title", 3, "matTooltip", "click"], ["disabled", "true", "mat-icon-button", "", 4, "ngIf"], [4, "ngIf", "ngIfElse"], ["notadded", ""], ["items", ""], ["ngFor", "", 3, "ngForOf"], ["disabled", "true", "mat-icon-button", ""], ["class", "igo-cataloggroup-external-icon", "tooltip-position", "below", "matTooltipShowDelay", "500", "color", "primary", "svgIcon", "earth-arrow-right", 3, "matTooltip", "click", 4, "ngIf"], ["tooltip-position", "below", "matTooltipShowDelay", "500", "color", "primary", "svgIcon", "earth-arrow-right", 1, "igo-cataloggroup-external-icon", 3, "matTooltip", "click"], ["mat-icon-button", "", "tooltip-position", "below", "matTooltipShowDelay", "500", "color", "warn", 3, "matTooltip", "disabled", "click"], ["svgIcon", "delete"], ["mat-icon-button", "", "tooltip-position", "below", "matTooltipShowDelay", "500", 3, "matTooltip", "disabled", "click"], ["svgIcon", "plus"], [4, "ngIf"], ["igoListItem", "", 3, "layer", "resolution", "map", "catalogAllowLegend", "added", "addedLayerIsPreview", "addedChange"]], template: function CatalogBrowserGroupComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵelementStart(0, "mat-list-item")(1, "mat-icon", 0);
         i0.ɵɵlistener("toggle", function CatalogBrowserGroupComponent_Template_mat_icon_toggle_1_listener($event) { return ctx.onToggleCollapsed($event); });
         i0.ɵɵelementEnd();
@@ -13514,14 +13676,16 @@ CatalogBrowserGroupComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type
         i0.ɵɵproperty("ngIf", i0.ɵɵpipeBind1(6, 8, ctx.added$) && i0.ɵɵpipeBind1(7, 10, ctx.preview$) === false)("ngIfElse", _r2);
         i0.ɵɵadvance(7);
         i0.ɵɵproperty("ngForOf", i0.ɵɵpipeBind1(13, 12, ctx.store.view.all$()));
-    } }, dependencies: [i1$1.NgForOf, i1$1.NgIf, i3.MatButton, i2.MatIcon, i5.MatListItem, i5.MatListAvatarCssMatStyler, i9.MatLine, i4.MatTooltip, i5$1.ListItemDirective, i5$1.CollapseDirective, CatalogBrowserLayerComponent, i1$1.AsyncPipe, i7.TranslatePipe], styles: [".igo-catalog-group-title[_ngcontent-%COMP%]{cursor:pointer;opacity:.9}#catalog-group-title[_ngcontent-%COMP%]{font-weight:700}.igo-cataloggroup-external-icon[_ngcontent-%COMP%]{cursor:help}"], changeDetection: 0 });
+    } }, dependencies: [i1.NgForOf, i1.NgIf, i3$1.MatButton, i2.MatIcon, i5.MatListItem, i5.MatListAvatarCssMatStyler, i9.MatLine, i4.MatTooltip, i5$1.ListItemDirective, i5$1.CollapseDirective, CatalogBrowserLayerComponent, i1.AsyncPipe, i7.TranslatePipe], styles: [".igo-catalog-group-title[_ngcontent-%COMP%]{cursor:pointer;opacity:.9}#catalog-group-title[_ngcontent-%COMP%]{font-weight:700}.igo-cataloggroup-external-icon[_ngcontent-%COMP%]{cursor:help}"], changeDetection: 0 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CatalogBrowserGroupComponent, [{
         type: Component,
-        args: [{ selector: 'igo-catalog-browser-group', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-list-item>\n  <mat-icon\n    mat-list-avatar\n    svgIcon=\"chevron-up\"\n    igoCollapse\n    class=\"igo-chevron\"\n    [target]=\"items\"\n    [collapsed]=\"collapsed\"\n    (toggle)=\"onToggleCollapsed($event)\">\n  </mat-icon>\n\n  <h4 class=\"igo-catalog-group-title\" id=\"catalog-group-title\" mat-line matTooltipShowDelay=\"500\" [matTooltip]=\"title\" (click)=\"onTitleClick()\">{{title}}</h4>\n\n  <button *ngIf=\"group.externalProvider\"\n    disabled=\"true\"\n    mat-icon-button>\n    <mat-icon\n      class=\"igo-cataloggroup-external-icon\"\n      *ngIf=\"group.externalProvider\"\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"'igo.geo.catalog.externalProvider.group' | translate\"\n      color=\"primary\"\n      (click)=\"$event.stopPropagation()\"\n      svgIcon=\"earth-arrow-right\">\n    </mat-icon>\n  </button>\n\n  <ng-container *ngIf=\"(added$ | async) && (preview$ | async) === false; else notadded\">\n    <button\n      mat-icon-button\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"'igo.geo.catalog.group.removeFromMap' | translate\"\n      color=\"warn\"\n      [disabled]=\"disabled$ | async\"\n      (click)=\"onToggleClick()\">\n      <mat-icon svgIcon=\"delete\"></mat-icon>\n    </button>\n  </ng-container>\n\n  <ng-template #notadded>\n    <button\n      mat-icon-button\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"'igo.geo.catalog.group.addToMap' | translate\"\n      [disabled]=\"disabled$ | async\"\n      (click)=\"onToggleClick()\">\n      <mat-icon svgIcon=\"plus\"></mat-icon>\n    </button>\n  </ng-template>\n</mat-list-item>\n\n<div #items>\n  <ng-template ngFor let-item [ngForOf]=\"store.view.all$() | async\">\n    <ng-container *ngIf=\"isGroup(item)\">\n      <!-- todo: add display ans manage CatalogItemGroup -->\n    </ng-container>\n    <ng-container *ngIf=\"isLayer(item)\">\n      <igo-catalog-browser-layer\n        igoListItem\n        [layer]=\"item\"\n        [resolution]=\"resolution\"\n        [catalogAllowLegend]=\"catalogAllowLegend\"\n        [added]=\"state.get(item).added\"\n        (addedLayerIsPreview)=\"onLayerPreview($event)\"\n        (addedChange)=\"onLayerAddedChange($event)\">\n      </igo-catalog-browser-layer>\n    </ng-container>\n  </ng-template>\n</div>\n", styles: [".igo-catalog-group-title{cursor:pointer;opacity:.9}#catalog-group-title{font-weight:700}.igo-cataloggroup-external-icon{cursor:help}\n"] }]
+        args: [{ selector: 'igo-catalog-browser-group', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-list-item>\n  <mat-icon\n    mat-list-avatar\n    svgIcon=\"chevron-up\"\n    igoCollapse\n    class=\"igo-chevron\"\n    [target]=\"items\"\n    [collapsed]=\"collapsed\"\n    (toggle)=\"onToggleCollapsed($event)\">\n  </mat-icon>\n\n  <h4 class=\"igo-catalog-group-title\" id=\"catalog-group-title\" mat-line matTooltipShowDelay=\"500\" [matTooltip]=\"title\" (click)=\"onTitleClick()\">{{title}}</h4>\n\n  <button *ngIf=\"group.externalProvider\"\n    disabled=\"true\"\n    mat-icon-button>\n    <mat-icon\n      class=\"igo-cataloggroup-external-icon\"\n      *ngIf=\"group.externalProvider\"\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"'igo.geo.catalog.externalProvider.group' | translate\"\n      color=\"primary\"\n      (click)=\"$event.stopPropagation()\"\n      svgIcon=\"earth-arrow-right\">\n    </mat-icon>\n  </button>\n\n  <ng-container *ngIf=\"(added$ | async) && (preview$ | async) === false; else notadded\">\n    <button\n      mat-icon-button\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"'igo.geo.catalog.group.removeFromMap' | translate\"\n      color=\"warn\"\n      [disabled]=\"disabled$ | async\"\n      (click)=\"onToggleClick()\">\n      <mat-icon svgIcon=\"delete\"></mat-icon>\n    </button>\n  </ng-container>\n\n  <ng-template #notadded>\n    <button\n      mat-icon-button\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"'igo.geo.catalog.group.addToMap' | translate\"\n      [disabled]=\"disabled$ | async\"\n      (click)=\"onToggleClick()\">\n      <mat-icon svgIcon=\"plus\"></mat-icon>\n    </button>\n  </ng-template>\n</mat-list-item>\n\n<div #items>\n  <ng-template ngFor let-item [ngForOf]=\"store.view.all$() | async\">\n    <ng-container *ngIf=\"isGroup(item)\">\n      <!-- todo: add display ans manage CatalogItemGroup -->\n    </ng-container>\n    <ng-container *ngIf=\"isLayer(item)\">\n      <igo-catalog-browser-layer\n        igoListItem\n        [layer]=\"item\"\n        [resolution]=\"resolution\"\n        [map]=\"map\"\n        [catalogAllowLegend]=\"catalogAllowLegend\"\n        [added]=\"state.get(item).added\"\n        (addedLayerIsPreview)=\"onLayerPreview($event)\"\n        (addedChange)=\"onLayerAddedChange($event)\">\n      </igo-catalog-browser-layer>\n    </ng-container>\n  </ng-template>\n</div>\n", styles: [".igo-catalog-group-title{cursor:pointer;opacity:.9}#catalog-group-title{font-weight:700}.igo-cataloggroup-external-icon{cursor:help}\n"] }]
     }], null, { catalog: [{
             type: Input
         }], group: [{
             type: Input
+        }], map: [{
+            type: Input
         }], collapsed: [{
             type: Input
         }], resolution: [{
@@ -13567,7 +13731,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$g = function (a0) { return { disabled: a0 }; };
+const _c0$h = function (a0) { return { disabled: a0 }; };
 function LayerItemComponent_button_4_Template(rf, ctx) { if (rf & 1) {
     const _r9 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 10);
@@ -13582,7 +13746,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$g, 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$h, 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();
@@ -13598,7 +13762,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$g, 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$h, 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();
@@ -13871,7 +14035,7 @@ var LayerListDisplacement;
     LayerListDisplacement["Lower"] = "lower";
 })(LayerListDisplacement || (LayerListDisplacement = {}));
 
-const _c0$f = ["igoLayerItemToolbar"];
+const _c0$g = ["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);
@@ -14804,7 +14968,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$f, 5);
+        i0.ɵɵcontentQuery(dirIndex, _c0$g, 5);
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.templateLayerToolbar = _t.first);
@@ -15001,7 +15165,7 @@ LayerListToolComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Laye
         i0.ɵɵproperty("matTooltip", ctx.selectionMode ? i0.ɵɵpipeBind1(17, 26, "igo.geo.layer.deactivateSelectionMode") : i0.ɵɵpipeBind1(18, 28, "igo.geo.layer.activateSelectionMode"));
         i0.ɵɵadvance(4);
         i0.ɵɵproperty("svgIcon", ctx.selectionMode ? "checkbox-multiple-marked-outline" : "checkbox-multiple-blank-outline");
-    } }, dependencies: [i13.MatFormField, i13.MatSuffix, i14.MatInput, i2$2.DefaultValueAccessor, i2$2.NgControlStatus, i1$1.NgIf, i2$2.NgModel, i2.MatIcon, i3.MatButton, i4.MatTooltip, i5.MatListItem, i7$1.MatBadge, i5$1.IgoBadgeIconDirective, i7.TranslatePipe], styles: ["mat-form-field.inputFilter[_ngcontent-%COMP%]{width:calc(100% - 100px);max-width:200px}.selection-mode[_ngcontent-%COMP%]{margin-left:5px}"], changeDetection: 0 });
+    } }, dependencies: [i13.MatFormField, i13.MatSuffix, i14.MatInput, i2$2.DefaultValueAccessor, i2$2.NgControlStatus, i1.NgIf, i2$2.NgModel, i2.MatIcon, i3$1.MatButton, i4.MatTooltip, i5.MatListItem, i7$1.MatBadge, i5$1.IgoBadgeIconDirective, i7.TranslatePipe], styles: ["mat-form-field.inputFilter[_ngcontent-%COMP%]{width:calc(100% - 100px);max-width:200px}.selection-mode[_ngcontent-%COMP%]{margin-left:5px}"], changeDetection: 0 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LayerListToolComponent, [{
         type: Component,
         args: [{ selector: 'igo-layer-list-tool', changeDetection: ChangeDetectionStrategy.OnPush, template: "  <mat-list-item>\n      <mat-form-field class=\"inputFilter\" [floatLabel]=\"floatLabel\">\n        <input\n          matInput\n          [placeholder]=\"'igo.geo.layer.filterPlaceholder' | translate\"\n          [matTooltip]=\"'igo.geo.layer.subsetLayersListKeyword' | translate\"\n          matTooltipShowDelay=\"500\"\n          type=\"text\" [(ngModel)]=\"term\">\n        <button\n          mat-button\n          *ngIf=\"term\"\n          matSuffix\n          mat-icon-button\n          aria-label=\"Clear\"\n          color=\"warn\"\n          (click)=\"clearTerm()\">\n          <mat-icon svgIcon=\"close\"></mat-icon>\n        </button>\n      </mat-form-field>\n\n      <div [matTooltip]=\"sortAlpha ?\n      ('igo.geo.layer.sortMapOrder' | translate) :\n      ('igo.geo.layer.sortAlphabetically' | translate)\" matTooltipShowDelay=\"500\">\n        <button class=\"sort-alpha\" [color]=\"sortAlpha ? 'warn' : 'primary'\" mat-icon-button (click)=\"toggleSortAlpha()\">\n          <mat-icon [svgIcon]=\"sortAlpha ? 'sort-ascending' : 'sort-alphabetical-ascending'\"></mat-icon>\n        </button>\n      </div>\n\n       <div [matTooltip]=\"onlyVisible ?\n        ('igo.geo.layer.resetLayersList' | translate) :\n        ('igo.geo.layer.subsetLayersListOnlyVisible' | translate)\" matTooltipShowDelay=\"500\">\n         <button class=\"only-visible\" mat-icon-button [disabled]=\"layersAreAllVisible && !onlyVisible\"\n           [color]=\"onlyVisible ? 'warn' : 'primary'\" (click)=\"toggleOnlyVisible()\">\n           <mat-icon\n             matBadge=\"icon\"\n             igoMatBadgeIcon=\"eye\"\n             igoMatBadgeInverseColor=\"true\"\n             igoMatBadgeInheritColor=\"true\"\n             [svgIcon]=\"onlyVisible ? 'filter-remove' : 'filter'\">\n           </mat-icon>\n         </button>\n       </div>\n\n       <div [matTooltip]=\"selectionMode ?\n        ('igo.geo.layer.deactivateSelectionMode' | translate) :\n        ('igo.geo.layer.activateSelectionMode' | translate)\" matTooltipShowDelay=\"500\">\n         <button class=\"selection-mode\" mat-icon-button\n           color=\"primary\" (click)=\"toggleSelectionMode()\">\n           <mat-icon [svgIcon]=\"selectionMode ? 'checkbox-multiple-marked-outline' : 'checkbox-multiple-blank-outline'\"></mat-icon>\n         </button>\n       </div>\n\n</mat-list-item>\n", styles: ["mat-form-field.inputFilter{width:calc(100% - 100px);max-width:200px}.selection-mode{margin-left:5px}\n"] }]
@@ -15348,7 +15512,7 @@ TrackFeatureButtonComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
         i0.ɵɵtemplate(0, TrackFeatureButtonComponent_button_0_Template, 3, 4, "button", 0);
     } if (rf & 2) {
         i0.ɵɵproperty("ngIf", ctx.options.trackFeature);
-    } }, dependencies: [i1$1.NgIf, i2.MatIcon, i3.MatButton, i4.MatTooltip, i7.TranslatePipe], changeDetection: 0 });
+    } }, dependencies: [i1.NgIf, i2.MatIcon, i3$1.MatButton, i4.MatTooltip, i7.TranslatePipe], changeDetection: 0 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TrackFeatureButtonComponent, [{
         type: Component,
         args: [{ selector: 'igo-track-feature-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button *ngIf=\"options.trackFeature\"\n  mat-icon-button\n  collapsibleButton\n  tooltip-position=\"below\"\n  matTooltipShowDelay=\"500\"\n  [matTooltip]=\"'igo.geo.layer.trackFeature' | translate\"\n  [color]=\"color\"\n  (click)=\"toggleTrackFeature()\">\n  <mat-icon svgIcon=\"crosshairs-gps\"></mat-icon>\n</button>\n" }]
@@ -16355,7 +16519,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$e = function () { return { "cursor": "pointer", "color": "blue" }; };
+const _c0$f = 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);
@@ -16366,7 +16530,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$e));
+    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction0(2, _c0$f));
     i0.ɵɵadvance(1);
     i0.ɵɵtextInterpolate(ctx_r8.getEmbeddedLinkText(property_r3.value));
 } }
@@ -16383,7 +16547,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$e));
+    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction0(4, _c0$f));
     i0.ɵɵadvance(1);
     i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(3, 2, "igo.geo.targetHtmlUrl"));
 } }
@@ -16676,7 +16840,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.ConfigService)); };
+FeatureDetailsComponent.ɵfac = function FeatureDetailsComponent_Factory(t) { return new (t || FeatureDetailsComponent)(i0.ɵɵdirectiveInject(i1$1.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);
@@ -16684,11 +16848,11 @@ FeatureDetailsComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Fea
         i0.ɵɵproperty("ngIf", ctx.ready && ctx.feature && ctx.isObject(ctx.feature.properties) && ctx.feature.properties.target !== "iframe");
         i0.ɵɵadvance(1);
         i0.ɵɵproperty("ngIf", ctx.isHtmlDisplay());
-    } }, dependencies: [i1$1.NgForOf, i1$1.NgIf, i1$1.NgStyle, i2.MatIcon, i5$1.ImageErrorDirective, i1$1.AsyncPipe, i1$1.JsonPipe, i7.TranslatePipe, i5$1.KeyValuePipe, i5$1.SecureImagePipe], styles: ["table[_ngcontent-%COMP%]{width:100%}table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%]{padding:5px}#keyValue[_ngcontent-%COMP%]{width:30%}table[_ngcontent-%COMP%]     .routing{cursor:pointer}iframe[_ngcontent-%COMP%]{height:calc(100% - 4px);width:100%;border:0}.copyClipboard[_ngcontent-%COMP%]{border:none;background:transparent;cursor:pointer}"], changeDetection: 0 });
+    } }, dependencies: [i1.NgForOf, i1.NgIf, i1.NgStyle, i2.MatIcon, i5$1.ImageErrorDirective, i1.AsyncPipe, i1.JsonPipe, i7.TranslatePipe, i5$1.KeyValuePipe, i5$1.SecureImagePipe], styles: ["table[_ngcontent-%COMP%]{width:100%}table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%]{padding:5px}#keyValue[_ngcontent-%COMP%]{width:30%}table[_ngcontent-%COMP%]     .routing{cursor:pointer}iframe[_ngcontent-%COMP%]{height:calc(100% - 4px);width:100%;border:0}.copyClipboard[_ngcontent-%COMP%]{border:none;background:transparent;cursor:pointer}"], changeDetection: 0 });
 (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'\">\n  <tbody>\n    <tr *ngFor=\"let property of filterFeatureProperties(feature) | keyvalue\">\n\n      <td *ngIf=\"feature.properties.target === '_blank' && property.key === 'url'\">\n        <mat-icon mat-list-avatar svgIcon=\"{{icon}}\"></mat-icon>\n      </td>\n\n      <td *ngIf=\"feature.properties.target === '_blank' && property.key === 'url'\">\n        <a href=\"{{property.value}}\" target='_blank' rel=\"noopener noreferrer\"> {{ 'igo.geo.targetHtmlUrl' | translate }} {{title}}</a>\n        <button class=\"copyClipboard\" mat-icon-button (click)=\"copyTextToClipboard(property.value)\">\n          <mat-icon svgIcon=\"content-copy\"></mat-icon>\n        </button>\n      </td>\n\n      <td id=\"keyValue\" *ngIf=\"feature.properties.target === undefined\">\n        {{property.key}}\n      </td>\n\n      <td *ngIf=\"feature.properties.target === undefined && !isObject(property.value) && !isUrl(property.value) && !isEmbeddedLink(property.value)\" [innerHTML]=\"property.value\">\n      </td>\n\n      <td *ngIf=\"feature.properties.target === undefined && isEmbeddedLink(property.value)\">\n        <u [ngStyle]=\"{'cursor': 'pointer', 'color': 'blue'}\" (click)=\"openSecureUrl(property.value)\">{{ getEmbeddedLinkText(property.value) }}</u>\n      </td>\n\n      <td *ngIf=\"feature.properties.target === undefined && !isObject(property.value) && (isDoc(property.value) || isUrl(property.value)) && !isImg(property.value)\">\n        <u [ngStyle]=\"{'cursor': 'pointer', 'color': 'blue'}\" (click)=\"openSecureUrl(property.value)\">{{ 'igo.geo.targetHtmlUrl' | translate }}</u>\n        <button class=\"copyClipboard\" mat-icon-button (click)=\"copyTextToClipboard(property.value)\">\n          <mat-icon svgIcon=\"content-copy\"></mat-icon>\n        </button>\n      </td>\n\n      <td *ngIf=\"feature.properties.target === undefined && !isObject(property.value) && isUrl(property.value) && isImg(property.value)\">\n        <a href=\"{{property.value}}\" target='_blank' (click)=\"openSecureUrl(property.value)\" rel=\"noopener noreferrer\">\n          <img igoImageError src=\"{{(property.value | secureImage) |\u00A0async}}\" width=\"225\" height=\"auto\">\n        </a>\n      </td>\n\n      <td *ngIf=\"feature.properties.target === undefined && isObject(property.value)\" [innerHTML]=\"property.value | json\">\n      </td>\n\n    </tr>\n  </tbody>\n</table>\n\n<iframe *ngIf=\"isHtmlDisplay()\" [srcdoc]=\"htmlSanitizer(feature.properties)\" [src]=\"urlSanitizer(feature.properties.url)\"></iframe>\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.ConfigService }]; }, { source: [{
+    }], function () { return [{ type: i1$1.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
@@ -16704,7 +16868,7 @@ FeatureDetailsComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Fea
             type: Output
         }] }); })();
 
-const _c0$d = ["igoForm"];
+const _c0$e = ["igoForm"];
 const _c1$a = ["*", [["", "formButtons", ""]]];
 const _c2$5 = ["*", "[formButtons]"];
 /**
@@ -16779,7 +16943,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$d, 7);
+        i0.ɵɵviewQuery(_c0$e, 7);
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.igoForm = _t.first);
@@ -16793,7 +16957,7 @@ FeatureFormComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Featur
         i0.ɵɵelementEnd();
     } if (rf & 2) {
         i0.ɵɵproperty("form", ctx.form)("formData", i0.ɵɵpipeBind1(2, 2, ctx.feature$));
-    } }, dependencies: [i5$1.FormComponent, i1$1.AsyncPipe], styles: ["[_nghost-%COMP%]{display:block}igo-form[_ngcontent-%COMP%]{height:100%}"], changeDetection: 0 });
+    } }, dependencies: [i5$1.FormComponent, i1.AsyncPipe], styles: ["[_nghost-%COMP%]{display:block}igo-form[_ngcontent-%COMP%]{height:100%}"], changeDetection: 0 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FeatureFormComponent, [{
         type: Component,
         args: [{ selector: 'igo-feature-form', changeDetection: ChangeDetectionStrategy.OnPush, template: "\n<igo-form\n  #igoForm\n  [form]=\"form\"\n  [formData]=\"feature$ | async\"\n  (submitForm)=\"onSubmit($event)\">\n\n  <ng-content></ng-content>\n  \n  <ng-content select=\"[formButtons]\" formButtons></ng-content>\n  \n</igo-form>\n", styles: [":host{display:block}igo-form{height:100%}\n"] }]
@@ -17766,7 +17930,7 @@ class DrawPopupComponent {
         return this.languageService.translate.instant('igo.geo.draw.labelType.' + option);
     }
 }
-DrawPopupComponent.ɵfac = function DrawPopupComponent_Factory(t) { return new (t || DrawPopupComponent)(i0.ɵɵdirectiveInject(i2$1.LanguageService), i0.ɵɵdirectiveInject(i1.MatDialogRef), i0.ɵɵdirectiveInject(MAT_DIALOG_DATA)); };
+DrawPopupComponent.ɵfac = function DrawPopupComponent_Factory(t) { return new (t || DrawPopupComponent)(i0.ɵɵdirectiveInject(i2$1.LanguageService), i0.ɵɵdirectiveInject(i3.MatDialogRef), i0.ɵɵdirectiveInject(MAT_DIALOG_DATA)); };
 DrawPopupComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DrawPopupComponent, selectors: [["igo-draw-popup-component"]], inputs: { confirmFlag: "confirmFlag", labelFlag: "labelFlag", coordinatesMeasureUnit: "coordinatesMeasureUnit", lengthMeasureUnit: "lengthMeasureUnit", areaMeasureUnit: "areaMeasureUnit" }, decls: 14, vars: 14, consts: [["mat-dialog-title", ""], [1, "geometry-type-toggle", "mat-typography"], [3, "value", "change"], [3, "value"], [4, "ngIf"], [1, "mat-typography"], ["class", "mat-typography", 4, "ngIf"], ["mat-dialog-actions", ""], ["mat-raised-button", "", 3, "click"], ["mat-raised-button", "", "color", "primary", 3, "click"], [3, "value", "disabled", "checked", "change", 4, "ngFor", "ngForOf"], [3, "value", "disabled", "checked", "change"], ["class", "mat-typography", 3, "value", "disabled", "checked", "change", 4, "ngFor", "ngForOf"], [1, "mat-typography", 3, "value", "disabled", "checked", "change"], [1, "readOnly-Input"], ["matInput", "", "placeholder", "(Latitude, Longitude)", "readonly", "", 3, "value"], ["input", ""], [1, "unit-field"], [3, "value", "selectionChange"], [3, "value", 4, "ngFor", "ngForOf"], ["matInput", "", "readonly", "", 3, "placeholder", "value"], [1, "input"], ["matInput", "", "cdkFocusInitial", "", 3, "placeholder", "value", "select", "input"]], template: function DrawPopupComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵelementStart(0, "div")(1, "h2", 0);
         i0.ɵɵtext(2);
@@ -17801,11 +17965,11 @@ DrawPopupComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DrawPopu
         i0.ɵɵproperty("ngIf", ctx.labelFlag !== ctx.labelType.Custom);
         i0.ɵɵadvance(1);
         i0.ɵɵproperty("ngIf", ctx.labelFlag === ctx.labelType.Custom);
-    } }, dependencies: [i1$1.NgForOf, i1$1.NgIf, i3.MatButton, i18.MatButtonToggleGroup, i18.MatButtonToggle, i13.MatFormField, i14.MatInput, i15.MatSelect, i9.MatOption, i1.MatDialogTitle, i1.MatDialogActions, i17.MatRadioGroup, i17.MatRadioButton, i12.MatCheckbox, i7.TranslatePipe], styles: [".mat-radio-button[_ngcontent-%COMP%] ~ .mat-radio-button[_ngcontent-%COMP%]{margin-left:16px}.readOnly-Input[_ngcontent-%COMP%]{width:200px!important}.unit-field[_ngcontent-%COMP%]{width:50px;margin-left:10px;margin-top:10px}.mat-form-field[_ngcontent-%COMP%]{position:-webkit-sticky!important;position:sticky!important}.coordinatesInputView[_ngcontent-%COMP%]{top:5em!important}  .mat-form-field-wrapper{margin-bottom:-1.25em;margin-top:.25em}.geometry-type-toggle[_ngcontent-%COMP%], .mat-dialog-actions[_ngcontent-%COMP%]{display:flex!important;justify-content:center}.input[_ngcontent-%COMP%]{width:auto!important}.mat-button-toggle-group[_ngcontent-%COMP%], .mat-button-toggle[_ngcontent-%COMP%]{width:100%}mat-checkbox[_ngcontent-%COMP%]{margin-right:10px}"] });
+    } }, dependencies: [i1.NgForOf, i1.NgIf, i3$1.MatButton, i18.MatButtonToggleGroup, i18.MatButtonToggle, i13.MatFormField, i14.MatInput, i15.MatSelect, i9.MatOption, i3.MatDialogTitle, i3.MatDialogActions, i17.MatRadioGroup, i17.MatRadioButton, i12.MatCheckbox, i7.TranslatePipe], styles: [".mat-radio-button[_ngcontent-%COMP%] ~ .mat-radio-button[_ngcontent-%COMP%]{margin-left:16px}.readOnly-Input[_ngcontent-%COMP%]{width:200px!important}.unit-field[_ngcontent-%COMP%]{width:50px;margin-left:10px;margin-top:10px}.mat-form-field[_ngcontent-%COMP%]{position:-webkit-sticky!important;position:sticky!important}.coordinatesInputView[_ngcontent-%COMP%]{top:5em!important}  .mat-form-field-wrapper{margin-bottom:-1.25em;margin-top:.25em}.geometry-type-toggle[_ngcontent-%COMP%], .mat-dialog-actions[_ngcontent-%COMP%]{display:flex!important;justify-content:center}.input[_ngcontent-%COMP%]{width:auto!important}.mat-button-toggle-group[_ngcontent-%COMP%], .mat-button-toggle[_ngcontent-%COMP%]{width:100%}mat-checkbox[_ngcontent-%COMP%]{margin-right:10px}"] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DrawPopupComponent, [{
         type: Component,
         args: [{ selector: 'igo-draw-popup-component', template: "<div>\n  <h2 mat-dialog-title>\n    {{ 'igo.geo.draw.popupTitle' | translate }}\n  </h2>\n</div>\n\n\n<div class=\"geometry-type-toggle mat-typography\">\n  <mat-button-toggle-group\n    (change)=\"onLabelTypeChange($event.value)\" [value]=\"customOrPredefined\">\n    <mat-button-toggle [value]=\"labelType.Custom\" >\n      {{ 'igo.geo.draw.labelType.custom' | translate }}\n    </mat-button-toggle>\n    <mat-button-toggle [value]=\"labelType.Predefined\">\n      {{ 'igo.geo.draw.labelType.predefined' | translate }}\n    </mat-button-toggle>\n  </mat-button-toggle-group>\n</div>\n\n<div *ngIf=\"labelFlag !== labelType.Custom\">\n  <div>\n    <p class=\"mat-typography\">{{ 'igo.geo.draw.builtInInstructions' | translate }}</p>\n    <mat-radio-group *ngIf=\"olGeometryType !== 'Polygon'\" class=\"mat-typography\">\n      <mat-radio-button *ngFor=\"let option of arrayBuiltInType\" [value]=\"option.value\" [disabled]=\"optionAvailable(option.value)\" \n      (change)=\"onLabelTypeChange($event.value)\" [checked]=\"option.checked\">\n        {{getProperLengthLabel(option.value)}}\n      </mat-radio-button>\n    </mat-radio-group>\n    <ng-container class=\"mat-typography\" *ngIf=\"olGeometryType === 'Polygon'\">\n      <mat-checkbox\n        *ngFor=\"let option of arrayBuiltInType\"\n        class=\"mat-typography\"\n        [value]=\"option.value\"\n        [disabled]=\"optionAvailable(option.value)\"\n        (change)=\"onLabelTypeChange($event.source.value, $event.checked)\"\n        [checked]=\"option.checked\">\n        {{getProperLengthLabel(option.value)}}\n      </mat-checkbox>\n    </ng-container>\n    <div *ngIf=\"labelFlag === labelType.Coordinates\">\n      <mat-form-field class=\"readOnly-Input\">\n        <input\n          #input\n          matInput\n          placeholder=\"(Latitude, Longitude)\"\n          value=\"{{currentCoordinates}}\" readonly>\n      </mat-form-field>\n      <mat-form-field class=\"unit-field\">\n        <mat-select [value]=\"coordinatesMeasureUnit\" (selectionChange)=\"onChangeCoordinateUnit($event.value)\">\n          <mat-option *ngFor=\"let unit of allCoordinatesUnits\" [value]=\"unit\">\n            {{unit}}\n          </mat-option>\n        </mat-select>  \n      </mat-form-field>\n    </div>\n    <div *ngIf=\"labelFlag === labelType.Length || polygonCheck === 2\">\n      <mat-form-field class=\"readOnly-Input\">\n        <input\n          #input\n          matInput\n          placeholder={{lengthLabelT}}\n          value=\"{{currentLength}}\" readonly>\n      </mat-form-field>\n      <mat-form-field class=\"unit-field\">\n        <mat-select [value]=\"lengthMeasureUnit\" (selectionChange)=\"onChangeLengthUnit($event.value)\">\n          <mat-option *ngFor=\"let unit of allLengthUnits\" [value]=\"unit\">\n            {{getLengthUnitEnum(unit)}}\n          </mat-option>\n        </mat-select>  \n      </mat-form-field>\n    </div>\n    <div *ngIf=\"labelFlag === labelType.Area || polygonCheck === 2\">\n      <mat-form-field class=\"readOnly-Input\">\n        <input\n          #input\n          matInput\n          placeholder=\"{{ 'igo.geo.draw.labelType.Area' | translate }}\"\n          value=\"{{currentArea}}\" readonly>\n      </mat-form-field>\n      <mat-form-field class=\"unit-field\">\n        <mat-select [value]=\"areaMeasureUnit\" (selectionChange)=\"onChangeAreaUnit($event.value)\">\n          <mat-option *ngFor=\"let unit of allAreaUnits\" [value]=\"unit\">\n            {{getAreaUnitEnum(unit)}}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n  </div>\n\n\n  <div mat-dialog-actions>\n    <button mat-raised-button (click)=\"cancelDrawing()\" >\n      {{'igo.geo.draw.cancel' | translate}}\n    </button>\n    <button \n      mat-raised-button \n      color=\"primary\" \n      (click)=\"confirm()\"> \n      {{noLabelButton()}} \n    </button>\n  </div>\n</div>\n\n<div *ngIf=\"labelFlag === labelType.Custom\">\n  <div>\n    <p class=\"mat-typography\">{{ 'igo.geo.draw.dialogInstruction' | translate }}</p>\n    <mat-form-field class=\"input\">\n      <input\n        #input\n        matInput\n        (select)=\"true\"\n        (input)=\"getLabelLength($event.target.value)\"\n        placeholder=\"{{'igo.geo.draw.dialogTitle' | translate}}\"\n        value=\"{{ currentLabel }}\"\n        cdkFocusInitial/>\n    </mat-form-field>\n  </div>\n  \n  <div mat-dialog-actions>\n    <button mat-raised-button (click)=\"cancelDrawing()\" >\n      {{'igo.geo.draw.cancel' | translate}}\n    </button>\n    <button \n      mat-raised-button \n      color=\"primary\" \n      (click)=\"confirm(input.value)\">\n      {{noLabelButton()}}\n    </button>\n  </div>\n</div>\n", styles: [".mat-radio-button~.mat-radio-button{margin-left:16px}.readOnly-Input{width:200px!important}.unit-field{width:50px;margin-left:10px;margin-top:10px}.mat-form-field{position:-webkit-sticky!important;position:sticky!important}.coordinatesInputView{top:5em!important}::ng-deep .mat-form-field-wrapper{margin-bottom:-1.25em;margin-top:.25em}.geometry-type-toggle,.mat-dialog-actions{display:flex!important;justify-content:center}.input{width:auto!important}.mat-button-toggle-group,.mat-button-toggle{width:100%}mat-checkbox{margin-right:10px}\n"] }]
-    }], function () { return [{ type: i2$1.LanguageService }, { type: i1.MatDialogRef }, { type: undefined, decorators: [{
+    }], function () { return [{ type: i2$1.LanguageService }, { type: i3.MatDialogRef }, { type: undefined, decorators: [{
                 type: Inject,
                 args: [MAT_DIALOG_DATA]
             }] }]; }, { confirmFlag: [{
@@ -17856,7 +18020,7 @@ DrawShorcutsComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DrawS
         i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(15, 8, "igo.geo.draw.abort"));
         i0.ɵɵadvance(5);
         i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(20, 10, "igo.geo.draw.move"));
-    } }, dependencies: [i3.MatButton, i2.MatIcon, i1.MatDialogClose, i1.MatDialogContent, i1.MatDialogActions, i7.TranslatePipe], styles: [".shortcut[_ngcontent-%COMP%]{display:flex;align-items:center}.shortcut-icon[_ngcontent-%COMP%]{margin-right:10px}.shortcuts-close[_ngcontent-%COMP%]{display:flex;justify-content:center}"] });
+    } }, dependencies: [i3$1.MatButton, i2.MatIcon, i3.MatDialogClose, i3.MatDialogContent, i3.MatDialogActions, i7.TranslatePipe], styles: [".shortcut[_ngcontent-%COMP%]{display:flex;align-items:center}.shortcut-icon[_ngcontent-%COMP%]{margin-right:10px}.shortcuts-close[_ngcontent-%COMP%]{display:flex;justify-content:center}"] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DrawShorcutsComponent, [{
         type: Component,
         args: [{ selector: 'igo-draw-shorcuts', template: "<mat-dialog-content>\n  <div>\n    <span class=\"shortcut mat-typography\">\n      <mat-icon class=\"shortcut-icon\" svgIcon=\"keyboard-return\"></mat-icon>{{'igo.geo.draw.finish' | translate}}</span>\n  </div>\n  <div>\n    <span class=\"shortcut mat-typography\">\n      <mat-icon class=\"shortcut-icon\" svgIcon=\"backspace-outline\"></mat-icon>{{'igo.geo.draw.undo' | translate}}</span>\n  </div>\n  <div>\n    <span class=\"shortcut mat-typography\">\n      <mat-icon class=\"shortcut-icon\" svgIcon=\"keyboard-esc\"></mat-icon>{{'igo.geo.draw.abort' | translate}}</span>\n  </div>\n  <div>\n    <span class=\"shortcut mat-typography\">\n      <mat-icon class=\"shortcut-icon\" svgIcon=\"keyboard-space\"></mat-icon>{{'igo.geo.draw.move' | translate}}</span>\n  </div>\n</mat-dialog-content>\n<mat-dialog-actions class=\"shortcuts-close\">\n  <button mat-raised-button mat-dialog-close color=\"primary\">OK</button>\n</mat-dialog-actions>", styles: [".shortcut{display:flex;align-items:center}.shortcut-icon{margin-right:10px}.shortcuts-close{display:flex;justify-content:center}\n"] }]
@@ -17875,7 +18039,7 @@ class DrawLayerPopupComponent {
         this.dialogRef.close(labelString);
     }
 }
-DrawLayerPopupComponent.ɵfac = function DrawLayerPopupComponent_Factory(t) { return new (t || DrawLayerPopupComponent)(i0.ɵɵdirectiveInject(i1.MatDialogRef)); };
+DrawLayerPopupComponent.ɵfac = function DrawLayerPopupComponent_Factory(t) { return new (t || DrawLayerPopupComponent)(i0.ɵɵdirectiveInject(i3.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);
@@ -17902,15 +18066,15 @@ DrawLayerPopupComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Dra
         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] });
+    } }, dependencies: [i3$1.MatButton, i13.MatFormField, i14.MatInput, i3.MatDialogContent, i3.MatDialogActions, i7.TranslatePipe] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DrawLayerPopupComponent, [{
         type: Component,
         args: [{ selector: 'igo-draw-popup-component', template: "<div mat-dialog-content>\n  <p class=\"mat-typography\">\n    {{ 'igo.geo.draw.layer.layerDialogInstruction' | translate }}\n  </p>\n  <mat-form-field class=\"example-full-width\">\n    <input\n      #input\n      matInput\n      placeholder=\"{{ 'igo.geo.draw.layer.title' | translate }}\"\n      />\n  </mat-form-field>\n</div>\n<div mat-dialog-actions>\n  <button mat-raised-button (click)=\"cancelDrawing()\">\n    {{ 'igo.geo.draw.cancel' | translate }}\n  </button>\n  <button mat-raised-button color=\"primary\" (click)=\"confirm(input.value)\">\n    OK\n  </button>\n</div>\n" }]
-    }], function () { return [{ type: i1.MatDialogRef }]; }, { confirmFlag: [{
+    }], function () { return [{ type: i3.MatDialogRef }]; }, { confirmFlag: [{
             type: Input
         }] }); })();
 
-const _c0$c = ["selectedLayer"];
+const _c0$d = ["selectedLayer"];
 function DrawComponent_mat_slide_toggle_22_Template(rf, ctx) { if (rf & 1) {
     const _r10 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "mat-slide-toggle", 5);
@@ -18985,9 +19149,9 @@ class DrawComponent {
         return Number(length / (2 * Math.PI));
     }
 }
-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.ɵfac = function DrawComponent_Factory(t) { return new (t || DrawComponent)(i0.ɵɵdirectiveInject(i2$1.LanguageService), i0.ɵɵdirectiveInject(i2$2.UntypedFormBuilder), i0.ɵɵdirectiveInject(DrawStyleService), i0.ɵɵdirectiveInject(i3.MatDialog), i0.ɵɵdirectiveInject(DrawIconService)); };
 DrawComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DrawComponent, selectors: [["igo-draw"]], viewQuery: function DrawComponent_Query(rf, ctx) { if (rf & 1) {
-        i0.ɵɵviewQuery(_c0$c, 5);
+        i0.ɵɵviewQuery(_c0$d, 5);
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.select = _t.first);
@@ -19105,7 +19269,7 @@ DrawComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DrawComponent
         i0.ɵɵproperty("matTooltip", i0.ɵɵpipeBind1(47, 45, "igo.geo.draw.shortcuts"));
         i0.ɵɵadvance(2);
         i0.ɵɵproperty("ngIf", ctx.selectedFeatures$.value.length);
-    } }, dependencies: [i2$2.ɵNgNoValidate, i2$2.DefaultValueAccessor, i2$2.NumberValueAccessor, i2$2.NgControlStatus, i2$2.NgControlStatusGroup, i2$2.MinValidator, i2$2.NgForm, i2$2.FormControlDirective, 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, i14.MatInput, 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}.radius[_ngcontent-%COMP%]{display:flex;flex-flow:column nowrap;width:110%}.unit-field[_ngcontent-%COMP%]{width:110px;margin-left:30px}.radius-unit[_ngcontent-%COMP%]{display:flex;width:100%;margin-left:2px;padding:5px}  igo-entity-table td:last-child{text-align:right!important}  igo-entity-table td:last-child button{margin:0%!important}"], data: { animation: [
+    } }, dependencies: [i2$2.ɵNgNoValidate, i2$2.DefaultValueAccessor, i2$2.NumberValueAccessor, i2$2.NgControlStatus, i2$2.NgControlStatusGroup, i2$2.MinValidator, i2$2.NgForm, i2$2.FormControlDirective, i1.NgForOf, i1.NgIf, i3$1.MatButton, i18.MatButtonToggleGroup, i18.MatButtonToggle, i11.MatDivider, i13.MatFormField, i13.MatLabel, i2.MatIcon, i7$1.MatBadge, i4.MatTooltip, i14.MatInput, i15.MatSelect, i15.MatSelectTrigger, i9.MatOption, i23.MatSlideToggle, i5$1.EntityTableComponent, i1.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}.radius[_ngcontent-%COMP%]{display:flex;flex-flow:column nowrap;width:110%}.unit-field[_ngcontent-%COMP%]{width:110px;margin-left:30px}.radius-unit[_ngcontent-%COMP%]{display:flex;width:100%;margin-left:2px;padding:5px}  igo-entity-table td:last-child{text-align:right!important}  igo-entity-table td:last-child button{margin:0%!important}"], data: { animation: [
             trigger('openClose', [
                 state('open', style({
                     opacity: 1
@@ -19131,7 +19295,7 @@ DrawComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DrawComponent
                         transition('closed => open', [animate('800ms ease')])
                     ])
                 ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div>\n  <div class=\"geometry-type-toggle mat-typography\">\n    <mat-button-toggle-group\n      (change)=\"onGeometryTypeChange($event.value)\" [value]=\"geometryType.Point\">\n      <mat-button-toggle [value]=\"geometryType.Point\">\n        {{'igo.geo.draw.' + geometryType.Point | translate}}\n      </mat-button-toggle>\n\n      <mat-button-toggle [value]=\"geometryType.LineString\">\n        {{'igo.geo.draw.' + geometryType.LineString | translate}}\n      </mat-button-toggle>\n\n      <mat-button-toggle [value]=\"geometryType.Polygon\">\n        {{'igo.geo.draw.' + geometryType.Polygon | translate}}\n      </mat-button-toggle>\n\n      <mat-button-toggle [value]=\"geometryType.Circle\">\n        {{'igo.geo.draw.' + geometryType.Circle | translate}}\n      </mat-button-toggle>\n    </mat-button-toggle-group>\n  </div>\n\n  <div class=\"draw-options mat-typography\">\n    <mat-slide-toggle\n      [disabled]=\"drawControlIsDisabled\"\n      [checked]=\"drawControlIsActive\"\n      [labelPosition]=\"'before'\"\n      (change)=\"onToggleDrawControl($event.checked)\">\n      {{'igo.geo.spatialFilter.drawControl' | translate}}\n    </mat-slide-toggle>\n\n    <mat-slide-toggle\n      [checked]=\"labelsAreShown\"\n      [labelPosition]=\"'before'\"\n      (change)=\"onToggleLabels()\">\n      {{ 'igo.geo.draw.toggleMapTooltips' | translate }}\n    </mat-slide-toggle>\n\n    <mat-slide-toggle\n      *ngIf=\"!isPoint()\"\n      [checked]=\"freehandMode\"\n      [labelPosition]=\"'before'\"\n      (change)=\"onToggleFreehandMode($event)\">\n      {{ 'igo.geo.draw.freehandMode' | translate }}\n    </mat-slide-toggle>\n\n    <div class=\"radius-unit\" *ngIf=\"isCircle()\">\n      <form class=\"radius-form\">\n        <mat-form-field class=\"radius\">\n          <input\n            matInput type=\"number\"\n            min=\"0\"\n            placeholder=\"{{ 'igo.geo.spatialFilter.radius' | translate }}\"\n            [formControl]=\"radiusFormControl\"\n            [readonly]=\"this.freehandMode\">\n        </mat-form-field>\n      </form>\n\n      <mat-form-field class=\"unit-field\">\n        <mat-select\n          [value]=\"measureUnit\"\n          (selectionChange)=\"onMeasureUnitChange($event.value)\">\n          <mat-option\n            *ngFor=\"let measureUnit of measureUnits\"\n            [value]=\"measureUnit\">\n            {{('igo.geo.measure.' + measureUnit) | translate}}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n  </div>\n\n  <mat-divider></mat-divider>\n\n  <div>\n    <mat-form-field appearance=\"outline\" class=\"layer-select\">\n      <mat-label>{{'igo.geo.draw.layer.title' | translate}}</mat-label>\n      <mat-select #selectedLayer (selectionChange)=\"onLayerChange(selectedLayer.value)\" [value]=\"updateActiveLayer()\">\n        <mat-option *ngFor=\"let layer of allLayers\" [value]=\"layer\">\n          {{ layer.title }}\n        </mat-option>\n        <mat-option id=\"createNewLayer\" >\n          {{'igo.geo.draw.layer.createNewLayer' | translate}}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n    <button\n      *ngIf=\"activeDrawingLayer\"\n      mat-icon-button\n      [color]=\"activeDrawingLayer.visible ? 'primary' : 'default'\"\n      collapsibleButton\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"activeDrawingLayer.visible ?\n                    ('igo.geo.layer.hideLayer' | translate) :\n                    ('igo.geo.layer.showLayer' | translate)\"\n      (click)=\"activeDrawingLayer.visible = !activeDrawingLayer.visible\">\n      <mat-icon\n        [svgIcon]=\"activeDrawingLayer.visible ? 'eye' : 'eye-off'\">\n      </mat-icon>\n    </button>\n  </div>\n  <mat-divider></mat-divider>\n  <div>\n    <button\n      *ngIf=\"activeStore.count$.getValue() > 0\"\n      class=\"deleteBtn\"\n      mat-icon-button\n      color=\"warn\"\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"'igo.geo.draw.delete' | translate\"\n      [disabled]=\"(selectedFeatures$ | async).length === 0\"\n      (click)=\"deleteDrawings()\"\n    >\n      <mat-icon svgIcon=\"delete\"></mat-icon>\n    </button>\n\n    <div>\n      <igo-entity-table\n        #table\n        class=\"table-compact\"\n        [store]=\"activeStore\"\n        [template]=\"tableTemplate\">\n      </igo-entity-table>\n    </div>\n  </div>\n\n  <div class=\"icon-options\">\n    <mat-form-field *ngIf=\"icons.length >= 1\">\n      <mat-label>{{ 'igo.geo.draw.icon' | translate }}</mat-label>\n      <mat-select>\n        <mat-select-trigger>\n          <div *ngIf=\"icon\" class=\"box\">\n            <img src=\"{{ icon }}\">\n          </div>\n        </mat-select-trigger>\n        <mat-option value=\"\" (click)=\"onIconChange()\">{{ 'igo.geo.draw.noIcon' | translate }}</mat-option>\n        <mat-option\n          *ngFor=\"let icon_html of icons\"\n          [value]=\"icon_html\"\n          (click)=\"onIconChange(icon_html)\">\n          <div class=\"box\">\n            <img src=\"{{ icon_html }}\">\n          </div>\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n\n  <button\n    mat-icon-button\n    color=\"accent\"\n    disableRipple=\"true\"\n    (click)=\"openShorcutsDialog()\"\n  >\n    <mat-icon\n      class=\"shortcuts-icon\"\n      svgIcon=\"keyboard-outline\"\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"'igo.geo.draw.shortcuts' | translate\"\n    >\n    </mat-icon>\n  </button>\n\n  <button\n    *ngIf=\"selectedFeatures$.value.length\"\n    mat-raised-button\n    color=\"primary\"\n    (click)=\"openStyleModalDialog()\"\n    [matTooltip]=\"'igo.geo.layer.style.styleModalTooltip' | translate\">\n    {{'igo.geo.layer.style.styleModal' | translate}}\n    <mat-icon\n      class=\"style-icon\"\n      svgIcon=\"palette\"\n      [matBadge]=\"selectedFeatures$.value.length\"\n      matBadgeColor=\"warn\"\n      matBadgeSize=\"medium\">\n    </mat-icon>\n  </button>\n</div>\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}.radius{display:flex;flex-flow:column nowrap;width:110%}.unit-field{width:110px;margin-left:30px}.radius-unit{display:flex;width:100%;margin-left:2px;padding:5px}::ng-deep igo-entity-table td:last-child{text-align:right!important}::ng-deep igo-entity-table td:last-child button{margin:0%!important}\n"] }]
-    }], function () { return [{ type: i2$1.LanguageService }, { type: i2$2.UntypedFormBuilder }, { type: DrawStyleService }, { type: i1.MatDialog }, { type: DrawIconService }]; }, { map: [{
+    }], function () { return [{ type: i2$1.LanguageService }, { type: i2$2.UntypedFormBuilder }, { type: DrawStyleService }, { type: i3.MatDialog }, { type: DrawIconService }]; }, { map: [{
             type: Input
         }], stores: [{
             type: Input
@@ -19319,7 +19483,7 @@ class StyleModalComponent {
         this.dialogRef.close(this.styleModalData);
     }
 }
-StyleModalComponent.ɵfac = function StyleModalComponent_Factory(t) { return new (t || StyleModalComponent)(i0.ɵɵdirectiveInject(i1.MatDialogRef), i0.ɵɵdirectiveInject(i2$2.UntypedFormBuilder), i0.ɵɵdirectiveInject(DrawStyleService), i0.ɵɵdirectiveInject(MAT_DIALOG_DATA)); };
+StyleModalComponent.ɵfac = function StyleModalComponent_Factory(t) { return new (t || StyleModalComponent)(i0.ɵɵdirectiveInject(i3.MatDialogRef), i0.ɵɵdirectiveInject(i2$2.UntypedFormBuilder), i0.ɵɵdirectiveInject(DrawStyleService), i0.ɵɵdirectiveInject(MAT_DIALOG_DATA)); };
 StyleModalComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: StyleModalComponent, selectors: [["igo-style-modal-component"]], inputs: { confirmFlag: "confirmFlag" }, decls: 54, vars: 46, consts: [["mat-dialog-content", ""], ["mat-dialog-title", "", 1, "mat-typography"], [1, "edition-drawing", "mat-typography", 3, "hidden"], [1, "igo-form", 3, "formGroup"], ["class", "fill-color-picker mat-typography", 4, "ngIf"], [1, "stroke-color-picker", "mat-typography"], ["svgIcon", "square-outline", 1, "stroke-palette-icon"], ["appearance", "outline", "floatLabel", "always", "tooltip-position", "below", "matTooltipShowDelay", "500", 1, "stroke-field", 3, "matTooltip"], ["formControlName", "stroke", "matInput", "", "type", "text", 3, "readonly", "colorPicker", "cpWidth", "cpPosition", "cpPositionOffset", "cpOutputFormat", "cpCancelButton", "cpCancelButtonText", "cpOKButton", "colorPickerChange"], ["strokeColorInput", ""], [1, "igo-input-container"], ["appearance", "outline", 1, "igo-form-input-box"], ["matInput", "", "type", "number", "placeholder", "10", "min", "10", "onkeydown", "return event.keyCode !== 69", 3, "value", "input"], ["testFontSize", ""], ["matSuffix", ""], [3, "value", "selectionChange"], ["testFontStyle", ""], [3, "value", 4, "ngFor", "ngForOf"], ["matInput", "", "type", "number", "onkeydown", "return event.keyCode !== 69", 3, "value", "input"], ["offsetXInput", ""], ["offsetYInput", ""], ["mat-dialog-actions", ""], ["mat-raised-button", "", 3, "click"], ["mat-raised-button", "", "color", "primary", 3, "click"], [1, "fill-color-picker", "mat-typography"], ["svgIcon", "square", 1, "stroke-palette-icon"], ["appearance", "outline", "floatLabel", "always", "tooltip-position", "below", "matTooltipShowDelay", "500", 1, "fill-field", 3, "matTooltip"], ["formControlName", "fill", "matInput", "", "type", "text", 3, "readonly", "colorPicker", "cpWidth", "cpOutputFormat", "cpPosition", "cpPositionOffset", "cpCancelButton", "cpCancelButtonText", "cpOKButton", "colorPickerChange"], ["fillColorInput", ""], [3, "value"]], template: function StyleModalComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵelementStart(0, "div", 0)(1, "h2", 1);
         i0.ɵɵtext(2);
@@ -19420,11 +19584,11 @@ StyleModalComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: StyleMo
         i0.ɵɵproperty("value", ctx.getFeatureOffsetY());
         i0.ɵɵadvance(4);
         i0.ɵɵtextInterpolate1("", i0.ɵɵpipeBind1(51, 44, "igo.geo.draw.cancel"), " ");
-    } }, dependencies: [i13.MatFormField, i13.MatLabel, i13.MatSuffix, i14.MatInput, i2$2.ɵNgNoValidate, i2$2.DefaultValueAccessor, i2$2.NgControlStatus, i2$2.NgControlStatusGroup, i2$2.FormGroupDirective, i2$2.FormControlName, i1$1.NgForOf, i1$1.NgIf, i2.MatIcon, i3.MatButton, i15.MatSelect, i9.MatOption, i4.MatTooltip, i12$1.ColorPickerDirective, i7.TranslatePipe], styles: ["h2[_ngcontent-%COMP%]{font-weight:700;font-size:large}.igo-form[_ngcontent-%COMP%]{padding:10px}.fill-field[_ngcontent-%COMP%], .stroke-field[_ngcontent-%COMP%]{width:130px}.fill-color-picker[_ngcontent-%COMP%]   mat-icon[_ngcontent-%COMP%]{position:relative;top:7px}.fill-color-picker[_ngcontent-%COMP%]   mat-form-field[_ngcontent-%COMP%]{left:8px}.stroke-color-picker[_ngcontent-%COMP%]   mat-icon[_ngcontent-%COMP%]{position:relative;top:7px}.stroke-color-picker[_ngcontent-%COMP%]   mat-form-field[_ngcontent-%COMP%]{left:35px}.box[_ngcontent-%COMP%]{width:25px;height:25px}.edition-drawing[_ngcontent-%COMP%]{padding:10px 0}.igo-input-container[_ngcontent-%COMP%]   .mat-form-field[_ngcontent-%COMP%] + .mat-form-field[_ngcontent-%COMP%]{margin-left:8px}.igo-form-input-box[_ngcontent-%COMP%]{width:150px}button[_ngcontent-%COMP%]{margin-right:5px}"] });
+    } }, dependencies: [i13.MatFormField, i13.MatLabel, i13.MatSuffix, i14.MatInput, i2$2.ɵNgNoValidate, i2$2.DefaultValueAccessor, i2$2.NgControlStatus, i2$2.NgControlStatusGroup, i2$2.FormGroupDirective, i2$2.FormControlName, i1.NgForOf, i1.NgIf, i2.MatIcon, i3$1.MatButton, i15.MatSelect, i9.MatOption, i4.MatTooltip, i12$1.ColorPickerDirective, i7.TranslatePipe], styles: ["h2[_ngcontent-%COMP%]{font-weight:700;font-size:large}.igo-form[_ngcontent-%COMP%]{padding:10px}.fill-field[_ngcontent-%COMP%], .stroke-field[_ngcontent-%COMP%]{width:130px}.fill-color-picker[_ngcontent-%COMP%]   mat-icon[_ngcontent-%COMP%]{position:relative;top:7px}.fill-color-picker[_ngcontent-%COMP%]   mat-form-field[_ngcontent-%COMP%]{left:8px}.stroke-color-picker[_ngcontent-%COMP%]   mat-icon[_ngcontent-%COMP%]{position:relative;top:7px}.stroke-color-picker[_ngcontent-%COMP%]   mat-form-field[_ngcontent-%COMP%]{left:35px}.box[_ngcontent-%COMP%]{width:25px;height:25px}.edition-drawing[_ngcontent-%COMP%]{padding:10px 0}.igo-input-container[_ngcontent-%COMP%]   .mat-form-field[_ngcontent-%COMP%] + .mat-form-field[_ngcontent-%COMP%]{margin-left:8px}.igo-form-input-box[_ngcontent-%COMP%]{width:150px}button[_ngcontent-%COMP%]{margin-right:5px}"] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(StyleModalComponent, [{
         type: Component,
         args: [{ selector: 'igo-style-modal-component', template: "<div mat-dialog-content>\n  <h2 mat-dialog-title class=\"mat-typography\">{{ 'igo.geo.layer.style.styleModal' | translate }}</h2>\n  <div\n  class=\"edition-drawing mat-typography\"\n  [hidden]=\"data.features.length === 0\">\n    <form\n      class=\"igo-form\"\n      [formGroup]=\"form\">\n      <div class=\"fill-color-picker mat-typography\" *ngIf=\"linestringOnly !== true\">\n        <span>\n          <mat-icon class=\"stroke-palette-icon\" svgIcon=\"square\"></mat-icon>\n          {{ 'igo.geo.draw.fill' | translate }}\n        </span>\n\n        <mat-form-field\n          class=\"fill-field\"\n          appearance=\"outline\"\n          floatLabel=\"always\"\n          tooltip-position=\"below\"\n          matTooltipShowDelay=\"500\"\n          [matTooltip]=\"'igo.geo.draw.colorPicker' | translate\">\n          <mat-label>{{ getFeatureFillColor() }}</mat-label>\n          <input\n            #fillColorInput\n            formControlName=\"fill\"\n            matInput\n            type=\"text\"\n            [style.background]=\"getFeatureFillColor()\"\n            [readonly]=\"true\"\n            [colorPicker]=\"getFeatureFillColor()\"\n            [cpWidth]=\"'200px'\"\n            [cpOutputFormat]=\"'rgba'\"\n            [cpPosition]=\"'bottom'\"\n            [cpPositionOffset]=\"'-75%'\"\n            [cpCancelButton]=\"true\"\n            [cpCancelButtonText]=\"'igo.geo.draw.cancel' | translate\"\n            [cpOKButton]=\"true\"\n            (colorPickerChange)=\"styleModalData.fillColor = $event\">\n        </mat-form-field>\n      </div>\n\n      <div class=\"stroke-color-picker mat-typography\">\n        <span>\n          <mat-icon\n            class=\"stroke-palette-icon\"\n            svgIcon=\"square-outline\">\n          </mat-icon>\n          {{'igo.geo.draw.stroke' | translate}}\n        </span>\n\n        <mat-form-field\n          class=\"stroke-field\"\n          appearance=\"outline\"\n          floatLabel=\"always\"\n          tooltip-position=\"below\"\n          matTooltipShowDelay=\"500\"\n          [matTooltip]=\"'igo.geo.draw.colorPicker' | translate\">\n          <mat-label>{{ getFeatureStrokeColor() }}</mat-label>\n          <input\n            #strokeColorInput\n            formControlName=\"stroke\"\n            matInput\n            type=\"text\"\n            [style.background]=\"getFeatureStrokeColor()\"\n            [readonly]=\"true\"\n            [colorPicker]=\"getFeatureStrokeColor()\"\n            [cpWidth]=\"'200px'\"\n            [cpPosition]=\"'bottom'\"\n            [cpPositionOffset]=\"'-75%'\"\n            [cpOutputFormat]=\"'rgba'\"\n            [cpCancelButton]=\"true\"\n            [cpCancelButtonText]=\"'igo.geo.draw.cancel' | translate\"\n            [cpOKButton]=\"true\"\n            (colorPickerChange)=\"styleModalData.strokeColor = $event\">\n        </mat-form-field>\n      </div>\n\n      <div class=\"igo-input-container\">\n        <mat-form-field appearance=\"outline\" class=\"igo-form-input-box\">\n          <mat-label>{{ 'igo.geo.draw.fontSize' | translate }}</mat-label>\n          <input\n            matInput\n            #testFontSize\n            type=\"number\"\n            placeholder=\"10\"\n            min=\"10\"\n            onkeydown=\"return event.keyCode !== 69\"\n            [value]=\"getFeatureFontSize()\"\n            (input)=\"styleModalData.fontSize = $event.target.value\">\n          <span matSuffix>px</span>\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\" class=\"igo-form-input-box\">\n          <mat-label>{{ 'igo.geo.draw.fontStyle' | translate }}</mat-label>\n          <mat-select\n            #testFontStyle\n            [value]=\"getFeatureFontStyle()\"\n            (selectionChange)=\"styleModalData.fontStyle = $event.value\">\n            <mat-option\n              *ngFor=\"let fontSelect of allFontStyles\"\n              [value]=\"fontSelect\">\n              {{ fontSelect }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n\n      <div class=\"igo-input-container\">\n        <mat-form-field appearance=\"outline\" class=\"igo-form-input-box\">\n          <mat-label>{{ 'igo.geo.draw.offsetX' | translate }}</mat-label>\n          <input\n            matInput\n            #offsetXInput\n            type=\"number\"\n            onkeydown=\"return event.keyCode !== 69\"\n            [value]=\"getFeatureOffsetX()\"\n            (input)=\"styleModalData.offsetX = $event.target.value\">\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\" class=\"igo-form-input-box\">\n          <mat-label>{{ 'igo.geo.draw.offsetY' | translate }}</mat-label>\n          <input\n            matInput\n            #offsetYInput\n            type=\"number\"\n            onkeydown=\"return event.keyCode !== 69\"\n            [value]=\"getFeatureOffsetY()\"\n            (input)=\"styleModalData.offsetY= $event.target.value\">\n        </mat-form-field>\n      </div>\n    </form>\n  </div>\n</div>\n<div mat-dialog-actions>\n  <button \n    mat-raised-button \n    (click)=\"cancelDrawing()\">{{'igo.geo.draw.cancel' | translate}}\n  </button>\n  <button \n    mat-raised-button \n    color=\"primary\" \n    (click)=\"confirm()\">OK\n  </button>\n</div>\n", styles: ["h2{font-weight:700;font-size:large}.igo-form{padding:10px}.fill-field,.stroke-field{width:130px}.fill-color-picker mat-icon{position:relative;top:7px}.fill-color-picker mat-form-field{left:8px}.stroke-color-picker mat-icon{position:relative;top:7px}.stroke-color-picker mat-form-field{left:35px}.box{width:25px;height:25px}.edition-drawing{padding:10px 0}.igo-input-container .mat-form-field+.mat-form-field{margin-left:8px}.igo-form-input-box{width:150px}button{margin-right:5px}\n"] }]
-    }], function () { return [{ type: i1.MatDialogRef }, { type: i2$2.UntypedFormBuilder }, { type: DrawStyleService }, { type: undefined, decorators: [{
+    }], function () { return [{ type: i3.MatDialogRef }, { type: i2$2.UntypedFormBuilder }, { type: DrawStyleService }, { type: undefined, decorators: [{
                 type: Inject,
                 args: [MAT_DIALOG_DATA]
             }] }]; }, { confirmFlag: [{
@@ -19562,11 +19726,11 @@ IgoLayerModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [MatInputM
         LayerLegendListBindingDirective,
         TrackFeatureButtonComponent,
         StyleModalComponent] }); })();
-i0.ɵɵsetComponentScope(LayerItemComponent, [i1$1.NgClass, i1$1.NgIf, i2.MatIcon, i3.MatButton, i4.MatTooltip, i5.MatListItem, i9.MatLine, i5.MatListIconCssMatStyler, i7$1.MatBadge, i12.MatCheckbox, LayerLegendComponent], [i1$1.AsyncPipe, i7.TranslatePipe]);
+i0.ɵɵsetComponentScope(LayerItemComponent, [i1.NgClass, i1.NgIf, i2.MatIcon, i3$1.MatButton, i4.MatTooltip, i5.MatListItem, i9.MatLine, i5.MatListIconCssMatStyler, i7$1.MatBadge, i12.MatCheckbox, LayerLegendComponent], [i1.AsyncPipe, i7.TranslatePipe]);
 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.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, i23.MatSlideToggle, i4.MatTooltip, i5$1.ListItemDirective, i5$1.ListComponent, LayerLegendItemComponent], [i1$1.AsyncPipe, i7.TranslatePipe]);
+i0.ɵɵsetComponentScope(LayerListComponent, [i2$2.NgControlStatus, i1.NgClass, i1.NgForOf, i1.NgIf, i1.NgTemplateOutlet, i2$2.NgModel, i11.MatDivider, i7$2.MatMenu, i7$2.MatMenuTrigger, i2.MatIcon, i3$1.MatButton, i4.MatTooltip, i5.MatList, i5.MatListItem, i13$1.MatSlider, i7$1.MatBadge, i12.MatCheckbox, i5$1.ListItemDirective, i5$1.ListComponent, i5$1.PanelComponent, LayerItemComponent,
+    LayerListToolComponent], [i1.AsyncPipe, i7.TranslatePipe]);
+i0.ɵɵsetComponentScope(LayerLegendListComponent, [i1.NgForOf, i1.NgIf, i11.MatDivider, i23.MatSlideToggle, i4.MatTooltip, i5$1.ListItemDirective, i5$1.ListComponent, LayerLegendItemComponent], [i1.AsyncPipe, i7.TranslatePipe]);
 
 /**
  * @ignore
@@ -19628,8 +19792,8 @@ IgoCatalogBrowserModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [
         IgoCollapsibleModule,
         IgoMetadataModule,
         IgoLayerModule], exports: [CatalogBrowserComponent] }); })();
-i0.ɵɵsetComponentScope(CatalogBrowserComponent, [i1$1.NgForOf, i1$1.NgIf, i5$1.ListItemDirective, i5$1.ListComponent, CatalogBrowserGroupComponent,
-    CatalogBrowserLayerComponent], [i1$1.AsyncPipe]);
+i0.ɵɵsetComponentScope(CatalogBrowserComponent, [i1.NgForOf, i1.NgIf, i5$1.ListItemDirective, i5$1.ListComponent, CatalogBrowserGroupComponent,
+    CatalogBrowserLayerComponent], [i1.AsyncPipe]);
 
 function AddCatalogDialogComponent_mat_option_11_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "mat-option", 17);
@@ -19663,7 +19827,7 @@ function AddCatalogDialogComponent_mat_option_23_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(type_r9);
 } }
-const _c0$b = function (a0, a1) { return { value: a0, email: a1 }; };
+const _c0$c = function (a0, a1) { return { value: a0, email: a1 }; };
 function AddCatalogDialogComponent_span_24_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span")(1, "p", 20);
     i0.ɵɵtext(2);
@@ -19671,7 +19835,7 @@ function AddCatalogDialogComponent_span_24_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r5 = i0.ɵɵnextContext();
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(ctx_r5.languageService.translate.instant("igo.geo.catalog.externalProvider.unavailableWithEmail", i0.ɵɵpureFunction2(1, _c0$b, ctx_r5.addedCatalog.url, ctx_r5.emailAddress)));
+    i0.ɵɵtextInterpolate(ctx_r5.languageService.translate.instant("igo.geo.catalog.externalProvider.unavailableWithEmail", i0.ɵɵpureFunction2(1, _c0$c, ctx_r5.addedCatalog.url, ctx_r5.emailAddress)));
 } }
 const _c1$9 = function (a0) { return { value: a0 }; };
 function AddCatalogDialogComponent_span_25_Template(rf, ctx) { if (rf & 1) {
@@ -19746,7 +19910,7 @@ class AddCatalogDialogComponent {
         this.dialogRef.close();
     }
 }
-AddCatalogDialogComponent.ɵfac = function AddCatalogDialogComponent_Factory(t) { return new (t || AddCatalogDialogComponent)(i0.ɵɵdirectiveInject(i2$2.UntypedFormBuilder), i0.ɵɵdirectiveInject(i2$1.LanguageService), i0.ɵɵdirectiveInject(i2$1.ConfigService), i0.ɵɵdirectiveInject(i1.MatDialogRef), i0.ɵɵdirectiveInject(MAT_DIALOG_DATA, 8)); };
+AddCatalogDialogComponent.ɵfac = function AddCatalogDialogComponent_Factory(t) { return new (t || AddCatalogDialogComponent)(i0.ɵɵdirectiveInject(i2$2.UntypedFormBuilder), i0.ɵɵdirectiveInject(i2$1.LanguageService), i0.ɵɵdirectiveInject(i2$1.ConfigService), i0.ɵɵdirectiveInject(i3.MatDialogRef), i0.ɵɵdirectiveInject(MAT_DIALOG_DATA, 8)); };
 AddCatalogDialogComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AddCatalogDialogComponent, selectors: [["igo-add-catalog-dialog"]], decls: 34, vars: 25, consts: [["mat-dialog-title", "", 1, "mat-typography"], ["mat-dialog-content", "", 1, "mat-typography"], [1, "igo-form", 3, "formGroup"], [1, "igo-input-container"], ["type", "text", "formControlName", "title", "matInput", "", 3, "placeholder", "matAutocomplete"], [3, "optionSelected"], ["auto2", "matAutocomplete"], ["matTooltipShowDelay", "500", 3, "matTooltip", "value", 4, "ngFor", "ngForOf"], ["type", "text", "formControlName", "url", "placeholder", "URL", "matInput", "", 3, "matAutocomplete"], ["auto", "matAutocomplete"], ["formControlName", "type", "placeholder", "Type"], [3, "value", "click", 4, "ngFor", "ngForOf"], [4, "ngIf"], ["mat-dialog-actions", "", 2, "justify-content", "center"], [1, "igo-form-button-group", "add-catalog-button-top-padding"], ["mat-raised-button", "", "type", "button", 3, "click"], ["id", "addCatalogBtnDialog", "mat-raised-button", "", "type", "button", "color", "primary", 3, "disabled", "click"], ["matTooltipShowDelay", "500", 3, "matTooltip", "value"], [3, "value", "click"], ["mat-line", ""], [1, "error"]], template: function AddCatalogDialogComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵelementStart(0, "h1", 0);
         i0.ɵɵtext(1);
@@ -19811,11 +19975,11 @@ AddCatalogDialogComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: A
         i0.ɵɵproperty("disabled", !ctx.form.valid);
         i0.ɵɵadvance(1);
         i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(33, 23, "igo.geo.catalog.library.add"), " ");
-    } }, dependencies: [i1$1.NgForOf, i1$1.NgIf, i9.MatLine, i4.MatTooltip, i3.MatButton, i13.MatFormField, i2$2.ɵNgNoValidate, i2$2.DefaultValueAccessor, i2$2.NgControlStatus, i2$2.NgControlStatusGroup, i2$2.FormGroupDirective, i2$2.FormControlName, i14.MatInput, i15.MatSelect, i9.MatOption, i11$1.MatAutocomplete, i11$1.MatAutocompleteTrigger, i1.MatDialogTitle, i1.MatDialogContent, i1.MatDialogActions, i1$1.AsyncPipe, i7.TranslatePipe], styles: ["mat-form-field[_ngcontent-%COMP%]{width:100%}.add-catalog-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}button[_ngcontent-%COMP%]{cursor:pointer}button#addCatalogBtnDialog[disabled=true][_ngcontent-%COMP%]{cursor:default;background-color:#0000001f;color:#00000042}.error[_ngcontent-%COMP%]{color:red}"] });
+    } }, dependencies: [i1.NgForOf, i1.NgIf, i9.MatLine, i4.MatTooltip, i3$1.MatButton, i13.MatFormField, i2$2.ɵNgNoValidate, i2$2.DefaultValueAccessor, i2$2.NgControlStatus, i2$2.NgControlStatusGroup, i2$2.FormGroupDirective, i2$2.FormControlName, i14.MatInput, i15.MatSelect, i9.MatOption, i11$1.MatAutocomplete, i11$1.MatAutocompleteTrigger, i3.MatDialogTitle, i3.MatDialogContent, i3.MatDialogActions, i1.AsyncPipe, i7.TranslatePipe], styles: ["mat-form-field[_ngcontent-%COMP%]{width:100%}.add-catalog-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}button[_ngcontent-%COMP%]{cursor:pointer}button#addCatalogBtnDialog[disabled=true][_ngcontent-%COMP%]{cursor:default;background-color:#0000001f;color:#00000042}.error[_ngcontent-%COMP%]{color:red}"] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AddCatalogDialogComponent, [{
         type: Component,
         args: [{ selector: 'igo-add-catalog-dialog', template: "<h1 mat-dialog-title class=\"mat-typography\">{{'igo.geo.catalog.library.addTitle' | translate}}</h1>\n<div mat-dialog-content class=\"mat-typography\">\n  <form class=\"igo-form\" [formGroup]=\"form\">\n    <div class=\"igo-input-container\">\n      <mat-form-field>\n        <input type=\"text\" formControlName=\"title\" placeholder=\"{{'igo.geo.printForm.title' | translate}}\" matInput [matAutocomplete]=\"auto2\">\n        <mat-autocomplete #auto2=\"matAutocomplete\" (optionSelected)='changeUrlOrTitle($event.option.value)'>\n          <mat-option *ngFor=\"let predefinedCatalog of (predefinedCatalogsList$ | async)\" matTooltipShowDelay=\"500\"\n            [matTooltip]=\"predefinedCatalog.title\" [value]=\"predefinedCatalog\">\n            {{predefinedCatalog.title}}\n          </mat-option>\n        </mat-autocomplete>\n      </mat-form-field>\n    </div>\n    <div class=\"igo-input-container\">\n      <mat-form-field>\n        <input type=\"text\" formControlName=\"url\" placeholder=\"URL\" matInput [matAutocomplete]=\"auto\">\n        <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)='changeUrlOrTitle($event.option.value)'>\n          <mat-option *ngFor=\"let predefinedCatalog of (predefinedCatalogsList$ | async)\" matTooltipShowDelay=\"500\"\n            [matTooltip]=\"predefinedCatalog.url\" [value]=\"predefinedCatalog\">\n            {{predefinedCatalog.url}}\n          </mat-option>\n        </mat-autocomplete>\n      </mat-form-field>\n    </div>\n    <div class=\"igo-input-container\">\n      <mat-form-field>\n        <mat-select\n          formControlName=\"type\"\n          placeholder=\"Type\">\n          <mat-option\n            *ngFor=\"let type of typeCapabilities\"\n            [value]=\"type\"\n            (click)=\"$event.stopPropagation()\">\n              <p mat-line>{{type}}</p>\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n  </form>\n  <span *ngIf=\"error && addedCatalog && emailAddress\">\n    <p class=\"error\">{{languageService.translate.instant('igo.geo.catalog.externalProvider.unavailableWithEmail', { value: addedCatalog.url, email: emailAddress })}}</p>\n  </span>\n  <span *ngIf=\"error && addedCatalog && !emailAddress\">\n    <p class=\"error\">{{languageService.translate.instant('igo.geo.catalog.unavailable', { value: addedCatalog.url })}}</p>\n  </span>\n</div>\n<div mat-dialog-actions style=\"justify-content: center\">\n  <div class=\"igo-form-button-group add-catalog-button-top-padding\">\n    <button\n      mat-raised-button\n      type=\"button\"\n      (click)=\"cancel()\">\n      {{'igo.geo.catalog.library.cancel' | translate}}\n    </button>\n    <button\n      id=\"addCatalogBtnDialog\"\n      mat-raised-button\n      type=\"button\"\n      color=\"primary\"\n      [disabled]=\"!form.valid\"\n      (click)=\"addCatalog(form.value)\">\n      {{'igo.geo.catalog.library.add' | translate}}\n    </button>\n  </div>\n</div>", styles: ["mat-form-field{width:100%}.add-catalog-button-top-padding{padding-top:25px}.igo-form{padding:10px 5px 5px}.igo-form-button-group{text-align:center}button{cursor:pointer}button#addCatalogBtnDialog[disabled=true]{cursor:default;background-color:#0000001f;color:#00000042}.error{color:red}\n"] }]
-    }], function () { return [{ type: i2$2.UntypedFormBuilder }, { type: i2$1.LanguageService }, { type: i2$1.ConfigService }, { type: i1.MatDialogRef }, { type: undefined, decorators: [{
+    }], function () { return [{ type: i2$2.UntypedFormBuilder }, { type: i2$1.LanguageService }, { type: i2$1.ConfigService }, { type: i3.MatDialogRef }, { type: undefined, decorators: [{
                 type: Optional
             }, {
                 type: Inject,
@@ -20000,7 +20164,7 @@ class CatalogLibaryComponent {
         });
     }
 }
-CatalogLibaryComponent.ɵfac = function CatalogLibaryComponent_Factory(t) { return new (t || CatalogLibaryComponent)(i0.ɵɵdirectiveInject(CapabilitiesService), i0.ɵɵdirectiveInject(i2$1.MessageService), i0.ɵɵdirectiveInject(i2$1.LanguageService), i0.ɵɵdirectiveInject(i2$1.StorageService), i0.ɵɵdirectiveInject(i1.MatDialog)); };
+CatalogLibaryComponent.ɵfac = function CatalogLibaryComponent_Factory(t) { return new (t || CatalogLibaryComponent)(i0.ɵɵdirectiveInject(CapabilitiesService), i0.ɵɵdirectiveInject(i2$1.MessageService), i0.ɵɵdirectiveInject(i2$1.LanguageService), i0.ɵɵdirectiveInject(i2$1.StorageService), i0.ɵɵdirectiveInject(i3.MatDialog)); };
 CatalogLibaryComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CatalogLibaryComponent, selectors: [["igo-catalog-library"]], inputs: { store: "store", map: "map", addCatalogAllowed: "addCatalogAllowed", predefinedCatalogs: "predefinedCatalogs" }, outputs: { catalogSelectChange: "catalogSelectChange" }, decls: 4, vars: 5, consts: [[3, "navigation"], ["ngFor", "", 3, "ngForOf"], ["class", "btnAddCatalog", 4, "ngIf"], ["igoListItem", "", "color", "accent", 3, "map", "catalog", "catalogRemove", "select"], [1, "btnAddCatalog"], ["mat-raised-button", "", "matTooltipPosition", "above", "color", "primary", 3, "matTooltip", "click"], ["svgIcon", "earth-plus"]], template: function CatalogLibaryComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵelementStart(0, "igo-list", 0);
         i0.ɵɵtemplate(1, CatalogLibaryComponent_ng_template_1_Template, 1, 2, "ng-template", 1);
@@ -20017,7 +20181,7 @@ CatalogLibaryComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Cata
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CatalogLibaryComponent, [{
         type: Component,
         args: [{ selector: 'igo-catalog-library', changeDetection: ChangeDetectionStrategy.OnPush, template: "<igo-list [navigation]=\"false\">\n  <ng-template ngFor let-catalog [ngForOf]=\"getCatalogs() | async\">\n    <igo-catalog-library-item\n      igoListItem\n      color=\"accent\"\n      [map]=\"map\"\n      [catalog]=\"catalog\"\n      (catalogRemove)=\"onCatalogRemove(catalog)\"\n      (select)=\"onCatalogSelect(catalog)\">\n    </igo-catalog-library-item>\n  </ng-template>\n</igo-list>\n\n<div *ngIf=\"addCatalogAllowed\" class=btnAddCatalog>\n  <button\n    mat-raised-button\n    [matTooltip]=\"'igo.geo.catalog.library.addBtn' | translate\"\n    matTooltipPosition=\"above\"\n    color=\"primary\"\n    (click)=\"addCatalogDialog()\">\n    {{'igo.geo.catalog.library.addBtn' | translate}}\n    <mat-icon svgIcon=\"earth-plus\"></mat-icon>\n  </button>\n</div>\n", styles: ["igo-list{height:auto}.btnAddCatalog{justify-content:center;display:flex;margin:30px 0}\n"] }]
-    }], function () { return [{ type: CapabilitiesService }, { type: i2$1.MessageService }, { type: i2$1.LanguageService }, { type: i2$1.StorageService }, { type: i1.MatDialog }]; }, { store: [{
+    }], function () { return [{ type: CapabilitiesService }, { type: i2$1.MessageService }, { type: i2$1.LanguageService }, { type: i2$1.StorageService }, { type: i3.MatDialog }]; }, { store: [{
             type: Input
         }], map: [{
             type: Input
@@ -20086,7 +20250,7 @@ CatalogLibaryItemComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
         i0.ɵɵproperty("ngIf", ctx.catalog.removable);
         i0.ɵɵadvance(1);
         i0.ɵɵproperty("ngIf", !ctx.catalog.removable);
-    } }, dependencies: [i1$1.NgIf, i2.MatIcon, i5.MatListItem, i9.MatLine, i4.MatTooltip, i3.MatButton, i7.TranslatePipe], styles: [".igo-blank[_ngcontent-%COMP%]{cursor:pointer}.igo-external-provider[_ngcontent-%COMP%]{cursor:help}"], changeDetection: 0 });
+    } }, dependencies: [i1.NgIf, i2.MatIcon, i5.MatListItem, i9.MatLine, i4.MatTooltip, i3$1.MatButton, i7.TranslatePipe], styles: [".igo-blank[_ngcontent-%COMP%]{cursor:pointer}.igo-external-provider[_ngcontent-%COMP%]{cursor:help}"], changeDetection: 0 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CatalogLibaryItemComponent, [{
         type: Component,
         args: [{ selector: 'igo-catalog-library-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-list-item>\n  <h4 mat-line>\n    {{title}}\n  </h4>\n  <mat-icon\n    class=\"igo-external-provider\"\n    *ngIf=\"catalog.externalProvider\"\n    tooltip-position=\"below\"\n    matTooltipShowDelay=\"500\"\n    [matTooltip]=\"'igo.geo.catalog.externalProvider.catalog' | translate\"\n    color=\"primary\"\n    (click)=\"$event.stopPropagation()\"\n    svgIcon=\"earth-arrow-right\">\n  </mat-icon>\n\n  <button\n  *ngIf=\"catalog.removable\"\n  mat-icon-button\n  tooltip-position=\"below\"\n  matTooltipShowDelay=\"500\"\n  [matTooltip]=\"'igo.geo.catalog.library.remove' | translate\"\n  color=\"warn\"\n  (click)=\"removeCatalogFromLibrary($event)\">\n  <mat-icon svgIcon=\"delete\"></mat-icon>\n</button>\n\n<button\n  class=\"igo-blank\"\n  *ngIf=\"!catalog.removable\"\n  disabled=\"true\"\n  mat-icon-button>\n  <mat-icon svgIcon=\"blank\"></mat-icon>\n</button>\n</mat-list-item>\n", styles: [".igo-blank{cursor:pointer}.igo-external-provider{cursor:help}\n"] }]
@@ -20166,7 +20330,7 @@ IgoCatalogLibraryModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [
         MatAutocompleteModule,
         MatDialogModule], exports: [CatalogLibaryComponent,
         AddCatalogDialogComponent] }); })();
-i0.ɵɵsetComponentScope(CatalogLibaryComponent, [i1$1.NgForOf, i1$1.NgIf, i2.MatIcon, i4.MatTooltip, i5$1.ListItemDirective, i5$1.ListComponent, i3.MatButton, CatalogLibaryItemComponent], [i1$1.AsyncPipe, i7.TranslatePipe]);
+i0.ɵɵsetComponentScope(CatalogLibaryComponent, [i1.NgForOf, i1.NgIf, i2.MatIcon, i4.MatTooltip, i5$1.ListItemDirective, i5$1.ListComponent, i3$1.MatButton, CatalogLibaryItemComponent], [i1.AsyncPipe, i7.TranslatePipe]);
 
 class IgoCatalogModule {
 }
@@ -20706,14 +20870,14 @@ class SpatialFilterService {
         }
     }
 }
-SpatialFilterService.ɵfac = function SpatialFilterService_Factory(t) { return new (t || SpatialFilterService)(i0.ɵɵinject(i1$2.HttpClient), i0.ɵɵinject(i2$1.LanguageService), i0.ɵɵinject(i2$1.ConfigService)); };
+SpatialFilterService.ɵfac = function SpatialFilterService_Factory(t) { return new (t || SpatialFilterService)(i0.ɵɵinject(i1$1.HttpClient), i0.ɵɵinject(i2$1.LanguageService), i0.ɵɵinject(i2$1.ConfigService)); };
 SpatialFilterService.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: SpatialFilterService, factory: SpatialFilterService.ɵfac, providedIn: 'root' });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SpatialFilterService, [{
         type: Injectable,
         args: [{
                 providedIn: 'root'
             }]
-    }], function () { return [{ type: i1$2.HttpClient }, { type: i2$1.LanguageService }, { type: i2$1.ConfigService }]; }, null); })();
+    }], function () { return [{ type: i1$1.HttpClient }, { type: i2$1.LanguageService }, { type: i2$1.ConfigService }]; }, null); })();
 
 class DownloadService {
     constructor(messageService, languageService) {
@@ -20817,7 +20981,7 @@ DownloadButtonComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Dow
         i0.ɵɵtemplate(0, DownloadButtonComponent_button_0_Template, 3, 4, "button", 0);
     } if (rf & 2) {
         i0.ɵɵproperty("ngIf", ctx.options && ctx.options.download && (ctx.options.download["dynamicUrl"] || ctx.options.download["url"]));
-    } }, dependencies: [i1$1.NgIf, i2.MatIcon, i3.MatButton, i4.MatTooltip, i7.TranslatePipe], changeDetection: 0 });
+    } }, dependencies: [i1.NgIf, i2.MatIcon, i3$1.MatButton, i4.MatTooltip, i7.TranslatePipe], changeDetection: 0 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DownloadButtonComponent, [{
         type: Component,
         args: [{ selector: 'igo-download-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  *ngIf=\"options && options.download && (options.download['dynamicUrl'] || options.download['url']) \"\n  mat-icon-button\n  tooltip-position=\"below\"\n  matTooltipShowDelay=\"500\"\n  [matTooltip]=\"'igo.geo.download.action' | translate\"\n  [color]=\"color\"\n  (click)=\"openDownload(layer)\">\n  <mat-icon svgIcon=\"download\"></mat-icon>\n</button>\n" }]
@@ -21945,7 +22109,7 @@ class MeasurerDialogComponent {
         this.dialogRef.close();
     }
 }
-MeasurerDialogComponent.ɵfac = function MeasurerDialogComponent_Factory(t) { return new (t || MeasurerDialogComponent)(i0.ɵɵdirectiveInject(i1.MatDialogRef), i0.ɵɵdirectiveInject(MAT_DIALOG_DATA)); };
+MeasurerDialogComponent.ɵfac = function MeasurerDialogComponent_Factory(t) { return new (t || MeasurerDialogComponent)(i0.ɵɵdirectiveInject(i3.MatDialogRef), i0.ɵɵdirectiveInject(MAT_DIALOG_DATA)); };
 MeasurerDialogComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MeasurerDialogComponent, selectors: [["igo-measurer-dialog"]], decls: 5, vars: 5, consts: [["mat-dialog-title", ""], ["class", "mat-typography", 4, "ngIf"], [1, "mat-typography"], ["colspan", "2"]], template: function MeasurerDialogComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵelementStart(0, "h3", 0);
         i0.ɵɵtext(1);
@@ -21964,12 +22128,12 @@ MeasurerDialogComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Mea
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MeasurerDialogComponent, [{
         type: Component,
         args: [{ selector: 'igo-measurer-dialog', template: "<h3 mat-dialog-title>{{'igo.geo.measure.dialog.title' | translate}}</h3>\n\n<table *ngIf=\"data.length > 0\"\n  class=\"mat-typography\">\n  <thead>\n    <tr>\n      <th colspan=\"2\">{{'igo.geo.measure.dialog.length.title' | translate}}</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td>{{data.length | measureFormat: measureLengthUnit.Meters}}</td>\n      <td>{{'igo.geo.measure.dialog.lengthInMeters' | translate}}</td>\n    </tr>\n    <tr>\n      <td>{{data.length | measureFormat: measureLengthUnit.Kilometers}}</td>\n      <td>{{'igo.geo.measure.dialog.lengthInKilometers' | translate}}</td>\n    </tr>\n    <tr>\n      <td>{{data.length | measureFormat: measureLengthUnit.Miles}}</td>\n      <td>{{'igo.geo.measure.dialog.lengthInMiles' | translate}}</td>\n    </tr>\n    <tr>\n      <td>{{data.length | measureFormat: measureLengthUnit.Feet}}</td>\n      <td>{{'igo.geo.measure.dialog.lengthInFeet' | translate}}</td>\n    </tr>\n  </tbody>\n</table>\n\n<table *ngIf=\"data.area > 0\"\n  class=\"mat-typography\">\n  <thead>\n    <tr>\n      <th colspan=\"2\">{{'igo.geo.measure.dialog.area.title' | translate}}</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td>{{data.area | measureFormat: measureAreaUnit.SquareMeters}}</td>\n      <td>{{'igo.geo.measure.dialog.areaInSquareMeters' | translate}}</td>\n    </tr>\n    <tr>\n      <td>{{data.area | measureFormat:measureAreaUnit.SquareKilometers}}</td>\n      <td>{{'igo.geo.measure.dialog.areaInSquareKilometers' | translate}}</td>\n    </tr>\n    <tr>\n      <td>{{data.area | measureFormat: measureAreaUnit.SquareMiles}}</td>\n      <td>{{'igo.geo.measure.dialog.areaInSquareMiles' | translate}}</td>\n    </tr>\n    <tr>\n      <td>{{data.area | measureFormat: measureAreaUnit.Acres}}</td>\n      <td>{{'igo.geo.measure.dialog.areaInAcres' | translate}}</td>\n    </tr>\n    <tr>\n      <td>{{data.area | measureFormat: measureAreaUnit.Hectares}}</td>\n      <td>{{'igo.geo.measure.dialog.areaInHectares' | translate}}</td>\n    </tr>\n    <tr>\n      <td>{{'igo.geo.measure.dialog.perimeterInMeters' | translate}}</td>\n      <td>{{data.perimeter | measureFormat: measureLengthUnit.Meters}}</td>\n    </tr>\n  </tbody>\n</table>\n", styles: [":host{font-family:Roboto,Helvetica Neue,sans-serif}h3{text-align:center;margin:0}table{width:100%;padding:10px}table tbody tr td:last-child{padding-left:10px}\n"] }]
-    }], function () { return [{ type: i1.MatDialogRef }, { type: undefined, decorators: [{
+    }], function () { return [{ type: i3.MatDialogRef }, { type: undefined, decorators: [{
                 type: Inject,
                 args: [MAT_DIALOG_DATA]
             }] }]; }, null); })();
 
-const _c0$a = ["table"];
+const _c0$b = ["table"];
 function MeasurerComponent_mat_divider_13_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "mat-divider");
 } }
@@ -22879,9 +23043,9 @@ class MeasurerComponent {
         return true;
     }
 }
-MeasurerComponent.ɵfac = function MeasurerComponent_Factory(t) { return new (t || MeasurerComponent)(i0.ɵɵdirectiveInject(i2$1.LanguageService), i0.ɵɵdirectiveInject(i1.MatDialog), i0.ɵɵdirectiveInject(i2$1.StorageService)); };
+MeasurerComponent.ɵfac = function MeasurerComponent_Factory(t) { return new (t || MeasurerComponent)(i0.ɵɵdirectiveInject(i2$1.LanguageService), i0.ɵɵdirectiveInject(i3.MatDialog), i0.ɵɵdirectiveInject(i2$1.StorageService)); };
 MeasurerComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MeasurerComponent, selectors: [["igo-measurer"]], viewQuery: function MeasurerComponent_Query(rf, ctx) { if (rf & 1) {
-        i0.ɵɵviewQuery(_c0$a, 7);
+        i0.ɵɵviewQuery(_c0$b, 7);
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.table = _t.first);
@@ -22979,7 +23143,7 @@ MeasurerComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MeasurerC
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MeasurerComponent, [{
         type: Component,
         args: [{ selector: 'igo-measurer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div>\n  <div class=\"measure-type-toggle mat-typography\">\n    <mat-button-toggle-group\n      [value]=\"activeMeasureType\"\n      (change)=\"onMeasureTypeChange($event.value)\">\n      <mat-button-toggle [value]=\"measureType.Length\">\n        {{('igo.geo.measure.' + measureType.Length) | translate}}\n      </mat-button-toggle>\n      <mat-button-toggle [value]=\"measureType.Area\">\n        {{('igo.geo.measure.' + measureType.Area) | translate}}\n      </mat-button-toggle>\n    </mat-button-toggle-group>\n  </div>\n\n  <div class=\"measure-options mat-typography\">\n    <mat-slide-toggle\n      [disabled]=\"drawControlIsDisabled\"\n      [checked]=\"drawControlIsActive\"\n      [labelPosition]=\"'before'\"\n      (change)=\"onToggleDrawControl($event.checked)\">\n      {{'igo.geo.measure.toggleActive' | translate}}\n    </mat-slide-toggle>\n\n    <mat-divider *ngIf=\"(hasLine$ | async)\"></mat-divider>\n\n    <mat-slide-toggle *ngIf=\"(hasLine$ | async)\"\n      [checked]=\"displayLines\"\n      [labelPosition]=\"'before'\"\n      (change)=\"onToggleDisplayLines($event.checked)\">\n      {{'igo.geo.measure.toggleDisplayLines' | translate}}\n    </mat-slide-toggle>\n\n    <mat-divider *ngIf=\"(hasLine$ | async) || (hasArea$ | async)\"></mat-divider>\n\n    <mat-slide-toggle *ngIf=\"(hasArea$ | async)\"\n      [checked]=\"displayDistance\"\n      [labelPosition]=\"'before'\"\n      (change)=\"onToggleDisplayDistance($event.checked)\">\n      {{'igo.geo.measure.toggleDisplayDistance' | translate}}\n    </mat-slide-toggle>\n\n    <mat-slide-toggle *ngIf=\"(hasArea$ | async)\"\n      [checked]=\"displayAreas\"\n      [labelPosition]=\"'before'\"\n      (change)=\"onToggleDisplayAreas($event.checked)\">\n      {{'igo.geo.measure.toggleDisplayAreas' | translate}}\n    </mat-slide-toggle>\n\n    <mat-divider *ngIf=\"(hasArea$ | async)\"></mat-divider>\n\n    <mat-slide-toggle\n      [checked]=\"measureUnitsAuto\"\n      [labelPosition]=\"'before'\"\n      (change)=\"onToggleMeasureUnitsAuto($event.checked)\">\n      {{'igo.geo.measure.toggleAutoUnits' | translate}}\n    </mat-slide-toggle>\n  </div>\n\n  <ng-container *ngIf=\"measure$ | async as measure\">\n    <igo-measurer-item *ngIf=\"activeMeasureType === measureType.Length || activeMeasureType === measureType.Area\"\n      [measureType]=\"measureType.Length\"\n      [measureUnit]=\"measureLengthUnit.Meters\"\n      [measure]=\"measure.length\"\n      [auto]=\"measureUnitsAuto\"\n      [placeholder]=\"(activeMeasureType === measureType.Area ? 'igo.geo.measure.perimeter' : 'igo.geo.measure.length') | translate\"\n      (measureUnitChange)=\"onLengthUnitChange($event)\">\n    </igo-measurer-item>\n\n    <igo-measurer-item *ngIf=\"activeMeasureType === measureType.Area\"\n      [measureType]=\"measureType.Area\"\n      [measureUnit]=\"measureAreaUnit.SquareMeters\"\n      [measure]=\"measure.area\"\n      [auto]=\"measureUnitsAuto\"\n      [placeholder]=\"'igo.geo.measure.area' | translate\"\n      (measureUnitChange)=\"onAreaUnitChange($event)\">\n    </igo-measurer-item>\n  </ng-container>\n\n  <mat-divider *ngIf=\"(hasLine$ | async) || (hasArea$ | async)\"></mat-divider>\n\n  <div class=\"measure-store-buttons\">\n    <button *ngIf=\"(hasLine$ | async) || (hasArea$ | async)\"\n      mat-icon-button\n      [matTooltip]=\"'igo.geo.measure.actionbar.calculate.tooltip' | translate\"\n      [disabled]=\"(selectedFeatures$ | async).length === 0\"\n      color=\"accent\"\n      (click)=\"onCalculateClick()\">\n      <mat-icon svgIcon=\"calculator\"></mat-icon>\n    </button>\n\n    <button *ngIf=\"(hasLine$ | async) || (hasArea$ | async)\"\n      mat-icon-button\n      [matTooltip]=\"'igo.geo.measure.actionbar.delete.tooltip' | translate\"\n      [disabled]=\"(selectedFeatures$ | async).length === 0\"\n      color=\"warn\"\n      (click)=\"onDeleteClick()\">\n      <mat-icon svgIcon=\"delete\"></mat-icon>\n    </button>\n\n    <!--button\n      mat-icon-button\n      [matTooltip]=\"'igo.geo.measure.actionbar.modify.tooltip' | translate\"\n      [disabled]=\"(selectedFeatures$ | async).length !== 1\"\n      (click)=\"onModifyClick()\">\n      <mat-icon svgIcon=\"edit\"></mat-icon>\n    </button-->\n  </div>\n\n  <igo-entity-table\n    #table\n    class=\"table-compact\"\n    [store]=\"store\"\n    [template]=\"tableTemplate\">\n  </igo-entity-table>\n</div>\n", styles: [".measure-type-toggle{padding:10px;text-align:center}.measure-type-toggle mat-button-toggle-group{width:100%}.measure-type-toggle mat-button-toggle-group mat-button-toggle{width:50%}.measure-options{overflow-x:hidden}.measure-options mat-slide-toggle{width:100%;margin:10px}.measure-options mat-slide-toggle ::ng-deep .mat-slide-toggle-content{width:calc(100% - 60px)}.measure-store-buttons{margin-left:-2px}.measure-store-buttons button:first-of-type{margin-left:14px}.table-compact ::ng-deep .mat-header-cell.mat-column-selectionCheckbox{width:52px}\n"] }]
-    }], function () { return [{ type: i2$1.LanguageService }, { type: i1.MatDialog }, { type: i2$1.StorageService }]; }, { map: [{
+    }], function () { return [{ type: i2$1.LanguageService }, { type: i3.MatDialog }, { type: i2$1.StorageService }]; }, { map: [{
             type: Input
         }], store: [{
             type: Input
@@ -23675,7 +23839,7 @@ GeometryFormFieldComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
         i0.ɵɵproperty("ngIf", ctx.geometryTypeField);
         i0.ɵɵadvance(1);
         i0.ɵɵproperty("ngIf", ctx.drawGuideField);
-    } }, dependencies: [i1$1.NgIf, i2$2.DefaultValueAccessor, i2$2.NumberValueAccessor, i2$2.NgControlStatus, i2$2.NgModel, i2$2.FormControlDirective, i2.MatIcon, i13.MatFormField, i13.MatPrefix, i13.MatSuffix, i14.MatInput, i18.MatButtonToggleGroup, i18.MatButtonToggle, GeometryFormFieldInputComponent, i1$1.AsyncPipe, i7.TranslatePipe], styles: ["[_nghost-%COMP%]{display:block;width:100%}.geometry-type-toggle[_ngcontent-%COMP%], .draw-guide-field[_ngcontent-%COMP%]{width:100%}.geometry-type-toggle[_ngcontent-%COMP%]{padding:10px;text-align:center}.draw-guide-field[_ngcontent-%COMP%]   mat-icon[_ngcontent-%COMP%]{margin:0 10px}.draw-guide-units[_ngcontent-%COMP%]{padding:10px}"], changeDetection: 0 });
+    } }, dependencies: [i1.NgIf, i2$2.DefaultValueAccessor, i2$2.NumberValueAccessor, i2$2.NgControlStatus, i2$2.NgModel, i2$2.FormControlDirective, i2.MatIcon, i13.MatFormField, i13.MatPrefix, i13.MatSuffix, i14.MatInput, i18.MatButtonToggleGroup, i18.MatButtonToggle, GeometryFormFieldInputComponent, i1.AsyncPipe, i7.TranslatePipe], styles: ["[_nghost-%COMP%]{display:block;width:100%}.geometry-type-toggle[_ngcontent-%COMP%], .draw-guide-field[_ngcontent-%COMP%]{width:100%}.geometry-type-toggle[_ngcontent-%COMP%]{padding:10px;text-align:center}.draw-guide-field[_ngcontent-%COMP%]   mat-icon[_ngcontent-%COMP%]{margin:0 10px}.draw-guide-units[_ngcontent-%COMP%]{padding:10px}"], changeDetection: 0 });
 GeometryFormFieldComponent = __decorate([
     IgoFormFieldComponent('geometry')
 ], GeometryFormFieldComponent);
@@ -24556,7 +24720,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, 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}"] });
+    } }, dependencies: [i1.NgForOf, i1.NgIf, i2$2.DefaultValueAccessor, i2$2.NgControlStatus, i2$2.NgModel, i9.MatOption, i2.MatIcon, i3$1.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'\">\n  <div *ngIf=\"!isRange\" class=\"igo-col igo-col-100 igo-col-100-m\">\n    <mat-form-field>\n      <mat-datetimepicker-toggle class=\"time-filter-mat-datetimepicker-toggle\" [for]=\"datetimePicker\" matSuffix></mat-datetimepicker-toggle>\n      <mat-datetimepicker #datetimePicker type=\"{{type}}\" openOnFocus=\"true\" timeInterval=\"5\"></mat-datetimepicker>\n      <input matInput autocomplete=\"false\"\n        placeholder=\"{{'igo.geo.timeFilter.date' | translate}}\"\n        [matDatetimepicker]=\"datetimePicker\"\n        [(ngModel)]=\"date\"\n        [min]=\"min\"\n        [max]=\"max\"\n        readonly=\"readonly\"\n        (dateChange)=\"handleDateChange($event)\">\n    </mat-form-field>\n\n  </div>\n\n  <div *ngIf=\"isRange\">\n    <div class=\"igo-col igo-col-100\">\n      <mat-form-field>\n        <mat-datetimepicker-toggle class=\"time-filter-mat-datetimepicker-toggle\" [for]=\"minDatetimePicker\" matSuffix></mat-datetimepicker-toggle>\n        <mat-datetimepicker #minDatetimePicker type=\"{{type}}\" openOnFocus=\"true\" timeInterval=\"5\"></mat-datetimepicker>\n        <input matInput autocomplete=\"false\"\n          placeholder=\"{{'igo.geo.timeFilter.startDate' | translate}}\"\n          [matDatetimepicker]=\"minDatetimePicker\"\n          [(ngModel)]=\"startDate\"\n          [min]=\"min\"\n          [max]=\"getRangeMaxDate()\"\n          readonly=\"readonly\"\n          (input)=\"startDate\"\n          (dateChange)=\"handleDateChange($event)\">\n      </mat-form-field>\n    </div>\n\n    <div class=\"igo-col igo-col-100\">\n      <mat-form-field>\n        <mat-datetimepicker-toggle class=\"time-filter-mat-datetimepicker-toggle\" [for]=\"maxDatetimePicker\" matSuffix></mat-datetimepicker-toggle>\n        <mat-datetimepicker #maxDatetimePicker type=\"{{type}}\" openOnFocus=\"true\" timeInterval=\"5\"></mat-datetimepicker>\n        <input matInput autocomplete=\"false\"\n          placeholder=\"{{'igo.geo.timeFilter.endDate' | translate}}\"\n          [matDatetimepicker]=\"maxDatetimePicker\"\n          [(ngModel)]=\"endDate\"\n          [min]=\"getRangeMinDate()\"\n          [max]=\"max\"\n          readonly=\"readonly\"\n          (dateChange)=\"handleDateChange($event)\">\n      </mat-form-field>\n    </div>\n  </div>\n</div>\n\n<div *ngIf=\"style === 'calendar' && type ==='year'\">\n\n  <div *ngIf=\"!isRange\" class=\"igo-col igo-col-100 igo-col-100-m\">\n        <mat-form-field>\n            <mat-select placeholder=\"{{'igo.geo.timeFilter.date' | translate}}\" [(ngModel)]=\"year\" (selectionChange)=\"handleYearChange($event)\">\n                  <mat-option [value]=\"year\" *ngFor=\"let year of listYears\">{{year}}</mat-option>\n            </mat-select>\n        </mat-form-field>\n  </div>\n\n  <div *ngIf=\"isRange\">\n    <div class=\"igo-col igo-col-100\">\n        <mat-form-field>\n            <mat-select placeholder=\"{{'igo.geo.timeFilter.startDate' | translate}}\" [(ngModel)]=\"startYear\" (selectionChange)=\"handleYearChange($event)\">\n              <mat-option [value]=\"startYear\" *ngFor=\"let startYear of startListYears\">{{startYear}}</mat-option>\n            </mat-select>\n      </mat-form-field>\n    </div>\n\n    <div class=\"igo-col igo-col-100\">\n    <mat-form-field>\n        <mat-select placeholder=\"{{'igo.geo.timeFilter.endDate' | translate}}\" [(ngModel)]=\"endYear\" (selectionChange)=\"handleYearChange($event)\">\n              <mat-option [value]=\"endYear\" *ngFor=\"let endYear of endListYears\">{{endYear}}</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n  </div>\n\n</div>\n\n\n  <br>\n  <div *ngIf=\"!isRange && style === 'slider' && type === 'year'\" class=\"igo-col igo-col-100 igo-col-100-m mat-typography\">\n    <span>{{startYear}}</span>\n    <mat-slider\n        id=\"time-slider\"\n        tickInterval=\"auto\"\n        step=\"{{step}}\"\n        [min]=\"startYear\"\n        [max]=\"endYear\"\n        [value]=\"handleSliderValue()\"\n        [color]=\"color\"\n        thumbLabel\n        (input)=\"handleSliderYearChange($event)\"\n        (change)=\"handleSliderYearChange($event)\"\n        [disabled]= \"!options.enabled || !layer.visible\">\n    </mat-slider>\n    <span>{{endYear}}</span>\n    <p *ngIf= \"options.enabled\" class=\"date-below\">{{year}}</p>\n    <div #actions class=\"igo-layer-actions-container\">\n      <mat-slide-toggle (change)=\"toggleFilterState()\" tooltip-position=\"below\" matTooltipShowDelay=\"500\"\n        [matTooltip]=\"'igo.geo.filter.toggleFilterState' | translate\" [color]=\"color\" [checked]=\"options.enabled\"\n        [disabled]=\"!layer.visible\">\n      </mat-slide-toggle>\n      <button [disabled]= \"!options.enabled  || !layer.visible\" mat-icon-button color=\"primary\" (click)=\"playYear($event)\">\n        <mat-icon svgIcon=\"{{playIcon}}\"></mat-icon>\n       </button>\n      <button [disabled]=\"!options.enabled  || !layer.visible\" mat-icon-button color=\"primary\" (click)=\"resetFilter($event)\">\n        <mat-icon svgIcon=\"{{resetIcon}}\"></mat-icon>\n      </button>\n    </div>\n  </div>\n\n<div *ngIf=\"style === 'slider' && type !== 'year'\" class=\"igo-col igo-col-100 igo-col-100-m\">\n  <mat-slider\n      id=\"time-slider\"\n      tickInterval=\"auto\"\n      step=\"{{step}}\"\n      [min]=\"dateToNumber(min)\"\n      [max]=\"dateToNumber(max)\"\n      [value]=\"handleSliderValue()\"\n      thumbLabel\n      (input)=\"handleSliderDateChange($event)\"\n      (selectionChange)=\"handleSliderDateChange($event)\">\n  </mat-slider>\n  <p class=\"date-below\">{{handleSliderTooltip()}}</p>\n  <button mat-icon-button color=\"primary\" (click)=\"playFilter($event)\">\n   <mat-icon svgIcon=\"{{playIcon}}\"></mat-icon>\n  </button>\n</div>\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"] }]
@@ -24575,7 +24739,7 @@ TimeFilterFormComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Tim
             args: [MatSlider]
         }] }); })();
 
-const _c0$9 = function (a0) { return { disabled: a0 }; };
+const _c0$a = function (a0) { return { disabled: a0 }; };
 function TimeFilterItemComponent_mat_list_item_0_button_4_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 10);
@@ -24589,7 +24753,7 @@ function TimeFilterItemComponent_mat_list_item_0_button_4_Template(rf, ctx) { if
     const ctx_r4 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("color", ctx_r4.layer.visible ? "primary" : "default")("matTooltip", ctx_r4.layer.visible ? i0.ɵɵpipeBind1(1, 4, "igo.geo.layer.hideLayer") : i0.ɵɵpipeBind1(2, 6, "igo.geo.layer.showLayer"));
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(10, _c0$9, i0.ɵɵpipeBind1(4, 8, ctx_r4.inResolutionRange$) === false))("svgIcon", ctx_r4.layer.visible ? "eye" : "eye-off");
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(10, _c0$a, i0.ɵɵpipeBind1(4, 8, ctx_r4.inResolutionRange$) === false))("svgIcon", ctx_r4.layer.visible ? "eye" : "eye-off");
 } }
 const _c1$8 = function (a0) { return { "cursor": a0 }; };
 function TimeFilterItemComponent_mat_list_item_0_Template(rf, ctx) { if (rf & 1) {
@@ -25271,7 +25435,7 @@ function OgcFilterFormComponent_igo_ogc_filter_time_41_Template(rf, ctx) { if (r
     const ctx_r8 = i0.ɵɵnextContext();
     i0.ɵɵproperty("datasource", ctx_r8.datasource)("currentFilter", ctx_r8.currentFilter);
 } }
-const _c0$8 = function (a0, a1) { return { "logical": a0, "logicalHidden": a1 }; };
+const _c0$9 = function (a0, a1) { return { "logical": a0, "logicalHidden": a1 }; };
 const _c1$7 = function (a0, a1) { return { "operator": a0, "dualInput": a1 }; };
 const _c2$4 = function () { return ["expression", "pattern"]; };
 const _c3$1 = function () { return ["lowerBoundary", "begin"]; };
@@ -25577,7 +25741,7 @@ OgcFilterFormComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: OgcF
     } if (rf & 2) {
         i0.ɵɵproperty("matTooltip", i0.ɵɵpipeBind1(1, 27, "igo.geo.filter.toggleFilterState"))("checked", ctx.currentFilter.active);
         i0.ɵɵadvance(2);
-        i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(67, _c0$8, ctx.activeFilters.indexOf(ctx.currentFilter) !== 0 && ctx.currentFilter.active === true, ctx.activeFilters.indexOf(ctx.currentFilter) === 0 || ctx.currentFilter.active !== true));
+        i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(67, _c0$9, ctx.activeFilters.indexOf(ctx.currentFilter) !== 0 && ctx.currentFilter.active === true, ctx.activeFilters.indexOf(ctx.currentFilter) === 0 || ctx.currentFilter.active !== true));
         i0.ɵɵadvance(1);
         i0.ɵɵproperty("disabled", !ctx.currentFilter.active)("value", ctx.currentFilter.parentLogical)("matTooltip", ctx.currentFilter.parentLogical ? i0.ɵɵpipeBind1(4, 29, "igo.geo.operators.tooltip." + ctx.currentFilter.parentLogical) : "");
         i0.ɵɵadvance(2);
@@ -25695,7 +25859,7 @@ function OgcFilterableItemComponent_mat_icon_2_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵreference(7);
     i0.ɵɵproperty("target", _r4)("collapsed", ctx_r0.filtersCollapsed);
 } }
-const _c0$7 = function (a0) { return { "cursor": a0 }; };
+const _c0$8 = function (a0) { return { "cursor": a0 }; };
 function OgcFilterableItemComponent_h4_3_Template(rf, ctx) { if (rf & 1) {
     const _r10 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "h4", 10);
@@ -25704,7 +25868,7 @@ function OgcFilterableItemComponent_h4_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(3, _c0$7, ctx_r1.filtersCollapsed ? "default" : "pointer"))("matTooltip", ctx_r1.layer.title);
+    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(3, _c0$8, ctx_r1.filtersCollapsed ? "default" : "pointer"))("matTooltip", ctx_r1.layer.title);
     i0.ɵɵadvance(1);
     i0.ɵɵtextInterpolate(ctx_r1.layer.title);
 } }
@@ -26262,7 +26426,7 @@ OGCFilterTimeService.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: OGC
         type: Injectable
     }], function () { return []; }, null); })();
 
-const _c0$6 = ["selection"];
+const _c0$7 = ["selection"];
 function OgcFilterSelectionComponent_div_1_div_1_div_2_mat_option_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "mat-option", 13);
     i0.ɵɵtext(1);
@@ -27514,7 +27678,7 @@ class OgcFilterSelectionComponent {
 }
 OgcFilterSelectionComponent.ɵfac = function OgcFilterSelectionComponent_Factory(t) { return new (t || OgcFilterSelectionComponent)(i0.ɵɵdirectiveInject(OGCFilterService), i0.ɵɵdirectiveInject(i2$2.UntypedFormBuilder), i0.ɵɵdirectiveInject(i5$1.DOMService), i0.ɵɵdirectiveInject(i2$1.ConfigService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
 OgcFilterSelectionComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: OgcFilterSelectionComponent, selectors: [["igo-ogc-filter-selection"]], viewQuery: function OgcFilterSelectionComponent_Query(rf, ctx) { if (rf & 1) {
-        i0.ɵɵviewQuery(_c0$6, 5);
+        i0.ɵɵviewQuery(_c0$7, 5);
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.sel = _t.first);
@@ -27862,7 +28026,7 @@ SpatialFilterListComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
         i0.ɵɵproperty("value", ctx.measureUnit);
         i0.ɵɵadvance(1);
         i0.ɵɵproperty("ngForOf", ctx.measureUnits);
-    } }, dependencies: [i1$1.NgForOf, i2$2.ɵNgNoValidate, i2$2.DefaultValueAccessor, i2$2.NumberValueAccessor, i2$2.NgControlStatus, i2$2.NgControlStatusGroup, i2$2.NgForm, i2$2.FormControlDirective, i11$1.MatAutocomplete, i11$1.MatAutocompleteTrigger, i9.MatOption, i13.MatFormField, i14.MatInput, i15.MatSelect, i1$1.AsyncPipe, i7.TranslatePipe], styles: [".buffer-div[_ngcontent-%COMP%]{display:flex;width:100%;margin-left:2px;padding:5px}.zone-list[_ngcontent-%COMP%]{padding:5px;width:95%;margin-left:2px}.buffer[_ngcontent-%COMP%]{display:flex;flex-flow:column nowrap;width:110%}.unit-field[_ngcontent-%COMP%]{width:110px;margin-left:30px}"], changeDetection: 0 });
+    } }, dependencies: [i1.NgForOf, i2$2.ɵNgNoValidate, i2$2.DefaultValueAccessor, i2$2.NumberValueAccessor, i2$2.NgControlStatus, i2$2.NgControlStatusGroup, i2$2.NgForm, i2$2.FormControlDirective, i11$1.MatAutocomplete, i11$1.MatAutocompleteTrigger, i9.MatOption, i13.MatFormField, i14.MatInput, i15.MatSelect, i1.AsyncPipe, i7.TranslatePipe], styles: [".buffer-div[_ngcontent-%COMP%]{display:flex;width:100%;margin-left:2px;padding:5px}.zone-list[_ngcontent-%COMP%]{padding:5px;width:95%;margin-left:2px}.buffer[_ngcontent-%COMP%]{display:flex;flex-flow:column nowrap;width:110%}.unit-field[_ngcontent-%COMP%]{width:110px;margin-left:30px}"], changeDetection: 0 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SpatialFilterListComponent, [{
         type: Component,
         args: [{ selector: 'igo-spatial-filter-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<form class=\"form-list\">\n    <mat-form-field class=\"zone-list\">\n        <input #input type=\"text\" placeholder=\"{{'igo.geo.spatialFilter.listLabel' |\u00A0translate}}\" matInput\n        [formControl]=\"formControl\" [matAutocomplete]=\"auto\">\n        <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"onZoneChange($event.option.value)\"\n        [displayWith]=\"displayFn\">\n            <mat-option *ngFor=\"let entities of this.store.view.all$() | async\" [value]=\"entities\">\n                {{entities.properties.nom}}\n            </mat-option>\n        </mat-autocomplete>\n    </mat-form-field>\n<form>\n\n<div class=\"buffer-div\">\n    <form class=\"buffer-form\">\n        <mat-form-field class=\"buffer\">\n            <input type=\"number\" matInput placeholder=\"{{'igo.geo.spatialFilter.buffer' | translate}}\" [formControl]=\"bufferFormControl\"\n            [value]=\"0\" [readonly]=\"!zone\">\n        </mat-form-field>\n    </form>\n\n    <mat-form-field class=\"unit-field\">\n        <mat-select\n        [value]=\"measureUnit\"\n        (selectionChange)=\"onMeasureUnitChange($event.value)\">\n        <mat-option *ngFor=\"let measureUnit of measureUnits\" [value]=\"measureUnit\">\n            {{('igo.geo.measure.' + measureUnit) | translate}}\n        </mat-option>\n        </mat-select>\n    </mat-form-field>\n</div>\n", styles: [".buffer-div{display:flex;width:100%;margin-left:2px;padding:5px}.zone-list{padding:5px;width:95%;margin-left:2px}.buffer{display:flex;flex-flow:column nowrap;width:110%}.unit-field{width:110px;margin-left:30px}\n"] }]
@@ -28954,7 +29118,7 @@ SpatialFilterItemComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
             type: Output
         }] }); })();
 
-const _c0$5 = ["endDatepickerTime"];
+const _c0$6 = ["endDatepickerTime"];
 const _c1$4 = ["beginDatepickerTime"];
 const _c2$2 = ["beginTime"];
 const _c3 = ["endTime"];
@@ -29799,7 +29963,7 @@ class OgcFilterTimeComponent {
 }
 OgcFilterTimeComponent.ɵfac = function OgcFilterTimeComponent_Factory(t) { return new (t || OgcFilterTimeComponent)(i0.ɵɵdirectiveInject(OGCFilterTimeService)); };
 OgcFilterTimeComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: OgcFilterTimeComponent, selectors: [["igo-ogc-filter-time"]], viewQuery: function OgcFilterTimeComponent_Query(rf, ctx) { if (rf & 1) {
-        i0.ɵɵviewQuery(_c0$5, 5);
+        i0.ɵɵviewQuery(_c0$6, 5);
         i0.ɵɵviewQuery(_c1$4, 5);
         i0.ɵɵviewQuery(_c2$2, 5);
         i0.ɵɵviewQuery(_c3, 5);
@@ -29995,7 +30159,7 @@ OgcFilterTimeSliderComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type
         i0.ɵɵproperty("svgIcon", ctx.playIcon);
         i0.ɵɵadvance(2);
         i0.ɵɵpropertyInterpolate("svgIcon", ctx.resetIcon);
-    } }, dependencies: [i2$2.NgControlStatus, i2$2.NgModel, i2.MatIcon, i3.MatButton, i13$1.MatSlider], styles: ["input{text-align:center!important;margin:auto 5px!important}  .mat-slider-thumb{transform:scale(0)!important}  .mat-slider-thumb-label{transform:rotate(45deg)!important;border-radius:50% 50% 0!important;background-color:#ffd740!important}  .mat-slider-thumb-label-text{opacity:1!important;transform:rotate(135deg)!important}  .mat-slider-horizontal .mat-slider-thumb-label{top:10px!important;transform:rotate(225deg)!important}  .mat-slider-horizontal.cdk-focused .mat-slider-thumb-label{transform:rotate(225deg)!important}.datetime-container[_ngcontent-%COMP%], .slider-container[_ngcontent-%COMP%]{text-align:center}.datetime-input[_ngcontent-%COMP%]{display:inline-block;margin:5px 25px}.date-input[_ngcontent-%COMP%]{width:120px;margin-right:25px}.time-input[_ngcontent-%COMP%]{display:inherit;margin-right:25px}.hour-input[_ngcontent-%COMP%], .minute-input[_ngcontent-%COMP%]{width:40px}.minute-input[_ngcontent-%COMP%]{margin-left:10px}"] });
+    } }, dependencies: [i2$2.NgControlStatus, i2$2.NgModel, i2.MatIcon, i3$1.MatButton, i13$1.MatSlider], styles: ["input{text-align:center!important;margin:auto 5px!important}  .mat-slider-thumb{transform:scale(0)!important}  .mat-slider-thumb-label{transform:rotate(45deg)!important;border-radius:50% 50% 0!important;background-color:#ffd740!important}  .mat-slider-thumb-label-text{opacity:1!important;transform:rotate(135deg)!important}  .mat-slider-horizontal .mat-slider-thumb-label{top:10px!important;transform:rotate(225deg)!important}  .mat-slider-horizontal.cdk-focused .mat-slider-thumb-label{transform:rotate(225deg)!important}.datetime-container[_ngcontent-%COMP%], .slider-container[_ngcontent-%COMP%]{text-align:center}.datetime-input[_ngcontent-%COMP%]{display:inline-block;margin:5px 25px}.date-input[_ngcontent-%COMP%]{width:120px;margin-right:25px}.time-input[_ngcontent-%COMP%]{display:inherit;margin-right:25px}.hour-input[_ngcontent-%COMP%], .minute-input[_ngcontent-%COMP%]{width:40px}.minute-input[_ngcontent-%COMP%]{margin-left:10px}"] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(OgcFilterTimeSliderComponent, [{
         type: Component,
         args: [{ selector: 'igo-ogc-filter-time-slider', template: "<div class=\"slider-container\">\n  <mat-slider\n    id=\"time-slider\"\n    [step]=\"1\"\n    [min]=\"1\"\n    [max]=\"calculatedStep\"\n    [(ngModel)]=\"sliderValue\"\n    [displayWith]=\"sliderDisplayWith\"\n    (input)=\"handleSliderInput($event)\"\n    thumbLabel\n    >\n  </mat-slider>\n  <button mat-icon-button color=\"primary\" (click)=\"playFilter($event)\">\n    <mat-icon [svgIcon]=\"playIcon\"></mat-icon>\n  </button>\n  <button mat-icon-button color=\"primary\" (click)=\"resetFilter($event)\">\n    <mat-icon svgIcon=\"{{resetIcon}}\"></mat-icon>\n  </button>\n  \n</div>", styles: ["::ng-deep input{text-align:center!important;margin:auto 5px!important}::ng-deep .mat-slider-thumb{transform:scale(0)!important}::ng-deep .mat-slider-thumb-label{transform:rotate(45deg)!important;border-radius:50% 50% 0!important;background-color:#ffd740!important}::ng-deep .mat-slider-thumb-label-text{opacity:1!important;transform:rotate(135deg)!important}::ng-deep .mat-slider-horizontal .mat-slider-thumb-label{top:10px!important;transform:rotate(225deg)!important}::ng-deep .mat-slider-horizontal.cdk-focused .mat-slider-thumb-label{transform:rotate(225deg)!important}.datetime-container,.slider-container{text-align:center}.datetime-input{display:inline-block;margin:5px 25px}.date-input{width:120px;margin-right:25px}.time-input{display:inherit;margin-right:25px}.hour-input,.minute-input{width:40px}.minute-input{margin-left:10px}\n"] }]
@@ -30213,19 +30377,19 @@ IgoFilterModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ providers: [TimeFi
         SpatialFilterItemComponent,
         OgcFilterTimeComponent,
         OgcFilterTimeSliderComponent] }); })();
-i0.ɵɵsetComponentScope(TimeFilterButtonComponent, [i1$1.NgIf, i2.MatIcon, i3.MatButton, i4.MatTooltip, i5$1.ListItemDirective, i7$1.MatBadge, TimeFilterItemComponent], [i7.TranslatePipe]);
-i0.ɵɵsetComponentScope(TimeFilterItemComponent, [i1$1.NgClass, i1$1.NgIf, i1$1.NgStyle, i2.MatIcon, i3.MatButton, i5.MatListItem, i5.MatListAvatarCssMatStyler, i9.MatLine, i4.MatTooltip, LayerLegendComponent, i5$1.CollapseDirective, TimeFilterFormComponent], [i1$1.AsyncPipe, i7.TranslatePipe]);
-i0.ɵɵsetComponentScope(TimeFilterListComponent, [i1$1.NgForOf, i5$1.ListItemDirective, i5$1.ListComponent, TimeFilterItemComponent], [FilterableDataSourcePipe]);
-i0.ɵɵsetComponentScope(OgcFilterFormComponent, [i1$1.NgClass, i1$1.NgForOf, i1$1.NgIf, i11$1.MatAutocomplete, i11$1.MatAutocompleteTrigger, i9.MatOption, i2.MatIcon, i3.MatButton, i12.MatCheckbox, i13.MatFormField, i13.MatSuffix, i14.MatInput, i15.MatSelect, i4.MatTooltip, OgcFilterTimeComponent], [i1$1.AsyncPipe, i7.TranslatePipe, i5$1.KeyValuePipe]);
-i0.ɵɵsetComponentScope(OgcFilterButtonComponent, [i1$1.NgIf, i2.MatIcon, i3.MatButton, i4.MatTooltip, i5$1.ListItemDirective, i7$1.MatBadge, OgcFilterableItemComponent], [i7.TranslatePipe]);
-i0.ɵɵsetComponentScope(OgcFilterSelectionComponent, [i1$1.NgForOf, i1$1.NgIf, i1$1.NgStyle, i2$2.ɵNgNoValidate, i2$2.DefaultValueAccessor, i2$2.NgControlStatus, i2$2.NgControlStatusGroup, i2$2.NgModel, i2$2.FormGroupDirective, i2$2.FormControlName, i11$1.MatAutocomplete, i11$1.MatAutocompleteTrigger, i9.MatOption, i2.MatIcon, i17.MatRadioGroup, i17.MatRadioButton, i18.MatButtonToggleGroup, i18.MatButtonToggle, i12.MatCheckbox, i13.MatFormField, i14.MatInput, i15.MatSelect, i11.MatDivider, i4.MatTooltip, OgcFilterTimeComponent], [i1$1.AsyncPipe, i7.TranslatePipe]);
-i0.ɵɵsetComponentScope(OgcFilterableFormComponent, [i1$1.NgForOf, i1$1.NgIf, i5$1.ListItemDirective, OgcFilterFormComponent,
+i0.ɵɵsetComponentScope(TimeFilterButtonComponent, [i1.NgIf, i2.MatIcon, i3$1.MatButton, i4.MatTooltip, i5$1.ListItemDirective, i7$1.MatBadge, TimeFilterItemComponent], [i7.TranslatePipe]);
+i0.ɵɵsetComponentScope(TimeFilterItemComponent, [i1.NgClass, i1.NgIf, i1.NgStyle, i2.MatIcon, i3$1.MatButton, i5.MatListItem, i5.MatListAvatarCssMatStyler, i9.MatLine, i4.MatTooltip, LayerLegendComponent, i5$1.CollapseDirective, TimeFilterFormComponent], [i1.AsyncPipe, i7.TranslatePipe]);
+i0.ɵɵsetComponentScope(TimeFilterListComponent, [i1.NgForOf, i5$1.ListItemDirective, i5$1.ListComponent, TimeFilterItemComponent], [FilterableDataSourcePipe]);
+i0.ɵɵsetComponentScope(OgcFilterFormComponent, [i1.NgClass, i1.NgForOf, i1.NgIf, i11$1.MatAutocomplete, i11$1.MatAutocompleteTrigger, i9.MatOption, i2.MatIcon, i3$1.MatButton, i12.MatCheckbox, i13.MatFormField, i13.MatSuffix, i14.MatInput, i15.MatSelect, i4.MatTooltip, OgcFilterTimeComponent], [i1.AsyncPipe, i7.TranslatePipe, i5$1.KeyValuePipe]);
+i0.ɵɵsetComponentScope(OgcFilterButtonComponent, [i1.NgIf, i2.MatIcon, i3$1.MatButton, i4.MatTooltip, i5$1.ListItemDirective, i7$1.MatBadge, OgcFilterableItemComponent], [i7.TranslatePipe]);
+i0.ɵɵsetComponentScope(OgcFilterSelectionComponent, [i1.NgForOf, i1.NgIf, i1.NgStyle, i2$2.ɵNgNoValidate, i2$2.DefaultValueAccessor, i2$2.NgControlStatus, i2$2.NgControlStatusGroup, i2$2.NgModel, i2$2.FormGroupDirective, i2$2.FormControlName, i11$1.MatAutocomplete, i11$1.MatAutocompleteTrigger, i9.MatOption, i2.MatIcon, i17.MatRadioGroup, i17.MatRadioButton, i18.MatButtonToggleGroup, i18.MatButtonToggle, i12.MatCheckbox, i13.MatFormField, i14.MatInput, i15.MatSelect, i11.MatDivider, i4.MatTooltip, OgcFilterTimeComponent], [i1.AsyncPipe, i7.TranslatePipe]);
+i0.ɵɵsetComponentScope(OgcFilterableFormComponent, [i1.NgForOf, i1.NgIf, i5$1.ListItemDirective, OgcFilterFormComponent,
     OgcFilterSelectionComponent], []);
-i0.ɵɵsetComponentScope(OgcFilterableItemComponent, [i1$1.NgClass, i1$1.NgIf, i1$1.NgStyle, i2$2.NgControlStatus, i2$2.NgModel, i2.MatIcon, i3.MatButton, i12.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.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]);
+i0.ɵɵsetComponentScope(OgcFilterableItemComponent, [i1.NgClass, i1.NgIf, i1.NgStyle, i2$2.NgControlStatus, i2$2.NgModel, i2.MatIcon, i3$1.MatButton, i12.MatCheckbox, i5.MatListItem, i5.MatListAvatarCssMatStyler, i9.MatLine, i11.MatDivider, i4.MatTooltip, LayerLegendComponent, i5$1.CollapseDirective, OgcFilterableFormComponent], [i1.AsyncPipe, i7.TranslatePipe]);
+i0.ɵɵsetComponentScope(OgcFilterableListComponent, [i1.NgForOf, i1.NgIf, i5$1.ListItemDirective, i5$1.ListComponent, OgcFilterableItemComponent], [i7.TranslatePipe, FilterableDataSourcePipe]);
+i0.ɵɵsetComponentScope(SpatialFilterTypeComponent, [i1.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.NgForOf, i1.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$1.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.MatCheckbox, i23.MatSlideToggle, i13.MatFormField, i13.MatLabel, i14.MatInput, i15.MatSelect, i4.MatTooltip, i5$1.EntityTableComponent, GeometryFormFieldInputComponent], [i1.AsyncPipe, i7.TranslatePipe]);
+i0.ɵɵsetComponentScope(OgcFilterTimeComponent, [i1.NgForOf, i1.NgIf, i2$2.NgControlStatus, i2$2.NgModel, i2$2.FormControlDirective, i9.MatOption, i2.MatIcon, i3$1.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);
@@ -30273,7 +30437,7 @@ ExportButtonComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Expor
         i0.ɵɵtemplate(0, ExportButtonComponent_button_0_Template, 3, 4, "button", 0);
     } if (rf & 2) {
         i0.ɵɵproperty("ngIf", ctx.layerIsExportable());
-    } }, dependencies: [i2.MatIcon, i4.MatTooltip, i1$1.NgIf, i3.MatButton, i7.TranslatePipe], changeDetection: 0 });
+    } }, dependencies: [i2.MatIcon, i4.MatTooltip, i1.NgIf, i3$1.MatButton, i7.TranslatePipe], changeDetection: 0 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ExportButtonComponent, [{
         type: Component,
         args: [{ selector: 'igo-export-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  *ngIf=\"layerIsExportable()\"\n  mat-icon-button\n  tooltip-position=\"below\"\n  matTooltipShowDelay=\"500\"\n  [matTooltip]=\"'igo.geo.download.action' | translate\"\n  [color]=\"color\">\n  <!-- (click)=\"openDownload(layer)\"> -->\n  <mat-icon svgIcon=\"file-export\"></mat-icon>\n</button>\n\n" }]
@@ -30367,14 +30531,14 @@ class ExportService {
         const exportOlFeatures = this.generateFeature(olFeatures, format);
         return this.exportAsync(exportOlFeatures, format, title, encoding, projectionIn, projectionOut);
     }
-    generateFeature(olFeatures, format) {
+    generateFeature(olFeatures, format, excludePrefix = '_') {
         if (format === ExportFormat.GPX && this.aggregateInComment) {
             return this.generateAggregatedFeature(olFeatures);
         }
         return olFeatures.map((olFeature) => {
             const keys = olFeature
                 .getKeys()
-                .filter((key) => !key.startsWith('_'));
+                .filter((key) => !key.startsWith(excludePrefix));
             const properties = keys.reduce((acc, key) => {
                 acc[key] = olFeature.get(key);
                 return acc;
@@ -31001,14 +31165,14 @@ ImportService.allowedZipMimeTypes = [
     'application/x-zip'
 ];
 ImportService.allowedExtensions = ['geojson', 'kml', 'gpx', 'json', 'gml', 'zip'];
-ImportService.ɵfac = function ImportService_Factory(t) { return new (t || ImportService)(i0.ɵɵinject(i1$2.HttpClient), i0.ɵɵinject(i2$1.ConfigService)); };
+ImportService.ɵfac = function ImportService_Factory(t) { return new (t || ImportService)(i0.ɵɵinject(i1$1.HttpClient), i0.ɵɵinject(i2$1.ConfigService)); };
 ImportService.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: ImportService, factory: ImportService.ɵfac, providedIn: 'root' });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ImportService, [{
         type: Injectable,
         args: [{
                 providedIn: 'root'
             }]
-    }], function () { return [{ type: i1$2.HttpClient }, { type: i2$1.ConfigService }]; }, null); })();
+    }], function () { return [{ type: i1$1.HttpClient }, { type: i2$1.ConfigService }]; }, null); })();
 
 class StyleListService {
     constructor(injector) {
@@ -31133,7 +31297,7 @@ function ImportExportComponent_form_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(2);
     i0.ɵɵstyleProp("display", "none");
 } }
-const _c0$4 = function (a0) { return { size: a0 }; };
+const _c0$5 = function (a0) { return { size: a0 }; };
 function ImportExportComponent_section_9_div_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div")(1, "h4");
     i0.ɵɵtext(2);
@@ -31156,7 +31320,7 @@ function ImportExportComponent_section_9_div_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(3, 4, "igo.geo.importExportForm.importClarifications"));
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(7, 6, "igo.geo.importExportForm.importSizeMax", i0.ɵɵpureFunction1(13, _c0$4, ctx_r17.fileSizeMb)));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(7, 6, "igo.geo.importExportForm.importSizeMax", i0.ɵɵpureFunction1(13, _c0$5, ctx_r17.fileSizeMb)));
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(10, 9, "igo.geo.importExportForm.importFormatAuthorized"));
     i0.ɵɵadvance(3);
@@ -32220,7 +32384,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, 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}"] });
+    } }, dependencies: [i4.MatTooltip, i2$2.ɵNgNoValidate, i2$2.DefaultValueAccessor, i2$2.NgControlStatus, i2$2.NgControlStatusGroup, i2$2.FormGroupDirective, i2$2.FormControlName, i1.NgClass, i1.NgForOf, i1.NgIf, i3$1.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.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\">\n  <mat-button-toggle-group\n        [value]=\"selectedMode\"\n        (change)=\"onImportExportChange($event)\">\n        <mat-button-toggle [value]=\"'import'\">\n          {{'igo.geo.importExportForm.importTabTitle' | translate}}\n        </mat-button-toggle>\n        <mat-button-toggle [value]=\"'export'\">\n          {{'igo.geo.importExportForm.exportTabTitle' | translate}}\n        </mat-button-toggle>\n  </mat-button-toggle-group>\n</div>\n\n<form class=\"igo-form\" [formGroup]=\"importForm\" *ngIf=\"selectedMode === 'import'\">\n  <div class=\"igo-input-container\">\n    <mat-form-field>\n      <mat-label>{{'igo.geo.importExportForm.importProjPlaceholder' | translate}}</mat-label>\n      <mat-select\n        [(value)]=\"inputProj\">\n        <mat-option\n          *ngFor=\"let projection of (projections$ | async)\"\n          [value]=\"projection\"\n          (click)=\"$event.stopPropagation()\">\n          <p mat-line *ngIf=\"projection.translateKey\">{{('igo.geo.importExportForm.projections.' + projection.translateKey) | translate: projection}}</p>\n          <p mat-line *ngIf=\"!projection.translateKey\">{{projection.alias}}</p>\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n\n  <div\n    tooltip-position=\"below\"\n    matTooltipShowDelay=\"500\"\n    [matTooltip]=\"importForm.invalid ? ('igo.geo.importExportForm.projections.choose' | translate) : ('igo.geo.importExportForm.importButton' | translate)\"\n    class=\"igo-form-button-group\">\n    <button\n      [disabled]=\"importForm.invalid || (loading$ | async)\"\n      mat-raised-button\n      type=\"button\"\n      (click)=\"fileInput.click()\">\n        {{'igo.geo.importExportForm.importButton' | translate}}\n    </button>\n    <igo-spinner [shown]=\"loading$ | async\"></igo-spinner>\n    <input\n      hidden\n      #fileInput\n      type=\"file\"\n      [style.display]=\"'none'\"\n      (click)=\"fileInput.value = null\"\n      (change)=\"importFiles($event.target.files)\">\n  </div>\n</form>\n<section class=\"mat-typography\" *ngIf=\"selectedMode === 'import'\">\n  <div *ngIf=\"importHtmlClarifications === ''\">\n    <h4>{{'igo.geo.importExportForm.importClarifications' | translate}}</h4>\n    <ul>\n      <li>{{'igo.geo.importExportForm.importSizeMax' | translate: {size: fileSizeMb} }}</li>\n      <li>{{'igo.geo.importExportForm.importFormatAuthorized' | translate}}</li>\n      <li>{{'igo.geo.importExportForm.importShpZip' | translate}}</li>\n    </ul>\n  </div>\n  <igo-custom-html *ngIf=\"importHtmlClarifications !== ''\" class=\"mat-typography\"\n    [html]=\"importHtmlClarifications\">\n  </igo-custom-html>\n</section>\n\n<section class=\"mat-typography\" *ngIf=\"(exportableLayers$ | async).length === 0 && selectedMode === 'export'\">\n  <h4>{{'igo.geo.importExportForm.exportNoLayersExportable' | translate}}</h4>\n</section>\n\n<form class=\"igo-form\" [formGroup]=\"form\" *ngIf=\"(exportableLayers$ | async).length > 0 && selectedMode === 'export'\">\n  <div class=\"igo-input-container\">\n    <mat-form-field>\n      <mat-label>{{'igo.geo.importExportForm.exportLayerPlaceholder' | translate}}</mat-label>\n      <mat-select\n        [(value)]=\"layers\" multiple>\n        <mat-select-trigger>\n          {{layers.length ? getLayerTitleById(layers[0]) : ''}}\n          <span *ngIf=\"layers.length > 1\" class=\"export-select-trigger\">\n            (+{{layers.length - 1}} {{(layers?.length === 2 ? 'igo.geo.importExportForm.other' : 'igo.geo.importExportForm.others') | translate }})\n          </span>\n        </mat-select-trigger>\n        <mat-option\n          *ngFor=\"let layer of (exportableLayers$ | async)\"\n          [ngClass]=\"{'igo-export-layer-mat-option': layerHasSelectedFeatures(layer)}\"\n          [value]=\"layer.id\"\n          (click)=\"$event.stopPropagation()\">\n          <p mat-line>{{layer.title}}</p>\n          <p mat-line>\n            <mat-slide-toggle *ngIf=\"layerHasSelectedFeatures(layer)\"\n              [labelPosition]=\"'after'\"\n              (click)=\"onlySelectedClick($event,layer.id)\"\n              (checked)=\"inLayersIdToExportSelectionOnly(layer)\"\n              (change)=\"onlySelected($event,layer.id)\">\n              <small>{{'igo.geo.importExportForm.exportSelectedFeature' | translate}}</small>\n            </mat-slide-toggle>\n          </p>\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n\n  <div class=\"igo-input-container\">\n    <mat-form-field>\n      <mat-label>{{'igo.geo.importExportForm.exportFormatPlaceholder' | translate}}</mat-label>\n      <mat-select\n        formControlName=\"format\">\n        <ng-container *ngIf=\"(formats$ | async).length !== 0\">\n          <mat-option *ngFor=\"let format of (formats$ | async) | keyvalue\" [value]=\"format.key\">\n            {{'igo.geo.export.format.' + format.value | translate}}\n          </mat-option>\n        </ng-container>\n        <mat-option *ngIf=\"(formats$ | async).length === 0\" disabled=\"true\">\n          {{'igo.geo.export.noFormat.title' | translate}}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n\n  <div class=\"igo-input-container\" *ngIf=\"forceNaming && form.value.format !== 'URL'\">\n    <mat-form-field>\n        <input matInput formControlName=\"name\" placeholder=\"{{'igo.geo.importExportForm.exportFileNamePlaceholder' | translate}}\">\n    </mat-form-field>\n  </div>\n\n  <div class=\"igo-input-container\" *ngIf=\"form.value.format === 'CSVcomma' || form.value.format === 'CSVsemicolon'\">\n    <mat-form-field>\n      <mat-label>{{'igo.geo.importExportForm.encodingPlaceholder' | translate}}</mat-label>\n      <mat-select\n        formControlName=\"encoding\">\n        <ng-container *ngIf=\"(encodings$ | async).length !== 0\">\n          <mat-option *ngFor=\"let encoding of (encodings$ | async) | keyvalue\" [value]=\"encoding.key\">\n            {{'igo.geo.export.encoding.' + encoding.value | translate}}\n          </mat-option>\n        </ng-container>\n      </mat-select>\n    </mat-form-field>\n  </div>\n\n  <div class=\"export-combine-layers mat-typography\" *ngIf=\"layers.length > 1 && (form.value.format === 'CSVcomma' || form.value.format === 'CSVsemicolon')\">\n    <mat-slide-toggle\n        formControlName=\"combineLayers\"\n        [labelPosition]=\"'before'\">\n          {{'igo.geo.importExportForm.exportCombineResults' | translate}}\n    </mat-slide-toggle>\n  </div>\n\n  <div class=\"export-separator mat-typography\" *ngIf=\"layers.length > 1 && (form.value.format === 'CSVcomma' || form.value.format === 'CSVsemicolon') && form.value.combineLayers\">\n    <mat-slide-toggle\n        formControlName=\"separator\"\n        [labelPosition]=\"'before'\">\n          {{'igo.geo.importExportForm.exportSeparator' | translate}}\n    </mat-slide-toggle>\n  </div>\n\n  <div class=\"export-options mat-typography\" *ngIf=\"form.value.format !== 'URL'\">\n    <mat-slide-toggle\n        formControlName=\"featureInMapExtent\"\n        [labelPosition]=\"'before'\">\n          {{'igo.geo.importExportForm.exportFeatureInExtent' | translate}}\n    </mat-slide-toggle>\n  </div>\n\n  <div class=\"igo-form-button-group\">\n    <button\n      mat-raised-button\n      type=\"button\"\n      [disabled]=\"!form.valid || (loading$ | async)\"\n      (click)=\"handleExportFormSubmit(form.value)\">\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))}}\n    </button>\n    <igo-spinner [shown]=\"loading$ | async\"></igo-spinner>\n  </div>\n\n  <igo-custom-html *ngIf=\"exportHtmlClarifications !== ''\" class=\"mat-typography\"\n    [html]=\"exportHtmlClarifications\">\n  </igo-custom-html>\n\n</form>\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"] }]
@@ -32575,8 +32739,8 @@ IgoMapModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [CommonModul
         SwipeControlComponent,
         MapCenterComponent,
         MenuButtonComponent] }); })();
-i0.ɵɵsetComponentScope(BaseLayersSwitcherComponent, [i1$1.NgClass, i1$1.NgForOf, i1$1.NgIf, i2.MatIcon, i3.MatButton, i4.MatTooltip, MiniBaseMapComponent], [i7.TranslatePipe]);
-i0.ɵɵsetComponentScope(MiniBaseMapComponent, [i1$1.NgIf, MapBrowserComponent], []);
+i0.ɵɵsetComponentScope(BaseLayersSwitcherComponent, [i1.NgClass, i1.NgForOf, i1.NgIf, i2.MatIcon, i3$1.MatButton, i4.MatTooltip, MiniBaseMapComponent], [i7.TranslatePipe]);
+i0.ɵɵsetComponentScope(MiniBaseMapComponent, [i1.NgIf, MapBrowserComponent], []);
 
 function MeasurerItemComponent_mat_option_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "mat-option", 5);
@@ -32688,7 +32852,7 @@ MeasurerItemComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Measu
         i0.ɵɵproperty("value", ctx.measureUnit)("disabled", ctx.auto);
         i0.ɵɵadvance(1);
         i0.ɵɵproperty("ngForOf", ctx.measureUnits);
-    } }, dependencies: [i1$1.NgForOf, i13.MatFormField, i13.MatLabel, i14.MatInput, i15.MatSelect, i9.MatOption, i1$1.AsyncPipe, i7.TranslatePipe, MeasureFormatPipe], styles: ["[_nghost-%COMP%]{display:flex;width:100%;padding:5px 10px}.measure-field[_ngcontent-%COMP%]{pointer-events:none;display:flex;flex-flow:column nowrap;width:100%}.unit-field[_ngcontent-%COMP%]{width:50px;margin-left:10px;margin-top:10px}"], changeDetection: 0 });
+    } }, dependencies: [i1.NgForOf, i13.MatFormField, i13.MatLabel, i14.MatInput, i15.MatSelect, i9.MatOption, i1.AsyncPipe, i7.TranslatePipe, MeasureFormatPipe], styles: ["[_nghost-%COMP%]{display:flex;width:100%;padding:5px 10px}.measure-field[_ngcontent-%COMP%]{pointer-events:none;display:flex;flex-flow:column nowrap;width:100%}.unit-field[_ngcontent-%COMP%]{width:50px;margin-left:10px;margin-top:10px}"], changeDetection: 0 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MeasurerItemComponent, [{
         type: Component,
         args: [{ selector: 'igo-measurer-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-form-field\n  class=\"measure-field\"\n  appearance=\"outline\"\n  floatLabel=\"always\">\n  <mat-label>{{placeholder}}</mat-label>\n  <input\n    matInput\n    [readonly]=\"true\"\n    [value]=\"((measure$ | async) || 0) | measureFormat: measureUnit\">\n</mat-form-field>\n<mat-form-field class=\"unit-field\">\n  <mat-select\n    [value]=\"measureUnit\"\n    [disabled]=\"auto\"\n    (selectionChange)=\"onMeasureUnitChange($event.value)\">\n    <mat-option *ngFor=\"let measureUnit of measureUnits\" [value]=\"measureUnit\">\n      {{('igo.geo.measure.' + measureUnit) | translate}}\n    </mat-option>\n  </mat-select>\n</mat-form-field>\n", styles: [":host{display:flex;width:100%;padding:5px 10px}.measure-field{pointer-events:none;display:flex;flex-flow:column nowrap;width:100%}.unit-field{width:50px;margin-left:10px;margin-top:10px}\n"] }]
@@ -32770,8 +32934,8 @@ 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, i23.MatSlideToggle, i11.MatDivider, i5$1.EntityTableComponent, MeasurerItemComponent], [i1$1.AsyncPipe, i7.TranslatePipe]);
-i0.ɵɵsetComponentScope(MeasurerDialogComponent, [i1$1.NgIf], [i7.TranslatePipe, MeasureFormatPipe]);
+i0.ɵɵsetComponentScope(MeasurerComponent, [i1.NgIf, i3$1.MatButton, i18.MatButtonToggleGroup, i18.MatButtonToggle, i2.MatIcon, i4.MatTooltip, i23.MatSlideToggle, i11.MatDivider, i5$1.EntityTableComponent, MeasurerItemComponent], [i1.AsyncPipe, i7.TranslatePipe]);
+i0.ɵɵsetComponentScope(MeasurerDialogComponent, [i1.NgIf], [i7.TranslatePipe, MeasureFormatPipe]);
 
 class IgoMeasureModule {
 }
@@ -33435,12 +33599,12 @@ class PrintService {
      * @param  doZipFile - Indicate if we do a zip with the file
      * @return Image file of the map with extension format given as parameter
      */
-    downloadMapImage(map, resolution, format = 'png', projection = false, scale = false, legend = false, title = '', subtitle = '', comment = '', doZipFile = true) {
+    downloadMapImage(map, resolution, format = 'png', projection = false, scale = false, title = '', subtitle = '', comment = '', doZipFile = true, legendPosition) {
         const status$ = new Subject();
         // const resolution = map.ol.getView().getResolution();
         this.activityId = this.activityService.register();
         const translate = this.languageService.translate;
-        map.ol.once('rendercomplete', (event) => {
+        map.ol.once('rendercomplete', async (event) => {
             format = format.toLowerCase();
             const oldCanvas = event.target
                 .getViewport()
@@ -33449,8 +33613,6 @@ class PrintService {
             const newContext = newCanvas.getContext('2d');
             // Postion in height to set the canvas in new canvas
             let positionHCanvas = 0;
-            // Position in width to set the Proj/Scale in new canvas
-            let positionWProjScale = 10;
             // Get height/width of map canvas
             const width = oldCanvas.width;
             let height = oldCanvas.height;
@@ -33472,11 +33634,19 @@ class PrintService {
             // Set the new canvas with the new calculated size
             newCanvas.width = width;
             newCanvas.height = height;
-            // Patch Jpeg default black background to white
-            if (format === 'jpeg') {
-                newContext.fillStyle = '#ffffff';
-                newContext.fillRect(0, 0, width, height);
-                newContext.fillStyle = '#000000';
+            if (['bmp', 'gif', 'jpeg', 'png', 'tiff'].indexOf(format) > -1) {
+                // Patch Jpeg default black background to white
+                if (format === 'jpeg') {
+                    newContext.fillStyle = '#ffffff';
+                    newContext.fillRect(0, 0, width, height);
+                    newContext.fillStyle = '#000000';
+                }
+                else if (title !== '' || subtitle !== '' || comment !== '' ||
+                    projection !== false || scale !== false) {
+                    newContext.fillStyle = '#ffffff';
+                    newContext.fillRect(0, 0, width, height);
+                    newContext.fillStyle = '#000000';
+                }
             }
             // If a title need to be added to canvas
             if (title !== '') {
@@ -33497,19 +33667,20 @@ class PrintService {
             }
             // Set font for next section
             newContext.font = '20px Calibri';
-            // If projection need to be added to canvas
-            if (projection !== false) {
-                const projText = translate.instant('igo.geo.printForm.projection');
-                newContext.textAlign = 'start';
-                newContext.fillText(projText + ': ' + map.projection, positionWProjScale, positionHProjScale);
-                positionWProjScale += 200; // Width position change for scale position
-            }
-            // If scale need to be added to canvas
-            if (scale !== false) {
-                const scaleText = translate.instant('igo.geo.printForm.scale');
-                const mapScale = map.viewController.getScale(resolution);
-                newContext.textAlign = 'start';
-                newContext.fillText(scaleText + ': ~ 1 / ' + formatScale(mapScale), positionWProjScale, positionHProjScale);
+            // If projection or/end scale need to be added to canvas
+            if ((projection !== false) || (scale !== false)) {
+                let projectionScaleText = '';
+                if (projection !== false) {
+                    const projText = translate.instant('igo.geo.printForm.projection');
+                    projectionScaleText = projText + ': ' + map.projection + '         ';
+                }
+                if (scale !== false) {
+                    const scaleText = translate.instant('igo.geo.printForm.scale');
+                    const mapScale = map.viewController.getScale(resolution);
+                    projectionScaleText += scaleText + ': ~ 1 / ' + formatScale(mapScale);
+                }
+                newContext.textAlign = 'center';
+                newContext.fillText(projectionScaleText, width / 2, positionHProjScale, width * 0.9);
             }
             // If a comment need to be added to canvas
             if (comment !== '') {
@@ -33547,6 +33718,12 @@ class PrintService {
             }
             // Add map to new canvas
             newContext.drawImage(oldCanvas, 0, positionHCanvas);
+            // Check the legendPosition
+            if (legendPosition !== 'none') {
+                if (['topleft', 'topright', 'bottomleft', 'bottomright'].indexOf(legendPosition) > -1) {
+                    await this.addLegendToImage(newCanvas, map, resolution, legendPosition, format);
+                }
+            }
             let status = SubjectStatus.Done;
             let fileNameWithExt = 'map.' + format;
             if (format.toLowerCase() === 'tiff') {
@@ -33590,6 +33767,66 @@ class PrintService {
         map.ol.renderSync();
         return status$;
     }
+    /**
+     * Create and Add Legend to the map canvas
+     * @param  canvas Canvas of the map
+     * @param  map Map of the app
+     * @param  resolution Resolution of map
+     * @param  legendPosition Legend position
+     * @param  format Image format
+     */
+    async addLegendToImage(canvas, map, resolution, legendPosition, format) {
+        const fileNameWithExt = 'map.' + format;
+        const context = canvas.getContext('2d');
+        // Get html code for the legend
+        const html = await this.getLayersLegendHtml(map, canvas.width, resolution).toPromise();
+        // If no legend, save the map directly
+        if (html === '') {
+            await this.saveCanvasImageAsFile(canvas, fileNameWithExt, format);
+            return true;
+        }
+        // Create div to contain html code for legend
+        const div = window.document.createElement('div');
+        div.style.position = 'absolute';
+        div.style.top = '0';
+        // Add html code to convert in the new window
+        window.document.body.appendChild(div);
+        div.innerHTML = html;
+        await this.timeout(1);
+        const canvasLegend = await html2canvas(div, { useCORS: true }).catch((e) => {
+            console.log(e);
+        });
+        if (canvasLegend) {
+            const canvasHeight = canvas.height;
+            const canvasWidth = canvas.width;
+            const legendHeight = canvasLegend.height;
+            const legendWidth = canvasLegend.width;
+            // Move the legend to the correct position on the page
+            const offset = canvasHeight * 0.01;
+            let legendX;
+            let legendY;
+            if (legendPosition === 'bottomright') {
+                legendX = canvasWidth - legendWidth - offset;
+                legendY = canvasHeight - legendHeight - offset;
+            }
+            else if (legendPosition === 'topright') {
+                legendX = canvasWidth - legendWidth - offset;
+                legendY = offset;
+            }
+            else if (legendPosition === 'bottomleft') {
+                legendX = offset;
+                legendY = canvasHeight - legendHeight - offset;
+            }
+            else if (legendPosition === 'topleft') {
+                legendX = offset;
+                legendY = offset;
+            }
+            context.drawImage(canvasLegend, legendX, legendY, legendWidth, legendHeight);
+            context.strokeRect(legendX, legendY, legendWidth, legendHeight);
+            div.parentNode.removeChild(div); // remove temp div (IE style)
+            return true;
+        }
+    }
     renderMap(map, size, extent) {
         map.ol.updateSize();
         map.ol.renderSync();
@@ -33764,14 +34001,14 @@ class PrintService {
         return n * k;
     }
 }
-PrintService.ɵfac = function PrintService_Factory(t) { return new (t || PrintService)(i0.ɵɵinject(i1$2.HttpClient), i0.ɵɵinject(i2$1.MessageService), i0.ɵɵinject(i2$1.ActivityService), i0.ɵɵinject(i2$1.LanguageService), i0.ɵɵinject(i2$1.ConfigService)); };
+PrintService.ɵfac = function PrintService_Factory(t) { return new (t || PrintService)(i0.ɵɵinject(i1$1.HttpClient), i0.ɵɵinject(i2$1.MessageService), i0.ɵɵinject(i2$1.ActivityService), i0.ɵɵinject(i2$1.LanguageService), i0.ɵɵinject(i2$1.ConfigService)); };
 PrintService.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: PrintService, factory: PrintService.ɵfac, providedIn: 'root' });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrintService, [{
         type: Injectable,
         args: [{
                 providedIn: 'root'
             }]
-    }], function () { return [{ type: i1$2.HttpClient }, { type: i2$1.MessageService }, { type: i2$1.ActivityService }, { type: i2$1.LanguageService }, { type: i2$1.ConfigService }]; }, null); })();
+    }], function () { return [{ type: i1$1.HttpClient }, { type: i2$1.MessageService }, { type: i2$1.ActivityService }, { type: i2$1.LanguageService }, { type: i2$1.ConfigService }]; }, null); })();
 
 const PrintOutputFormat = strEnum(['Pdf', 'Image']);
 const PrintPaperFormat = strEnum([
@@ -33802,26 +34039,49 @@ const PrintLegendPosition = strEnum([
     'newpage'
 ]);
 
-function PrintFormComponent_mat_option_28_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "mat-option", 19);
+function PrintFormComponent_mat_option_28_ng_container_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainerStart(0);
     i0.ɵɵtext(1);
     i0.ɵɵpipe(2, "translate");
+    i0.ɵɵelementContainerEnd();
+} if (rf & 2) {
+    const legendPosition_r6 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance(1);
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(2, 1, "igo.geo.printForm.legendPositions." + legendPosition_r6.value), " ");
+} }
+function PrintFormComponent_mat_option_28_ng_container_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainerStart(0);
+    i0.ɵɵtext(1);
+    i0.ɵɵpipe(2, "translate");
+    i0.ɵɵelementContainerEnd();
+} if (rf & 2) {
+    const ctx_r8 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(1);
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(2, 1, ctx_r8.outputFormat === "Pdf" ? "igo.geo.printForm.legendPositions.newpage" : "igo.geo.printForm.legendPositions.newimage"), " ");
+} }
+const _c0$4 = function () { return ["newpage", "newimage"]; };
+function PrintFormComponent_mat_option_28_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "mat-option", 19);
+    i0.ɵɵtemplate(1, PrintFormComponent_mat_option_28_ng_container_1_Template, 3, 3, "ng-container", 20);
+    i0.ɵɵtemplate(2, PrintFormComponent_mat_option_28_ng_container_2_Template, 3, 3, "ng-container", 20);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const legendPosition_r6 = ctx.$implicit;
     i0.ɵɵproperty("value", legendPosition_r6.key);
     i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(2, 2, "igo.geo.printForm.legendPositions." + legendPosition_r6.value), " ");
+    i0.ɵɵproperty("ngIf", !i0.ɵɵpureFunction0(3, _c0$4).includes(legendPosition_r6.value));
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("ngIf", i0.ɵɵpureFunction0(4, _c0$4).includes(legendPosition_r6.value));
 } }
 function PrintFormComponent_mat_option_34_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "mat-option", 19);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const outputFormat_r7 = ctx.$implicit;
-    i0.ɵɵproperty("value", outputFormat_r7.key);
+    const outputFormat_r10 = ctx.$implicit;
+    i0.ɵɵproperty("value", outputFormat_r10.key);
     i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate1(" ", outputFormat_r7.value, " ");
+    i0.ɵɵtextInterpolate1(" ", outputFormat_r10.value, " ");
 } }
 function PrintFormComponent_mat_option_40_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "mat-option", 19);
@@ -33829,30 +34089,30 @@ function PrintFormComponent_mat_option_40_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵpipe(2, "translate");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const paperFormat_r8 = ctx.$implicit;
-    i0.ɵɵproperty("value", paperFormat_r8.key);
+    const paperFormat_r11 = ctx.$implicit;
+    i0.ɵɵproperty("value", paperFormat_r11.key);
     i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(2, 2, "igo.geo.printForm.paperFormats." + paperFormat_r8.value), " ");
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(2, 2, "igo.geo.printForm.paperFormats." + paperFormat_r11.value), " ");
 } }
 function PrintFormComponent_mat_option_46_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "mat-option", 19);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const imageFormat_r9 = ctx.$implicit;
-    i0.ɵɵproperty("value", imageFormat_r9.key);
+    const imageFormat_r12 = ctx.$implicit;
+    i0.ɵɵproperty("value", imageFormat_r12.key);
     i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate1(" ", imageFormat_r9.value, " ");
+    i0.ɵɵtextInterpolate1(" ", imageFormat_r12.value, " ");
 } }
 function PrintFormComponent_mat_option_52_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "mat-option", 19);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const resolution_r10 = ctx.$implicit;
-    i0.ɵɵproperty("value", resolution_r10.key);
+    const resolution_r13 = ctx.$implicit;
+    i0.ɵɵproperty("value", resolution_r13.key);
     i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate1(" ", resolution_r10.value + " PPI", " ");
+    i0.ɵɵtextInterpolate1(" ", resolution_r13.value + " PPI", " ");
 } }
 function PrintFormComponent_mat_option_58_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "mat-option", 19);
@@ -33860,10 +34120,10 @@ function PrintFormComponent_mat_option_58_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵpipe(2, "translate");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const orientation_r11 = ctx.$implicit;
-    i0.ɵɵproperty("value", orientation_r11.key);
+    const orientation_r14 = ctx.$implicit;
+    i0.ɵɵproperty("value", orientation_r14.key);
     i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(2, 2, "igo.geo.printForm." + orientation_r11.value), " ");
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(2, 2, "igo.geo.printForm." + orientation_r14.value), " ");
 } }
 class PrintFormComponent {
     constructor(formBuilder) {
@@ -34040,7 +34300,7 @@ class PrintFormComponent {
     }
 }
 PrintFormComponent.ɵfac = function PrintFormComponent_Factory(t) { return new (t || PrintFormComponent)(i0.ɵɵdirectiveInject(i2$2.UntypedFormBuilder)); };
-PrintFormComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrintFormComponent, selectors: [["igo-print-form"]], inputs: { disabled$: "disabled$", imageFormat: "imageFormat", outputFormat: "outputFormat", paperFormat: "paperFormat", orientation: "orientation", resolution: "resolution", legendPosition: "legendPosition", title: "title", subtitle: "subtitle", comment: "comment", showProjection: "showProjection", showScale: "showScale", showLegend: "showLegend", doZipFile: "doZipFile" }, outputs: { submit: "submit" }, decls: 65, vars: 72, consts: [[1, "igo-form", 3, "formGroup"], [1, "igo-input-container"], ["matInput", "", "formControlName", "title", 3, "placeholder"], ["matInput", "", "formControlName", "subtitle", 3, "placeholder"], ["matInput", "", "formControlName", "comment", 3, "placeholder"], [1, "print-slide-toggle-container", "mat-typography"], ["formControlName", "showProjection", 1, "print-option", 3, "labelPosition"], ["formControlName", "showScale", 1, "print-option", 3, "labelPosition"], ["formControlName", "doZipFile", 1, "print-option", 3, "labelPosition"], ["formControlName", "legendPosition", 3, "placeholder"], [3, "value", 4, "ngFor", "ngForOf"], ["formControlName", "outputFormat", 3, "placeholder", "selectionChange"], ["formControlName", "paperFormat", 3, "placeholder"], ["formControlName", "imageFormat", 3, "placeholder"], [1, "igo-input-container", 2, "display", "none"], ["formControlName", "resolution", 3, "placeholder"], ["formControlName", "orientation", 3, "placeholder"], [1, "igo-form-button-group", "print-button-top-padding"], ["mat-raised-button", "", "type", "button", 3, "disabled", "click"], [3, "value"]], template: function PrintFormComponent_Template(rf, ctx) { if (rf & 1) {
+PrintFormComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrintFormComponent, selectors: [["igo-print-form"]], inputs: { disabled$: "disabled$", imageFormat: "imageFormat", outputFormat: "outputFormat", paperFormat: "paperFormat", orientation: "orientation", resolution: "resolution", legendPosition: "legendPosition", title: "title", subtitle: "subtitle", comment: "comment", showProjection: "showProjection", showScale: "showScale", showLegend: "showLegend", doZipFile: "doZipFile" }, outputs: { submit: "submit" }, decls: 65, vars: 72, consts: [[1, "igo-form", 3, "formGroup"], [1, "igo-input-container"], ["matInput", "", "formControlName", "title", 3, "placeholder"], ["matInput", "", "formControlName", "subtitle", 3, "placeholder"], ["matInput", "", "formControlName", "comment", 3, "placeholder"], [1, "print-slide-toggle-container", "mat-typography"], ["formControlName", "showProjection", 1, "print-option", 3, "labelPosition"], ["formControlName", "showScale", 1, "print-option", 3, "labelPosition"], ["formControlName", "doZipFile", 1, "print-option", 3, "labelPosition"], ["formControlName", "legendPosition", 3, "placeholder"], [3, "value", 4, "ngFor", "ngForOf"], ["formControlName", "outputFormat", 3, "placeholder", "selectionChange"], ["formControlName", "paperFormat", 3, "placeholder"], ["formControlName", "imageFormat", 3, "placeholder"], [1, "igo-input-container", 2, "display", "none"], ["formControlName", "resolution", 3, "placeholder"], ["formControlName", "orientation", 3, "placeholder"], [1, "igo-form-button-group", "print-button-top-padding"], ["mat-raised-button", "", "type", "button", 3, "disabled", "click"], [3, "value"], [4, "ngIf"]], template: function PrintFormComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵelementStart(0, "form", 0)(1, "div", 1)(2, "mat-form-field");
         i0.ɵɵelement(3, "input", 2);
         i0.ɵɵpipe(4, "translate");
@@ -34067,7 +34327,7 @@ PrintFormComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrintFor
         i0.ɵɵelementEnd()()();
         i0.ɵɵelementStart(24, "div", 1)(25, "mat-form-field")(26, "mat-select", 9);
         i0.ɵɵpipe(27, "translate");
-        i0.ɵɵtemplate(28, PrintFormComponent_mat_option_28_Template, 3, 4, "mat-option", 10);
+        i0.ɵɵtemplate(28, PrintFormComponent_mat_option_28_Template, 3, 5, "mat-option", 10);
         i0.ɵɵpipe(29, "keyvalue");
         i0.ɵɵelementEnd()()();
         i0.ɵɵelementStart(30, "div", 1)(31, "mat-form-field")(32, "mat-select", 11);
@@ -34157,10 +34417,10 @@ 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, 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}"] });
+    } }, dependencies: [i1.NgForOf, i1.NgIf, i2$2.ɵNgNoValidate, i2$2.DefaultValueAccessor, i2$2.NgControlStatus, i2$2.NgControlStatusGroup, i2$2.FormGroupDirective, i2$2.FormControlName, i3$1.MatButton, i13.MatFormField, i15.MatSelect, i9.MatOption, i14.MatInput, i23.MatSlideToggle, i1.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\">\n  <div class=\"igo-input-container\">\n    <mat-form-field>\n      <input\n        matInput\n        formControlName=\"title\"\n        placeholder=\"{{'igo.geo.printForm.title' | translate}}\">\n    </mat-form-field>\n  </div>\n  <div class=\"igo-input-container\">\n    <mat-form-field>\n      <input\n        matInput\n        formControlName=\"subtitle\"\n        placeholder=\"{{'igo.geo.printForm.subtitle' | translate}}\">\n    </mat-form-field>\n  </div>\n  <div class=\"igo-input-container\">\n    <mat-form-field>\n      <input\n        matInput\n        formControlName=\"comment\"\n        placeholder=\"{{'igo.geo.printForm.comment' | translate}}\">\n    </mat-form-field>\n  </div>\n\n  <div class=\"igo-input-container\">\n    <div class=\"print-slide-toggle-container mat-typography\">\n      <mat-slide-toggle\n        class=\"print-option\"\n        formControlName=\"showProjection\"\n        [labelPosition]=\"'before'\">\n        {{'igo.geo.printForm.showProjection' | translate}}\n      </mat-slide-toggle>\n      <mat-slide-toggle\n        class=\"print-option\"\n        formControlName=\"showScale\"\n        [labelPosition]=\"'before'\">\n        {{'igo.geo.printForm.showScale' | translate}}\n      </mat-slide-toggle>\n      <mat-slide-toggle\n        class=\"print-option\"\n        formControlName=\"doZipFile\"\n        [labelPosition]=\"'before'\"\n        [style.display]=\"isPrintService ? 'none' : ''\">\n        {{'igo.geo.printForm.doZipFile' | translate}}\n      </mat-slide-toggle>\n    </div>\n  </div>\n\n  <div class=\"igo-input-container\">\n    <mat-form-field>\n      <mat-select\n        formControlName=\"legendPosition\"\n        placeholder=\"{{'igo.geo.printForm.legendPosition' | translate}}\">\n        <mat-option *ngFor=\"let legendPosition of legendPositions | keyvalue \" [value]=\"legendPosition.key\">\n            {{'igo.geo.printForm.legendPositions.' + legendPosition.value | translate}}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n\n  <div class=\"igo-input-container\">\n    <mat-form-field>\n      <mat-select (selectionChange)=\"toggleImageSaveProp()\"\n        formControlName=\"outputFormat\"\n        placeholder=\"{{'igo.geo.printForm.outputFormat' | translate}}\">\n        <mat-option *ngFor=\"let outputFormat of outputFormats | keyvalue \" [value]=\"outputFormat.key\">\n            {{outputFormat.value}}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n\n  <div class=\"igo-input-container\" [style.display]=\"isPrintService ? 'block' : 'none'\">\n    <mat-form-field>\n      <mat-select\n        formControlName=\"paperFormat\"\n        placeholder=\"{{'igo.geo.printForm.paperFormat' | translate}}\">\n        <mat-option *ngFor=\"let paperFormat of paperFormats | keyvalue \" [value]=\"paperFormat.key\">\n          {{('igo.geo.printForm.paperFormats.' + paperFormat.value) | translate}}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n\n  <div class=\"igo-input-container\" [style.display]=\"isPrintService ? 'none' : 'block'\">\n    <mat-form-field>\n      <mat-select\n        formControlName=\"imageFormat\"\n        placeholder=\"{{'igo.geo.printForm.imageFormat' | translate}}\">\n        <mat-option *ngFor=\"let imageFormat of imageFormats | keyvalue \" [value]=\"imageFormat.key\">\n          {{imageFormat.value}}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n\n  <div class=\"igo-input-container\" style=\"display: none;\">\n    <mat-form-field>\n      <mat-select\n        formControlName=\"resolution\"\n        placeholder=\"{{'igo.geo.printForm.resolution' | translate}}\">\n        <mat-option *ngFor=\"let resolution of resolutions | keyvalue \" [value]=\"resolution.key\">\n          {{resolution.value + ' PPI'}}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n\n  <div class=\"igo-input-container\" [style.display]=\"isPrintService ? 'block' : 'none'\">\n    <mat-form-field>\n      <mat-select\n        formControlName=\"orientation\"\n        placeholder=\"{{'igo.geo.printForm.orientation' | translate}}\">\n        <mat-option *ngFor=\"let orientation of orientations | keyvalue \" [value]=\"orientation.key\">\n          {{('igo.geo.printForm.' + orientation.value) | translate}}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n\n  <div class=\"igo-form-button-group print-button-top-padding\">\n    <button\n      mat-raised-button\n      type=\"button\"\n      [disabled]=\"!form.valid || (disabled$ | async)\"\n      (click)=\"handleFormSubmit(form.value, form.valid)\">\n      {{'igo.geo.printForm.saveBtn' | translate}}\n    </button>\n  </div>\n\n</form>\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"] }]
+        args: [{ selector: 'igo-print-form', template: "<form class=\"igo-form\" [formGroup]=\"form\">\n  <div class=\"igo-input-container\">\n    <mat-form-field>\n      <input\n        matInput\n        formControlName=\"title\"\n        placeholder=\"{{'igo.geo.printForm.title' | translate}}\">\n    </mat-form-field>\n  </div>\n  <div class=\"igo-input-container\">\n    <mat-form-field>\n      <input\n        matInput\n        formControlName=\"subtitle\"\n        placeholder=\"{{'igo.geo.printForm.subtitle' | translate}}\">\n    </mat-form-field>\n  </div>\n  <div class=\"igo-input-container\">\n    <mat-form-field>\n      <input\n        matInput\n        formControlName=\"comment\"\n        placeholder=\"{{'igo.geo.printForm.comment' | translate}}\">\n    </mat-form-field>\n  </div>\n\n  <div class=\"igo-input-container\">\n    <div class=\"print-slide-toggle-container mat-typography\">\n      <mat-slide-toggle\n        class=\"print-option\"\n        formControlName=\"showProjection\"\n        [labelPosition]=\"'before'\">\n        {{'igo.geo.printForm.showProjection' | translate}}\n      </mat-slide-toggle>\n      <mat-slide-toggle\n        class=\"print-option\"\n        formControlName=\"showScale\"\n        [labelPosition]=\"'before'\">\n        {{'igo.geo.printForm.showScale' | translate}}\n      </mat-slide-toggle>\n      <mat-slide-toggle\n        class=\"print-option\"\n        formControlName=\"doZipFile\"\n        [labelPosition]=\"'before'\"\n        [style.display]=\"isPrintService ? 'none' : ''\">\n        {{'igo.geo.printForm.doZipFile' | translate}}\n      </mat-slide-toggle>\n    </div>\n  </div>\n\n  <div class=\"igo-input-container\">\n    <mat-form-field>\n      <mat-select\n        formControlName=\"legendPosition\"\n        placeholder=\"{{'igo.geo.printForm.legendPosition' | translate}}\">\n        <mat-option *ngFor=\"let legendPosition of legendPositions | keyvalue \" [value]=\"legendPosition.key\">\n          <ng-container *ngIf=\"!['newpage', 'newimage'].includes(legendPosition.value)\">\n            {{'igo.geo.printForm.legendPositions.' + legendPosition.value | translate}}\n          </ng-container>\n\n          <ng-container *ngIf=\"['newpage', 'newimage'].includes(legendPosition.value)\">\n            {{ ((outputFormat === 'Pdf') ? 'igo.geo.printForm.legendPositions.newpage' : \n            'igo.geo.printForm.legendPositions.newimage') | translate}}\n          </ng-container>\n        </mat-option>\n\n      </mat-select>\n    </mat-form-field>\n  </div>\n\n  <div class=\"igo-input-container\">\n    <mat-form-field>\n      <mat-select (selectionChange)=\"toggleImageSaveProp()\"\n        formControlName=\"outputFormat\"\n        placeholder=\"{{'igo.geo.printForm.outputFormat' | translate}}\">\n        <mat-option *ngFor=\"let outputFormat of outputFormats | keyvalue \" [value]=\"outputFormat.key\">\n            {{outputFormat.value}}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n\n  <div class=\"igo-input-container\" [style.display]=\"isPrintService ? 'block' : 'none'\">\n    <mat-form-field>\n      <mat-select\n        formControlName=\"paperFormat\"\n        placeholder=\"{{'igo.geo.printForm.paperFormat' | translate}}\">\n        <mat-option *ngFor=\"let paperFormat of paperFormats | keyvalue \" [value]=\"paperFormat.key\">\n          {{('igo.geo.printForm.paperFormats.' + paperFormat.value) | translate}}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n\n  <div class=\"igo-input-container\" [style.display]=\"isPrintService ? 'none' : 'block'\">\n    <mat-form-field>\n      <mat-select\n        formControlName=\"imageFormat\"\n        placeholder=\"{{'igo.geo.printForm.imageFormat' | translate}}\">\n        <mat-option *ngFor=\"let imageFormat of imageFormats | keyvalue \" [value]=\"imageFormat.key\">\n          {{imageFormat.value}}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n\n  <div class=\"igo-input-container\" style=\"display: none;\">\n    <mat-form-field>\n      <mat-select\n        formControlName=\"resolution\"\n        placeholder=\"{{'igo.geo.printForm.resolution' | translate}}\">\n        <mat-option *ngFor=\"let resolution of resolutions | keyvalue \" [value]=\"resolution.key\">\n          {{resolution.value + ' PPI'}}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n\n  <div class=\"igo-input-container\" [style.display]=\"isPrintService ? 'block' : 'none'\">\n    <mat-form-field>\n      <mat-select\n        formControlName=\"orientation\"\n        placeholder=\"{{'igo.geo.printForm.orientation' | translate}}\">\n        <mat-option *ngFor=\"let orientation of orientations | keyvalue \" [value]=\"orientation.key\">\n          {{('igo.geo.printForm.' + orientation.value) | translate}}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n\n  <div class=\"igo-form-button-group print-button-top-padding\">\n    <button\n      mat-raised-button\n      type=\"button\"\n      [disabled]=\"!form.valid || (disabled$ | async)\"\n      (click)=\"handleFormSubmit(form.value, form.valid)\">\n      {{'igo.geo.printForm.saveBtn' | translate}}\n    </button>\n  </div>\n\n</form>\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"] }]
     }], function () { return [{ type: i2$2.UntypedFormBuilder }]; }, { disabled$: [{
             type: Input
         }], imageFormat: [{
@@ -34261,25 +34521,28 @@ class PrintComponent {
             this.printService.defineNbFileToProcess(nbFileToProcess);
             const resolution = +data.resolution;
             let nbRequests = data.showLegend ? 2 : 1;
+            if (data.legendPosition === 'newpage') {
+                nbRequests++;
+            }
             this.printService
-                .downloadMapImage(this.map, resolution, data.imageFormat, data.showProjection, data.showScale, data.showLegend, data.title, data.subtitle, data.comment, data.doZipFile)
+                .downloadMapImage(this.map, resolution, data.imageFormat, data.showProjection, data.showScale, data.title, data.subtitle, data.comment, data.doZipFile, data.legendPosition)
                 .pipe(take(1))
                 .subscribe(() => {
                 nbRequests--;
-                if (!nbRequests) {
-                    this.disabled$.next(false);
+                if (data.legendPosition === 'newpage') {
+                    this.printService.getLayersLegendImage(this.map, data.imageFormat, data.doZipFile, resolution).then(() => {
+                        nbRequests--;
+                        if (!nbRequests) {
+                            this.disabled$.next(false);
+                        }
+                    });
                 }
-            });
-            if (data.showLegend) {
-                this.printService
-                    .getLayersLegendImage(this.map, data.imageFormat, data.doZipFile, +resolution)
-                    .then(() => {
-                    nbRequests--;
+                else {
                     if (!nbRequests) {
                         this.disabled$.next(false);
                     }
-                });
-            }
+                }
+            });
         }
     }
 }
@@ -35192,7 +35455,7 @@ DirectionsInputsComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: D
     } if (rf & 2) {
         i0.ɵɵadvance(1);
         i0.ɵɵproperty("ngForOf", i0.ɵɵpipeBind1(2, 1, ctx.stopsStore.view.all$()));
-    } }, dependencies: [i1$1.NgClass, i1$1.NgForOf, i1$1.NgIf, i3$1.CdkDropList, i3$1.CdkDrag, i3$1.CdkDragHandle, i2$2.DefaultValueAccessor, i2$2.NgControlStatus, i2$2.NgModel, i2.MatIcon, i3.MatButton, i13.MatFormField, i13.MatSuffix, i14.MatInput, i9.MatOption, i9.MatOptgroup, i4.MatTooltip, i11$1.MatAutocomplete, i11$1.MatAutocompleteTrigger, i1$1.AsyncPipe, i7.TranslatePipe], styles: [".igo-input-container[_ngcontent-%COMP%]{width:100%}.igo-input-container[_ngcontent-%COMP%]   mat-form-field[_ngcontent-%COMP%]{width:100%}.igo-input-container.reduce[_ngcontent-%COMP%]{width:70%}.igo-input-container.reduce[_ngcontent-%COMP%]   mat-form-field[_ngcontent-%COMP%]{width:100%}.stops-list[_ngcontent-%COMP%]{max-width:100%;min-height:60px;display:block;background:white;border-radius:4px;overflow:hidden;padding:20px 10px}.swipe-vertical[_ngcontent-%COMP%]{cursor:move}.stop-box[_ngcontent-%COMP%]{height:60px;padding:20px 10px;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;background:white}.cdk-drag-preview[_ngcontent-%COMP%]{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder[_ngcontent-%COMP%]{opacity:0}.cdk-drag-animating[_ngcontent-%COMP%]{transition:transform .25s cubic-bezier(0,0,.2,1)}.stops-list.cdk-drop-list-dragging[_ngcontent-%COMP%]   .stop-box[_ngcontent-%COMP%]:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}"] });
+    } }, dependencies: [i1.NgClass, i1.NgForOf, i1.NgIf, i3$2.CdkDropList, i3$2.CdkDrag, i3$2.CdkDragHandle, i2$2.DefaultValueAccessor, i2$2.NgControlStatus, i2$2.NgModel, i2.MatIcon, i3$1.MatButton, i13.MatFormField, i13.MatSuffix, i14.MatInput, i9.MatOption, i9.MatOptgroup, i4.MatTooltip, i11$1.MatAutocomplete, i11$1.MatAutocompleteTrigger, i1.AsyncPipe, i7.TranslatePipe], styles: [".igo-input-container[_ngcontent-%COMP%]{width:100%}.igo-input-container[_ngcontent-%COMP%]   mat-form-field[_ngcontent-%COMP%]{width:100%}.igo-input-container.reduce[_ngcontent-%COMP%]{width:70%}.igo-input-container.reduce[_ngcontent-%COMP%]   mat-form-field[_ngcontent-%COMP%]{width:100%}.stops-list[_ngcontent-%COMP%]{max-width:100%;min-height:60px;display:block;background:white;border-radius:4px;overflow:hidden;padding:20px 10px}.swipe-vertical[_ngcontent-%COMP%]{cursor:move}.stop-box[_ngcontent-%COMP%]{height:60px;padding:20px 10px;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;background:white}.cdk-drag-preview[_ngcontent-%COMP%]{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder[_ngcontent-%COMP%]{opacity:0}.cdk-drag-animating[_ngcontent-%COMP%]{transition:transform .25s cubic-bezier(0,0,.2,1)}.stops-list.cdk-drop-list-dragging[_ngcontent-%COMP%]   .stop-box[_ngcontent-%COMP%]:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}"] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DirectionsInputsComponent, [{
         type: Component,
         args: [{ selector: 'igo-directions-inputs', template: "<div cdkDropList class=\"stops-list\" (cdkDropListDropped)=\"drop($event)\">\n  <div touchleave  \n  (touchenter)=\"onStopEnter(stop)\"\n  (touchleave)=\"onStopLeave()\"\n  (mouseover)=\"onStopEnter(stop)\"\n  (mouseleave)=\"onStopLeave()\"\n  (cdkDragStarted)=\"stopIsDragged=true\"\n  (cdkDragEnded)=\"stopIsDragged=false\"\n  cdkDragLockAxis=\"y\" class=\"stop-box mat-typography\" *ngFor=\"let stop of stopsStore.view.all$() | async; let i = index;\" cdkDrag>\n    <div [ngClass]=\"getNgClass(stop)\">\n      <mat-form-field>\n        <input id=\"{{stop.id}}\" type=\"text\"\n            [placeholder]=\"getPlaceholder(stop)\"\n            matTooltipShowDelay=\"500\"\n            [matTooltip]=\"stop.text\"\n            aria-label=\"Number\"\n            matInput\n            (focus)=\"onInputFocus(stop)\"\n            [(ngModel)]=\"stop.text\"\n            (keyup)=\"setStopText($event,stop)\"\n            (keydown.enter)=\"$event.preventDefault()\"\n            [matAutocomplete]=\"auto\">\n        <button \n            mat-button \n            *ngIf=\"(stop.text || stop.coordinates) && stopWithHover && stop.id===stopWithHover.id\"\n            matTooltipShowDelay=\"500\"\n            [matTooltip]=\"'igo.geo.directionsForm.clearStop' | translate\"\n            matSuffix mat-icon-button color=\"warn\" aria-label=\"Clear\" (click)=\"clearStop(stop)\">\n            <mat-icon svgIcon=\"close\"></mat-icon>\n        </button>\n      \n        <mat-autocomplete [displayWith]=\"getOptionText\" #auto=\"matAutocomplete\" (optionSelected)=\"chooseProposal($event,stop)\">\n          <mat-optgroup *ngFor=\"let source of stop.searchProposals\" [label]=\"source.source.title\" [disabled]=\"source.source.enabled === false\">\n          <mat-option *ngFor=\"let result of source.results\" [value]=\"result\" \n          matTooltipShowDelay=\"500\" [matTooltip]=\"result.meta ? result.meta.title : ''\">\n            {{ result.meta ? result.meta.title : '' }}\n          </mat-option>\n          </mat-optgroup>\n        </mat-autocomplete>\n      </mat-form-field>\n    </div>\n\n\n\n\n    <div class=\"igo-form-button-group\" *ngIf=\"!stopIsDragged && stopWithHover && stop.id === stopWithHover.id\">\n      <button class=\"swipe-vertical\" cdkDragHandle mat-icon-button tooltip-position=\"below\" matTooltipShowDelay=\"500\"\n        [matTooltip]=\"'igo.geo.directionsForm.moveStop' | translate\" color=\"primary\">\n        <mat-icon svgIcon=\"gesture-swipe-vertical\"></mat-icon>\n      </button>\n\n      <button *ngIf=\"(stopsStore.count$ | async)> 2\" mat-icon-button tooltip-position=\"below\" matTooltipShowDelay=\"500\"\n        [matTooltip]=\"'igo.geo.directionsForm.removeStop' | translate\" color=\"warn\" (click)=\"removeStop(stop)\">\n        <mat-icon svgIcon=\"delete\"></mat-icon>\n      </button>\n      <button *ngIf=\"(stopsStore.count$ | async)<= 2\" disabled=\"true\" mat-icon-button tooltip-position=\"below\"\n        matTooltipShowDelay=\"500\" [matTooltip]=\"'igo.geo.directionsForm.removeStop' | translate\" color=\"warn\">\n        <mat-icon svgIcon=\"blank\"></mat-icon>\n      </button>\n    </div>\n  </div>\n</div>", styles: [".igo-input-container{width:100%}.igo-input-container mat-form-field{width:100%}.igo-input-container.reduce{width:70%}.igo-input-container.reduce mat-form-field{width:100%}.stops-list{max-width:100%;min-height:60px;display:block;background:white;border-radius:4px;overflow:hidden;padding:20px 10px}.swipe-vertical{cursor:move}.stop-box{height:60px;padding:20px 10px;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;background:white}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.stops-list.cdk-drop-list-dragging .stop-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
@@ -35383,9 +35646,10 @@ class SearchSourceService {
  * and the results they yielded.
  */
 class SearchService {
-    constructor(searchSourceService, mapService) {
+    constructor(searchSourceService, mapService, storageService) {
         this.searchSourceService = searchSourceService;
         this.mapService = mapService;
+        this.storageService = storageService;
     }
     /**
      * Perform a research by text
@@ -35437,7 +35701,8 @@ class SearchService {
         const sources = this.searchSourceService
             .getEnabledSources()
             .filter(reverseSourceFonction);
-        return this.reverseSearchSources(sources, lonLat, options || {});
+        const reverseSearchCoordsFormat = this.storageService.get('reverseSearchCoordsFormatEnabled') || false;
+        return this.reverseSearchSources(sources, lonLat, options || {}, reverseSearchCoordsFormat);
     }
     /**
      * Create a text research out of all given search sources
@@ -35460,10 +35725,10 @@ class SearchService {
      * @param lonLat Any lon/lat coordinates
      * @returns Observable of Researches
      */
-    reverseSearchSources(sources, lonLat, options) {
+    reverseSearchSources(sources, lonLat, options, reverseSearchCoordsFormat) {
         return sources.map((source) => {
             return {
-                request: source.reverseSearch(lonLat, options),
+                request: source.reverseSearch(lonLat, options, reverseSearchCoordsFormat),
                 reverse: true,
                 source
             };
@@ -35478,14 +35743,14 @@ class SearchService {
         return typeof term === 'string' && term !== '';
     }
 }
-SearchService.ɵfac = function SearchService_Factory(t) { return new (t || SearchService)(i0.ɵɵinject(SearchSourceService), i0.ɵɵinject(MapService)); };
+SearchService.ɵfac = function SearchService_Factory(t) { return new (t || SearchService)(i0.ɵɵinject(SearchSourceService), i0.ɵɵinject(MapService), i0.ɵɵinject(i2$1.StorageService)); };
 SearchService.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: SearchService, factory: SearchService.ɵfac, providedIn: 'root' });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SearchService, [{
         type: Injectable,
         args: [{
                 providedIn: 'root'
             }]
-    }], function () { return [{ type: SearchSourceService }, { type: MapService }]; }, null); })();
+    }], function () { return [{ type: SearchSourceService }, { type: MapService }, { type: i2$1.StorageService }]; }, null); })();
 
 function DirectionsButtonsComponent_button_4_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
@@ -35683,7 +35948,7 @@ DirectionsButtonsComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
         i0.ɵɵproperty("ngIf", i0.ɵɵpipeBind1(10, 13, ctx.routesFeatureStore.count$) >= 1);
         i0.ɵɵadvance(2);
         i0.ɵɵproperty("ngIf", i0.ɵɵpipeBind1(12, 15, ctx.routesFeatureStore.count$) >= 1);
-    } }, dependencies: [i1$1.NgIf, i2.MatIcon, i3.MatButton, i4.MatTooltip, i1$1.AsyncPipe, i7.TranslatePipe] });
+    } }, dependencies: [i1.NgIf, i2.MatIcon, i3$1.MatButton, i4.MatTooltip, i1.AsyncPipe, i7.TranslatePipe] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DirectionsButtonsComponent, [{
         type: Component,
         args: [{ selector: 'igo-directions-buttons', template: "<div class=\"igo-form-button-group\">\n  <button mat-icon-button tooltip-position=\"below\" matTooltipShowDelay=\"500\"\n    [matTooltip]=\"'igo.geo.directionsForm.addStop' | translate\" color=\"primary\" (click)=\"addStop()\">\n    <mat-icon svgIcon=\"map-marker-plus\"></mat-icon>\n  </button>\n  <button mat-icon-button tooltip-position=\"below\" matTooltipShowDelay=\"500\"\n    *ngIf=\"(routesFeatureStore.count$ | async)>=1 || (stopsStore.count$ | async)>=1\"\n    [matTooltip]=\"'igo.geo.directionsForm.resetDirectionsBtn' | translate\" color=\"warn\" (click)=\"resetStops()\">\n    <mat-icon svgIcon=\"file-restore\"></mat-icon>\n  </button>\n  <button mat-icon-button tooltip-position=\"below\" matTooltipShowDelay=\"500\"\n    *ngIf=\"(routesFeatureStore.count$ | async)>=1\" (click)=\"zoomRoute()\"\n    [matTooltip]=\"'igo.geo.directionsForm.zoomRoute' | translate\" color=\"primary\">\n    <mat-icon svgIcon=\"magnify-plus-outline\"></mat-icon>\n  </button>\n  <button mat-icon-button tooltip-position=\"below\" matTooltipShowDelay=\"500\"\n    *ngIf=\"(routesFeatureStore.count$ | async)>=1\" (click)=\"copyDirectionsToClipboard()\"\n    [matTooltip]=\"'igo.geo.directionsForm.copy' | translate\" color=\"primary\">\n    <mat-icon svgIcon=\"content-copy\"></mat-icon>\n  </button>\n  <button mat-icon-button tooltip-position=\"below\" matTooltipShowDelay=\"500\"\n    *ngIf=\"(routesFeatureStore.count$ | async)>=1\" (click)=\"copyLinkToClipboard()\" \n    [matTooltip]=\"'igo.geo.directionsForm.link' | translate\" color=\"primary\">\n    <mat-icon svgIcon=\"link\"></mat-icon>\n  </button>\n</div>" }]
@@ -35866,7 +36131,7 @@ DirectionsResultsComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
         i0.ɵɵtemplate(0, DirectionsResultsComponent_div_0_Template, 10, 6, "div", 0);
     } if (rf & 2) {
         i0.ɵɵproperty("ngIf", ctx.directions && ctx.activeDirection);
-    } }, dependencies: [i1$1.NgClass, i1$1.NgForOf, i1$1.NgIf, i2$2.NgControlStatus, i2$2.NgModel, i2.MatIcon, i5.MatList, i5.MatListItem, i9.MatLine, i5.MatListIconCssMatStyler, i5.MatListSubheaderCssMatStyler, i11.MatDivider, i13.MatFormField, i9.MatOption, i15.MatSelect, i7.TranslatePipe], styles: [".igo-input-container[_ngcontent-%COMP%]{width:100%;padding:20px 10px}.igo-input-container[_ngcontent-%COMP%]   mat-form-field[_ngcontent-%COMP%]{width:70%}.igo-route-title[_ngcontent-%COMP%]{font-weight:700}.igo-steps[_ngcontent-%COMP%]{cursor:pointer}.mat-line[_ngcontent-%COMP%]{word-wrap:break-word!important;white-space:pre-wrap!important}.mat-line.right[_ngcontent-%COMP%]{text-align:right}.rotate-90[_ngcontent-%COMP%]{transform:rotate(90deg)}.rotate-45[_ngcontent-%COMP%]{transform:rotate(45deg)}.rotate-270[_ngcontent-%COMP%]{transform:rotate(270deg)}.rotate-250[_ngcontent-%COMP%]{transform:rotate(250deg)}.rotate-290[_ngcontent-%COMP%]{transform:rotate(290deg)}.icon-flipped[_ngcontent-%COMP%]{transform:scaleY(-1)}"] });
+    } }, dependencies: [i1.NgClass, i1.NgForOf, i1.NgIf, i2$2.NgControlStatus, i2$2.NgModel, i2.MatIcon, i5.MatList, i5.MatListItem, i9.MatLine, i5.MatListIconCssMatStyler, i5.MatListSubheaderCssMatStyler, i11.MatDivider, i13.MatFormField, i9.MatOption, i15.MatSelect, i7.TranslatePipe], styles: [".igo-input-container[_ngcontent-%COMP%]{width:100%;padding:20px 10px}.igo-input-container[_ngcontent-%COMP%]   mat-form-field[_ngcontent-%COMP%]{width:70%}.igo-route-title[_ngcontent-%COMP%]{font-weight:700}.igo-steps[_ngcontent-%COMP%]{cursor:pointer}.mat-line[_ngcontent-%COMP%]{word-wrap:break-word!important;white-space:pre-wrap!important}.mat-line.right[_ngcontent-%COMP%]{text-align:right}.rotate-90[_ngcontent-%COMP%]{transform:rotate(90deg)}.rotate-45[_ngcontent-%COMP%]{transform:rotate(45deg)}.rotate-270[_ngcontent-%COMP%]{transform:rotate(270deg)}.rotate-250[_ngcontent-%COMP%]{transform:rotate(250deg)}.rotate-290[_ngcontent-%COMP%]{transform:rotate(290deg)}.icon-flipped[_ngcontent-%COMP%]{transform:scaleY(-1)}"] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DirectionsResultsComponent, [{
         type: Component,
         args: [{ selector: 'igo-directions-results', template: "<div class=\"igo-input-container\" *ngIf=\"directions && activeDirection\">\n    <mat-form-field *ngIf=\"directions && directions.length > 1\">\n        <mat-select placeholder=\"{{'igo.geo.directionsForm.drivingOptions' | translate}}\"\n            (selectionChange)=\"changeRoute()\" [(ngModel)]=\"activeDirection\">\n            <mat-option *ngFor=\"let direction of directions; let cnt = index;\" [value]=\"direction\">\n                Option {{cnt + 1}} : {{formatDistance(direction.distance)}}\n                ({{formatDuration(direction.duration)}})\n            </mat-option>\n        </mat-select>\n    </mat-form-field>\n\n    <mat-divider *ngIf=\"directions && directions.length === 0\"></mat-divider>\n\n    <mat-list (mouseleave)=\"onStepsListBlur()\">\n        <h2 mat-header class=\"igo-route-title mat-typography\">{{activeDirection.title}}</h2>\n        <h2 mat-subheader>{{formatDistance(activeDirection.distance)}}, {{formatDuration(activeDirection.duration)}}</h2>\n        <mat-list-item class=\"igo-steps\" \n            (mouseenter)=\"showSegment(step)\" \n            (click)=\"showSegment(step,true)\" \n            *ngFor=\"let step of activeDirection.steps; let cnt = index;\" igoListItem>\n            <mat-icon [ngClass]=\"formatStep(step,cnt).cssClass\" mat-list-icon svgIcon=\"{{formatStep(step,cnt).image}}\">\n            </mat-icon>\n\n            <h4 mat-line>{{cnt +1}}. {{formatStep(step,cnt).instruction}}</h4>\n            <h4 mat-line class=\"right\">{{formatDistance(step.distance)}}</h4>\n        </mat-list-item>\n\n        <mat-divider></mat-divider>\n\n    </mat-list>\n\n</div>", styles: [".igo-input-container{width:100%;padding:20px 10px}.igo-input-container mat-form-field{width:70%}.igo-route-title{font-weight:700}.igo-steps{cursor:pointer}.mat-line{word-wrap:break-word!important;white-space:pre-wrap!important}.mat-line.right{text-align:right}.rotate-90{transform:rotate(90deg)}.rotate-45{transform:rotate(45deg)}.rotate-270{transform:rotate(270deg)}.rotate-250{transform:rotate(250deg)}.rotate-290{transform:rotate(290deg)}.icon-flipped{transform:scaleY(-1)}\n"] }]
@@ -36306,9 +36571,6 @@ class IChercheSearchSource extends SearchSource {
         this.formatter = formatter;
         this.title$ = new BehaviorSubject('');
         this.hashtagsLieuxToKeep = [];
-        this.languageService.translate
-            .get(this.options.title)
-            .subscribe((title) => this.title$.next(title));
         const authService = injector.get(AuthService);
         if (this.settings.length) {
             if (!authService) {
@@ -36320,6 +36582,9 @@ class IChercheSearchSource extends SearchSource {
                 });
             }
         }
+        this.languageService.language$.subscribe(() => {
+            this.title$.next(this.languageService.translate.instant(this.options.title));
+        });
     }
     get title() {
         return this.title$.getValue();
@@ -36762,7 +37027,7 @@ class IChercheSearchSource extends SearchSource {
 IChercheSearchSource.id = 'icherche';
 IChercheSearchSource.type = FEATURE;
 IChercheSearchSource.propertiesBlacklist = [];
-IChercheSearchSource.ɵfac = function IChercheSearchSource_Factory(t) { return new (t || IChercheSearchSource)(i0.ɵɵinject(i1$2.HttpClient), i0.ɵɵinject(i2$1.LanguageService), i0.ɵɵinject(i2$1.StorageService), i0.ɵɵinject('options'), i0.ɵɵinject(IChercheSearchResultFormatter), i0.ɵɵinject(i0.Injector)); };
+IChercheSearchSource.ɵfac = function IChercheSearchSource_Factory(t) { return new (t || IChercheSearchSource)(i0.ɵɵinject(i1$1.HttpClient), i0.ɵɵinject(i2$1.LanguageService), i0.ɵɵinject(i2$1.StorageService), i0.ɵɵinject('options'), i0.ɵɵinject(IChercheSearchResultFormatter), i0.ɵɵinject(i0.Injector)); };
 IChercheSearchSource.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: IChercheSearchSource, factory: IChercheSearchSource.ɵfac });
 __decorate([
     Cacheable({
@@ -36771,7 +37036,7 @@ __decorate([
 ], IChercheSearchSource.prototype, "search", null);
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(IChercheSearchSource, [{
         type: Injectable
-    }], function () { return [{ type: i1$2.HttpClient }, { type: i2$1.LanguageService }, { type: i2$1.StorageService }, { type: undefined, decorators: [{
+    }], function () { return [{ type: i1$1.HttpClient }, { type: i2$1.LanguageService }, { type: i2$1.StorageService }, { type: undefined, decorators: [{
                 type: Inject,
                 args: ['options']
             }] }, { type: IChercheSearchResultFormatter, decorators: [{
@@ -36787,9 +37052,9 @@ class IChercheReverseSearchSource extends SearchSource {
         this.http = http;
         this.languageService = languageService;
         this.title$ = new BehaviorSubject('');
-        this.languageService.translate
-            .get(this.options.title)
-            .subscribe((title) => this.title$.next(title));
+        this.languageService.language$.subscribe(() => {
+            this.title$.next(this.languageService.translate.instant(this.options.title));
+        });
         const authService = injector.get(AuthService);
         if (this.settings.length) {
             if (!authService) {
@@ -37003,7 +37268,7 @@ class IChercheReverseSearchSource extends SearchSource {
 IChercheReverseSearchSource.id = 'icherchereverse';
 IChercheReverseSearchSource.type = FEATURE;
 IChercheReverseSearchSource.propertiesBlacklist = [];
-IChercheReverseSearchSource.ɵfac = function IChercheReverseSearchSource_Factory(t) { return new (t || IChercheReverseSearchSource)(i0.ɵɵinject(i1$2.HttpClient), i0.ɵɵinject(i2$1.LanguageService), i0.ɵɵinject(i2$1.StorageService), i0.ɵɵinject('options'), i0.ɵɵinject(i0.Injector)); };
+IChercheReverseSearchSource.ɵfac = function IChercheReverseSearchSource_Factory(t) { return new (t || IChercheReverseSearchSource)(i0.ɵɵinject(i1$1.HttpClient), i0.ɵɵinject(i2$1.LanguageService), i0.ɵɵinject(i2$1.StorageService), i0.ɵɵinject('options'), i0.ɵɵinject(i0.Injector)); };
 IChercheReverseSearchSource.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: IChercheReverseSearchSource, factory: IChercheReverseSearchSource.ɵfac });
 __decorate([
     Cacheable({
@@ -37012,7 +37277,7 @@ __decorate([
 ], IChercheReverseSearchSource.prototype, "reverseSearch", null);
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(IChercheReverseSearchSource, [{
         type: Injectable
-    }], function () { return [{ type: i1$2.HttpClient }, { type: i2$1.LanguageService }, { type: i2$1.StorageService }, { type: undefined, decorators: [{
+    }], function () { return [{ type: i1$1.HttpClient }, { type: i2$1.LanguageService }, { type: i2$1.StorageService }, { type: undefined, decorators: [{
                 type: Inject,
                 args: ['options']
             }] }, { type: i0.Injector }]; }, { reverseSearch: [] }); })();
@@ -37100,9 +37365,9 @@ class CoordinatesReverseSearchSource extends SearchSource {
         this.languageService = languageService;
         this.title$ = new BehaviorSubject('');
         this.projections = projections;
-        this.languageService.translate
-            .get(this.options.title)
-            .subscribe(title => this.title$.next(title));
+        this.languageService.language$.subscribe(() => {
+            this.title$.next(this.languageService.translate.instant(this.options.title));
+        });
     }
     get title() {
         return this.title$.getValue();
@@ -37126,15 +37391,17 @@ class CoordinatesReverseSearchSource extends SearchSource {
      * @param options options of ReverseSearchOptions (distance, conf, zoom, params)
      * @returns Observable of <SearchResult<Feature>[]
      */
-    reverseSearch(lonLat, options) {
-        return of([this.dataToResult(lonLat, options)]);
+    reverseSearch(lonLat, options, reverseSearchCoordsFormatEnabled) {
+        return of([this.dataToResult(lonLat, options, reverseSearchCoordsFormatEnabled)]);
     }
-    dataToResult(data, options) {
+    dataToResult(data, options, reverseSearchCoordsFormatEnabled) {
         const dataDMS = convertDDToDMS(data);
         const convertedCoord = lonLatConversion(data, this.projections);
         const coords = convertedCoord.reduce((obj, item) => (obj[item.alias] = item.igo2CoordFormat, obj), {});
-        const roundedCoordString = roundCoordTo(data, 6).join(', ');
-        const roundedCoordStringDMS = dataDMS.join(', ');
+        const roundedCoordString = (!reverseSearchCoordsFormatEnabled) ?
+            roundCoordTo(data, 6).join(', ') : roundCoordTo(data, 6).reverse().join(', ');
+        const roundedCoordStringDMS = (!reverseSearchCoordsFormatEnabled) ?
+            dataDMS.join(', ') : dataDMS.reverse().join(', ');
         let geometry = {
             type: 'Point',
             coordinates: [data[0], data[1]]
@@ -37158,9 +37425,13 @@ class CoordinatesReverseSearchSource extends SearchSource {
             subtitleHtml += subtitleHtml === '' ? '<br>' : '<small> - </small>';
             subtitleHtml += '<small>Confiance: ' + options.conf + '%</small>';
         }
-        const coordKey = this.languageService.translate.instant('igo.geo.search.coordinates.coord');
+        const coordKey = (!reverseSearchCoordsFormatEnabled) ?
+            this.languageService.translate.instant('igo.geo.search.coordinates.coord') :
+            this.languageService.translate.instant('igo.geo.search.coordinates.reversedCoord');
         properties[coordKey] = roundedCoordString;
-        const coordKeyDMS = this.languageService.translate.instant('igo.geo.search.coordinates.coordDMS');
+        const coordKeyDMS = (!reverseSearchCoordsFormatEnabled) ?
+            this.languageService.translate.instant('igo.geo.search.coordinates.coordDMS') :
+            this.languageService.translate.instant('igo.geo.search.coordinates.reversedCoordDMS');
         properties[coordKeyDMS] = roundedCoordStringDMS;
         return {
             source: this,
@@ -37294,9 +37565,9 @@ class ILayerSearchSource extends SearchSource {
         this.languageService = languageService;
         this.formatter = formatter;
         this.title$ = new BehaviorSubject('');
-        this.languageService.translate
-            .get(this.options.title)
-            .subscribe(title => this.title$.next(title));
+        this.languageService.language$.subscribe(() => {
+            this.title$.next(this.languageService.translate.instant(this.options.title));
+        });
     }
     get title() {
         return this.title$.getValue();
@@ -37534,7 +37805,7 @@ class ILayerSearchSource extends SearchSource {
 }
 ILayerSearchSource.id = 'ilayer';
 ILayerSearchSource.type = LAYER;
-ILayerSearchSource.ɵfac = function ILayerSearchSource_Factory(t) { return new (t || ILayerSearchSource)(i0.ɵɵinject(i1$2.HttpClient), i0.ɵɵinject(i2$1.LanguageService), i0.ɵɵinject(i2$1.StorageService), i0.ɵɵinject('options'), i0.ɵɵinject(ILayerSearchResultFormatter)); };
+ILayerSearchSource.ɵfac = function ILayerSearchSource_Factory(t) { return new (t || ILayerSearchSource)(i0.ɵɵinject(i1$1.HttpClient), i0.ɵɵinject(i2$1.LanguageService), i0.ɵɵinject(i2$1.StorageService), i0.ɵɵinject('options'), i0.ɵɵinject(ILayerSearchResultFormatter)); };
 ILayerSearchSource.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: ILayerSearchSource, factory: ILayerSearchSource.ɵfac });
 __decorate([
     Cacheable({
@@ -37543,7 +37814,7 @@ __decorate([
 ], ILayerSearchSource.prototype, "search", null);
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ILayerSearchSource, [{
         type: Injectable
-    }], function () { return [{ type: i1$2.HttpClient }, { type: i2$1.LanguageService }, { type: i2$1.StorageService }, { type: undefined, decorators: [{
+    }], function () { return [{ type: i1$1.HttpClient }, { type: i2$1.LanguageService }, { type: i2$1.StorageService }, { type: undefined, decorators: [{
                 type: Inject,
                 args: ['options']
             }] }, { type: ILayerSearchResultFormatter, decorators: [{
@@ -37687,7 +37958,7 @@ SearchSelectorComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Sea
         i0.ɵɵproperty("value", i0.ɵɵpipeBind1(7, 6, ctx.searchType$));
         i0.ɵɵadvance(2);
         i0.ɵɵproperty("ngForOf", ctx.searchTypes);
-    } }, dependencies: [i1$1.NgForOf, i4.MatTooltip, i2.MatIcon, i3.MatButton, i7$2.MatMenu, i7$2.MatMenuTrigger, i17.MatRadioGroup, i17.MatRadioButton, i1$1.AsyncPipe, i7.TranslatePipe], styles: [".igo-search-selector-button[_ngcontent-%COMP%]     div.mat-button-ripple-round{border-radius:0}.igo-search-selector-radio-group[_ngcontent-%COMP%]{display:inline-flex;flex-direction:column}.igo-search-selector-radio-group[_ngcontent-%COMP%]   mat-radio-button[_ngcontent-%COMP%]{margin:5px}"], changeDetection: 0 });
+    } }, dependencies: [i1.NgForOf, i4.MatTooltip, i2.MatIcon, i3$1.MatButton, i7$2.MatMenu, i7$2.MatMenuTrigger, i17.MatRadioGroup, i17.MatRadioButton, i1.AsyncPipe, i7.TranslatePipe], styles: [".igo-search-selector-button[_ngcontent-%COMP%]     div.mat-button-ripple-round{border-radius:0}.igo-search-selector-radio-group[_ngcontent-%COMP%]{display:inline-flex;flex-direction:column}.igo-search-selector-radio-group[_ngcontent-%COMP%]   mat-radio-button[_ngcontent-%COMP%]{margin:5px}"], changeDetection: 0 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SearchSelectorComponent, [{
         type: Component,
         args: [{ selector: 'igo-search-selector', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"igo-search-selector\">\n  <button\n    mat-icon-button\n    class=\"igo-search-selector-button\"\n    color=\"primary\"\n    tooltip-position=\"below\"\n    matTooltipShowDelay=\"500\"\n    [matTooltip]=\"'igo.geo.search.menu.tooltip' | translate\"\n    [matMenuTriggerFor]=\"searchSelectorMenu\">\n    <mat-icon svgIcon=\"menu-down\"></mat-icon>\n  </button>\n\n  <mat-menu\n    #searchSelectorMenu=\"matMenu\"\n    class=\"no-border-radius\"\n    xPosition=\"before\"\n    yPosition=\"above\">\n    <mat-radio-group\n      class=\"igo-search-selector-radio-group\"\n      [value]=\"searchType$ | async\"\n      (change)=\"onSearchTypeChange($event.value)\">\n      <mat-radio-button *ngFor=\"let searchType of searchTypes\" [value]=\"searchType\">\n        {{getSearchTypeTitle(searchType) | translate}}\n      </mat-radio-button>\n    </mat-radio-group>\n  </mat-menu>\n\n</div>\n", styles: [".igo-search-selector-button ::ng-deep div.mat-button-ripple-round{border-radius:0}.igo-search-selector-radio-group{display:inline-flex;flex-direction:column}.igo-search-selector-radio-group mat-radio-button{margin:5px}\n"] }]
@@ -37907,17 +38178,28 @@ function SearchSettingsComponent_span_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵpipe(8, "translate");
     i0.ɵɵtext(9);
     i0.ɵɵpipe(10, "translate");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(11, "mat-slide-toggle", 26);
+    i0.ɵɵlistener("change", function SearchSettingsComponent_span_8_Template_mat_slide_toggle_change_11_listener($event) { i0.ɵɵrestoreView(_r44); const ctx_r48 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r48.reverseSearchCoordsFormat($event)); })("click", function SearchSettingsComponent_span_8_Template_mat_slide_toggle_click_11_listener($event) { return $event.stopPropagation(); });
+    i0.ɵɵpipe(12, "translate");
+    i0.ɵɵpipe(13, "translate");
+    i0.ɵɵtext(14);
+    i0.ɵɵpipe(15, "translate");
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r3 = i0.ɵɵnextContext();
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("matTooltip", i0.ɵɵpipeBind1(4, 8, "igo.geo.search.pointerSearchSummary.tooltip"))("checked", ctx_r3.pointerSummaryEnabled)("labelPosition", "after");
+    i0.ɵɵproperty("matTooltip", i0.ɵɵpipeBind1(4, 12, "igo.geo.search.pointerSearchSummary.tooltip"))("checked", ctx_r3.pointerSummaryEnabled)("labelPosition", "after");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(6, 14, "igo.geo.search.pointerSearchSummary.title"), " ");
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(6, 10, "igo.geo.search.pointerSearchSummary.title"), " ");
+    i0.ɵɵproperty("matTooltip", i0.ɵɵpipeBind1(8, 16, "igo.geo.search.searchResultsGeometry.tooltip"))("checked", ctx_r3.searchResultsGeometryEnabled)("labelPosition", "after");
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("matTooltip", i0.ɵɵpipeBind1(8, 12, "igo.geo.search.searchResultsGeometry.tooltip"))("checked", ctx_r3.searchResultsGeometryEnabled)("labelPosition", "after");
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(10, 18, "igo.geo.search.searchResultsGeometry.title"), " ");
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(10, 14, "igo.geo.search.searchResultsGeometry.title"), " ");
+    i0.ɵɵproperty("matTooltip", ctx_r3.reverseSearchCoordsFormatEnabled ? i0.ɵɵpipeBind1(12, 20, "igo.geo.search.reverseCoordFormat.tooltipLatLon") : i0.ɵɵpipeBind1(13, 22, "igo.geo.search.reverseCoordFormat.tooltipLonLat"))("checked", ctx_r3.reverseSearchCoordsFormatEnabled)("labelPosition", "after");
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(15, 24, "igo.geo.search.reverseCoordFormat.title"), " ");
 } }
 /**
  * This component allows a user to select a search type yo enable. In it's
@@ -37939,6 +38221,7 @@ class SearchSettingsComponent {
         this.displayBlock = 'block';
         this.pointerSummaryEnabled = false;
         this.searchResultsGeometryEnabled = false;
+        this.reverseSearchCoordsFormatEnabled = false;
         /**
          * Event emitted when the enabled search source changes
          */
@@ -37951,6 +38234,10 @@ class SearchSettingsComponent {
          * Event emitted when the show geometry summary is changed
          */
         this.searchResultsGeometryStatus = new EventEmitter();
+        /**
+         * Event emitted when the coords format is changed
+         */
+        this.reverseSearchCoordsFormatStatus = new EventEmitter();
     }
     get isTouchScreen() {
         return this.mediaService.isTouchScreen();
@@ -38103,11 +38390,15 @@ class SearchSettingsComponent {
         this.searchResultsGeometryEnabled = event.checked;
         this.searchResultsGeometryStatus.emit(this.searchResultsGeometryEnabled);
     }
+    reverseSearchCoordsFormat(event) {
+        this.reverseSearchCoordsFormatEnabled = event.checked;
+        this.reverseSearchCoordsFormatStatus.emit(this.reverseSearchCoordsFormatEnabled);
+    }
 }
 SearchSettingsComponent.ɵfac = function SearchSettingsComponent_Factory(t) { return new (t || SearchSettingsComponent)(i0.ɵɵdirectiveInject(SearchSourceService), i0.ɵɵdirectiveInject(i2$1.MediaService), i0.ɵɵdirectiveInject(i2$1.StorageService)); };
 SearchSettingsComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SearchSettingsComponent, selectors: [["igo-search-settings"]], hostBindings: function SearchSettingsComponent_HostBindings(rf, ctx) { if (rf & 1) {
         i0.ɵɵlistener("keydown", function SearchSettingsComponent_keydown_HostBindingHandler($event) { return ctx.handleKeyboardEvent($event); }, false, i0.ɵɵresolveDocument);
-    } }, inputs: { pointerSummaryEnabled: "pointerSummaryEnabled", searchResultsGeometryEnabled: "searchResultsGeometryEnabled" }, outputs: { searchSourceChange: "searchSourceChange", pointerSummaryStatus: "pointerSummaryStatus", searchResultsGeometryStatus: "searchResultsGeometryStatus" }, decls: 9, vars: 7, consts: [[1, "igo-search-settings"], ["mat-icon-button", "", "color", "primary", "tooltip-position", "below", "matTooltipShowDelay", "500", 1, "igo-search-settings-button", 3, "matTooltip", "matMenuTriggerFor"], ["svgIcon", "chevron-down"], [1, "no-border-radius"], ["searchSettingsMenu", "matMenu"], ["class", "checkAllButton", 4, "ngIf"], [4, "ngFor", "ngForOf"], [4, "ngIf"], [1, "checkAllButton"], ["mat-raised-button", "", 3, "click"], [1, "igo-search-settings-search-source"], [1, "igo-search-settings-checkbox", 3, "checked", "value", "click", "change"], ["mat-menu-item", "", 3, "matMenuTriggerFor", 4, "ngIf"], ["mat-menu-item", "", 4, "ngIf"], ["sub_menu", "matMenu"], ["mat-menu-item", "", 3, "matMenuTriggerFor"], ["mat-menu-item", ""], ["yPosition", "above", 3, "ngSwitch"], ["test_sub_menu", "matMenu"], [4, "ngSwitchCase"], [1, "igo-search-settings-radio-group", 3, "value"], ["class", "mat-typography", 3, "value", "matTooltip", "checked", "click", "change", 4, "ngFor", "ngForOf"], [1, "mat-typography", 3, "value", "matTooltip", "checked", "click", "change"], ["class", "mat-menu-item", 3, "display", "checked", "value", "matTooltip", "click", "change", 4, "ngFor", "ngForOf"], [1, "mat-menu-item", 3, "checked", "value", "matTooltip", "click", "change"], [1, "pointer-summary-slide-toggle-container", "mat-typography"], ["tooltip-position", "below", "matTooltipShowDelay", "500", 1, "pointer-summary-option", 3, "matTooltip", "checked", "labelPosition", "change", "click"]], template: function SearchSettingsComponent_Template(rf, ctx) { if (rf & 1) {
+    } }, inputs: { pointerSummaryEnabled: "pointerSummaryEnabled", searchResultsGeometryEnabled: "searchResultsGeometryEnabled", reverseSearchCoordsFormatEnabled: "reverseSearchCoordsFormatEnabled" }, outputs: { searchSourceChange: "searchSourceChange", pointerSummaryStatus: "pointerSummaryStatus", searchResultsGeometryStatus: "searchResultsGeometryStatus", reverseSearchCoordsFormatStatus: "reverseSearchCoordsFormatStatus" }, decls: 9, vars: 7, consts: [[1, "igo-search-settings"], ["mat-icon-button", "", "color", "primary", "tooltip-position", "below", "matTooltipShowDelay", "500", 1, "igo-search-settings-button", 3, "matTooltip", "matMenuTriggerFor"], ["svgIcon", "chevron-down"], [1, "no-border-radius"], ["searchSettingsMenu", "matMenu"], ["class", "checkAllButton", 4, "ngIf"], [4, "ngFor", "ngForOf"], [4, "ngIf"], [1, "checkAllButton"], ["mat-raised-button", "", 3, "click"], [1, "igo-search-settings-search-source"], [1, "igo-search-settings-checkbox", 3, "checked", "value", "click", "change"], ["mat-menu-item", "", 3, "matMenuTriggerFor", 4, "ngIf"], ["mat-menu-item", "", 4, "ngIf"], ["sub_menu", "matMenu"], ["mat-menu-item", "", 3, "matMenuTriggerFor"], ["mat-menu-item", ""], ["yPosition", "above", 3, "ngSwitch"], ["test_sub_menu", "matMenu"], [4, "ngSwitchCase"], [1, "igo-search-settings-radio-group", 3, "value"], ["class", "mat-typography", 3, "value", "matTooltip", "checked", "click", "change", 4, "ngFor", "ngForOf"], [1, "mat-typography", 3, "value", "matTooltip", "checked", "click", "change"], ["class", "mat-menu-item", 3, "display", "checked", "value", "matTooltip", "click", "change", 4, "ngFor", "ngForOf"], [1, "mat-menu-item", 3, "checked", "value", "matTooltip", "click", "change"], [1, "pointer-summary-slide-toggle-container", "mat-typography"], ["tooltip-position", "below", "matTooltipShowDelay", "500", 1, "search-option", 3, "matTooltip", "checked", "labelPosition", "change", "click"]], template: function SearchSettingsComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵelementStart(0, "div", 0)(1, "button", 1);
         i0.ɵɵpipe(2, "translate");
         i0.ɵɵelement(3, "mat-icon", 2);
@@ -38115,7 +38406,7 @@ SearchSettingsComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Sea
         i0.ɵɵelementStart(4, "mat-menu", 3, 4);
         i0.ɵɵtemplate(6, SearchSettingsComponent_div_6_Template, 5, 5, "div", 5);
         i0.ɵɵtemplate(7, SearchSettingsComponent_ng_container_7_Template, 8, 5, "ng-container", 6);
-        i0.ɵɵtemplate(8, SearchSettingsComponent_span_8_Template, 11, 16, "span", 7);
+        i0.ɵɵtemplate(8, SearchSettingsComponent_span_8_Template, 16, 26, "span", 7);
         i0.ɵɵelementEnd()();
     } if (rf & 2) {
         const _r0 = i0.ɵɵreference(5);
@@ -38127,20 +38418,24 @@ 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.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 });
+    } }, dependencies: [i1.NgForOf, i1.NgIf, i1.NgSwitch, i1.NgSwitchCase, i4.MatTooltip, i2.MatIcon, i3$1.MatButton, i7$2.MatMenu, i7$2.MatMenuItem, i7$2.MatMenuTrigger, i17.MatRadioGroup, i17.MatRadioButton, i12.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}.search-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\">\n\n  <button\n    mat-icon-button\n    class=\"igo-search-settings-button\"\n    color=\"primary\"\n    tooltip-position=\"below\"\n    matTooltipShowDelay=\"500\"\n    [matTooltip]=\"'igo.geo.search.menu.tooltip' | translate\"\n    [matMenuTriggerFor]=\"searchSettingsMenu\">\n    <mat-icon svgIcon=\"chevron-down\"></mat-icon>\n  </button>\n  <mat-menu\n    #searchSettingsMenu=\"matMenu\"\n    class=\"no-border-radius\">\n    <div class=\"checkAllButton\" *ngIf=\"getSearchSources().length>4\">\n      <button mat-raised-button\n        (click)=\"checkUncheckAllSources($event)\">{{!searchSourcesAllEnabled  ? ('igo.geo.search.searchSources.unselectAll' | translate): ('igo.geo.search.searchSources.selectAll' | translate)}}</button>\n    </div>\n      <ng-container *ngFor=\"let source of getSearchSources()\">\n        <span class=\"igo-search-settings-search-source\">\n          <mat-checkbox\n            class=\"igo-search-settings-checkbox\"\n            [checked]=\"source.enabled\"\n            [value]=\"source\"\n            (click)=\"$event.stopPropagation()\"\n            (change)=\"onCheckSearchSource($event, source)\">\n          </mat-checkbox>\n          <button *ngIf=\"source.settings.length\u00A0>\u00A00\"\n            [matMenuTriggerFor]=\"sub_menu\"\n            mat-menu-item>{{source.title}}\n          </button>\n          <button\n            mat-menu-item\n            *ngIf=\"source.settings.length\u00A0===\u00A00\">\n            {{source.title}}\n          </button>\n        </span>\n          <mat-menu #sub_menu=\"matMenu\">\n            <ng-container *ngFor=\"let setting of source.settings\">\n              <button\n                  mat-menu-item\n                  [matMenuTriggerFor]=\"test_sub_menu\">\n                {{'igo.geo.search.searchSources.settings.'+ setting.title | translate}}\n              </button>\n              <mat-menu #test_sub_menu=\"matMenu\"\n                [ngSwitch]=\"setting.type\"\n                yPosition=\"above\">\n                <span *ngSwitchCase=\"'radiobutton'\">\n                  <mat-radio-group\n                    class=\"igo-search-settings-radio-group\"\n                    [value]=\"setting\">\n                    <mat-radio-button *ngFor=\"let settingValue of setting.values\"\n                      class=\"mat-typography\"\n                      [value]=\"settingValue\"\n                      [matTooltip]=\"getAvailableHashtagsValues(settingValue)\"\n                      [checked]=\"settingValue.enabled\"\n                      (click)=\"$event.stopPropagation()\"\n                      (change)=\"settingsValueCheckedRadioButton($event, source, setting, settingValue)\">\n                      {{settingValue.title | translate}}\n                    </mat-radio-button>\n                  </mat-radio-group>\n                </span>\n                <span *ngSwitchCase=\"'checkbox'\">\n                  <div class=\"checkAllButton\" *ngIf=\"setting.values.length\u00A0>\u00A03\">\n                    <button mat-raised-button\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>\n                  </div>\n                  <mat-checkbox *ngFor=\"let settingValue of getAvailableValues(setting)\"\n                    class=\"mat-menu-item\"\n                    [style.display]=\"displayBlock\"\n                    [checked]=\"settingValue.enabled\"\n                    [value]=\"setting\"\n                    [matTooltip]=\"getAvailableHashtagsValues(settingValue)\"\n                    (click)=\"$event.stopPropagation()\"\n                    (change)=\"settingsValueCheckedCheckbox($event, source, setting, settingValue)\">\n                    {{settingValue.title | translate}}\n                  </mat-checkbox>\n                </span>\n              </mat-menu>\n            </ng-container>\n          </mat-menu>\n      </ng-container>\n      <span *ngIf=\"hasPointerReverseSearchSource && !isTouchScreen\">\n        <mat-divider></mat-divider>\n        <span class=\"pointer-summary-slide-toggle-container mat-typography\">\n          <mat-slide-toggle class=\"pointer-summary-option\" (change)=\"changePointerReverseSearch($event)\" tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\" [matTooltip]=\"'igo.geo.search.pointerSearchSummary.tooltip' | translate\"\n            (click)=\"$event.stopPropagation()\" [checked]=\"pointerSummaryEnabled\" [labelPosition]=\"'after'\">\n            {{'igo.geo.search.pointerSearchSummary.title' | translate}}\n          </mat-slide-toggle>\n          <mat-slide-toggle class=\"pointer-summary-option\" (change)=\"changeSearchResultsGeometry($event)\" tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\" [matTooltip]=\"'igo.geo.search.searchResultsGeometry.tooltip' | translate\"\n            (click)=\"$event.stopPropagation()\" [checked]=\"searchResultsGeometryEnabled\" [labelPosition]=\"'after'\">\n            {{'igo.geo.search.searchResultsGeometry.title' | translate}}\n          </mat-slide-toggle>\n        </span>\n      </span>\n  </mat-menu>\n</div>\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"] }]
+        args: [{ selector: 'igo-search-settings', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"igo-search-settings\">\n\n  <button\n    mat-icon-button\n    class=\"igo-search-settings-button\"\n    color=\"primary\"\n    tooltip-position=\"below\"\n    matTooltipShowDelay=\"500\"\n    [matTooltip]=\"'igo.geo.search.menu.tooltip' | translate\"\n    [matMenuTriggerFor]=\"searchSettingsMenu\">\n    <mat-icon svgIcon=\"chevron-down\"></mat-icon>\n  </button>\n  <mat-menu\n    #searchSettingsMenu=\"matMenu\"\n    class=\"no-border-radius\">\n    <div class=\"checkAllButton\" *ngIf=\"getSearchSources().length>4\">\n      <button mat-raised-button\n        (click)=\"checkUncheckAllSources($event)\">{{!searchSourcesAllEnabled  ? ('igo.geo.search.searchSources.unselectAll' | translate): ('igo.geo.search.searchSources.selectAll' | translate)}}</button>\n    </div>\n      <ng-container *ngFor=\"let source of getSearchSources()\">\n        <span class=\"igo-search-settings-search-source\">\n          <mat-checkbox\n            class=\"igo-search-settings-checkbox\"\n            [checked]=\"source.enabled\"\n            [value]=\"source\"\n            (click)=\"$event.stopPropagation()\"\n            (change)=\"onCheckSearchSource($event, source)\">\n          </mat-checkbox>\n          <button *ngIf=\"source.settings.length\u00A0>\u00A00\"\n            [matMenuTriggerFor]=\"sub_menu\"\n            mat-menu-item>{{source.title}}\n          </button>\n          <button\n            mat-menu-item\n            *ngIf=\"source.settings.length\u00A0===\u00A00\">\n            {{source.title}}\n          </button>\n        </span>\n          <mat-menu #sub_menu=\"matMenu\">\n            <ng-container *ngFor=\"let setting of source.settings\">\n              <button\n                  mat-menu-item\n                  [matMenuTriggerFor]=\"test_sub_menu\">\n                {{'igo.geo.search.searchSources.settings.'+ setting.title | translate}}\n              </button>\n              <mat-menu #test_sub_menu=\"matMenu\"\n                [ngSwitch]=\"setting.type\"\n                yPosition=\"above\">\n                <span *ngSwitchCase=\"'radiobutton'\">\n                  <mat-radio-group\n                    class=\"igo-search-settings-radio-group\"\n                    [value]=\"setting\">\n                    <mat-radio-button *ngFor=\"let settingValue of setting.values\"\n                      class=\"mat-typography\"\n                      [value]=\"settingValue\"\n                      [matTooltip]=\"getAvailableHashtagsValues(settingValue)\"\n                      [checked]=\"settingValue.enabled\"\n                      (click)=\"$event.stopPropagation()\"\n                      (change)=\"settingsValueCheckedRadioButton($event, source, setting, settingValue)\">\n                      {{settingValue.title | translate}}\n                    </mat-radio-button>\n                  </mat-radio-group>\n                </span>\n                <span *ngSwitchCase=\"'checkbox'\">\n                  <div class=\"checkAllButton\" *ngIf=\"setting.values.length\u00A0>\u00A03\">\n                    <button mat-raised-button\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>\n                  </div>\n                  <mat-checkbox *ngFor=\"let settingValue of getAvailableValues(setting)\"\n                    class=\"mat-menu-item\"\n                    [style.display]=\"displayBlock\"\n                    [checked]=\"settingValue.enabled\"\n                    [value]=\"setting\"\n                    [matTooltip]=\"getAvailableHashtagsValues(settingValue)\"\n                    (click)=\"$event.stopPropagation()\"\n                    (change)=\"settingsValueCheckedCheckbox($event, source, setting, settingValue)\">\n                    {{settingValue.title | translate}}\n                  </mat-checkbox>\n                </span>\n              </mat-menu>\n            </ng-container>\n          </mat-menu>\n      </ng-container>\n      <span *ngIf=\"hasPointerReverseSearchSource && !isTouchScreen\">\n        <mat-divider></mat-divider>\n        <span class=\"pointer-summary-slide-toggle-container mat-typography\">\n          <mat-slide-toggle class=\"search-option\" (change)=\"changePointerReverseSearch($event)\" tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\" [matTooltip]=\"'igo.geo.search.pointerSearchSummary.tooltip' | translate\"\n            (click)=\"$event.stopPropagation()\" [checked]=\"pointerSummaryEnabled\" [labelPosition]=\"'after'\">\n            {{'igo.geo.search.pointerSearchSummary.title' | translate}}\n          </mat-slide-toggle>\n          <mat-slide-toggle class=\"search-option\" (change)=\"changeSearchResultsGeometry($event)\" tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\" [matTooltip]=\"'igo.geo.search.searchResultsGeometry.tooltip' | translate\"\n            (click)=\"$event.stopPropagation()\" [checked]=\"searchResultsGeometryEnabled\" [labelPosition]=\"'after'\">\n            {{'igo.geo.search.searchResultsGeometry.title' | translate}}\n          </mat-slide-toggle>\n          <mat-slide-toggle class=\"search-option\" (change)=\"reverseSearchCoordsFormat($event)\" tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\"\n            [matTooltip]=\"reverseSearchCoordsFormatEnabled ? ('igo.geo.search.reverseCoordFormat.tooltipLatLon' | translate)\n            : ('igo.geo.search.reverseCoordFormat.tooltipLonLat' | translate)\"\n            (click)=\"$event.stopPropagation()\" [checked]=\"reverseSearchCoordsFormatEnabled\" [labelPosition]=\"'after'\">\n            {{'igo.geo.search.reverseCoordFormat.title' | translate}}\n          </mat-slide-toggle>\n        </span>\n      </span>\n  </mat-menu>\n</div>\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}.search-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"] }]
     }], function () { return [{ type: SearchSourceService }, { type: i2$1.MediaService }, { type: i2$1.StorageService }]; }, { pointerSummaryEnabled: [{
             type: Input
         }], searchResultsGeometryEnabled: [{
             type: Input
+        }], reverseSearchCoordsFormatEnabled: [{
+            type: Input
         }], searchSourceChange: [{
             type: Output
         }], pointerSummaryStatus: [{
             type: Output
         }], searchResultsGeometryStatus: [{
             type: Output
+        }], reverseSearchCoordsFormatStatus: [{
+            type: Output
         }], handleKeyboardEvent: [{
             type: HostListener,
             args: ['document:keydown', ['$event']]
@@ -38235,11 +38530,11 @@ function SearchBarComponent_igo_search_selector_14_Template(rf, ctx) { if (rf &
 function SearchBarComponent_igo_search_settings_15_Template(rf, ctx) { if (rf & 1) {
     const _r11 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "igo-search-settings", 15);
-    i0.ɵɵlistener("pointerSummaryStatus", function SearchBarComponent_igo_search_settings_15_Template_igo_search_settings_pointerSummaryStatus_0_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r10 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r10.pointerSummaryStatus.emit($event)); })("searchResultsGeometryStatus", function SearchBarComponent_igo_search_settings_15_Template_igo_search_settings_searchResultsGeometryStatus_0_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r12 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r12.searchResultsGeometryStatus.emit($event)); })("searchSourceChange", function SearchBarComponent_igo_search_settings_15_Template_igo_search_settings_searchSourceChange_0_listener() { i0.ɵɵrestoreView(_r11); const ctx_r13 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r13.onSearchSettingsChange()); });
+    i0.ɵɵlistener("pointerSummaryStatus", function SearchBarComponent_igo_search_settings_15_Template_igo_search_settings_pointerSummaryStatus_0_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r10 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r10.pointerSummaryStatus.emit($event)); })("searchResultsGeometryStatus", function SearchBarComponent_igo_search_settings_15_Template_igo_search_settings_searchResultsGeometryStatus_0_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r12 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r12.searchResultsGeometryStatus.emit($event)); })("reverseSearchCoordsFormatStatus", function SearchBarComponent_igo_search_settings_15_Template_igo_search_settings_reverseSearchCoordsFormatStatus_0_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r13 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r13.reverseSearchCoordsFormatStatus.emit($event)); })("searchSourceChange", function SearchBarComponent_igo_search_settings_15_Template_igo_search_settings_searchSourceChange_0_listener() { i0.ɵɵrestoreView(_r11); const ctx_r14 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r14.onSearchSettingsChange()); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r5 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("pointerSummaryEnabled", ctx_r5.pointerSummaryEnabled)("searchResultsGeometryEnabled", ctx_r5.searchResultsGeometryEnabled);
+    i0.ɵɵproperty("pointerSummaryEnabled", ctx_r5.pointerSummaryEnabled)("searchResultsGeometryEnabled", ctx_r5.searchResultsGeometryEnabled)("reverseSearchCoordsFormatEnabled", ctx_r5.reverseSearchCoordsFormatEnabled);
 } }
 const _c1$2 = function (a0) { return { empty: a0 }; };
 const _c2$1 = function (a0) { return { "hasSearchIcon": a0 }; };
@@ -38276,10 +38571,15 @@ class SearchBarComponent {
          * Event emitted when the show geometry setting is changed
          */
         this.searchResultsGeometryStatus = new EventEmitter();
+        /**
+        * Event emitted when the coords format setting is changed
+        */
+        this.reverseSearchCoordsFormatStatus = new EventEmitter();
         this.term$ = new BehaviorSubject('');
         this.disabled$ = new BehaviorSubject(false);
         this.pointerSummaryEnabled = false;
         this.searchResultsGeometryEnabled = false;
+        this._reverseSearchCoordsFormatEnabled = false;
         /**
          * Whether a float label should be displayed
          */
@@ -38358,6 +38658,16 @@ class SearchBarComponent {
     get disabled() {
         return this.disabled$.value;
     }
+    /**
+     * When reverse coordinates status change
+     */
+    get reverseSearchCoordsFormatEnabled() {
+        return this._reverseSearchCoordsFormatEnabled;
+    }
+    set reverseSearchCoordsFormatEnabled(value) {
+        this._reverseSearchCoordsFormatEnabled = value;
+        this.setTerm(this.term, true);
+    }
     /**
      * Whether the search bar is empty
      * @internal
@@ -38441,12 +38751,12 @@ class SearchBarComponent {
      * Send the term into the stream only if this component is not disabled
      * @param term Search term
      */
-    setTerm(term) {
+    setTerm(term, reverseCoordEvent) {
         if (this.disabled) {
             return;
         }
         term = term || '';
-        if (term !== this.term) {
+        if (term !== this.term && !reverseCoordEvent) {
             this.term$.next(term);
         }
         const slug = term.replace(/(#[^\s]*)/g, '').trim();
@@ -38575,7 +38885,7 @@ SearchBarComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SearchBa
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.input = _t.first);
-    } }, inputs: { searchTypes: "searchTypes", searchType: "searchType", term: "term", disabled: "disabled", pointerSummaryEnabled: "pointerSummaryEnabled", searchResultsGeometryEnabled: "searchResultsGeometryEnabled", floatLabel: "floatLabel", appearance: "appearance", placeholder: "placeholder", label: "label", color: "color", termSplitter: "termSplitter", debounce: "debounce", minLength: "minLength", searchSelector: "searchSelector", searchSettings: "searchSettings", forceNA: "forceNA", store: "store" }, outputs: { pointerSummaryStatus: "pointerSummaryStatus", searchResultsGeometryStatus: "searchResultsGeometryStatus", searchTermChange: "searchTermChange", search: "search", searchTypeChange: "searchTypeChange", clearFeature: "clearFeature", searchSettingsChange: "searchSettingsChange" }, decls: 16, vars: 28, consts: [[1, "igo-search-bar-container", 3, "ngClass"], [3, "floatLabel", "appearance"], [4, "ngIf"], ["matInput", "", "autocomplete", "off", 3, "ngClass", "disabled", "placeholder", "value", "keyup", "touchend"], ["input", ""], [1, "search-bar-buttons"], ["mat-icon-button", "", 3, "color", "matTooltip", "click", 4, "ngIf"], ["mat-icon-button", "", 3, "color", 4, "ngIf"], [3, "searchTypes", "searchType", "searchTypeChange", 4, "ngIf"], [3, "pointerSummaryEnabled", "searchResultsGeometryEnabled", "pointerSummaryStatus", "searchResultsGeometryStatus", "searchSourceChange", 4, "ngIf"], ["mat-icon-button", "", 3, "color", "matTooltip", "click"], ["svgIcon", "close"], ["mat-icon-button", "", 3, "color"], ["svgIcon", "magnify"], [3, "searchTypes", "searchType", "searchTypeChange"], [3, "pointerSummaryEnabled", "searchResultsGeometryEnabled", "pointerSummaryStatus", "searchResultsGeometryStatus", "searchSourceChange"]], template: function SearchBarComponent_Template(rf, ctx) { if (rf & 1) {
+    } }, inputs: { searchTypes: "searchTypes", searchType: "searchType", term: "term", disabled: "disabled", pointerSummaryEnabled: "pointerSummaryEnabled", searchResultsGeometryEnabled: "searchResultsGeometryEnabled", reverseSearchCoordsFormatEnabled: "reverseSearchCoordsFormatEnabled", floatLabel: "floatLabel", appearance: "appearance", placeholder: "placeholder", label: "label", color: "color", termSplitter: "termSplitter", debounce: "debounce", minLength: "minLength", searchSelector: "searchSelector", searchSettings: "searchSettings", forceNA: "forceNA", store: "store" }, outputs: { pointerSummaryStatus: "pointerSummaryStatus", searchResultsGeometryStatus: "searchResultsGeometryStatus", reverseSearchCoordsFormatStatus: "reverseSearchCoordsFormatStatus", searchTermChange: "searchTermChange", search: "search", searchTypeChange: "searchTypeChange", clearFeature: "clearFeature", searchSettingsChange: "searchSettingsChange" }, decls: 16, vars: 28, consts: [[1, "igo-search-bar-container", 3, "ngClass"], [3, "floatLabel", "appearance"], [4, "ngIf"], ["matInput", "", "autocomplete", "off", 3, "ngClass", "disabled", "placeholder", "value", "keyup", "touchend"], ["input", ""], [1, "search-bar-buttons"], ["mat-icon-button", "", 3, "color", "matTooltip", "click", 4, "ngIf"], ["mat-icon-button", "", 3, "color", 4, "ngIf"], [3, "searchTypes", "searchType", "searchTypeChange", 4, "ngIf"], [3, "pointerSummaryEnabled", "searchResultsGeometryEnabled", "reverseSearchCoordsFormatEnabled", "pointerSummaryStatus", "searchResultsGeometryStatus", "reverseSearchCoordsFormatStatus", "searchSourceChange", 4, "ngIf"], ["mat-icon-button", "", 3, "color", "matTooltip", "click"], ["svgIcon", "close"], ["mat-icon-button", "", 3, "color"], ["svgIcon", "magnify"], [3, "searchTypes", "searchType", "searchTypeChange"], [3, "pointerSummaryEnabled", "searchResultsGeometryEnabled", "reverseSearchCoordsFormatEnabled", "pointerSummaryStatus", "searchResultsGeometryStatus", "reverseSearchCoordsFormatStatus", "searchSourceChange"]], template: function SearchBarComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵelementStart(0, "div", 0);
         i0.ɵɵpipe(1, "async");
         i0.ɵɵelementStart(2, "mat-form-field", 1);
@@ -38592,7 +38902,7 @@ SearchBarComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SearchBa
         i0.ɵɵpipe(12, "async");
         i0.ɵɵtemplate(13, SearchBarComponent_button_13_Template, 2, 1, "button", 7);
         i0.ɵɵtemplate(14, SearchBarComponent_igo_search_selector_14_Template, 2, 4, "igo-search-selector", 8);
-        i0.ɵɵtemplate(15, SearchBarComponent_igo_search_settings_15_Template, 1, 2, "igo-search-settings", 9);
+        i0.ɵɵtemplate(15, SearchBarComponent_igo_search_settings_15_Template, 1, 3, "igo-search-settings", 9);
         i0.ɵɵelementEnd()();
     } if (rf & 2) {
         i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(24, _c1$2, i0.ɵɵpipeBind1(1, 12, ctx.empty$)));
@@ -38610,10 +38920,10 @@ SearchBarComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SearchBa
         i0.ɵɵproperty("ngIf", ctx.searchSelector);
         i0.ɵɵadvance(1);
         i0.ɵɵproperty("ngIf", ctx.searchSettings);
-    } }, dependencies: [i1$1.NgClass, i1$1.NgIf, i4.MatTooltip, i2.MatIcon, i3.MatButton, i13.MatFormField, i13.MatLabel, i14.MatInput, SearchSelectorComponent, SearchSettingsComponent, i1$1.AsyncPipe, i7.TranslatePipe], styles: ["[_nghost-%COMP%]     .mat-form-field{padding:0 5px}[_nghost-%COMP%]     .mat-form-field-wrapper{margin-bottom:-1.5em}[_nghost-%COMP%]     span.mat-form-field-label-wrapper{top:-20px}[_nghost-%COMP%]     div.mat-form-field-infix{left:5px;right:5px;padding:0 0 12px!important}[_nghost-%COMP%]     div.mat-form-field-underline{display:none}.igo-search-bar-container[_ngcontent-%COMP%]{position:relative;width:100%;display:inline-flex;overflow:hidden}.igo-search-bar-container[_ngcontent-%COMP%] > mat-form-field[_ngcontent-%COMP%]{width:calc(100% - 80px)}.igo-search-bar-container.empty[_ngcontent-%COMP%] > mat-form-field[_ngcontent-%COMP%]{width:calc(100% - 40px)}.search-bar-buttons[_ngcontent-%COMP%]{position:relative;right:0px;display:inline-flex;top:0}.search-bar-buttons[_ngcontent-%COMP%] > button[_ngcontent-%COMP%]:nth-child(2):before{content:\"\";left:0px;top:5px;border-right:1px solid #ddd;height:28px}igo-search-selector[_ngcontent-%COMP%]{background-color:#fff;top:0;border-radius:0}igo-search-settings[_ngcontent-%COMP%]{background-color:#fff;top:0;border-radius:0}"], changeDetection: 0 });
+    } }, dependencies: [i1.NgClass, i1.NgIf, i4.MatTooltip, i2.MatIcon, i3$1.MatButton, i13.MatFormField, i13.MatLabel, i14.MatInput, SearchSelectorComponent, SearchSettingsComponent, i1.AsyncPipe, i7.TranslatePipe], styles: ["[_nghost-%COMP%]     .mat-form-field{padding:0 5px}[_nghost-%COMP%]     .mat-form-field-wrapper{margin-bottom:-1.5em}[_nghost-%COMP%]     span.mat-form-field-label-wrapper{top:-20px}[_nghost-%COMP%]     div.mat-form-field-infix{left:5px;right:5px;padding:0 0 12px!important}[_nghost-%COMP%]     div.mat-form-field-underline{display:none}.igo-search-bar-container[_ngcontent-%COMP%]{position:relative;width:100%;display:inline-flex;overflow:hidden}.igo-search-bar-container[_ngcontent-%COMP%] > mat-form-field[_ngcontent-%COMP%]{width:calc(100% - 80px)}.igo-search-bar-container.empty[_ngcontent-%COMP%] > mat-form-field[_ngcontent-%COMP%]{width:calc(100% - 40px)}.search-bar-buttons[_ngcontent-%COMP%]{position:relative;right:0px;display:inline-flex;top:0}.search-bar-buttons[_ngcontent-%COMP%] > button[_ngcontent-%COMP%]:nth-child(2):before{content:\"\";left:0px;top:5px;border-right:1px solid #ddd;height:28px}igo-search-selector[_ngcontent-%COMP%]{background-color:#fff;top:0;border-radius:0}igo-search-settings[_ngcontent-%COMP%]{background-color:#fff;top:0;border-radius:0}"], changeDetection: 0 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SearchBarComponent, [{
         type: Component,
-        args: [{ selector: 'igo-search-bar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"igo-search-bar-container\" [ngClass]=\"{empty: empty$ | async}\">\n  <mat-form-field [floatLabel]=\"floatLabel\" [appearance]=\"appearance\">\n    <mat-label *ngIf=\"label\">{{label}}</mat-label>\n    <input\n      #input\n      matInput\n      autocomplete=\"off\"\n      [ngClass]=\"{'hasSearchIcon': showSearchButton}\"\n      [disabled]=\"disabled$ | async\"\n      [placeholder]=\"placeholder ? placeholder : (placeholder$ | async) ? (placeholder$.value | translate) : undefined\"\n      [value]=\"term$ | async\"\n      (keyup)=\"onKeyup($event)\"\n      (touchend)=\"onKeyup($event)\">\n  </mat-form-field>\n\n  <div class=\"search-bar-buttons\">\n    <button *ngIf=\"(empty$ | async)===false\"\n      mat-icon-button\n      [color]=\"color\"\n      (click)=\"onClearButtonClick()\"\n      [matTooltip]=\"'igo.geo.search.clearSearch' | translate\">\n      <mat-icon svgIcon=\"close\"></mat-icon>\n    </button>\n    \n    <button *ngIf=\"showSearchButton\"\n      mat-icon-button\n      [color]=\"color\">\n      <mat-icon svgIcon=\"magnify\"></mat-icon>\n    </button>\n\n    <igo-search-selector\n      *ngIf=\"searchSelector\"\n      [searchTypes]=\"searchTypes\"\n      [searchType]=\"searchType$ | async\"\n      (searchTypeChange)=\"onSearchTypeChange($event)\">\n    </igo-search-selector>\n\n    <igo-search-settings\n      *ngIf=\"searchSettings\"\n      [pointerSummaryEnabled]=\"pointerSummaryEnabled\"\n      (pointerSummaryStatus)=\"pointerSummaryStatus.emit($event)\"\n      [searchResultsGeometryEnabled]=\"searchResultsGeometryEnabled\"\n      (searchResultsGeometryStatus)=\"searchResultsGeometryStatus.emit($event)\"\n      (searchSourceChange)=\"onSearchSettingsChange()\">\n    </igo-search-settings>\n  </div>\n</div>\n", styles: [":host ::ng-deep .mat-form-field{padding:0 5px}:host ::ng-deep .mat-form-field-wrapper{margin-bottom:-1.5em}:host ::ng-deep span.mat-form-field-label-wrapper{top:-20px}:host ::ng-deep div.mat-form-field-infix{left:5px;right:5px;padding:0 0 12px!important}:host ::ng-deep div.mat-form-field-underline{display:none}.igo-search-bar-container{position:relative;width:100%;display:inline-flex;overflow:hidden}.igo-search-bar-container>mat-form-field{width:calc(100% - 80px)}.igo-search-bar-container.empty>mat-form-field{width:calc(100% - 40px)}.search-bar-buttons{position:relative;right:0px;display:inline-flex;top:0}.search-bar-buttons>button:nth-child(2):before{content:\"\";left:0px;top:5px;border-right:1px solid #ddd;height:28px}igo-search-selector{background-color:#fff;top:0;border-radius:0}igo-search-settings{background-color:#fff;top:0;border-radius:0}\n"] }]
+        args: [{ selector: 'igo-search-bar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"igo-search-bar-container\" [ngClass]=\"{empty: empty$ | async}\">\n  <mat-form-field [floatLabel]=\"floatLabel\" [appearance]=\"appearance\">\n    <mat-label *ngIf=\"label\">{{label}}</mat-label>\n    <input\n      #input\n      matInput\n      autocomplete=\"off\"\n      [ngClass]=\"{'hasSearchIcon': showSearchButton}\"\n      [disabled]=\"disabled$ | async\"\n      [placeholder]=\"placeholder ? placeholder : (placeholder$ | async) ? (placeholder$.value | translate) : undefined\"\n      [value]=\"term$ | async\"\n      (keyup)=\"onKeyup($event)\"\n      (touchend)=\"onKeyup($event)\">\n  </mat-form-field>\n\n  <div class=\"search-bar-buttons\">\n    <button *ngIf=\"(empty$ | async)===false\"\n      mat-icon-button\n      [color]=\"color\"\n      (click)=\"onClearButtonClick()\"\n      [matTooltip]=\"'igo.geo.search.clearSearch' | translate\">\n      <mat-icon svgIcon=\"close\"></mat-icon>\n    </button>\n    \n    <button *ngIf=\"showSearchButton\"\n      mat-icon-button\n      [color]=\"color\">\n      <mat-icon svgIcon=\"magnify\"></mat-icon>\n    </button>\n\n    <igo-search-selector\n      *ngIf=\"searchSelector\"\n      [searchTypes]=\"searchTypes\"\n      [searchType]=\"searchType$ | async\"\n      (searchTypeChange)=\"onSearchTypeChange($event)\">\n    </igo-search-selector>\n\n    <igo-search-settings\n      *ngIf=\"searchSettings\"\n      [pointerSummaryEnabled]=\"pointerSummaryEnabled\"\n      (pointerSummaryStatus)=\"pointerSummaryStatus.emit($event)\"\n      [searchResultsGeometryEnabled]=\"searchResultsGeometryEnabled\"\n      (searchResultsGeometryStatus)=\"searchResultsGeometryStatus.emit($event)\"\n      [reverseSearchCoordsFormatEnabled]=\"reverseSearchCoordsFormatEnabled\"\n      (reverseSearchCoordsFormatStatus)=\"reverseSearchCoordsFormatStatus.emit($event)\"\n      (searchSourceChange)=\"onSearchSettingsChange()\">\n    </igo-search-settings>\n  </div>\n</div>\n", styles: [":host ::ng-deep .mat-form-field{padding:0 5px}:host ::ng-deep .mat-form-field-wrapper{margin-bottom:-1.5em}:host ::ng-deep span.mat-form-field-label-wrapper{top:-20px}:host ::ng-deep div.mat-form-field-infix{left:5px;right:5px;padding:0 0 12px!important}:host ::ng-deep div.mat-form-field-underline{display:none}.igo-search-bar-container{position:relative;width:100%;display:inline-flex;overflow:hidden}.igo-search-bar-container>mat-form-field{width:calc(100% - 80px)}.igo-search-bar-container.empty>mat-form-field{width:calc(100% - 40px)}.search-bar-buttons{position:relative;right:0px;display:inline-flex;top:0}.search-bar-buttons>button:nth-child(2):before{content:\"\";left:0px;top:5px;border-right:1px solid #ddd;height:28px}igo-search-selector{background-color:#fff;top:0;border-radius:0}igo-search-settings{background-color:#fff;top:0;border-radius:0}\n"] }]
     }], function () { return [{ type: i2$1.ConfigService }, { type: SearchService }, { type: SearchSourceService }]; }, { searchTypes: [{
             type: Input
         }], searchType: [{
@@ -38622,6 +38932,8 @@ SearchBarComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SearchBa
             type: Output
         }], searchResultsGeometryStatus: [{
             type: Output
+        }], reverseSearchCoordsFormatStatus: [{
+            type: Output
         }], term: [{
             type: Input
         }], disabled: [{
@@ -38630,6 +38942,8 @@ SearchBarComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SearchBa
             type: Input
         }], searchResultsGeometryEnabled: [{
             type: Input
+        }], reverseSearchCoordsFormatEnabled: [{
+            type: Input
         }], floatLabel: [{
             type: Input
         }], appearance: [{
@@ -38855,11 +39169,11 @@ SearchResultsItemComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
         i0.ɵɵproperty("ngIf", !ctx.titleHtml);
         i0.ɵɵadvance(1);
         i0.ɵɵproperty("ngIf", ctx.withZoomButton);
-    } }, dependencies: [i1$1.NgIf, i4.MatTooltip, i2.MatIcon, i5.MatListItem, i5.MatListAvatarCssMatStyler, i9.MatLine, i3.MatButton, i5$1.StopPropagationDirective], styles: ["[_nghost-%COMP%]     small{color:#8c8c8c}  .search-result-tooltip{white-space:pre-line}"], changeDetection: 0 });
+    } }, dependencies: [i1.NgIf, i4.MatTooltip, i2.MatIcon, i5.MatListItem, i5.MatListAvatarCssMatStyler, i9.MatLine, i3$1.MatButton, i5$1.StopPropagationDirective], styles: ["[_nghost-%COMP%]     small{color:#8c8c8c}  .search-result-tooltip{white-space:pre-line}"], changeDetection: 0 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SearchResultsItemComponent, [{
         type: Component,
         args: [{ selector: 'igo-search-results-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-list-item>\n  <mat-icon *ngIf=\"icon\" mat-list-avatar svgIcon=\"{{showIcons ? icon : 'blank'}}\"></mat-icon>\n\n  <h4 matLine *ngIf=\"titleHtml\" [innerHtml]=\"titleHtml\" matTooltipShowDelay=\"500\" [matTooltip]=\"tooltipHtml\" matTooltipClass=\"search-result-tooltip\"></h4>\n  <h4 matLine *ngIf=\"!titleHtml\" matTooltipShowDelay=\"500\" [matTooltip]=\"title\">{{title}}</h4>\n\n  <button *ngIf=\"withZoomButton\"\n    igoStopPropagation\n    mat-icon-button\n    (click)=\"onZoomHandler()\">\n    <mat-icon svgIcon=\"magnify\"></mat-icon>\n  </button>\n\n  <ng-content\n    select=[igoSearchItemToolbar]>\n  </ng-content>\n\n</mat-list-item>\n", styles: [":host ::ng-deep small{color:#8c8c8c}::ng-deep .search-result-tooltip{white-space:pre-line}\n"] }]
-    }], function () { return []; }, { result: [{
+    }], null, { result: [{
             type: Input
         }], map: [{
             type: Input
@@ -39163,7 +39477,7 @@ SearchResultsComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Sear
         i0.ɵɵproperty("navigation", true);
         i0.ɵɵadvance(1);
         i0.ɵɵproperty("ngForOf", i0.ɵɵpipeBind1(3, 2, ctx.results$));
-    } }, dependencies: [i1$1.NgForOf, i1$1.NgIf, i1$1.NgTemplateOutlet, i5$1.CollapsibleComponent, i5$1.ListItemDirective, i5$1.ListComponent, SearchResultsItemComponent, i1$1.AsyncPipe, i7.TranslatePipe], styles: [".moreResults[_ngcontent-%COMP%]{cursor:pointer;color:#00f;float:right;margin-right:10px;margin-top:5px}igo-list[_ngcontent-%COMP%]     mat-list{height:100%}"], changeDetection: 0 });
+    } }, dependencies: [i1.NgForOf, i1.NgIf, i1.NgTemplateOutlet, i5$1.CollapsibleComponent, i5$1.ListItemDirective, i5$1.ListComponent, SearchResultsItemComponent, i1.AsyncPipe, i7.TranslatePipe], styles: [".moreResults[_ngcontent-%COMP%]{cursor:pointer;color:#00f;float:right;margin-right:10px;margin-top:5px}igo-list[_ngcontent-%COMP%]     mat-list{height:100%}"], changeDetection: 0 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SearchResultsComponent, [{
         type: Component,
         args: [{ selector: 'igo-search-results', changeDetection: ChangeDetectionStrategy.OnPush, template: "<igo-list [navigation]=\"true\">\n  <ng-template\n    #groupTemplate\n    ngFor let-group\n    [ngForOf]=\"results$ | async\">\n\n    <igo-collapsible [class]=\"group.source.getId()\"\n      *ngIf=\"mode === searchResultMode.Grouped; else flatTemplate\"\n      [title]=\"computeGroupTitle(group)\"\n      [collapsed]=\"collapsed[group.source.title]\"\n      (toggle)=\"collapsed[group.source.title] = $event\">\n      <ng-container *ngTemplateOutlet=\"storeItemTemplate; context: {results: group.results}\"></ng-container>\n    </igo-collapsible>\n\n    <ng-template #flatTemplate>\n      <ng-container *ngTemplateOutlet=\"storeItemTemplate; context: {results: group.results}\"></ng-container>\n    </ng-template>\n\n    <ng-template #storeItemTemplate let-results=\"results\">\n      <ng-template ngFor let-result [ngForOf]=\"results\">\n        <igo-search-results-item\n          igoListItem\n          color=\"accent\"\n          [map]=\"map\"\n          [result]=\"result\"\n          [showIcons]=\"showIcons\"\n          [withZoomButton]=\"withZoomButton\"\n          [focused]=\"store.state.get(result).focused\"\n          [selected]=\"store.state.get(result).selected\"\n          (focus)=\"resultFocus.emit(result)\"\n          (unfocus)=\"resultUnfocus.emit(result)\"\n          (select)=\"onResultSelect(result)\"\n          (mouseenter)=\"resultFocus.emit(result)\"\n          (mouseleave)=\"resultUnfocus.emit(result)\">\n\n          <ng-container igoSearchItemToolbar\n            [ngTemplateOutlet]=\"templateSearchToolbar\"\n            [ngTemplateOutletContext]=\"{result: result}\">\n          </ng-container>\n\n        </igo-search-results-item>\n      </ng-template>\n      <span class=\"moreResults mat-typography\" *ngIf=\"isMoreResults(group)\" (click)=\"displayMoreResults(group)\">\n        <u>{{ 'igo.geo.search.displayMoreResults' | translate }}</u>\n      </span>\n    </ng-template>\n\n  </ng-template>\n\n</igo-list>\n", styles: [".moreResults{cursor:pointer;color:#00f;float:right;margin-right:10px;margin-top:5px}igo-list ::ng-deep mat-list{height:100%}\n"] }]
@@ -39200,32 +39514,157 @@ SearchResultsComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Sear
             args: ['igoSearchItemToolbar', /* TODO: add static flag */ {}]
         }] }); })();
 
+function SaveFeatureDialogComponent_mat_option_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "mat-option", 14)(1, "p", 15);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const layer_r2 = ctx.$implicit;
+    i0.ɵɵproperty("value", layer_r2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(layer_r2.title);
+} }
+class SaveFeatureDialogComponent {
+    constructor(formBuilder, languageService, dialogRef, data) {
+        this.formBuilder = formBuilder;
+        this.languageService = languageService;
+        this.dialogRef = dialogRef;
+        this.data = data;
+        this.layers = [];
+        this.form = this.formBuilder.group({
+            layerName: ['', [Validators.required]],
+        });
+    }
+    ngOnInit() {
+        this.feature = this.data.feature;
+        this.layers = this.data.layers;
+        this.filteredLayers = this.form.controls['layerName'].valueChanges.pipe(startWith(''), map(val => this.filter(val)));
+    }
+    filter(val) {
+        if (typeof val !== 'string') {
+            return;
+        }
+        return this.layers.map(l => l).filter(layer => layer?.title?.toLowerCase().includes(val.toLowerCase()));
+    }
+    displayFn(layer) {
+        return layer && layer.title ? layer.title : '';
+    }
+    save() {
+        const data = { layer: this.form.value.layerName, feature: this.feature };
+        this.dialogRef.close(data);
+    }
+    cancel() {
+        this.dialogRef.close();
+    }
+}
+SaveFeatureDialogComponent.ɵfac = function SaveFeatureDialogComponent_Factory(t) { return new (t || SaveFeatureDialogComponent)(i0.ɵɵdirectiveInject(i2$2.UntypedFormBuilder), i0.ɵɵdirectiveInject(i2$1.LanguageService), i0.ɵɵdirectiveInject(i3.MatDialogRef), i0.ɵɵdirectiveInject(MAT_DIALOG_DATA, 8)); };
+SaveFeatureDialogComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SaveFeatureDialogComponent, selectors: [["igo-save-feature-dialog"]], decls: 23, vars: 21, consts: [["mat-dialog-title", "", 1, "mat-typography"], ["mat-dialog-content", "", 1, "mat-typography"], [1, "igo-form", 3, "formGroup"], [3, "navigation", "selection"], ["igoListItem", "", "color", "accent", "showIcons", "true", 3, "result"], [1, "igo-input-container"], ["type", "text", "matInput", "", "formControlName", "layerName", 3, "placeholder", "matAutocomplete"], [3, "displayWith"], ["auto", "matAutocomplete"], [3, "value", 4, "ngFor", "ngForOf"], ["mat-dialog-actions", "", 2, "justify-content", "center"], [1, "igo-form-button-group", "create-layer-button-top-padding"], ["mat-raised-button", "", "type", "button", 3, "click"], ["id", "createLayerBtnDialog", "mat-raised-button", "", "type", "button", "color", "primary", 3, "click"], [3, "value"], ["mat-line", ""]], template: function SaveFeatureDialogComponent_Template(rf, ctx) { if (rf & 1) {
+        i0.ɵɵelementStart(0, "h1", 0);
+        i0.ɵɵtext(1);
+        i0.ɵɵpipe(2, "translate");
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(3, "div", 1)(4, "form", 2)(5, "igo-list", 3);
+        i0.ɵɵelement(6, "igo-search-results-item", 4);
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(7, "div", 5)(8, "mat-form-field");
+        i0.ɵɵelement(9, "input", 6);
+        i0.ɵɵpipe(10, "translate");
+        i0.ɵɵelementStart(11, "mat-autocomplete", 7, 8);
+        i0.ɵɵtemplate(13, SaveFeatureDialogComponent_mat_option_13_Template, 3, 2, "mat-option", 9);
+        i0.ɵɵpipe(14, "async");
+        i0.ɵɵelementEnd()()()()();
+        i0.ɵɵelementStart(15, "div", 10)(16, "div", 11)(17, "button", 12);
+        i0.ɵɵlistener("click", function SaveFeatureDialogComponent_Template_button_click_17_listener() { return ctx.cancel(); });
+        i0.ɵɵtext(18);
+        i0.ɵɵpipe(19, "translate");
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(20, "button", 13);
+        i0.ɵɵlistener("click", function SaveFeatureDialogComponent_Template_button_click_20_listener() { return ctx.save(); });
+        i0.ɵɵtext(21);
+        i0.ɵɵpipe(22, "translate");
+        i0.ɵɵelementEnd()()();
+    } if (rf & 2) {
+        const _r0 = i0.ɵɵreference(12);
+        i0.ɵɵadvance(1);
+        i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(2, 11, "igo.geo.layer.saveFeatureInLayer"));
+        i0.ɵɵadvance(3);
+        i0.ɵɵproperty("formGroup", ctx.form);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("navigation", false)("selection", false);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("result", ctx.feature);
+        i0.ɵɵadvance(3);
+        i0.ɵɵpropertyInterpolate("placeholder", i0.ɵɵpipeBind1(10, 13, "igo.geo.layer.chooseOrSet"));
+        i0.ɵɵproperty("matAutocomplete", _r0);
+        i0.ɵɵadvance(2);
+        i0.ɵɵproperty("displayWith", ctx.displayFn);
+        i0.ɵɵadvance(2);
+        i0.ɵɵproperty("ngForOf", i0.ɵɵpipeBind1(14, 15, ctx.filteredLayers));
+        i0.ɵɵadvance(5);
+        i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(19, 17, "igo.geo.layer.cancelBtn"), " ");
+        i0.ɵɵadvance(3);
+        i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(22, 19, "igo.geo.layer.saveBtn"), " ");
+    } }, dependencies: [i1.NgForOf, i9.MatLine, i3$1.MatButton, i3.MatDialogTitle, i3.MatDialogContent, i3.MatDialogActions, i5$1.ListItemDirective, i5$1.ListComponent, i13.MatFormField, i2$2.ɵNgNoValidate, i2$2.DefaultValueAccessor, i2$2.NgControlStatus, i2$2.NgControlStatusGroup, i2$2.FormGroupDirective, i2$2.FormControlName, i14.MatInput, i9.MatOption, i11$1.MatAutocomplete, i11$1.MatAutocompleteTrigger, SearchResultsItemComponent, i1.AsyncPipe, i7.TranslatePipe], styles: ["mat-form-field[_ngcontent-%COMP%]{width:100%}.create-layer-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}button[_ngcontent-%COMP%]{cursor:pointer}button#createLayerBtnDialog[disabled=true][_ngcontent-%COMP%]{cursor:default;background-color:#0000001f;color:#00000042}.error[_ngcontent-%COMP%]{color:red}"] });
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SaveFeatureDialogComponent, [{
+        type: Component,
+        args: [{ selector: 'igo-save-feature-dialog', template: "<h1 mat-dialog-title class=\"mat-typography\">{{'igo.geo.layer.saveFeatureInLayer' | translate}}</h1>\n\n<div mat-dialog-content class=\"mat-typography\">\n  <form class=\"igo-form\" [formGroup]=\"form\">\n    <igo-list [navigation]=\"false\" [selection]=\"false\">\n      <igo-search-results-item\n        igoListItem\n        color=\"accent\"\n        [result]=\"feature\"\n        showIcons=\"true\">\n      </igo-search-results-item>\n    </igo-list>\n    \n    <div class=\"igo-input-container\">\n      <mat-form-field>\n        <input type=\"text\"\n          placeholder=\"{{'igo.geo.layer.chooseOrSet' | translate}}\"\n          matInput\n          [matAutocomplete]=\"auto\"\n          formControlName=\"layerName\">\n        <mat-autocomplete [displayWith]=\"displayFn\" #auto=\"matAutocomplete\">\n          <mat-option *ngFor=\"let layer of filteredLayers | async\" [value]=\"layer\">\n            <p mat-line>{{layer.title}}</p>\n          </mat-option>\n        </mat-autocomplete>\n      </mat-form-field>\n    </div>\n  </form>\n</div>\n\n<div mat-dialog-actions style=\"justify-content: center\">\n  <div class=\"igo-form-button-group create-layer-button-top-padding\">\n    <button\n      mat-raised-button\n      type=\"button\"\n      (click)=\"cancel()\">\n      {{'igo.geo.layer.cancelBtn' | translate}}\n    </button>\n    <button\n      id=\"createLayerBtnDialog\"\n      mat-raised-button\n      type=\"button\"\n      color=\"primary\"\n      (click)=\"save()\">\n      {{'igo.geo.layer.saveBtn' | translate}}\n    </button>\n  </div>\n</div>", styles: ["mat-form-field{width:100%}.create-layer-button-top-padding{padding-top:25px}.igo-form{padding:10px 5px 5px}.igo-form-button-group{text-align:center}button{cursor:pointer}button#createLayerBtnDialog[disabled=true]{cursor:default;background-color:#0000001f;color:#00000042}.error{color:red}\n"] }]
+    }], function () { return [{ type: i2$2.UntypedFormBuilder }, { type: i2$1.LanguageService }, { type: i3.MatDialogRef }, { type: undefined, decorators: [{
+                type: Optional
+            }, {
+                type: Inject,
+                args: [MAT_DIALOG_DATA]
+            }] }]; }, null); })();
+
 function SearchResultAddButtonComponent_button_0_Template(rf, ctx) { if (rf & 1) {
-    const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 1);
-    i0.ɵɵlistener("mouseenter", function SearchResultAddButtonComponent_button_0_Template_button_mouseenter_0_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onMouseEvent($event)); })("mouseleave", function SearchResultAddButtonComponent_button_0_Template_button_mouseleave_0_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.onMouseEvent($event)); })("click", function SearchResultAddButtonComponent_button_0_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r4 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r4.onToggleClick($event)); });
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 2);
+    i0.ɵɵlistener("mouseenter", function SearchResultAddButtonComponent_button_0_Template_button_mouseenter_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onMouseEvent($event)); })("mouseleave", function SearchResultAddButtonComponent_button_0_Template_button_mouseleave_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r4 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r4.onMouseEvent($event)); })("click", function SearchResultAddButtonComponent_button_0_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r5 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r5.onToggleClick($event)); });
     i0.ɵɵpipe(1, "translate");
     i0.ɵɵpipe(2, "async");
-    i0.ɵɵpipe(3, "async");
-    i0.ɵɵelement(4, "mat-icon", 2);
+    i0.ɵɵelement(3, "mat-icon", 3);
+    i0.ɵɵpipe(4, "async");
     i0.ɵɵpipe(5, "async");
     i0.ɵɵpipe(6, "async");
+    i0.ɵɵpipe(7, "async");
+    i0.ɵɵpipe(8, "async");
+    i0.ɵɵpipe(9, "async");
+    i0.ɵɵpipe(10, "async");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("matTooltip", i0.ɵɵpipeBind1(1, 4, i0.ɵɵpipeBind1(2, 6, ctx_r0.tooltip$)))("color", i0.ɵɵpipeBind1(3, 8, ctx_r0.isPreview$) ? "" : ctx_r0.added ? "warn" : "");
-    i0.ɵɵadvance(4);
-    i0.ɵɵproperty("matBadgeHidden", i0.ɵɵpipeBind1(5, 10, ctx_r0.inRange$))("svgIcon", i0.ɵɵpipeBind1(6, 12, ctx_r0.isPreview$) ? "plus" : ctx_r0.added ? "delete" : "plus");
+    i0.ɵɵproperty("matTooltip", i0.ɵɵpipeBind1(1, 6, ctx_r0.computeTooltip()))("color", i0.ɵɵpipeBind1(2, 8, ctx_r0.isPreview$) ? "" : ctx_r0.added ? "warn" : "");
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("igoMatBadgeIcon", ctx_r0.getBadgeIcon())("matBadgeHidden", i0.ɵɵpipeBind1(4, 10, ctx_r0.inRange$) && i0.ɵɵpipeBind1(5, 12, ctx_r0.isVisible$) === true || i0.ɵɵpipeBind1(6, 14, ctx_r0.inRange$) && !ctx_r0.added || i0.ɵɵpipeBind1(7, 16, ctx_r0.inRange$) && i0.ɵɵpipeBind1(8, 18, ctx_r0.isPreview$))("matBadgeDisabled", i0.ɵɵpipeBind1(9, 20, ctx_r0.inRange$) === false)("svgIcon", i0.ɵɵpipeBind1(10, 22, ctx_r0.isPreview$) ? "plus" : ctx_r0.added ? "delete" : "plus");
+} }
+function SearchResultAddButtonComponent_button_1_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 4);
+    i0.ɵɵlistener("click", function SearchResultAddButtonComponent_button_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r6 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r6.addFeatureToLayer()); });
+    i0.ɵɵpipe(1, "translate");
+    i0.ɵɵpipe(2, "async");
+    i0.ɵɵelement(3, "mat-icon", 5);
+    i0.ɵɵpipe(4, "async");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("matTooltip", i0.ɵɵpipeBind1(1, 2, i0.ɵɵpipeBind1(2, 4, ctx_r1.addFeatureToLayerTooltip$)));
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("matBadgeHidden", i0.ɵɵpipeBind1(4, 6, ctx_r1.inRange$));
 } }
 class SearchResultAddButtonComponent {
-    constructor(layerService) {
+    constructor(layerService, dialog, dataSourceService) {
         this.layerService = layerService;
+        this.dialog = dialog;
+        this.dataSourceService = dataSourceService;
         this.tooltip$ = new BehaviorSubject('igo.geo.catalog.layer.addToMap');
+        this.addFeatureToLayerTooltip$ = new BehaviorSubject('igo.geo.search.addToLayer');
         this.inRange$ = new BehaviorSubject(true);
+        this.isVisible$ = new BehaviorSubject(false);
         this.isPreview$ = new BehaviorSubject(false);
         this.layersSubcriptions = [];
         this.mouseInsideAdd = false;
         this._color = 'primary';
+        this.stores = [];
     }
     get color() {
         return this._color;
@@ -39233,6 +39672,9 @@ class SearchResultAddButtonComponent {
     set color(value) {
         this._color = value;
     }
+    get allLayers() {
+        return this.map.layers.filter((layer) => layer.id.includes('igo-search-layer'));
+    }
     /**
      * @internal
      */
@@ -39241,13 +39683,17 @@ class SearchResultAddButtonComponent {
             this.added =
                 this.map.layers.findIndex(lay => lay.id === this.layer.data.sourceOptions.id) !== -1;
         }
+        this.layers$$ = this.map.layers$.subscribe(() => {
+            this.isVisible();
+        });
         this.resolution$$ = this.map.viewController.resolution$.subscribe(value => {
             this.isInResolutionsRange(value);
-            this.tooltip$.next(this.computeTooltip());
+            this.isVisible();
         });
     }
     ngOnDestroy() {
         this.resolution$$.unsubscribe();
+        this.layers$$.unsubscribe();
     }
     /**
      * On mouse event, mouseenter /mouseleave
@@ -39349,11 +39795,33 @@ class SearchResultAddButtonComponent {
         const maxResolution = this.layer.data.maxResolution || Infinity;
         this.inRange$.next(resolution >= minResolution && resolution <= maxResolution);
     }
+    isVisible() {
+        if (this.layer?.data?.sourceOptions?.id) {
+            const oLayer = this.map.getLayerById(this.layer.data.sourceOptions.id);
+            oLayer ? this.isVisible$.next(oLayer.visible) : this.isVisible$.next(false);
+        }
+    }
+    getBadgeIcon() {
+        if (this.inRange$.value) {
+            return this.isVisible$.value ? '' : 'eye-off';
+        }
+        else {
+            return 'eye-off';
+        }
+    }
     computeTooltip() {
         if (this.added) {
-            return this.inRange$.value
-                ? 'igo.geo.catalog.layer.removeFromMap'
-                : 'igo.geo.catalog.layer.removeFromMapOutRange';
+            if (this.isPreview$.value) {
+                return 'igo.geo.catalog.layer.addToMap';
+            }
+            else if (this.inRange$.value) {
+                return this.isVisible$.value
+                    ? 'igo.geo.catalog.layer.removeFromMap'
+                    : 'igo.geo.catalog.layer.removeFromMapNotVisible';
+            }
+            else {
+                return 'igo.geo.catalog.layer.removeFromMapOutRange';
+            }
         }
         else {
             return this.inRange$.value
@@ -39361,17 +39829,133 @@ class SearchResultAddButtonComponent {
                 : 'igo.geo.catalog.layer.addToMapOutRange';
         }
     }
+    addFeatureToLayer() {
+        if (this.layer.meta.dataType !== 'Feature') {
+            return;
+        }
+        const selectedFeature = this.layer;
+        const dialogRef = this.dialog.open(SaveFeatureDialogComponent, {
+            width: '700px',
+            data: {
+                feature: selectedFeature,
+                layers: this.allLayers
+            }
+        });
+        dialogRef.afterClosed().subscribe((data) => {
+            if (data) {
+                if (this.stores.length > 0) {
+                    this.stores.map((store) => {
+                        store.state.updateAll({ selected: false });
+                        (store?.layer).visible = false;
+                        return store;
+                    });
+                }
+                // check if is new layer
+                if (typeof data.layer === 'string') {
+                    this.createLayer(data.layer, data.feature);
+                }
+                else {
+                    const activeStore = this.stores.find(store => store.layer.id === data.layer.id);
+                    activeStore.layer.visible = true;
+                    activeStore.layer.opacity = 1;
+                    this.addFeature(data.feature, activeStore);
+                }
+            }
+        });
+    }
+    createLayer(layerTitle, selectedFeature) {
+        const activeStore = new FeatureStore([], {
+            map: this.map
+        });
+        // set layer id
+        let layerCounterID = 0;
+        for (const layer of this.allLayers) {
+            let numberId = Number(layer.id.replace('igo-search-layer', ''));
+            layerCounterID = Math.max(numberId, layerCounterID);
+        }
+        this.dataSourceService
+            .createAsyncDataSource({
+            type: 'vector',
+            queryable: true
+        })
+            .pipe(take$1(1))
+            .subscribe((dataSource) => {
+            let searchLayer = new VectorLayer({
+                isIgoInternalLayer: true,
+                id: 'igo-search-layer' + ++layerCounterID,
+                title: layerTitle,
+                source: dataSource,
+                style: createOverlayDefaultStyle({
+                    text: '',
+                    strokeWidth: 1,
+                    fillColor: 'rgba(255,255,255,0.4)',
+                    strokeColor: 'rgba(143,7,7,1)'
+                }),
+                showInLayerList: true,
+                exportable: true,
+                workspace: {
+                    enabled: true
+                }
+            });
+            tryBindStoreLayer(activeStore, searchLayer);
+            tryAddLoadingStrategy(activeStore, new FeatureStoreLoadingStrategy({
+                motion: FeatureMotion.None
+            }));
+            tryAddSelectionStrategy(activeStore, new FeatureStoreSelectionStrategy({
+                map: this.map,
+                motion: FeatureMotion.None,
+                many: true
+            }));
+            activeStore.layer.visible = true;
+            activeStore.source.ol.on('removefeature', (event) => {
+                const olGeometry = event.feature.getGeometry();
+                this.clearLabelsOfOlGeometry(olGeometry);
+            });
+            this.addFeature(selectedFeature, activeStore);
+            this.stores.push(activeStore);
+        });
+    }
+    addFeature(feature, activeStore) {
+        const newFeature = {
+            type: feature.data.type,
+            geometry: {
+                coordinates: feature.data.geometry.coordinates,
+                type: feature.data.geometry.type
+            },
+            projection: feature.data.projection,
+            properties: feature.data.properties,
+            meta: {
+                id: feature.meta.id
+            }
+        };
+        delete newFeature.properties.Route;
+        activeStore.update(newFeature);
+        activeStore.setLayerExtent();
+        activeStore.layer.ol.getSource().refresh();
+    }
+    clearLabelsOfOlGeometry(olGeometry) {
+        getTooltipsOfOlGeometry(olGeometry).forEach((olTooltip) => {
+            if (olTooltip && olTooltip.getMap()) {
+                this.map.ol.removeOverlay(olTooltip);
+            }
+        });
+    }
 }
-SearchResultAddButtonComponent.ɵfac = function SearchResultAddButtonComponent_Factory(t) { return new (t || SearchResultAddButtonComponent)(i0.ɵɵdirectiveInject(LayerService)); };
-SearchResultAddButtonComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SearchResultAddButtonComponent, selectors: [["igo-search-add-button"]], inputs: { layer: "layer", added: "added", map: "map", color: "color" }, decls: 1, vars: 1, consts: [["igoStopPropagation", "", "mat-icon-button", "", "tooltip-position", "below", "matTooltipShowDelay", "500", 3, "matTooltip", "color", "mouseenter", "mouseleave", "click", 4, "ngIf"], ["igoStopPropagation", "", "mat-icon-button", "", "tooltip-position", "below", "matTooltipShowDelay", "500", 3, "matTooltip", "color", "mouseenter", "mouseleave", "click"], ["matBadge", "icon", "igoMatBadgeIcon", "eye-off", "igoMatBadgeInverseColor", "true", "matBadgeDisabled", "true", "matBadgeSize", "small", "matBadgePosition", "after", 3, "matBadgeHidden", "svgIcon"]], template: function SearchResultAddButtonComponent_Template(rf, ctx) { if (rf & 1) {
-        i0.ɵɵtemplate(0, SearchResultAddButtonComponent_button_0_Template, 7, 14, "button", 0);
+SearchResultAddButtonComponent.ɵfac = function SearchResultAddButtonComponent_Factory(t) { return new (t || SearchResultAddButtonComponent)(i0.ɵɵdirectiveInject(LayerService), i0.ɵɵdirectiveInject(i3.MatDialog), i0.ɵɵdirectiveInject(DataSourceService)); };
+SearchResultAddButtonComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SearchResultAddButtonComponent, selectors: [["igo-search-add-button"]], inputs: { layer: "layer", store: "store", added: "added", map: "map", color: "color", stores: "stores" }, decls: 2, vars: 2, consts: [["igoStopPropagation", "", "mat-icon-button", "", "tooltip-position", "below", "matTooltipShowDelay", "500", 3, "matTooltip", "color", "mouseenter", "mouseleave", "click", 4, "ngIf"], ["igoStopPropagation", "", "mat-icon-button", "", "tooltip-position", "below", "matTooltipShowDelay", "500", 3, "matTooltip", "click", 4, "ngIf"], ["igoStopPropagation", "", "mat-icon-button", "", "tooltip-position", "below", "matTooltipShowDelay", "500", 3, "matTooltip", "color", "mouseenter", "mouseleave", "click"], ["matBadge", "icon", "igoMatBadgeColor", "rgba(0,0,0,0.87)", "igoMatBadgeBackgroundColor", "none", "igoMatBadgeInverseColor", "true", "matBadgeSize", "small", "matBadgePosition", "after", 3, "igoMatBadgeIcon", "matBadgeHidden", "matBadgeDisabled", "svgIcon"], ["igoStopPropagation", "", "mat-icon-button", "", "tooltip-position", "below", "matTooltipShowDelay", "500", 3, "matTooltip", "click"], ["matBadge", "icon", "igoMatBadgeIcon", "eye-off", "igoMatBadgeInverseColor", "true", "matBadgeDisabled", "true", "matBadgeSize", "small", "matBadgePosition", "after", "svgIcon", "file-plus-outline", 3, "matBadgeHidden"]], template: function SearchResultAddButtonComponent_Template(rf, ctx) { if (rf & 1) {
+        i0.ɵɵtemplate(0, SearchResultAddButtonComponent_button_0_Template, 11, 24, "button", 0);
+        i0.ɵɵtemplate(1, SearchResultAddButtonComponent_button_1_Template, 5, 8, "button", 1);
     } if (rf & 2) {
         i0.ɵɵproperty("ngIf", ctx.layer.meta.dataType === "Layer");
-    } }, dependencies: [i1$1.NgIf, i7$1.MatBadge, i4.MatTooltip, i2.MatIcon, i3.MatButton, i5$1.StopPropagationDirective, i5$1.IgoBadgeIconDirective, i1$1.AsyncPipe, i7.TranslatePipe], changeDetection: 0 });
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", ctx.layer.meta.dataType === "Feature");
+    } }, dependencies: [i1.NgIf, i7$1.MatBadge, i4.MatTooltip, i2.MatIcon, i3$1.MatButton, i5$1.StopPropagationDirective, i5$1.IgoBadgeIconDirective, i1.AsyncPipe, i7.TranslatePipe], changeDetection: 0 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SearchResultAddButtonComponent, [{
         type: Component,
-        args: [{ selector: 'igo-search-add-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\nigoStopPropagation\n(mouseenter)=\"onMouseEvent($event)\" (mouseleave)=\"onMouseEvent($event)\"\n*ngIf=\"layer.meta.dataType === 'Layer'\"\nmat-icon-button\ntooltip-position=\"below\"\nmatTooltipShowDelay=\"500\"\n[matTooltip]=\"(tooltip$ | async) | translate\"\n[color]=\"(isPreview$ | async) ? '' : added ? 'warn' : ''\"\n(click)=\"onToggleClick($event)\">\n<mat-icon\n  matBadge=\"icon\"\n  igoMatBadgeIcon=\"eye-off\"\n  igoMatBadgeInverseColor=\"true\"\n  [matBadgeHidden]=\"(inRange$ | async)\"\n  matBadgeDisabled=\"true\"\n  matBadgeSize=\"small\"\n  matBadgePosition=\"after\"\n  [svgIcon]=\"(isPreview$ | async) ? 'plus' : added ? 'delete' : 'plus'\">\n</mat-icon>\n</button>\n" }]
-    }], function () { return [{ type: LayerService }]; }, { layer: [{
+        args: [{ selector: 'igo-search-add-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\nigoStopPropagation\n(mouseenter)=\"onMouseEvent($event)\" (mouseleave)=\"onMouseEvent($event)\"\n*ngIf=\"layer.meta.dataType === 'Layer'\"\nmat-icon-button\ntooltip-position=\"below\"\nmatTooltipShowDelay=\"500\"\n[matTooltip]=\"computeTooltip() | translate\"\n[color]=\"(isPreview$ | async) ? '' : added ? 'warn' : ''\"\n(click)=\"onToggleClick($event)\">\n<mat-icon\n  matBadge=\"icon\"\n  [igoMatBadgeIcon]=\"getBadgeIcon()\"\n  igoMatBadgeColor=\"rgba(0,0,0,0.87)\"\n  igoMatBadgeBackgroundColor=\"none\"\n  igoMatBadgeInverseColor=\"true\"\n  [matBadgeHidden]=\"((inRange$ | async) && (isVisible$ | async) === true) || ((inRange$ | async) && !added) || ((inRange$ | async) && (isPreview$ | async))\"\n  [matBadgeDisabled]=\"(inRange$ | async) === false\"\n  matBadgeSize=\"small\"\n  matBadgePosition=\"after\"\n  [svgIcon]=\"(isPreview$ | async) ? 'plus' : added ? 'delete' : 'plus'\">\n</mat-icon>\n</button>\n\n<button\nigoStopPropagation\n*ngIf=\"layer.meta.dataType === 'Feature'\"\nmat-icon-button\ntooltip-position=\"below\"\nmatTooltipShowDelay=\"500\"\n[matTooltip]=\"(addFeatureToLayerTooltip$ | async) | translate\"\n(click)=\"addFeatureToLayer()\">\n<mat-icon\n  matBadge=\"icon\"\n  igoMatBadgeIcon=\"eye-off\"\n  igoMatBadgeInverseColor=\"true\"\n  [matBadgeHidden]=\"(inRange$ | async)\"\n  matBadgeDisabled=\"true\"\n  matBadgeSize=\"small\"\n  matBadgePosition=\"after\"\n  svgIcon=\"file-plus-outline\">\n</mat-icon>\n</button>\n" }]
+    }], function () { return [{ type: LayerService }, { type: i3.MatDialog }, { type: DataSourceService }]; }, { layer: [{
+            type: Input
+        }], store: [{
             type: Input
         }], added: [{
             type: Input
@@ -39379,6 +39963,8 @@ SearchResultAddButtonComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ ty
             type: Input
         }], color: [{
             type: Input
+        }], stores: [{
+            type: Input
         }] }); })();
 
 /**
@@ -39394,12 +39980,18 @@ IgoSearchResultsModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [C
         MatIconModule,
         MatListModule,
         MatButtonModule,
+        MatDialogModule,
         IgoCollapsibleModule,
         IgoListModule,
         IgoStopPropagationModule,
         IgoLanguageModule,
         IgoMatBadgeIconModule,
-        IgoMetadataModule] });
+        IgoMetadataModule,
+        MatFormFieldModule,
+        ReactiveFormsModule,
+        MatInputModule,
+        MatSelectModule,
+        MatAutocompleteModule] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(IgoSearchResultsModule, [{
         type: NgModule,
         args: [{
@@ -39410,12 +40002,18 @@ IgoSearchResultsModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [C
                     MatIconModule,
                     MatListModule,
                     MatButtonModule,
+                    MatDialogModule,
                     IgoCollapsibleModule,
                     IgoListModule,
                     IgoStopPropagationModule,
                     IgoLanguageModule,
                     IgoMatBadgeIconModule,
                     IgoMetadataModule,
+                    MatFormFieldModule,
+                    ReactiveFormsModule,
+                    MatInputModule,
+                    MatSelectModule,
+                    MatAutocompleteModule,
                 ],
                 exports: [
                     SearchResultsComponent,
@@ -39424,24 +40022,32 @@ IgoSearchResultsModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [C
                 declarations: [
                     SearchResultsComponent,
                     SearchResultsItemComponent,
-                    SearchResultAddButtonComponent
+                    SearchResultAddButtonComponent,
+                    SaveFeatureDialogComponent
                 ]
             }]
     }], null, null); })();
 (function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(IgoSearchResultsModule, { declarations: [SearchResultsComponent,
         SearchResultsItemComponent,
-        SearchResultAddButtonComponent], imports: [CommonModule,
+        SearchResultAddButtonComponent,
+        SaveFeatureDialogComponent], imports: [CommonModule,
         MatBadgeModule,
         MatTooltipModule,
         MatIconModule,
         MatListModule,
         MatButtonModule,
+        MatDialogModule,
         IgoCollapsibleModule,
         IgoListModule,
         IgoStopPropagationModule,
         IgoLanguageModule,
         IgoMatBadgeIconModule,
-        IgoMetadataModule], exports: [SearchResultsComponent,
+        IgoMetadataModule,
+        MatFormFieldModule,
+        ReactiveFormsModule,
+        MatInputModule,
+        MatSelectModule,
+        MatAutocompleteModule], exports: [SearchResultsComponent,
         SearchResultAddButtonComponent] }); })();
 
 /**
@@ -39888,7 +40494,7 @@ ToastComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ToastCompone
         i0.ɵɵproperty("ngIf", ctx.feature.geometry);
         i0.ɵɵadvance(1);
         i0.ɵɵproperty("feature", ctx.feature);
-    } }, dependencies: [i1$1.NgIf, i2.MatIcon, i3.MatButton, i5$1.PanelComponent, i5$1.FlexibleComponent, FeatureDetailsComponent], styles: ["[_nghost-%COMP%]{position:absolute;bottom:0px;width:100%;max-height:calc(100% - 50px);background-color:#fff}igo-feature-details[_ngcontent-%COMP%]     table{width:100%}"] });
+    } }, dependencies: [i1.NgIf, i2.MatIcon, i3$1.MatButton, i5$1.PanelComponent, i5$1.FlexibleComponent, FeatureDetailsComponent], styles: ["[_nghost-%COMP%]{position:absolute;bottom:0px;width:100%;max-height:calc(100% - 50px);background-color:#fff}igo-feature-details[_ngcontent-%COMP%]     table{width:100%}"] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ToastComponent, [{
         type: Component,
         args: [{ selector: 'igo-toast', template: "<igo-flexible #flex\n  collapsedMobile=\"51px\"\n  expandedMobile=\"300px\"\n  [state]=\"state\"\n  (swipeup)=\"swipe($event.type)\"\n  (swipedown)=\"swipe($event.type)\">\n\n  <igo-panel [title]=\"title\">\n    <button\n      mat-icon-button\n      panelLeftButton\n      (click)=\"toggle()\">\n      <mat-icon [svgIcon]=\"['collapsed', 'initial'].indexOf(flex.state) >= 0 ? 'arrow_upward' : 'arrow_downward'\"></mat-icon>\n    </button>\n\n    <button mat-icon-button panelRightButton class=\"igo-icon-button\" (click)=\"zoomToFeatureExtent()\" *ngIf=\"feature.geometry\">\n      <mat-icon svgIcon=\"zoom-in\"></mat-icon>\n    </button>\n\n    <igo-feature-details [feature]=\"feature\"></igo-feature-details>\n  </igo-panel>\n\n</igo-flexible>\n", styles: [":host{position:absolute;bottom:0px;width:100%;max-height:calc(100% - 50px);background-color:#fff}igo-feature-details ::ng-deep table{width:100%}\n"] }]
@@ -40458,7 +41064,7 @@ class ConfirmationPopupComponent {
         this.dialogRef.close(this.data.cancel);
     }
 }
-ConfirmationPopupComponent.ɵfac = function ConfirmationPopupComponent_Factory(t) { return new (t || ConfirmationPopupComponent)(i0.ɵɵdirectiveInject(i1.MatDialogRef), i0.ɵɵdirectiveInject(i2$1.LanguageService), i0.ɵɵdirectiveInject(MAT_DIALOG_DATA)); };
+ConfirmationPopupComponent.ɵfac = function ConfirmationPopupComponent_Factory(t) { return new (t || ConfirmationPopupComponent)(i0.ɵɵdirectiveInject(i3.MatDialogRef), i0.ɵɵdirectiveInject(i2$1.LanguageService), i0.ɵɵdirectiveInject(MAT_DIALOG_DATA)); };
 ConfirmationPopupComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ConfirmationPopupComponent, selectors: [["igo-confirmation-popup-component"]], decls: 8, vars: 2, consts: [["mat-dialog-content", ""], [1, "mat-typography"], ["mat-dialog-actions", ""], ["mat-raised-button", "", "color", "primary", 3, "click"], ["mat-raised-button", "", 3, "click"]], template: function ConfirmationPopupComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵelementStart(0, "div", 0)(1, "p", 1);
         i0.ɵɵtext(2);
@@ -40476,11 +41082,11 @@ ConfirmationPopupComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
         i0.ɵɵtextInterpolate(ctx.data.type === "add" ? ctx.languageService.translate.instant("igo.geo.workspace.addConfirmation") : ctx.languageService.translate.instant("igo.geo.workspace.deleteConfirmation"));
         i0.ɵɵadvance(5);
         i0.ɵɵtextInterpolate1("", ctx.languageService.translate.instant("igo.geo.workspace.cancel"), " ");
-    } }, dependencies: [i3.MatButton, i1.MatDialogContent, i1.MatDialogActions], styles: ["div.mat-dialog-actions[_ngcontent-%COMP%]{justify-content:center}"] });
+    } }, dependencies: [i3$1.MatButton, i3.MatDialogContent, i3.MatDialogActions], styles: ["div.mat-dialog-actions[_ngcontent-%COMP%]{justify-content:center}"] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ConfirmationPopupComponent, [{
         type: Component,
         args: [{ selector: 'igo-confirmation-popup-component', template: "<div mat-dialog-content>\n  <p class=\"mat-typography\">{{data.type === 'add' ?\n    languageService.translate.instant('igo.geo.workspace.addConfirmation') :\n    languageService.translate.instant('igo.geo.workspace.deleteConfirmation')}}</p>\n</div>\n<div mat-dialog-actions>\n  <button\n    mat-raised-button\n    color=\"primary\"\n    (click)=\"confirmedAction()\">Ok\n  </button>\n  <button\n    mat-raised-button\n    (click)=\"cancelAction()\">{{languageService.translate.instant('igo.geo.workspace.cancel')}}\n  </button>\n</div>", styles: ["div.mat-dialog-actions{justify-content:center}\n"] }]
-    }], function () { return [{ type: i1.MatDialogRef }, { type: i2$1.LanguageService }, { type: undefined, decorators: [{
+    }], function () { return [{ type: i3.MatDialogRef }, { type: i2$1.LanguageService }, { type: undefined, decorators: [{
                 type: Inject,
                 args: [MAT_DIALOG_DATA]
             }] }]; }, null); })();
@@ -41369,14 +41975,14 @@ class EditionWorkspaceService {
         });
     }
 }
-EditionWorkspaceService.ɵfac = function EditionWorkspaceService_Factory(t) { return new (t || EditionWorkspaceService)(i0.ɵɵinject(LayerService), i0.ɵɵinject(i2$1.StorageService), i0.ɵɵinject(i2$1.ConfigService), i0.ɵɵinject(i2$1.MessageService), i0.ɵɵinject(i2$1.LanguageService), i0.ɵɵinject(i1$2.HttpClient), i0.ɵɵinject(i1.MatDialog), i0.ɵɵinject(StyleService), i0.ɵɵinject(i6.AuthInterceptor)); };
+EditionWorkspaceService.ɵfac = function EditionWorkspaceService_Factory(t) { return new (t || EditionWorkspaceService)(i0.ɵɵinject(LayerService), i0.ɵɵinject(i2$1.StorageService), i0.ɵɵinject(i2$1.ConfigService), i0.ɵɵinject(i2$1.MessageService), i0.ɵɵinject(i2$1.LanguageService), i0.ɵɵinject(i1$1.HttpClient), i0.ɵɵinject(i3.MatDialog), i0.ɵɵinject(StyleService), i0.ɵɵinject(i6.AuthInterceptor)); };
 EditionWorkspaceService.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: EditionWorkspaceService, factory: EditionWorkspaceService.ɵfac, providedIn: 'root' });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(EditionWorkspaceService, [{
         type: Injectable,
         args: [{
                 providedIn: 'root'
             }]
-    }], function () { return [{ type: LayerService }, { type: i2$1.StorageService }, { type: i2$1.ConfigService }, { type: i2$1.MessageService }, { type: i2$1.LanguageService }, { type: i1$2.HttpClient }, { type: i1.MatDialog }, { type: StyleService }, { type: i6.AuthInterceptor }]; }, null); })();
+    }], function () { return [{ type: LayerService }, { type: i2$1.StorageService }, { type: i2$1.ConfigService }, { type: i2$1.MessageService }, { type: i2$1.LanguageService }, { type: i1$1.HttpClient }, { type: i3.MatDialog }, { type: StyleService }, { type: i6.AuthInterceptor }]; }, null); })();
 function getColumnKeyWithoutPropertiesTag(column) {
     if (column.includes('properties.')) {
         return column.split('.')[1];
@@ -42116,7 +42722,7 @@ class OsrmDirectionsSource extends DirectionsSource {
     }
 }
 OsrmDirectionsSource._name = 'OSRM Québec';
-OsrmDirectionsSource.ɵfac = function OsrmDirectionsSource_Factory(t) { return new (t || OsrmDirectionsSource)(i0.ɵɵinject(i1$2.HttpClient), i0.ɵɵinject(i2$1.ConfigService)); };
+OsrmDirectionsSource.ɵfac = function OsrmDirectionsSource_Factory(t) { return new (t || OsrmDirectionsSource)(i0.ɵɵinject(i1$1.HttpClient), i0.ɵɵinject(i2$1.ConfigService)); };
 OsrmDirectionsSource.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: OsrmDirectionsSource, factory: OsrmDirectionsSource.ɵfac });
 __decorate([
     Cacheable({
@@ -42125,7 +42731,7 @@ __decorate([
 ], OsrmDirectionsSource.prototype, "route", null);
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(OsrmDirectionsSource, [{
         type: Injectable
-    }], function () { return [{ type: i1$2.HttpClient }, { type: i2$1.ConfigService }]; }, { route: [] }); })();
+    }], function () { return [{ type: i1$1.HttpClient }, { type: i2$1.ConfigService }]; }, { route: [] }); })();
 
 function osrmDirectionsSourcesFactory(http, config) {
     return new OsrmDirectionsSource(http, config);
@@ -42366,7 +42972,7 @@ class NominatimSearchSource extends SearchSource {
 }
 NominatimSearchSource.id = 'nominatim';
 NominatimSearchSource.type = FEATURE;
-NominatimSearchSource.ɵfac = function NominatimSearchSource_Factory(t) { return new (t || NominatimSearchSource)(i0.ɵɵinject(i1$2.HttpClient), i0.ɵɵinject('options'), i0.ɵɵinject(i2$1.StorageService)); };
+NominatimSearchSource.ɵfac = function NominatimSearchSource_Factory(t) { return new (t || NominatimSearchSource)(i0.ɵɵinject(i1$1.HttpClient), i0.ɵɵinject('options'), i0.ɵɵinject(i2$1.StorageService)); };
 NominatimSearchSource.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: NominatimSearchSource, factory: NominatimSearchSource.ɵfac });
 __decorate([
     Cacheable({
@@ -42375,7 +42981,7 @@ __decorate([
 ], NominatimSearchSource.prototype, "search", null);
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(NominatimSearchSource, [{
         type: Injectable
-    }], function () { return [{ type: i1$2.HttpClient }, { type: undefined, decorators: [{
+    }], function () { return [{ type: i1$1.HttpClient }, { type: undefined, decorators: [{
                 type: Inject,
                 args: ['options']
             }] }, { type: i2$1.StorageService }]; }, { search: [] }); })();
@@ -42641,7 +43247,7 @@ StoredQueriesSearchSource.propertiesBlacklist = [
     'coord_x',
     'coord_y'
 ];
-StoredQueriesSearchSource.ɵfac = function StoredQueriesSearchSource_Factory(t) { return new (t || StoredQueriesSearchSource)(i0.ɵɵinject(i1$2.HttpClient), i0.ɵɵinject(i2$1.LanguageService), i0.ɵɵinject(i2$1.StorageService), i0.ɵɵinject('options')); };
+StoredQueriesSearchSource.ɵfac = function StoredQueriesSearchSource_Factory(t) { return new (t || StoredQueriesSearchSource)(i0.ɵɵinject(i1$1.HttpClient), i0.ɵɵinject(i2$1.LanguageService), i0.ɵɵinject(i2$1.StorageService), i0.ɵɵinject('options')); };
 StoredQueriesSearchSource.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: StoredQueriesSearchSource, factory: StoredQueriesSearchSource.ɵfac });
 __decorate([
     Cacheable({
@@ -42650,7 +43256,7 @@ __decorate([
 ], StoredQueriesSearchSource.prototype, "search", null);
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(StoredQueriesSearchSource, [{
         type: Injectable
-    }], function () { return [{ type: i1$2.HttpClient }, { type: i2$1.LanguageService }, { type: i2$1.StorageService }, { type: undefined, decorators: [{
+    }], function () { return [{ type: i1$1.HttpClient }, { type: i2$1.LanguageService }, { type: i2$1.StorageService }, { type: undefined, decorators: [{
                 type: Inject,
                 args: ['options']
             }] }]; }, { search: [] }); })();
@@ -42797,7 +43403,7 @@ class StoredQueriesReverseSearchSource extends SearchSource {
 StoredQueriesReverseSearchSource.id = 'storedqueriesreverse';
 StoredQueriesReverseSearchSource.type = FEATURE;
 StoredQueriesReverseSearchSource.propertiesBlacklist = [];
-StoredQueriesReverseSearchSource.ɵfac = function StoredQueriesReverseSearchSource_Factory(t) { return new (t || StoredQueriesReverseSearchSource)(i0.ɵɵinject(i1$2.HttpClient), i0.ɵɵinject(i2$1.LanguageService), i0.ɵɵinject(i2$1.StorageService), i0.ɵɵinject('options')); };
+StoredQueriesReverseSearchSource.ɵfac = function StoredQueriesReverseSearchSource_Factory(t) { return new (t || StoredQueriesReverseSearchSource)(i0.ɵɵinject(i1$1.HttpClient), i0.ɵɵinject(i2$1.LanguageService), i0.ɵɵinject(i2$1.StorageService), i0.ɵɵinject('options')); };
 StoredQueriesReverseSearchSource.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: StoredQueriesReverseSearchSource, factory: StoredQueriesReverseSearchSource.ɵfac });
 __decorate([
     Cacheable({
@@ -42806,7 +43412,7 @@ __decorate([
 ], StoredQueriesReverseSearchSource.prototype, "reverseSearch", null);
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(StoredQueriesReverseSearchSource, [{
         type: Injectable
-    }], function () { return [{ type: i1$2.HttpClient }, { type: i2$1.LanguageService }, { type: i2$1.StorageService }, { type: undefined, decorators: [{
+    }], function () { return [{ type: i1$1.HttpClient }, { type: i2$1.LanguageService }, { type: i2$1.StorageService }, { type: undefined, decorators: [{
                 type: Inject,
                 args: ['options']
             }] }]; }, { reverseSearch: [] }); })();
@@ -42962,14 +43568,14 @@ class ConfigFileToGeoDBService {
         return typeof value === 'string' && regex.test(value.toLowerCase());
     }
 }
-ConfigFileToGeoDBService.ɵfac = function ConfigFileToGeoDBService_Factory(t) { return new (t || ConfigFileToGeoDBService)(i0.ɵɵinject(i1$2.HttpClient), i0.ɵɵinject(GeoDBService), i0.ɵɵinject(i2$1.MessageService)); };
+ConfigFileToGeoDBService.ɵfac = function ConfigFileToGeoDBService_Factory(t) { return new (t || ConfigFileToGeoDBService)(i0.ɵɵinject(i1$1.HttpClient), i0.ɵɵinject(GeoDBService), i0.ɵɵinject(i2$1.MessageService)); };
 ConfigFileToGeoDBService.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: ConfigFileToGeoDBService, factory: ConfigFileToGeoDBService.ɵfac, providedIn: 'root' });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ConfigFileToGeoDBService, [{
         type: Injectable,
         args: [{
                 providedIn: 'root'
             }]
-    }], function () { return [{ type: i1$2.HttpClient }, { type: GeoDBService }, { type: i2$1.MessageService }]; }, null); })();
+    }], function () { return [{ type: i1$1.HttpClient }, { type: GeoDBService }, { type: i2$1.MessageService }]; }, null); })();
 
 /*
  * Public API Surface of geo