@igo2/integration 18.0.0-next.9 → 18.0.0

package/fesm2022/igo2-integration.mjs

@@ -1,13 +1,13 @@
 import * as i0 from '@angular/core';
 import { ChangeDetectorRef, Component, Input, NgModule, CUSTOM_ELEMENTS_SCHEMA, Injectable, ChangeDetectionStrategy, Optional, Inject, ViewChild, Directive, Self, HostListener, ElementRef } from '@angular/core';
 import { __decorate, __metadata } from 'tslib';
-import * as i6$2 from '@angular/common';
-import { NgIf, NgFor, AsyncPipe, CommonModule, DecimalPipe } from '@angular/common';
+import * as i6$1 from '@angular/common';
+import { NgIf, NgFor, AsyncPipe, CommonModule, DecimalPipe, NgTemplateOutlet } from '@angular/common';
 import * as i3 from '@angular/common/http';
 import { HttpClient } from '@angular/common/http';
 import * as i7 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i1 from '@angular/material/icon';
+import * as i10 from '@angular/material/icon';
 import { MatIconModule, MatIconRegistry } from '@angular/material/icon';
 import * as i8 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
@@ -17,21 +17,21 @@ import * as i2 from '@igo2/auth';
 import { AuthService } from '@igo2/auth';
 import { CustomHtmlComponent, SanitizeHtmlPipe } from '@igo2/common/custom-html';
 import { InteractiveTourComponent } from '@igo2/common/interactive-tour';
-import * as i1$2 from '@igo2/common/tool';
+import * as i1$1 from '@igo2/common/tool';
 import { ToolComponent } from '@igo2/common/tool';
 import * as i5 from '@igo2/core/config';
 import { version, ConfigService } from '@igo2/core/config';
 import * as i2$1 from '@igo2/core/language';
 import { IgoLanguageModule, LanguageService } from '@igo2/core/language';
 import { of, BehaviorSubject, combineLatest, Subject, map, forkJoin, ReplaySubject, interval } from 'rxjs';
-import * as i6$1 from '@ngx-translate/core';
+import * as i11 from '@ngx-translate/core';
 import { EntityStore, EntityStoreFilterCustomFuncStrategy, EntityStoreFilterSelectionStrategy, EntityTableComponent, getEntityTitle } from '@igo2/common/entity';
-import * as i1$1 from '@igo2/geo';
-import { IgoMap, CatalogBrowserComponent, CatalogService, CatalogLibaryComponent, StopsStore, StopsFeatureStore, RoutesFeatureStore, StepFeatureStore, IgoDirectionsModule, FeatureStore, DrawComponent, OgcFilterableItemComponent, TimeFilterItemComponent, OgcFilterableListComponent, OgcFilterableListBindingDirective, FeatureStoreSelectionStrategy, FeatureMotion, mapExtentStrategyActiveToolTip, noElementSelected, OgcFilterWidget, WfsWorkspace, FeatureWorkspace, EditionWorkspace, SpatialFilterItemType, MeasureLengthUnit, SpatialFilterType, featureToOl, createOverlayMarkerStyle, moveToOlFeatures, SpatialFilterTypeComponent, SpatialFilterItemComponent, FeatureDetailsComponent, SpatialFilterService, DataSourceService, LayerService, TimeFilterListComponent, TimeFilterListBindingDirective, ImportExportComponent, formatScale, zoneMtm, zoneUtm, computeProjectionsConstraints, LayerListControlsEnum, sourceCanSearch, LayerListComponent, LayerListBindingDirective, ExportButtonComponent, OgcFilterButtonComponent, TimeFilterButtonComponent, TrackFeatureButtonComponent, MetadataButtonComponent, SearchSourceService, LayerLegendListComponent, LayerLegendListBindingDirective, roundCoordTo, featureFromOl, measureOlGeometryLength, FEATURE, VectorLayer, StyleModalLayerButtonComponent, MeasurerComponent, PrintComponent, getCommonVectorStyle, computeOlFeaturesExtent, featuresAreOutOfView, featuresAreTooDeepInView, getCommonVectorSelectedStyle, SearchResultsComponent, SearchResultAddButtonComponent, GeoPropertiesStrategy } from '@igo2/geo';
+import * as i1 from '@igo2/geo';
+import { IgoMap, CatalogBrowserComponent, CatalogService, CatalogLibaryComponent, StopsStore, StopsFeatureStore, RoutesFeatureStore, StepsFeatureStore, IgoDirectionsModule, FeatureStore, DrawComponent, isLayerItem, OgcFilterableItemComponent, TimeFilterItemComponent, OgcFilterableListComponent, OgcFilterableListBindingDirective, FeatureStoreSelectionStrategy, FeatureMotion, mapExtentStrategyActiveToolTip, noElementSelected, OgcFilterWidget, WfsWorkspace, FeatureWorkspace, EditionWorkspace, SpatialFilterItemType, MeasureLengthUnit, SpatialFilterType, featureToOl, createOverlayMarkerStyle, moveToOlFeatures, SpatialFilterTypeComponent, SpatialFilterItemComponent, FeatureDetailsComponent, SpatialFilterService, LayerService, TimeFilterListComponent, TimeFilterListBindingDirective, isBaseLayer, ImportExportComponent, formatScale, zoneMtm, zoneUtm, computeProjectionsConstraints, LayerListControlsEnum, sourceCanSearch, LayerViewerComponent, ExportButtonComponent, OgcFilterButtonComponent, TimeFilterButtonComponent, TrackFeatureButtonComponent, MetadataButtonComponent, SearchSourceService, LayerLegendListComponent, LayerLegendListBindingDirective, roundCoordTo, featureFromOl, measureOlGeometryLength, FEATURE, VectorLayer, StyleModalLayerButtonComponent, MeasurerComponent, PrintComponent, getCommonVectorStyle, computeOlFeaturesExtent, featuresAreOutOfView, featuresAreTooDeepInView, getCommonVectorSelectedStyle, SearchResultsComponent, SearchResultAddButtonComponent, isLayerGroup, GeoPropertiesStrategy } from '@igo2/geo';
 import { take, skipWhile, takeUntil, tap, debounceTime, map as map$1, skip } from 'rxjs/operators';
 import * as i4 from '@igo2/core/storage';
 import { StorageScope, StorageService, StorageServiceEventEnum } from '@igo2/core/storage';
-import * as i1$3 from '@igo2/context';
+import * as i1$2 from '@igo2/context';
 import { ContextEditComponent, ContextEditBindingDirective, ContextListComponent, ContextListBindingDirective, ContextPermissionsComponent, ContextPermissionsBindingDirective, ShareMapComponent, ContextImportExportComponent } from '@igo2/context';
 import * as i4$1 from '@igo2/core/message';
 import { MessageService, IgoMessageModule } from '@igo2/core/message';
@@ -43,42 +43,43 @@ import * as olstyle from 'ol/style';
 import { WorkspaceStore } from '@igo2/common/workspace';
 import * as i5$1 from '@igo2/common/widget';
 import * as i3$1 from '@igo2/core/media';
+import { Media, MediaService } from '@igo2/core/media';
 import * as jsPDF from 'jspdf';
 import 'jspdf-autotable';
 import moment from 'moment';
 import * as i2$2 from '@igo2/common/form';
 import { FormService, IgoFormModule } from '@igo2/common/form';
-import * as i3$2 from '@angular/forms';
+import * as i2$3 from '@angular/forms';
 import { Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i5$2 from '@angular/material/tabs';
 import { MatTabsModule } from '@angular/material/tabs';
-import * as i8$2 from '@angular/material/divider';
+import * as i7$2 from '@angular/material/divider';
 import { MatDividerModule } from '@angular/material/divider';
 import * as i13 from '@angular/material/slide-toggle';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import * as i12 from '@angular/material/core';
 import { MatOptionModule } from '@angular/material/core';
-import * as i5$3 from '@angular/material/form-field';
+import * as i7$1 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import * as i8$1 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
-import * as i11 from '@angular/material/select';
+import * as i11$1 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
 import { Clipboard, uuid, NumberUtils } from '@igo2/utils';
 import * as olProj from 'ol/proj';
-import * as i10 from '@angular/material/list';
+import * as i9 from '@angular/material/list';
 import { MatListModule } from '@angular/material/list';
-import * as i9 from '@angular/material/radio';
+import * as i9$1 from '@angular/material/radio';
 import { MatRadioModule } from '@angular/material/radio';
 import olLineString from 'ol/geom/LineString';
 import olLayerVector from 'ol/layer/Vector';
-import * as i9$1 from '@angular/material/badge';
+import * as i9$2 from '@angular/material/badge';
 import { MatBadgeModule } from '@angular/material/badge';
 import { FlexibleComponent } from '@igo2/common/flexible';
 import olFeature from 'ol/Feature';
 import olPoint from 'ol/geom/Point';
 import pointOnFeature from '@turf/point-on-feature';
-import * as i1$4 from '@igo2/core/analytics';
+import * as i1$3 from '@igo2/core/analytics';
 
 let AboutToolComponent = class AboutToolComponent {
     configService;
@@ -168,7 +169,7 @@ let AboutToolComponent = class AboutToolComponent {
         return name;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AboutToolComponent, deps: [{ token: i5.ConfigService }, { token: i2.AuthService }, { token: i3.HttpClient }, { token: i0.ChangeDetectorRef }, { token: i2$1.LanguageService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AboutToolComponent, isStandalone: true, selector: "igo-about-tool", inputs: { headerHtml: "headerHtml", html: "html", discoverTitleInLocale: "discoverTitleInLocale", trainingGuideURLs: "trainingGuideURLs" }, ngImport: i0, template: "<p></p>\n<igo-interactive-tour\n  mat-raised-button\n  tourToStart=\"global\"\n  menuIsOpen=\"true\"\n  styleButton=\"raised\"\n  [discoverTitleInLocale$]=\"discoverTitleInLocale$\"\n>\n</igo-interactive-tour>\n\n<button\n  *ngIf=\"\n    auth.authenticated && trainingGuideURLs && trainingGuideURLs.length === 1\n  \"\n  class=\"training-guide-button\"\n  mat-raised-button\n  tooltip-position=\"below\"\n  matTooltipShowDelay=\"500\"\n  [disabled]=\"loading\"\n  [matTooltip]=\"'igo.integration.aboutTool.trainingGuideTooltip' | translate\"\n  (click)=\"openGuide()\"\n>\n  <span>{{ 'igo.integration.aboutTool.trainingGuide' | translate }}</span>\n  <mat-icon>description</mat-icon>\n</button>\n\n<button\n  *ngIf=\"\n    auth.authenticated && trainingGuideURLs && trainingGuideURLs.length > 1\n  \"\n  class=\"training-guide-button\"\n  mat-raised-button\n  tooltip-position=\"below\"\n  matTooltipShowDelay=\"500\"\n  [disabled]=\"loading\"\n  [matTooltip]=\"'igo.integration.aboutTool.trainingGuideTooltip' | translate\"\n  [matMenuTriggerFor]=\"menu\"\n>\n  <span>{{ 'igo.integration.aboutTool.trainingGuide' | translate }}</span>\n  <mat-icon>description</mat-icon>\n</button>\n\n<mat-menu #menu=\"matMenu\">\n  <button\n    *ngFor=\"let guide of trainingGuideURLs\"\n    mat-menu-item\n    (click)=\"openGuide(guide)\"\n  >\n    {{ formatFileName(guide) }}\n  </button>\n</mat-menu>\n\n<igo-custom-html\n  *ngIf=\"headerHtml !== ''\"\n  class=\"mat-typography\"\n  [html]=\"headerHtml | translate\"\n>\n</igo-custom-html>\n\n<igo-custom-html\n  class=\"mat-typography\"\n  [html]=\"html | translate: { version: effectiveVersion }\"\n>\n</igo-custom-html>\n", styles: ["igo-interactive-tour button{margin-left:20px}.training-guide-button{margin-left:5px;background-color:#1976d2;color:#fff;padding:0 12px}\n"], dependencies: [{ kind: "component", type: InteractiveTourComponent, selector: "igo-interactive-tour", inputs: ["tourToStart", "styleButton", "discoverTitleInLocale$"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i7.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i8.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i8.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: CustomHtmlComponent, selector: "igo-custom-html", inputs: ["html"] }, { kind: "ngmodule", type: IgoLanguageModule }, { kind: "pipe", type: i6$1.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AboutToolComponent, isStandalone: true, selector: "igo-about-tool", inputs: { headerHtml: "headerHtml", html: "html", discoverTitleInLocale: "discoverTitleInLocale", trainingGuideURLs: "trainingGuideURLs" }, ngImport: i0, template: "<p></p>\n<igo-interactive-tour\n  mat-raised-button\n  tourToStart=\"global\"\n  menuIsOpen=\"true\"\n  styleButton=\"raised\"\n  [discoverTitleInLocale$]=\"discoverTitleInLocale$\"\n>\n</igo-interactive-tour>\n\n<button\n  *ngIf=\"\n    auth.authenticated && trainingGuideURLs && trainingGuideURLs.length === 1\n  \"\n  class=\"training-guide-button\"\n  mat-raised-button\n  tooltip-position=\"below\"\n  matTooltipShowDelay=\"500\"\n  [disabled]=\"loading\"\n  [matTooltip]=\"'igo.integration.aboutTool.trainingGuideTooltip' | translate\"\n  (click)=\"openGuide()\"\n>\n  <span>{{ 'igo.integration.aboutTool.trainingGuide' | translate }}</span>\n  <mat-icon>description</mat-icon>\n</button>\n\n<button\n  *ngIf=\"\n    auth.authenticated && trainingGuideURLs && trainingGuideURLs.length > 1\n  \"\n  class=\"training-guide-button\"\n  mat-raised-button\n  tooltip-position=\"below\"\n  matTooltipShowDelay=\"500\"\n  [disabled]=\"loading\"\n  [matTooltip]=\"'igo.integration.aboutTool.trainingGuideTooltip' | translate\"\n  [matMenuTriggerFor]=\"menu\"\n>\n  <span>{{ 'igo.integration.aboutTool.trainingGuide' | translate }}</span>\n  <mat-icon>description</mat-icon>\n</button>\n\n<mat-menu #menu=\"matMenu\">\n  <button\n    *ngFor=\"let guide of trainingGuideURLs\"\n    mat-menu-item\n    (click)=\"openGuide(guide)\"\n  >\n    {{ formatFileName(guide) }}\n  </button>\n</mat-menu>\n\n<igo-custom-html\n  *ngIf=\"headerHtml !== ''\"\n  class=\"mat-typography\"\n  [html]=\"headerHtml | translate\"\n>\n</igo-custom-html>\n\n<igo-custom-html\n  class=\"mat-typography\"\n  [html]=\"html | translate: { version: effectiveVersion }\"\n>\n</igo-custom-html>\n", styles: ["igo-interactive-tour button{margin-left:20px}.training-guide-button{margin-left:5px;background-color:#1976d2;color:#fff;padding:0 12px}\n"], dependencies: [{ kind: "component", type: InteractiveTourComponent, selector: "igo-interactive-tour", inputs: ["tourToStart", "styleButton", "discoverTitleInLocale$"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i7.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i8.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i8.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: CustomHtmlComponent, selector: "igo-custom-html", inputs: ["html"] }, { kind: "ngmodule", type: IgoLanguageModule }, { kind: "pipe", type: i11.TranslatePipe, name: "translate" }] });
 };
 AboutToolComponent = __decorate([
     ToolComponent({
@@ -228,7 +229,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 }]
         }] });
 
-// import { BehaviorSubject } from 'rxjs';
 /**
  * Service that holds the state of the map module
  */
@@ -237,7 +237,6 @@ class MapState {
     projectionService;
     storageService;
     configService;
-    // public mapCenter$ = new BehaviorSubject<boolean>(false);
     get showAllLegendsValue() {
         return this._legendToolShowAll;
     }
@@ -268,7 +267,7 @@ class MapState {
         }, this.storageService, this.configService);
         this.mapService.setMap(this.map);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MapState, deps: [{ token: i1$1.MapService }, { token: i1$1.ProjectionService }, { token: i4.StorageService }, { token: i5.ConfigService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MapState, deps: [{ token: i1.MapService }, { token: i1.ProjectionService }, { token: i4.StorageService }, { token: i5.ConfigService }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MapState, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MapState, decorators: [{
@@ -276,7 +275,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i1$1.MapService }, { type: i1$1.ProjectionService }, { type: i4.StorageService }, { type: i5.ConfigService }] });
+        }], ctorParameters: () => [{ type: i1.MapService }, { type: i1.ProjectionService }, { type: i4.StorageService }, { type: i5.ConfigService }] });
 
 /**
  * Service that holds the state of the catalog module
@@ -374,6 +373,10 @@ let CatalogBrowserToolComponent = class CatalogBrowserToolComponent {
         const catalog$ = catalogStore.stateView.firstBy$((record) => record.state.selected === true);
         const authenticate$ = this.authService.authenticate$;
         this.catalog$$ = combineLatest([catalog$, authenticate$]).subscribe(([record]) => {
+            // Mute an error, that we are not able to replicate where the record is undefined
+            if (record === undefined) {
+                return;
+            }
             const catalog = record.entity;
             this.catalog = catalog;
             this.loadCatalogItems(this.catalog);
@@ -406,7 +409,7 @@ let CatalogBrowserToolComponent = class CatalogBrowserToolComponent {
             this.store$.next(store);
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CatalogBrowserToolComponent, deps: [{ token: i1$1.CatalogService }, { token: CatalogState }, { token: MapState }, { token: i2.AuthService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CatalogBrowserToolComponent, deps: [{ token: i1.CatalogService }, { token: CatalogState }, { token: MapState }, { token: i2.AuthService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CatalogBrowserToolComponent, isStandalone: true, selector: "igo-catalog-browser-tool", inputs: { toggleCollapsedGroup: "toggleCollapsedGroup" }, ngImport: i0, template: "<igo-catalog-browser\n  *ngIf=\"store$ | async as store\"\n  [catalog]=\"catalog\"\n  [store]=\"store\"\n  [map]=\"map\"\n  [toggleCollapsedGroup]=\"toggleCollapsedGroup\"\n>\n</igo-catalog-browser>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CatalogBrowserComponent, selector: "igo-catalog-browser", inputs: ["catalogAllowLegend", "catalog", "store", "map", "toggleCollapsedGroup"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 };
 CatalogBrowserToolComponent = __decorate([
@@ -423,7 +426,7 @@ CatalogBrowserToolComponent = __decorate([
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CatalogBrowserToolComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igo-catalog-browser-tool', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgIf, CatalogBrowserComponent, AsyncPipe], template: "<igo-catalog-browser\n  *ngIf=\"store$ | async as store\"\n  [catalog]=\"catalog\"\n  [store]=\"store\"\n  [map]=\"map\"\n  [toggleCollapsedGroup]=\"toggleCollapsedGroup\"\n>\n</igo-catalog-browser>\n" }]
-        }], ctorParameters: () => [{ type: i1$1.CatalogService }, { type: CatalogState }, { type: MapState }, { type: i2.AuthService }], propDecorators: { toggleCollapsedGroup: [{
+        }], ctorParameters: () => [{ type: i1.CatalogService }, { type: CatalogState }, { type: MapState }, { type: i2.AuthService }], propDecorators: { toggleCollapsedGroup: [{
                 type: Input
             }] } });
 
@@ -518,7 +521,7 @@ class ToolState {
             this.openSidenav$.next(true);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ToolState, deps: [{ token: i1$2.ToolService }, { token: ImportExportState }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ToolState, deps: [{ token: i1$1.ToolService }, { token: ImportExportState }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ToolState, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ToolState, decorators: [{
@@ -526,7 +529,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i1$2.ToolService }, { type: ImportExportState }] });
+        }], ctorParameters: () => [{ type: i1$1.ToolService }, { type: ImportExportState }] });
 
 /**
  * Tool to browse the list of available catalogs.
@@ -601,7 +604,7 @@ let CatalogLibraryToolComponent = class CatalogLibraryToolComponent {
             this.store.load(catalogs.concat((this.storageService.get('addedCatalogs') || [])));
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CatalogLibraryToolComponent, deps: [{ token: i1$1.CatalogService }, { token: CatalogState }, { token: ToolState }, { token: i4.StorageService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CatalogLibraryToolComponent, deps: [{ token: i1.CatalogService }, { token: CatalogState }, { token: ToolState }, { token: i4.StorageService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CatalogLibraryToolComponent, isStandalone: true, selector: "igo-catalog-library-tool", inputs: { addCatalogAllowed: "addCatalogAllowed", predefinedCatalogs: "predefinedCatalogs" }, ngImport: i0, template: "<igo-catalog-library\n  [predefinedCatalogs]=\"predefinedCatalogs\"\n  [addCatalogAllowed]=\"addCatalogAllowed\"\n  [store]=\"store\"\n  (catalogSelectChange)=\"onCatalogSelectChange($event)\"\n>\n</igo-catalog-library>\n", dependencies: [{ kind: "component", type: CatalogLibaryComponent, selector: "igo-catalog-library", inputs: ["store", "map", "addCatalogAllowed", "predefinedCatalogs"], outputs: ["catalogSelectChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 };
 CatalogLibraryToolComponent = __decorate([
@@ -618,7 +621,7 @@ CatalogLibraryToolComponent = __decorate([
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CatalogLibraryToolComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igo-catalog-library-tool', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CatalogLibaryComponent], template: "<igo-catalog-library\n  [predefinedCatalogs]=\"predefinedCatalogs\"\n  [addCatalogAllowed]=\"addCatalogAllowed\"\n  [store]=\"store\"\n  (catalogSelectChange)=\"onCatalogSelectChange($event)\"\n>\n</igo-catalog-library>\n" }]
-        }], ctorParameters: () => [{ type: i1$1.CatalogService }, { type: CatalogState }, { type: ToolState }, { type: i4.StorageService }], propDecorators: { addCatalogAllowed: [{
+        }], ctorParameters: () => [{ type: i1.CatalogService }, { type: CatalogState }, { type: ToolState }, { type: i4.StorageService }], propDecorators: { addCatalogAllowed: [{
                 type: Input
             }], predefinedCatalogs: [{
                 type: Input
@@ -898,7 +901,7 @@ class ContextState {
         }
         this.setContext(context);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ContextState, deps: [{ token: i1$3.ContextService }, { token: i1$2.ToolService }, { token: ToolState }, { token: i2$1.LanguageService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ContextState, deps: [{ token: i1$2.ContextService }, { token: i1$1.ToolService }, { token: ToolState }, { token: i2$1.LanguageService }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ContextState, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ContextState, decorators: [{
@@ -906,7 +909,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i1$3.ContextService }, { type: i1$2.ToolService }, { type: ToolState }, { type: i2$1.LanguageService }] });
+        }], ctorParameters: () => [{ type: i1$2.ContextService }, { type: i1$1.ToolService }, { type: ToolState }, { type: i2$1.LanguageService }] });
 
 /**
  * Service that holds the state of the direction module
@@ -936,27 +939,15 @@ class DirectionState {
         this.routesFeatureStore = new RoutesFeatureStore([], {
             map: this.mapState.map
         });
-        this.stepFeatureStore = new StepFeatureStore([], {
+        this.stepFeatureStore = new StepsFeatureStore([], {
             map: this.mapState.map
         });
-        this.mapState.map.ol.once('rendercomplete', () => {
-            this.stopsFeatureStore.empty$.subscribe((empty) => {
-                if (this.stopsFeatureStore.layer?.options) {
-                    this.stopsFeatureStore.layer.options.showInLayerList = !empty;
-                }
-            });
-            this.routesFeatureStore.empty$.subscribe((empty) => {
-                if (this.routesFeatureStore.layer?.options) {
-                    this.routesFeatureStore.layer.options.showInLayerList = !empty;
-                }
-            });
-        });
-        this.mapState.map.layers$.subscribe(() => {
-            if (!this.mapState.map.getLayerById('igo-direction-stops-layer')) {
+        this.mapState.map.layerController.all$.subscribe(() => {
+            if (!this.mapState.map.layerController.getById('igo-direction-stops-layer')) {
                 this.stopsStore.deleteMany(this.stopsStore.all());
                 this.stopsFeatureStore.deleteMany(this.stopsFeatureStore.all()); // not necessary
             }
-            if (!this.mapState.map.getLayerById('igo-direction-route-layer')) {
+            if (!this.mapState.map.layerController.getById('igo-direction-route-layer')) {
                 this.routesFeatureStore.deleteMany(this.routesFeatureStore.all());
             }
         });
@@ -1015,7 +1006,7 @@ let DirectionsToolComponent = class DirectionsToolComponent {
      * step store
      * @internal
      */
-    get zoomToActiveRoute$() {
+    get zoomOnActiveRoute$() {
         return this.directionState.zoomToActiveRoute$;
     }
     get authenticated$() {
@@ -1050,7 +1041,7 @@ let DirectionsToolComponent = class DirectionsToolComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DirectionsToolComponent, deps: [{ token: DirectionState }, { token: MapState }, { token: i2$1.LanguageService }, { token: i4$1.MessageService }, { token: i4.StorageService }, { token: ContextState }, { token: i2.AuthService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DirectionsToolComponent, isStandalone: true, selector: "igo-directions-tool", ngImport: i0, template: "<igo-directions\n  [contextUri]=\"currentContextUri\"\n  [debounce]=\"debounceTime\"\n  [stopsStore]=\"stopsStore\"\n  [stopsFeatureStore]=\"stopsFeatureStore\"\n  [stepFeatureStore]=\"stepFeatureStore\"\n  [routesFeatureStore]=\"routesFeatureStore\"\n  [zoomToActiveRoute$]=\"zoomToActiveRoute$\"\n  [authenticated$]=\"authenticated$\"\n>\n</igo-directions>\n", dependencies: [{ kind: "ngmodule", type: IgoDirectionsModule }, { kind: "component", type: i1$1.DirectionsComponent, selector: "igo-directions", inputs: ["contextUri", "stopsStore", "stopsFeatureStore", "routesFeatureStore", "stepFeatureStore", "debounce", "length", "coordRoundedDecimals", "zoomToActiveRoute$", "authenticated$"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DirectionsToolComponent, isStandalone: true, selector: "igo-directions-tool", ngImport: i0, template: "<igo-directions\n  [contextUri]=\"currentContextUri\"\n  [debounce]=\"debounceTime\"\n  [stopsStore]=\"stopsStore\"\n  [stopsFeatureStore]=\"stopsFeatureStore\"\n  [stepsFeatureStore]=\"stepFeatureStore\"\n  [routesFeatureStore]=\"routesFeatureStore\"\n  [zoomOnActiveRoute$]=\"zoomOnActiveRoute$\"\n  [authenticated$]=\"authenticated$\"\n>\n</igo-directions>\n", dependencies: [{ kind: "ngmodule", type: IgoDirectionsModule }, { kind: "component", type: i1.DirectionsComponent, selector: "igo-directions", inputs: ["contextUri", "stopsStore", "stopsFeatureStore", "routesFeatureStore", "stepsFeatureStore", "debounce", "length", "coordRoundedDecimals", "zoomOnActiveRoute$", "authenticated$"] }] });
 };
 DirectionsToolComponent = __decorate([
     ToolComponent({
@@ -1068,7 +1059,7 @@ DirectionsToolComponent = __decorate([
 ], DirectionsToolComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DirectionsToolComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igo-directions-tool', standalone: true, imports: [IgoDirectionsModule], template: "<igo-directions\n  [contextUri]=\"currentContextUri\"\n  [debounce]=\"debounceTime\"\n  [stopsStore]=\"stopsStore\"\n  [stopsFeatureStore]=\"stopsFeatureStore\"\n  [stepFeatureStore]=\"stepFeatureStore\"\n  [routesFeatureStore]=\"routesFeatureStore\"\n  [zoomToActiveRoute$]=\"zoomToActiveRoute$\"\n  [authenticated$]=\"authenticated$\"\n>\n</igo-directions>\n" }]
+            args: [{ selector: 'igo-directions-tool', standalone: true, imports: [IgoDirectionsModule], template: "<igo-directions\n  [contextUri]=\"currentContextUri\"\n  [debounce]=\"debounceTime\"\n  [stopsStore]=\"stopsStore\"\n  [stopsFeatureStore]=\"stopsFeatureStore\"\n  [stepsFeatureStore]=\"stepFeatureStore\"\n  [routesFeatureStore]=\"routesFeatureStore\"\n  [zoomOnActiveRoute$]=\"zoomOnActiveRoute$\"\n  [authenticated$]=\"authenticated$\"\n>\n</igo-directions>\n" }]
         }], ctorParameters: () => [{ type: DirectionState }, { type: MapState }, { type: i2$1.LanguageService }, { type: i4$1.MessageService }, { type: i4.StorageService }, { type: ContextState }, { type: i2.AuthService }] });
 
 /**
@@ -1104,9 +1095,9 @@ class DrawState {
     activeDrawingLayer;
     constructor(mapState) {
         this.mapState = mapState;
-        this.mapState.map.layers$.subscribe(() => {
+        this.mapState.map.layerController.all$.subscribe(() => {
             this.layersID.forEach((layerId) => {
-                if (!this.mapState.map.getLayerById(layerId)) {
+                if (!this.mapState.map.layerController.getById(layerId)) {
                     const deletedStore = this.stores.find((store) => store.layer.id === layerId);
                     deletedStore.deleteMany(deletedStore.all());
                     this.stores.splice(this.stores.indexOf(deletedStore, 0), 1);
@@ -1239,8 +1230,8 @@ let ActiveOgcFilterToolComponent = class ActiveOgcFilterToolComponent {
         return this.mapState.map;
     }
     get layer() {
-        for (const lay of this.map.layers) {
-            if (lay.options.active === true) {
+        for (const lay of this.map.layerController.all) {
+            if (isLayerItem(lay) && this.map.layerController.isSelected(lay)) {
                 return lay;
             }
         }
@@ -1282,8 +1273,8 @@ let ActiveTimeFilterToolComponent = class ActiveTimeFilterToolComponent {
         return this.mapState.map;
     }
     get layer() {
-        for (const lay of this.map.layers) {
-            if (lay.options.active === true) {
+        for (const lay of this.map.layerController.all) {
+            if (isLayerItem(lay) && this.map.layerController.isSelected(lay)) {
                 return lay;
             }
         }
@@ -1873,7 +1864,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 let SpatialFilterToolComponent = class SpatialFilterToolComponent {
     matIconRegistry;
     spatialFilterService;
-    dataSourceService;
     layerService;
     mapState;
     messageService;
@@ -1904,12 +1894,10 @@ let SpatialFilterToolComponent = class SpatialFilterToolComponent {
     thematicLength = 0;
     measureUnit = MeasureLengthUnit.Meters;
     unsubscribe$ = new Subject();
-    moveendKey;
     defaultStyle;
-    constructor(matIconRegistry, spatialFilterService, dataSourceService, layerService, mapState, messageService, languageService, importExportState, toolState, workspaceState, cdRef) {
+    constructor(matIconRegistry, spatialFilterService, layerService, mapState, messageService, languageService, importExportState, toolState, workspaceState, cdRef) {
         this.matIconRegistry = matIconRegistry;
         this.spatialFilterService = spatialFilterService;
-        this.dataSourceService = dataSourceService;
         this.layerService = layerService;
         this.mapState = mapState;
         this.messageService = messageService;
@@ -1920,7 +1908,7 @@ let SpatialFilterToolComponent = class SpatialFilterToolComponent {
         this.cdRef = cdRef;
     }
     ngOnInit() {
-        for (const layer of this.map.layers) {
+        for (const layer of this.map.layerController.all) {
             if (layer.title &&
                 layer.title.includes(this.languageService.translate.instant('igo.geo.spatialFilter.spatialFilter'))) {
                 this.layers.push(layer);
@@ -1961,7 +1949,8 @@ let SpatialFilterToolComponent = class SpatialFilterToolComponent {
             if (!record &&
                 this.activeLayers.length &&
                 this.workspaceState.store.all().length > 1) {
-                if (this.itemType === SpatialFilterItemType.Thematics) {
+                if (this.itemType === SpatialFilterItemType.Thematics &&
+                    this.thematics) {
                     for (const thematic of this.thematics) {
                         if (!thematic.zeroResults) {
                             layerToOpenWks = this.activeLayers.find((layer) => layer.title.includes(thematic.name + ' ' + this.iterator.toString()));
@@ -1986,7 +1975,7 @@ let SpatialFilterToolComponent = class SpatialFilterToolComponent {
                 this.activeLayers.length &&
                 this.workspaceState.store.all().length > 1) {
                 this.selectWorkspaceEntity(record);
-                this.moveendKey = this.map.ol.on('moveend', () => {
+                this.map.ol.on('moveend', () => {
                     this.selectWorkspaceEntity(record);
                 });
             }
@@ -2029,7 +2018,7 @@ let SpatialFilterToolComponent = class SpatialFilterToolComponent {
         this.queryType = undefined;
     }
     clearMap() {
-        this.map.removeLayers(this.layers);
+        this.map.layerController.remove(...this.layers);
         this.layers = [];
         this.activeLayers = [];
         this.thematicLength = 0;
@@ -2125,7 +2114,8 @@ let SpatialFilterToolComponent = class SpatialFilterToolComponent {
         for (const feature of features) {
             if (this.type === SpatialFilterType.Predefined) {
                 for (const layer of this.layers) {
-                    if (layer.options._internal &&
+                    if (isLayerItem(layer) &&
+                        layer.options._internal &&
                         layer.options._internal.code === feature.properties.code &&
                         !buffer) {
                         if (!layer.title?.startsWith('Zone')) {
@@ -2138,7 +2128,7 @@ let SpatialFilterToolComponent = class SpatialFilterToolComponent {
                         this.activeLayers = [];
                         const index = this.layers.indexOf(layer);
                         this.layers.splice(index, 1);
-                        this.map.removeLayer(layer);
+                        this.map.layerController.remove(layer);
                     }
                 }
             }
@@ -2149,7 +2139,7 @@ let SpatialFilterToolComponent = class SpatialFilterToolComponent {
                             layer.title?.startsWith('Zone')) {
                             const index = this.layers.indexOf(layer);
                             this.layers.splice(index, 1);
-                            this.map.removeLayer(layer);
+                            this.map.layerController.remove(layer);
                         }
                     }
                 }
@@ -2186,28 +2176,28 @@ let SpatialFilterToolComponent = class SpatialFilterToolComponent {
                     })
                 });
             };
-            this.dataSourceService
-                .createAsyncDataSource({
-                type: 'vector',
-                queryable: true
-            })
+            const options = {
+                isIgoInternalLayer: true,
+                title: ('Zone ' +
+                    i +
+                    ' - ' +
+                    this.languageService.translate.instant('igo.geo.spatialFilter.spatialFilter')),
+                workspace: { enabled: true },
+                _internal: {
+                    code: this.type === SpatialFilterType.Predefined
+                        ? feature.properties.code
+                        : undefined
+                },
+                sourceOptions: {
+                    type: 'vector',
+                    queryable: true
+                },
+                visible: true
+            };
+            this.layerService
+                .createAsyncLayer(options)
                 .pipe(take(1))
-                .subscribe((dataSource) => {
-                const olLayer = this.layerService.createLayer({
-                    isIgoInternalLayer: true,
-                    title: ('Zone ' +
-                        i +
-                        ' - ' +
-                        this.languageService.translate.instant('igo.geo.spatialFilter.spatialFilter')),
-                    workspace: { enabled: true },
-                    _internal: {
-                        code: this.type === SpatialFilterType.Predefined
-                            ? feature.properties.code
-                            : undefined
-                    },
-                    source: dataSource,
-                    visible: true
-                });
+                .subscribe((layer) => {
                 const featuresOl = features.map((f) => {
                     return featureToOl(f, this.map.projection);
                 });
@@ -2216,12 +2206,12 @@ let SpatialFilterToolComponent = class SpatialFilterToolComponent {
                     featuresOl[0].set('nom', 'Zone', true);
                     featuresOl[0].set('type', type, true);
                 }
-                const ol = dataSource.ol;
+                const ol = layer.dataSource.ol;
                 ol.addFeatures(featuresOl);
-                olLayer.ol.setStyle(this.defaultStyle);
-                this.map.addLayer(olLayer);
-                this.layers.push(olLayer);
-                this.activeLayers.push(olLayer);
+                layer.ol.setStyle(this.defaultStyle);
+                this.map.layerController.add(layer);
+                this.layers.push(layer);
+                this.activeLayers.push(layer);
                 this.cdRef.detectChanges();
             });
         }
@@ -2241,56 +2231,57 @@ let SpatialFilterToolComponent = class SpatialFilterToolComponent {
                     i++;
                 }
             }
-            this.dataSourceService
-                .createAsyncDataSource({
-                type: 'cluster',
-                id,
-                queryable: true,
-                distance: 120,
-                meta: {
-                    title: 'Cluster'
+            const icon = features[0].meta.icon;
+            let style;
+            if (!icon) {
+                style = createOverlayMarkerStyle();
+            }
+            else {
+                style = this.createSvgIcon(icon) || createOverlayMarkerStyle();
+            }
+            const options = {
+                isIgoInternalLayer: true,
+                title: (features[0].meta.title +
+                    ' ' +
+                    i +
+                    ' - ' +
+                    this.languageService.translate.instant('igo.geo.spatialFilter.spatialFilter')),
+                visible: true,
+                style,
+                sourceOptions: {
+                    type: 'cluster',
+                    id,
+                    queryable: true,
+                    distance: 120,
+                    meta: {
+                        title: 'Cluster'
+                    }
                 }
-            })
+            };
+            this.layerService
+                .createAsyncLayer(options)
                 .pipe(take(1))
-                .subscribe((dataSource) => {
-                const icon = features[0].meta.icon;
-                let style;
-                if (!icon) {
-                    style = createOverlayMarkerStyle();
-                }
-                else {
-                    style = this.createSvgIcon(icon) || createOverlayMarkerStyle();
-                }
-                const olLayer = this.layerService.createLayer({
-                    isIgoInternalLayer: true,
-                    title: (features[0].meta.title +
-                        ' ' +
-                        i +
-                        ' - ' +
-                        this.languageService.translate.instant('igo.geo.spatialFilter.spatialFilter')),
-                    source: dataSource,
-                    visible: true,
-                    style
-                });
+                .subscribe((layer) => {
                 const featuresOl = features.map((feature) => {
                     return featureToOl(feature, this.map.projection);
                 });
-                const ol = dataSource.ol;
+                const ol = layer.dataSource.ol;
                 ol.getSource().addFeatures(featuresOl);
-                if (this.layers.find((layer) => layer.id === olLayer.id)) {
-                    this.map.removeLayer(this.layers.find((layer) => layer.id === olLayer.id));
+                const previousLayer = this.layers.find((prevLayer) => prevLayer.id === layer.id);
+                if (previousLayer) {
+                    this.map.layerController.remove(previousLayer);
                     i = i - 1;
-                    olLayer.title = (features[0].meta.title +
+                    layer.title = (features[0].meta.title +
                         ' ' +
                         i +
                         ' - ' +
                         this.languageService.translate.instant('igo.geo.spatialFilter.spatialFilter'));
-                    olLayer.options.title = olLayer.title;
+                    layer.options.title = layer.title;
                 }
                 this.iterator = i;
-                this.map.addLayer(olLayer);
-                this.layers.push(olLayer);
-                this.pushLayer(olLayer);
+                this.map.layerController.add(layer);
+                this.layers.push(layer);
+                this.pushLayer(layer);
                 this.cdRef.detectChanges();
             });
         }
@@ -2326,42 +2317,43 @@ let SpatialFilterToolComponent = class SpatialFilterToolComponent {
                     i++;
                 }
             }
-            this.dataSourceService
-                .createAsyncDataSource({
-                type: 'vector',
-                id,
-                queryable: true
-            })
+            const options = {
+                isIgoInternalLayer: true,
+                title: (features[0].meta.title +
+                    ' ' +
+                    i +
+                    ' - ' +
+                    this.languageService.translate.instant('igo.geo.spatialFilter.spatialFilter')),
+                sourceOptions: {
+                    type: 'vector',
+                    id,
+                    queryable: true
+                },
+                visible: true
+            };
+            this.layerService
+                .createAsyncLayer(options)
                 .pipe(take(1))
-                .subscribe((dataSource) => {
-                const olLayer = this.layerService.createLayer({
-                    isIgoInternalLayer: true,
-                    title: (features[0].meta.title +
-                        ' ' +
-                        i +
-                        ' - ' +
-                        this.languageService.translate.instant('igo.geo.spatialFilter.spatialFilter')),
-                    source: dataSource,
-                    visible: true
-                });
+                .subscribe((layer) => {
                 const featuresOl = features.map((feature) => {
                     return featureToOl(feature, this.map.projection);
                 });
-                const ol = dataSource.ol;
+                const ol = layer.dataSource.ol;
                 ol.addFeatures(featuresOl);
-                if (this.layers.find((layer) => layer.id === olLayer.id)) {
-                    this.map.removeLayer(this.layers.find((layer) => layer.id === olLayer.id));
+                const previousLayer = this.layers.find((prevLayer) => prevLayer.id === layer.id);
+                if (previousLayer) {
+                    this.map.layerController.remove(previousLayer);
                     i = i - 1;
-                    olLayer.title = (features[0].meta.title +
+                    layer.title = (features[0].meta.title +
                         ' ' +
                         i +
                         ' - ' +
                         this.languageService.translate.instant('igo.geo.spatialFilter.spatialFilter'));
-                    olLayer.options.title = olLayer.title;
+                    layer.options.title = layer.title;
                 }
-                this.map.addLayer(olLayer);
-                this.layers.push(olLayer);
-                this.pushLayer(olLayer);
+                this.map.layerController.add(layer);
+                this.layers.push(layer);
+                this.pushLayer(layer);
                 this.cdRef.detectChanges();
             });
         }
@@ -2383,7 +2375,7 @@ let SpatialFilterToolComponent = class SpatialFilterToolComponent {
         }
         this.activeLayers.push(layer);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SpatialFilterToolComponent, deps: [{ token: i1.MatIconRegistry }, { token: i1$1.SpatialFilterService }, { token: i1$1.DataSourceService }, { token: i1$1.LayerService }, { token: MapState }, { token: i4$1.MessageService }, { token: i2$1.LanguageService }, { token: ImportExportState }, { token: ToolState }, { token: WorkspaceState }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SpatialFilterToolComponent, deps: [{ token: i10.MatIconRegistry }, { token: i1.SpatialFilterService }, { token: i1.LayerService }, { token: MapState }, { token: i4$1.MessageService }, { token: i2$1.LanguageService }, { token: ImportExportState }, { token: ToolState }, { token: WorkspaceState }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SpatialFilterToolComponent, isStandalone: true, selector: "igo-spatial-filter-tool", inputs: { type: "type", itemType: "itemType", freehandDrawIsActive: "freehandDrawIsActive" }, ngImport: i0, template: "<igo-spatial-filter-type\n  [store]=\"spatialListStore\"\n  [selectedQueryType]=\"queryType\"\n  [zone]=\"zone\"\n  [layers]=\"activeLayers\"\n  (eventType)=\"getOutputType($event)\"\n  (eventQueryType)=\"getOutputQueryType($event)\"\n  (zoneChange)=\"onZoneChange($event)\"\n  (zoneWithBufferChange)=\"onZoneChange($event, true)\"\n  (bufferChange)=\"buffer = $event\"\n  (measureUnitChange)=\"measureUnit = $event\"\n>\n</igo-spatial-filter-type>\n\n<igo-spatial-filter-item\n  [type]=\"type\"\n  [queryType]=\"queryType\"\n  [map]=\"map\"\n  [zone]=\"zone\"\n  [loading]=\"loading\"\n  [store]=\"store\"\n  [layers]=\"activeLayers\"\n  [allLayers]=\"layers\"\n  [thematicLength]=\"thematicLength\"\n  (radiusEvent)=\"buffer = $event\"\n  (bufferEvent)=\"buffer = $event\"\n  (measureUnitChange)=\"measureUnit = $event\"\n  (freehandControl)=\"freehandDrawIsActive = $event\"\n  (drawZoneEvent)=\"zone = $event\"\n  (zoneWithBufferChange)=\"onZoneChange($event, true)\"\n  (itemTypeChange)=\"itemType = $event\"\n  (thematicChange)=\"thematics = $event\"\n  (toggleSearch)=\"getOutputToggleSearch()\"\n  (clearButtonEvent)=\"clearMap()\"\n  (clearSearchEvent)=\"getOutputClearSearch()\"\n  (export)=\"activateExportTool()\"\n  (openWorkspace)=\"activateWorkspace()\"\n  (entityChange)=\"activateWorkspace($event)\"\n>\n</igo-spatial-filter-item>\n<ng-container *ngIf=\"selectedFeature$ | async as feature\">\n  <igo-feature-details [feature]=\"feature\"></igo-feature-details>\n</ng-container>\n", styles: [":host igo-spatial-filter-item{display:block;padding:0 12px}:host ::ng-deep .mat-mdc-tab-body-wrapper{margin-top:12px;padding:0 12px}\n"], dependencies: [{ kind: "component", type: SpatialFilterTypeComponent, selector: "igo-spatial-filter-type", inputs: ["store", "selectedQueryType", "zone", "layers"], outputs: ["eventType", "eventQueryType", "zoneChange", "zoneWithBufferChange", "bufferChange", "measureUnitChange"] }, { kind: "component", type: SpatialFilterItemComponent, selector: "igo-spatial-filter-item", inputs: ["map", "type", "queryType", "zone", "loading", "store", "layers", "allLayers", "thematicLength"], outputs: ["toggleSearch", "itemTypeChange", "thematicChange", "drawZoneEvent", "bufferEvent", "zoneWithBufferChange", "measureUnitChange", "radiusEvent", "freehandControl", "predefinedRadius", "clearButtonEvent", "clearSearchEvent", "export", "openWorkspace", "entityChange"] }, { kind: "component", type: FeatureDetailsComponent, selector: "igo-feature-details", inputs: ["source", "map", "toolbox", "feature"], outputs: ["routeEvent", "selectFeature", "htmlDisplayEvent"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 };
 SpatialFilterToolComponent = __decorate([
@@ -2398,7 +2390,6 @@ SpatialFilterToolComponent = __decorate([
     ,
     __metadata("design:paramtypes", [MatIconRegistry,
         SpatialFilterService,
-        DataSourceService,
         LayerService,
         MapState,
         MessageService,
@@ -2418,7 +2409,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         NgIf,
                         AsyncPipe
                     ], template: "<igo-spatial-filter-type\n  [store]=\"spatialListStore\"\n  [selectedQueryType]=\"queryType\"\n  [zone]=\"zone\"\n  [layers]=\"activeLayers\"\n  (eventType)=\"getOutputType($event)\"\n  (eventQueryType)=\"getOutputQueryType($event)\"\n  (zoneChange)=\"onZoneChange($event)\"\n  (zoneWithBufferChange)=\"onZoneChange($event, true)\"\n  (bufferChange)=\"buffer = $event\"\n  (measureUnitChange)=\"measureUnit = $event\"\n>\n</igo-spatial-filter-type>\n\n<igo-spatial-filter-item\n  [type]=\"type\"\n  [queryType]=\"queryType\"\n  [map]=\"map\"\n  [zone]=\"zone\"\n  [loading]=\"loading\"\n  [store]=\"store\"\n  [layers]=\"activeLayers\"\n  [allLayers]=\"layers\"\n  [thematicLength]=\"thematicLength\"\n  (radiusEvent)=\"buffer = $event\"\n  (bufferEvent)=\"buffer = $event\"\n  (measureUnitChange)=\"measureUnit = $event\"\n  (freehandControl)=\"freehandDrawIsActive = $event\"\n  (drawZoneEvent)=\"zone = $event\"\n  (zoneWithBufferChange)=\"onZoneChange($event, true)\"\n  (itemTypeChange)=\"itemType = $event\"\n  (thematicChange)=\"thematics = $event\"\n  (toggleSearch)=\"getOutputToggleSearch()\"\n  (clearButtonEvent)=\"clearMap()\"\n  (clearSearchEvent)=\"getOutputClearSearch()\"\n  (export)=\"activateExportTool()\"\n  (openWorkspace)=\"activateWorkspace()\"\n  (entityChange)=\"activateWorkspace($event)\"\n>\n</igo-spatial-filter-item>\n<ng-container *ngIf=\"selectedFeature$ | async as feature\">\n  <igo-feature-details [feature]=\"feature\"></igo-feature-details>\n</ng-container>\n", styles: [":host igo-spatial-filter-item{display:block;padding:0 12px}:host ::ng-deep .mat-mdc-tab-body-wrapper{margin-top:12px;padding:0 12px}\n"] }]
-        }], ctorParameters: () => [{ type: i1.MatIconRegistry }, { type: i1$1.SpatialFilterService }, { type: i1$1.DataSourceService }, { type: i1$1.LayerService }, { type: MapState }, { type: i4$1.MessageService }, { type: i2$1.LanguageService }, { type: ImportExportState }, { type: ToolState }, { type: WorkspaceState }, { type: i0.ChangeDetectorRef }], propDecorators: { type: [{
+        }], ctorParameters: () => [{ type: i10.MatIconRegistry }, { type: i1.SpatialFilterService }, { type: i1.LayerService }, { type: MapState }, { type: i4$1.MessageService }, { type: i2$1.LanguageService }, { type: ImportExportState }, { type: ToolState }, { type: WorkspaceState }, { type: i0.ChangeDetectorRef }], propDecorators: { type: [{
                 type: Input
             }], itemType: [{
                 type: Input
@@ -2517,9 +2508,12 @@ let DataIssueReporterToolComponent = class DataIssueReporterToolComponent {
         this.httpClient = httpClient;
     }
     ngOnInit() {
-        combineLatest([this.languageService.language$, this.map.layers$]).subscribe(([_language, layers]) => {
+        combineLatest([
+            this.languageService.language$,
+            this.map.layerController.all$
+        ]).subscribe(([_language, layers]) => {
             const baseLayerOrShownInLayerList = layers
-                .filter((l) => l.baseLayer || l.showInLayerList)
+                .filter((l) => isBaseLayer(l) || l.showInLayerList)
                 .map((l) => {
                 return { value: `${l.title}-${l.id}`, title: l.title };
             });
@@ -2630,7 +2624,7 @@ let DataIssueReporterToolComponent = class DataIssueReporterToolComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DataIssueReporterToolComponent, deps: [{ token: MapState }, { token: i2$2.FormService }, { token: i2$1.LanguageService }, { token: i4$1.MessageService }, { token: i3.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DataIssueReporterToolComponent, selector: "igo-issue-reporter-tool", inputs: { url: "url" }, ngImport: i0, template: "<igo-form\n  *ngIf=\"form$ | async as form\"\n  [form]=\"form\"\n  [formData]=\"data$ | async\"\n  (submitForm)=\"onSubmit($any($event))\"\n>\n  <div *ngIf=\"form.fields.length\" class=\"form-container\">\n    <igo-form-field\n      *ngFor=\"let field of form.fields\"\n      [field]=\"field\"\n    ></igo-form-field>\n  </div>\n\n  <div formButtons class=\"actions-container\">\n    <button\n      mat-stroked-button\n      type=\"button\"\n      color=\"primary\"\n      (click)=\"clearForm()\"\n    >\n      {{ 'igo.integration.dataIssueReporterTool.reset.button' | translate }}\n    </button>\n    <button\n      mat-flat-button\n      type=\"submit\"\n      color=\"primary\"\n      [disabled]=\"submitDisabled\"\n    >\n      {{ 'igo.integration.dataIssueReporterTool.submit.button' | translate }}\n    </button>\n  </div>\n</igo-form>\n", styles: [":host .actions-container button:not(:last-child){margin-right:8px}:host .form-container{width:100%;padding:10px}:host .form-container igo-form-field{display:block;height:auto}\n"], dependencies: [{ kind: "directive", type: i6$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2$2.FormFieldComponent, selector: "igo-form-field", inputs: ["field"] }, { kind: "component", type: i2$2.FormComponent, selector: "igo-form", inputs: ["form", "formData", "autocomplete"], outputs: ["submitForm"] }, { kind: "pipe", type: i6$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i6$1.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DataIssueReporterToolComponent, selector: "igo-issue-reporter-tool", inputs: { url: "url" }, ngImport: i0, template: "<igo-form\n  *ngIf=\"form$ | async as form\"\n  [form]=\"form\"\n  [formData]=\"data$ | async\"\n  (submitForm)=\"onSubmit($any($event))\"\n>\n  <div *ngIf=\"form.fields.length\" class=\"form-container\">\n    <igo-form-field\n      *ngFor=\"let field of form.fields\"\n      [field]=\"field\"\n    ></igo-form-field>\n  </div>\n\n  <div formButtons class=\"actions-container\">\n    <button\n      mat-stroked-button\n      type=\"button\"\n      color=\"primary\"\n      (click)=\"clearForm()\"\n    >\n      {{ 'igo.integration.dataIssueReporterTool.reset.button' | translate }}\n    </button>\n    <button\n      mat-flat-button\n      type=\"submit\"\n      color=\"primary\"\n      [disabled]=\"submitDisabled\"\n    >\n      {{ 'igo.integration.dataIssueReporterTool.submit.button' | translate }}\n    </button>\n  </div>\n</igo-form>\n", styles: [":host .actions-container button:not(:last-child){margin-right:8px}:host .form-container{width:100%;padding:10px}:host .form-container igo-form-field{display:block;height:auto}\n"], dependencies: [{ kind: "directive", type: i6$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2$2.FormFieldComponent, selector: "igo-form-field", inputs: ["field"] }, { kind: "component", type: i2$2.FormComponent, selector: "igo-form", inputs: ["form", "formData", "autocomplete"], outputs: ["submitForm"] }, { kind: "pipe", type: i6$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i11.TranslatePipe, name: "translate" }] });
 };
 DataIssueReporterToolComponent = __decorate([
     ToolComponent({
@@ -2740,7 +2734,7 @@ let ImportExportToolComponent = class ImportExportToolComponent {
         this.importExportType = event.value;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ImportExportToolComponent, deps: [{ token: MapState }, { token: ImportExportState }, { token: WorkspaceState }, { token: ContextState }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ImportExportToolComponent, isStandalone: true, selector: "igo-import-export-tool", inputs: { projectionsLimitations: "projectionsLimitations", selectFirstProj: "selectFirstProj", importExportType: "importExportType", importExportShowBothType: "importExportShowBothType" }, ngImport: i0, template: "<mat-tab-group *ngIf=\"importExportShowBothType\">\n  <mat-tab\n    [label]=\"'igo.integration.importExportTool.importExportData' | translate\"\n  >\n    <igo-import-export\n      [contextUri]=\"(contextState.context$ | async).uri\"\n      [map]=\"map\"\n      [selectFirstProj]=\"selectFirstProj\"\n      [projectionsLimitations]=\"projectionsLimitations\"\n      [store]=\"workspaceStore\"\n      [selectedMode]=\"importExportState.selectedMode$ | async\"\n      (selectMode)=\"modeChanged($any($event))\"\n      [exportOptions$]=\"importExportState.exportOptions$\"\n      (exportOptionsChange)=\"exportOptionsChange($event)\"\n    >\n    </igo-import-export>\n  </mat-tab>\n  <mat-tab\n    [label]=\"'igo.integration.importExportTool.importExportContext' | translate\"\n  >\n    <igo-context-import-export [map]=\"map\"></igo-context-import-export>\n  </mat-tab>\n</mat-tab-group>\n\n<igo-import-export\n  *ngIf=\"!importExportShowBothType && importExportType === 'layer'\"\n  [contextUri]=\"(contextState.context$ | async).uri\"\n  [map]=\"map\"\n  [store]=\"workspaceStore\"\n  [selectedMode]=\"importExportState.selectedMode$ | async\"\n  (selectMode)=\"modeChanged($any($event))\"\n  [exportOptions$]=\"importExportState.exportOptions$\"\n  (exportOptionsChange)=\"exportOptionsChange($event)\"\n>\n</igo-import-export>\n\n<igo-context-import-export\n  *ngIf=\"!importExportShowBothType && importExportType === 'context'\"\n  [map]=\"map\"\n>\n</igo-context-import-export>\n", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i5$2.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i5$2.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: ImportExportComponent, selector: "igo-import-export", inputs: ["selectFirstProj", "map", "contextUri", "projectionsLimitations", "store", "selectedMode", "exportOptions$"], outputs: ["selectMode", "exportOptionsChange"] }, { kind: "component", type: ContextImportExportComponent, selector: "igo-context-import-export", inputs: ["map"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: IgoLanguageModule }, { kind: "pipe", type: i6$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ImportExportToolComponent, isStandalone: true, selector: "igo-import-export-tool", inputs: { projectionsLimitations: "projectionsLimitations", selectFirstProj: "selectFirstProj", importExportType: "importExportType", importExportShowBothType: "importExportShowBothType" }, ngImport: i0, template: "<mat-tab-group *ngIf=\"importExportShowBothType\">\n  <mat-tab\n    [label]=\"'igo.integration.importExportTool.importExportData' | translate\"\n  >\n    <igo-import-export\n      [contextUri]=\"(contextState.context$ | async).uri\"\n      [map]=\"map\"\n      [selectFirstProj]=\"selectFirstProj\"\n      [projectionsLimitations]=\"projectionsLimitations\"\n      [store]=\"workspaceStore\"\n      [selectedMode]=\"importExportState.selectedMode$ | async\"\n      (selectMode)=\"modeChanged($any($event))\"\n      [exportOptions$]=\"importExportState.exportOptions$\"\n      (exportOptionsChange)=\"exportOptionsChange($event)\"\n    >\n    </igo-import-export>\n  </mat-tab>\n  <mat-tab\n    [label]=\"'igo.integration.importExportTool.importExportContext' | translate\"\n  >\n    <igo-context-import-export [map]=\"map\"></igo-context-import-export>\n  </mat-tab>\n</mat-tab-group>\n\n<igo-import-export\n  *ngIf=\"!importExportShowBothType && importExportType === 'layer'\"\n  [contextUri]=\"(contextState.context$ | async).uri\"\n  [map]=\"map\"\n  [store]=\"workspaceStore\"\n  [selectedMode]=\"importExportState.selectedMode$ | async\"\n  (selectMode)=\"modeChanged($any($event))\"\n  [exportOptions$]=\"importExportState.exportOptions$\"\n  (exportOptionsChange)=\"exportOptionsChange($event)\"\n>\n</igo-import-export>\n\n<igo-context-import-export\n  *ngIf=\"!importExportShowBothType && importExportType === 'context'\"\n  [map]=\"map\"\n>\n</igo-context-import-export>\n", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i5$2.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i5$2.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: ImportExportComponent, selector: "igo-import-export", inputs: ["selectFirstProj", "map", "contextUri", "projectionsLimitations", "store", "selectedMode", "exportOptions$"], outputs: ["selectMode", "exportOptionsChange"] }, { kind: "component", type: ContextImportExportComponent, selector: "igo-context-import-export", inputs: ["map"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: IgoLanguageModule }, { kind: "pipe", type: i11.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 };
 ImportExportToolComponent = __decorate([
     ToolComponent({
@@ -3179,8 +3173,8 @@ class AdvancedCoordinatesComponent {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AdvancedCoordinatesComponent, deps: [{ token: MapState }, { token: i2$1.LanguageService }, { token: i4$1.MessageService }, { token: i0.ChangeDetectorRef }, { token: i4.StorageService }, { token: i5.ConfigService }, { token: i3$2.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AdvancedCoordinatesComponent, isStandalone: true, selector: "igo-advanced-coordinates", inputs: { projectionsLimitations: "projectionsLimitations" }, ngImport: i0, template: "<div class=\"advanced-coordinates__coordinates-container\">\n  <div class=\"advanced-coordinates__coordinates-container__inner\">\n    <mat-form-field *ngIf=\"units; else elseBlock\" subscriptSizing=\"dynamic\">\n      <mat-label>{{\n        'igo.integration.advanced-map-tool.advanced-coordinates.lon' | translate\n      }}</mat-label>\n      <textarea\n        #textArea\n        matInput\n        readonly\n        rows=\"1\"\n        [placeholder]=\"\n          'igo.integration.advanced-map-tool.advanced-coordinates.lon'\n            | translate\n        \"\n        [value]=\"coordinates[0]\"\n      ></textarea>\n    </mat-form-field>\n    <ng-template #elseBlock>\n      <mat-form-field subscriptSizing=\"dynamic\">\n        <textarea\n          #textArea\n          matInput\n          readonly\n          rows=\"1\"\n          [placeholder]=\"\n            'igo.integration.advanced-map-tool.advanced-coordinates.est'\n              | translate\n          \"\n          [value]=\"coordinates[0]\"\n        ></textarea>\n      </mat-form-field>\n    </ng-template>\n\n    <mat-form-field *ngIf=\"units; else elseBlock2\" subscriptSizing=\"dynamic\">\n      <mat-label>{{\n        'igo.integration.advanced-map-tool.advanced-coordinates.lat' | translate\n      }}</mat-label>\n      <textarea\n        #textArea\n        matInput\n        readonly\n        rows=\"1\"\n        [placeholder]=\"\n          'igo.integration.advanced-map-tool.advanced-coordinates.lat'\n            | translate\n        \"\n        [value]=\"coordinates[1]\"\n      ></textarea>\n    </mat-form-field>\n    <ng-template #elseBlock2>\n      <mat-form-field subscriptSizing=\"dynamic\">\n        <textarea\n          #textArea\n          matInput\n          readonly\n          rows=\"1\"\n          [placeholder]=\"\n            'igo.integration.advanced-map-tool.advanced-coordinates.nord'\n              | translate\n          \"\n          [value]=\"coordinates[1]\"\n        ></textarea>\n      </mat-form-field>\n    </ng-template>\n    <button\n      mat-icon-button\n      [attr.aria-label]=\"\n        'igo.integration.advanced-map-tool.advanced-coordinates.copy'\n          | translate\n      \"\n      class=\"igo-form-button-group advanced-coordinates__copy-coordinates\"\n      (click)=\"copyTextToClipboard()\"\n    >\n      <mat-icon>content_copy</mat-icon>\n    </button>\n  </div>\n\n  <form class=\"igo-form advanced-coordinates__form\" [formGroup]=\"form\">\n    <div class=\"advanced-coordinates__coordinates-container__inner\">\n      <mat-form-field class=\"igo-input-container\" subscriptSizing=\"dynamic\">\n        <mat-label>{{\n          'igo.integration.advanced-map-tool.advanced-coordinates.coordSystem'\n            | translate\n        }}</mat-label>\n        <mat-select [(value)]=\"inputProj\">\n          <mat-option\n            matTooltipShowDelay=\"500\"\n            *ngFor=\"let projection of projections$ | async\"\n            [value]=\"projection\"\n            (click)=\"$event.stopPropagation()\"\n          >\n            {{ projection.translatedValue || projection.alias }}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n    <div class=\"advanced-coordinates__coordinates-container__inner\">\n      <mat-slide-toggle\n        class=\"center-toggle mat-typography\"\n        [checked]=\"center\"\n        [labelPosition]=\"'before'\"\n        (change)=\"displayCenter($event.checked)\"\n      >\n        {{\n          'igo.integration.advanced-map-tool.advanced-coordinates.center'\n            | translate\n        }}\n      </mat-slide-toggle>\n    </div>\n  </form>\n\n  <p class=\"igo-zoom mat-typography\">\n    {{\n      'igo.integration.advanced-map-tool.advanced-coordinates.zoom' | translate\n    }}\n    {{ map.viewController.getZoom() }}\n  </p>\n  <p class=\"igo-zoom mat-typography\">\n    {{\n      'igo.integration.advanced-map-tool.advanced-coordinates.scale' | translate\n    }}\n    {{ formattedScale$ | async }}\n  </p>\n  <p class=\"igo-zoom mat-typography\">\n    {{\n      'igo.integration.advanced-map-tool.advanced-coordinates.resolution'\n        | translate\n    }}\n    {{ map.viewController.getResolution() | number: '1.0-0' }}\n  </p>\n</div>\n", styles: [":host{padding:12px 0}textarea{resize:none}.advanced-coordinates__coordinates-container{width:100%;display:flex;flex-direction:column;padding:12px 0}.advanced-coordinates__coordinates-container__inner{display:flex;align-items:center;margin-bottom:16px}.advanced-coordinates__coordinates-container__inner mat-form-field{flex:1}.advanced-coordinates__coordinates-container__inner mat-form-field:not(:first-child),.advanced-coordinates__coordinates-container__inner button:not(:first-child){margin-left:8px}.advanced-coordinates__form{display:flex;flex-direction:column}.advanced-coordinates__form mat-slide-toggle{flex:1}.advanced-coordinates__form mat-slide-toggle ::ng-deep .mdc-form-field{display:flex;justify-content:space-between}.advanced-coordinates__form mat-slide-toggle ::ng-deep .mdc-label{flex:1}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$3.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i8$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i11.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i12.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i13.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "ngmodule", type: IgoLanguageModule }, { kind: "pipe", type: i6$1.TranslatePipe, name: "translate" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AdvancedCoordinatesComponent, deps: [{ token: MapState }, { token: i2$1.LanguageService }, { token: i4$1.MessageService }, { token: i0.ChangeDetectorRef }, { token: i4.StorageService }, { token: i5.ConfigService }, { token: i2$3.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AdvancedCoordinatesComponent, isStandalone: true, selector: "igo-advanced-coordinates", inputs: { projectionsLimitations: "projectionsLimitations" }, ngImport: i0, template: "<div class=\"advanced-coordinates__coordinates-container\">\n  <div class=\"advanced-coordinates__coordinates-container__inner\">\n    <mat-form-field *ngIf=\"units; else elseBlock\" subscriptSizing=\"dynamic\">\n      <mat-label>{{\n        'igo.integration.advanced-map-tool.advanced-coordinates.lon' | translate\n      }}</mat-label>\n      <textarea\n        #textArea\n        matInput\n        readonly\n        rows=\"1\"\n        [placeholder]=\"\n          'igo.integration.advanced-map-tool.advanced-coordinates.lon'\n            | translate\n        \"\n        [value]=\"coordinates[0]\"\n      ></textarea>\n    </mat-form-field>\n    <ng-template #elseBlock>\n      <mat-form-field subscriptSizing=\"dynamic\">\n        <textarea\n          #textArea\n          matInput\n          readonly\n          rows=\"1\"\n          [placeholder]=\"\n            'igo.integration.advanced-map-tool.advanced-coordinates.est'\n              | translate\n          \"\n          [value]=\"coordinates[0]\"\n        ></textarea>\n      </mat-form-field>\n    </ng-template>\n\n    <mat-form-field *ngIf=\"units; else elseBlock2\" subscriptSizing=\"dynamic\">\n      <mat-label>{{\n        'igo.integration.advanced-map-tool.advanced-coordinates.lat' | translate\n      }}</mat-label>\n      <textarea\n        #textArea\n        matInput\n        readonly\n        rows=\"1\"\n        [placeholder]=\"\n          'igo.integration.advanced-map-tool.advanced-coordinates.lat'\n            | translate\n        \"\n        [value]=\"coordinates[1]\"\n      ></textarea>\n    </mat-form-field>\n    <ng-template #elseBlock2>\n      <mat-form-field subscriptSizing=\"dynamic\">\n        <textarea\n          #textArea\n          matInput\n          readonly\n          rows=\"1\"\n          [placeholder]=\"\n            'igo.integration.advanced-map-tool.advanced-coordinates.nord'\n              | translate\n          \"\n          [value]=\"coordinates[1]\"\n        ></textarea>\n      </mat-form-field>\n    </ng-template>\n    <button\n      mat-icon-button\n      [attr.aria-label]=\"\n        'igo.integration.advanced-map-tool.advanced-coordinates.copy'\n          | translate\n      \"\n      class=\"igo-form-button-group advanced-coordinates__copy-coordinates\"\n      (click)=\"copyTextToClipboard()\"\n    >\n      <mat-icon>content_copy</mat-icon>\n    </button>\n  </div>\n\n  <form class=\"igo-form advanced-coordinates__form\" [formGroup]=\"form\">\n    <div class=\"advanced-coordinates__coordinates-container__inner\">\n      <mat-form-field class=\"igo-input-container\" subscriptSizing=\"dynamic\">\n        <mat-label>{{\n          'igo.integration.advanced-map-tool.advanced-coordinates.coordSystem'\n            | translate\n        }}</mat-label>\n        <mat-select [(value)]=\"inputProj\">\n          <mat-option\n            matTooltipShowDelay=\"500\"\n            *ngFor=\"let projection of projections$ | async\"\n            [value]=\"projection\"\n            (click)=\"$event.stopPropagation()\"\n          >\n            {{ projection.translatedValue || projection.alias }}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n    <div class=\"advanced-coordinates__coordinates-container__inner\">\n      <mat-slide-toggle\n        class=\"center-toggle mat-typography\"\n        [checked]=\"center\"\n        [labelPosition]=\"'before'\"\n        (change)=\"displayCenter($event.checked)\"\n      >\n        {{\n          'igo.integration.advanced-map-tool.advanced-coordinates.center'\n            | translate\n        }}\n      </mat-slide-toggle>\n    </div>\n  </form>\n\n  <p class=\"igo-zoom mat-typography\">\n    {{\n      'igo.integration.advanced-map-tool.advanced-coordinates.zoom' | translate\n    }}\n    {{ map.viewController.getZoom() }}\n  </p>\n  <p class=\"igo-zoom mat-typography\">\n    {{\n      'igo.integration.advanced-map-tool.advanced-coordinates.scale' | translate\n    }}\n    {{ formattedScale$ | async }}\n  </p>\n  <p class=\"igo-zoom mat-typography\">\n    {{\n      'igo.integration.advanced-map-tool.advanced-coordinates.resolution'\n        | translate\n    }}\n    {{ map.viewController.getResolution() | number: '1.0-0' }}\n  </p>\n</div>\n", styles: [":host{padding:12px 0}textarea{resize:none}.advanced-coordinates__coordinates-container{width:100%;display:flex;flex-direction:column;padding:12px 0}.advanced-coordinates__coordinates-container__inner{display:flex;align-items:center;margin-bottom:16px}.advanced-coordinates__coordinates-container__inner mat-form-field{flex:1}.advanced-coordinates__coordinates-container__inner mat-form-field:not(:first-child),.advanced-coordinates__coordinates-container__inner button:not(:first-child){margin-left:8px}.advanced-coordinates__form{display:flex;flex-direction:column}.advanced-coordinates__form mat-slide-toggle{flex:1}.advanced-coordinates__form mat-slide-toggle ::ng-deep .mdc-form-field{display:flex;justify-content:space-between}.advanced-coordinates__form mat-slide-toggle ::ng-deep .mdc-label{flex:1}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i7$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i8$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i11$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i12.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i13.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "ngmodule", type: IgoLanguageModule }, { kind: "pipe", type: i11.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AdvancedCoordinatesComponent, decorators: [{
             type: Component,
@@ -3200,13 +3194,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         DecimalPipe,
                         IgoLanguageModule
                     ], template: "<div class=\"advanced-coordinates__coordinates-container\">\n  <div class=\"advanced-coordinates__coordinates-container__inner\">\n    <mat-form-field *ngIf=\"units; else elseBlock\" subscriptSizing=\"dynamic\">\n      <mat-label>{{\n        'igo.integration.advanced-map-tool.advanced-coordinates.lon' | translate\n      }}</mat-label>\n      <textarea\n        #textArea\n        matInput\n        readonly\n        rows=\"1\"\n        [placeholder]=\"\n          'igo.integration.advanced-map-tool.advanced-coordinates.lon'\n            | translate\n        \"\n        [value]=\"coordinates[0]\"\n      ></textarea>\n    </mat-form-field>\n    <ng-template #elseBlock>\n      <mat-form-field subscriptSizing=\"dynamic\">\n        <textarea\n          #textArea\n          matInput\n          readonly\n          rows=\"1\"\n          [placeholder]=\"\n            'igo.integration.advanced-map-tool.advanced-coordinates.est'\n              | translate\n          \"\n          [value]=\"coordinates[0]\"\n        ></textarea>\n      </mat-form-field>\n    </ng-template>\n\n    <mat-form-field *ngIf=\"units; else elseBlock2\" subscriptSizing=\"dynamic\">\n      <mat-label>{{\n        'igo.integration.advanced-map-tool.advanced-coordinates.lat' | translate\n      }}</mat-label>\n      <textarea\n        #textArea\n        matInput\n        readonly\n        rows=\"1\"\n        [placeholder]=\"\n          'igo.integration.advanced-map-tool.advanced-coordinates.lat'\n            | translate\n        \"\n        [value]=\"coordinates[1]\"\n      ></textarea>\n    </mat-form-field>\n    <ng-template #elseBlock2>\n      <mat-form-field subscriptSizing=\"dynamic\">\n        <textarea\n          #textArea\n          matInput\n          readonly\n          rows=\"1\"\n          [placeholder]=\"\n            'igo.integration.advanced-map-tool.advanced-coordinates.nord'\n              | translate\n          \"\n          [value]=\"coordinates[1]\"\n        ></textarea>\n      </mat-form-field>\n    </ng-template>\n    <button\n      mat-icon-button\n      [attr.aria-label]=\"\n        'igo.integration.advanced-map-tool.advanced-coordinates.copy'\n          | translate\n      \"\n      class=\"igo-form-button-group advanced-coordinates__copy-coordinates\"\n      (click)=\"copyTextToClipboard()\"\n    >\n      <mat-icon>content_copy</mat-icon>\n    </button>\n  </div>\n\n  <form class=\"igo-form advanced-coordinates__form\" [formGroup]=\"form\">\n    <div class=\"advanced-coordinates__coordinates-container__inner\">\n      <mat-form-field class=\"igo-input-container\" subscriptSizing=\"dynamic\">\n        <mat-label>{{\n          'igo.integration.advanced-map-tool.advanced-coordinates.coordSystem'\n            | translate\n        }}</mat-label>\n        <mat-select [(value)]=\"inputProj\">\n          <mat-option\n            matTooltipShowDelay=\"500\"\n            *ngFor=\"let projection of projections$ | async\"\n            [value]=\"projection\"\n            (click)=\"$event.stopPropagation()\"\n          >\n            {{ projection.translatedValue || projection.alias }}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n    <div class=\"advanced-coordinates__coordinates-container__inner\">\n      <mat-slide-toggle\n        class=\"center-toggle mat-typography\"\n        [checked]=\"center\"\n        [labelPosition]=\"'before'\"\n        (change)=\"displayCenter($event.checked)\"\n      >\n        {{\n          'igo.integration.advanced-map-tool.advanced-coordinates.center'\n            | translate\n        }}\n      </mat-slide-toggle>\n    </div>\n  </form>\n\n  <p class=\"igo-zoom mat-typography\">\n    {{\n      'igo.integration.advanced-map-tool.advanced-coordinates.zoom' | translate\n    }}\n    {{ map.viewController.getZoom() }}\n  </p>\n  <p class=\"igo-zoom mat-typography\">\n    {{\n      'igo.integration.advanced-map-tool.advanced-coordinates.scale' | translate\n    }}\n    {{ formattedScale$ | async }}\n  </p>\n  <p class=\"igo-zoom mat-typography\">\n    {{\n      'igo.integration.advanced-map-tool.advanced-coordinates.resolution'\n        | translate\n    }}\n    {{ map.viewController.getResolution() | number: '1.0-0' }}\n  </p>\n</div>\n", styles: [":host{padding:12px 0}textarea{resize:none}.advanced-coordinates__coordinates-container{width:100%;display:flex;flex-direction:column;padding:12px 0}.advanced-coordinates__coordinates-container__inner{display:flex;align-items:center;margin-bottom:16px}.advanced-coordinates__coordinates-container__inner mat-form-field{flex:1}.advanced-coordinates__coordinates-container__inner mat-form-field:not(:first-child),.advanced-coordinates__coordinates-container__inner button:not(:first-child){margin-left:8px}.advanced-coordinates__form{display:flex;flex-direction:column}.advanced-coordinates__form mat-slide-toggle{flex:1}.advanced-coordinates__form mat-slide-toggle ::ng-deep .mdc-form-field{display:flex;justify-content:space-between}.advanced-coordinates__form mat-slide-toggle ::ng-deep .mdc-label{flex:1}\n"] }]
-        }], ctorParameters: () => [{ type: MapState }, { type: i2$1.LanguageService }, { type: i4$1.MessageService }, { type: i0.ChangeDetectorRef }, { type: i4.StorageService }, { type: i5.ConfigService }, { type: i3$2.UntypedFormBuilder }], propDecorators: { projectionsLimitations: [{
+        }], ctorParameters: () => [{ type: MapState }, { type: i2$1.LanguageService }, { type: i4$1.MessageService }, { type: i0.ChangeDetectorRef }, { type: i4.StorageService }, { type: i5.ConfigService }, { type: i2$3.UntypedFormBuilder }], propDecorators: { projectionsLimitations: [{
                 type: Input
             }] } });
 
 class AdvancedSwipeComponent {
     mapState;
-    contextService;
     formBuilder;
     toolState;
     swipe = false;
@@ -3222,9 +3215,8 @@ class AdvancedSwipeComponent {
     get map() {
         return this.mapState.map;
     }
-    constructor(mapState, contextService, formBuilder, toolState) {
+    constructor(mapState, formBuilder, toolState) {
         this.mapState = mapState;
-        this.contextService = contextService;
         this.formBuilder = formBuilder;
         this.toolState = toolState;
         this.buildForm();
@@ -3234,7 +3226,10 @@ class AdvancedSwipeComponent {
      * @internal
      */
     ngOnInit() {
-        this.map.layers$.subscribe((ll) => (this.userControlledLayerList = ll.filter((layer) => !layer.baseLayer && layer.showInLayerList && layer.displayed)));
+        this.map.layerController.all$.subscribe((layers) => (this.userControlledLayerList = layers.filter((layer) => isLayerItem(layer) &&
+            !layer.baseLayer &&
+            layer.showInLayerList &&
+            layer.displayed)));
     }
     /**
      * Desactivate the swipe
@@ -3273,7 +3268,7 @@ class AdvancedSwipeComponent {
         if (e._selected) {
             e._selected = false;
         }
-        const allLayers = this.userControlledLayerList.length;
+        const allLayers = this.userControlledLayerList?.length;
         const selectedLayers = this.form.controls.layers.value.length;
         if (selectedLayers === allLayers) {
             e._selected = true;
@@ -3311,8 +3306,8 @@ class AdvancedSwipeComponent {
     contextEmit() {
         this.toolState.toolbox.activateTool('contextManager');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AdvancedSwipeComponent, deps: [{ token: MapState }, { token: i1$3.ContextService }, { token: i3$2.UntypedFormBuilder }, { token: ToolState }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AdvancedSwipeComponent, isStandalone: true, selector: "igo-advanced-swipe", ngImport: i0, template: "<div\n  *ngIf=\"userControlledLayerList.length; else noLayersBlock\"\n  class=\"igo-swipe-select-container\"\n>\n  <form class=\"igo-form\" [formGroup]=\"form\">\n    <mat-form-field>\n      <mat-label>{{\n        'igo.integration.advanced-map-tool.advanced-swipe.swipe-select'\n          | translate\n      }}</mat-label>\n      <mat-select formControlName=\"layers\" multiple>\n        <mat-option [value]=\"1\" (click)=\"selectAll(e)\" #e>\n          {{\n            'igo.integration.advanced-map-tool.advanced-swipe.selectAll'\n              | translate\n          }}\n        </mat-option>\n        <mat-divider></mat-divider>\n        <mat-option\n          *ngFor=\"let layer of userControlledLayerList\"\n          [value]=\"layer\"\n          (click)=\"applyNewLayers(e)\"\n          >{{ layer.title }}</mat-option\n        >\n      </mat-select>\n    </mat-form-field>\n    <mat-slide-toggle\n      class=\"swipe-toggle mat-typography\"\n      [checked]=\"swipe\"\n      [labelPosition]=\"'before'\"\n      (change)=\"startSwipe($event.checked)\"\n    >\n      {{ 'igo.integration.advanced-map-tool.advanced-swipe.swipe' | translate }}\n    </mat-slide-toggle>\n  </form>\n</div>\n\n<ng-template #noLayersBlock>\n  <mat-list>\n    <p class=\"map-empty mat-typography\">\n      {{ 'igo.integration.advanced-map-tool.advanced-swipe.empty' | translate }}\n    </p>\n    <p class=\"map-empty mat-typography\">\n      {{\n        'igo.integration.advanced-map-tool.advanced-swipe.customize' | translate\n      }}\n    </p>\n    <mat-list-item>\n      <mat-icon matListItemIcon>search</mat-icon>\n      <span\n        matListItemTitle\n        class=\"search-tool mat-typography\"\n        (click)=\"searchEmit()\"\n      >\n        {{\n          'igo.integration.advanced-map-tool.advanced-swipe.search-tool'\n            | translate\n        }}\n      </span>\n    </mat-list-item>\n    <mat-list-item>\n      <mat-icon matListItemIcon>library_add</mat-icon>\n      <span\n        matListItemTitle\n        class=\"catalog-tool mat-typography\"\n        (click)=\"catalogEmit()\"\n      >\n        {{\n          'igo.integration.advanced-map-tool.advanced-swipe.catalog-tool'\n            | translate\n        }}\n      </span>\n    </mat-list-item>\n    <mat-list-item>\n      <mat-icon matListItemIcon>star</mat-icon>\n      <span\n        matListItemTitle\n        class=\"context-tool mat-typography\"\n        (click)=\"contextEmit()\"\n      >\n        {{\n          'igo.integration.advanced-map-tool.advanced-swipe.context-tool'\n            | translate\n        }}\n      </span>\n    </mat-list-item>\n  </mat-list>\n</ng-template>\n", styles: [":host{padding:12px 0}:host .igo-swipe-select-container{padding:12px 0}:host .igo-swipe-select-container mat-form-field{width:100%}:host .igo-form{display:flex;flex-direction:column;width:100%}:host mat-slide-toggle{flex:1}:host mat-slide-toggle ::ng-deep .mdc-form-field{display:flex;justify-content:space-between}:host mat-slide-toggle ::ng-deep .mdc-label{flex:1}:host .map-empty,:host .search-tool,:host .catalog-tool,:host .context-tool{margin:4px}:host .map-empty{padding:12px 0;text-align:justify}:host .search-tool,:host .catalog-tool,:host .context-tool{cursor:pointer}:host mat-list mat-list-item h4{font-weight:700}:host mat-list-item ::ng-deep .mdc-list-item__primary-text{font-size:smaller}:host .advanced-tool-line{height:2px;background-color:gray}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$3.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i11.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i12.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i8$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i13.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i10.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i10.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i10.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: i10.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: IgoLanguageModule }, { kind: "pipe", type: i6$1.TranslatePipe, name: "translate" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AdvancedSwipeComponent, deps: [{ token: MapState }, { token: i2$3.UntypedFormBuilder }, { token: ToolState }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AdvancedSwipeComponent, isStandalone: true, selector: "igo-advanced-swipe", ngImport: i0, template: "<div\n  *ngIf=\"userControlledLayerList?.length; else noLayersBlock\"\n  class=\"igo-swipe-select-container\"\n>\n  <form class=\"igo-form\" [formGroup]=\"form\">\n    <mat-form-field>\n      <mat-label>{{\n        'igo.integration.advanced-map-tool.advanced-swipe.swipe-select'\n          | translate\n      }}</mat-label>\n      <mat-select formControlName=\"layers\" multiple>\n        <mat-option [value]=\"1\" (click)=\"selectAll(e)\" #e>\n          {{\n            'igo.integration.advanced-map-tool.advanced-swipe.selectAll'\n              | translate\n          }}\n        </mat-option>\n        <mat-divider></mat-divider>\n        <mat-option\n          *ngFor=\"let layer of userControlledLayerList\"\n          [value]=\"layer\"\n          (click)=\"applyNewLayers(e)\"\n          >{{ layer.title }}</mat-option\n        >\n      </mat-select>\n    </mat-form-field>\n    <mat-slide-toggle\n      class=\"swipe-toggle mat-typography\"\n      [checked]=\"swipe\"\n      [labelPosition]=\"'before'\"\n      (change)=\"startSwipe($event.checked)\"\n    >\n      {{ 'igo.integration.advanced-map-tool.advanced-swipe.swipe' | translate }}\n    </mat-slide-toggle>\n  </form>\n</div>\n\n<ng-template #noLayersBlock>\n  <mat-list>\n    <p class=\"map-empty mat-typography\">\n      {{ 'igo.integration.advanced-map-tool.advanced-swipe.empty' | translate }}\n    </p>\n    <p class=\"map-empty mat-typography\">\n      {{\n        'igo.integration.advanced-map-tool.advanced-swipe.customize' | translate\n      }}\n    </p>\n    <mat-list-item>\n      <mat-icon matListItemIcon>search</mat-icon>\n      <span\n        matListItemTitle\n        class=\"search-tool mat-typography\"\n        (click)=\"searchEmit()\"\n      >\n        {{\n          'igo.integration.advanced-map-tool.advanced-swipe.search-tool'\n            | translate\n        }}\n      </span>\n    </mat-list-item>\n    <mat-list-item>\n      <mat-icon matListItemIcon>library_add</mat-icon>\n      <span\n        matListItemTitle\n        class=\"catalog-tool mat-typography\"\n        (click)=\"catalogEmit()\"\n      >\n        {{\n          'igo.integration.advanced-map-tool.advanced-swipe.catalog-tool'\n            | translate\n        }}\n      </span>\n    </mat-list-item>\n    <mat-list-item>\n      <mat-icon matListItemIcon>star</mat-icon>\n      <span\n        matListItemTitle\n        class=\"context-tool mat-typography\"\n        (click)=\"contextEmit()\"\n      >\n        {{\n          'igo.integration.advanced-map-tool.advanced-swipe.context-tool'\n            | translate\n        }}\n      </span>\n    </mat-list-item>\n  </mat-list>\n</ng-template>\n", styles: [":host{padding:12px 0}:host .igo-swipe-select-container{padding:12px 0}:host .igo-swipe-select-container mat-form-field{width:100%}:host .igo-form{display:flex;flex-direction:column;width:100%}:host mat-slide-toggle{flex:1}:host mat-slide-toggle ::ng-deep .mdc-form-field{display:flex;justify-content:space-between}:host mat-slide-toggle ::ng-deep .mdc-label{flex:1}:host .map-empty,:host .search-tool,:host .catalog-tool,:host .context-tool{margin:4px}:host .map-empty{padding:12px 0;text-align:justify}:host .search-tool,:host .catalog-tool,:host .context-tool{cursor:pointer}:host mat-list mat-list-item h4{font-weight:700}:host mat-list-item ::ng-deep .mdc-list-item__primary-text{font-size:smaller}:host .advanced-tool-line{height:2px;background-color:gray}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i7$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i11$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i12.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i7$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i13.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i9.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i9.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i9.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: i9.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: IgoLanguageModule }, { kind: "pipe", type: i11.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AdvancedSwipeComponent, decorators: [{
             type: Component,
@@ -3330,28 +3325,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         MatIconModule,
                         IgoLanguageModule,
                         IgoIconComponent
-                    ], template: "<div\n  *ngIf=\"userControlledLayerList.length; else noLayersBlock\"\n  class=\"igo-swipe-select-container\"\n>\n  <form class=\"igo-form\" [formGroup]=\"form\">\n    <mat-form-field>\n      <mat-label>{{\n        'igo.integration.advanced-map-tool.advanced-swipe.swipe-select'\n          | translate\n      }}</mat-label>\n      <mat-select formControlName=\"layers\" multiple>\n        <mat-option [value]=\"1\" (click)=\"selectAll(e)\" #e>\n          {{\n            'igo.integration.advanced-map-tool.advanced-swipe.selectAll'\n              | translate\n          }}\n        </mat-option>\n        <mat-divider></mat-divider>\n        <mat-option\n          *ngFor=\"let layer of userControlledLayerList\"\n          [value]=\"layer\"\n          (click)=\"applyNewLayers(e)\"\n          >{{ layer.title }}</mat-option\n        >\n      </mat-select>\n    </mat-form-field>\n    <mat-slide-toggle\n      class=\"swipe-toggle mat-typography\"\n      [checked]=\"swipe\"\n      [labelPosition]=\"'before'\"\n      (change)=\"startSwipe($event.checked)\"\n    >\n      {{ 'igo.integration.advanced-map-tool.advanced-swipe.swipe' | translate }}\n    </mat-slide-toggle>\n  </form>\n</div>\n\n<ng-template #noLayersBlock>\n  <mat-list>\n    <p class=\"map-empty mat-typography\">\n      {{ 'igo.integration.advanced-map-tool.advanced-swipe.empty' | translate }}\n    </p>\n    <p class=\"map-empty mat-typography\">\n      {{\n        'igo.integration.advanced-map-tool.advanced-swipe.customize' | translate\n      }}\n    </p>\n    <mat-list-item>\n      <mat-icon matListItemIcon>search</mat-icon>\n      <span\n        matListItemTitle\n        class=\"search-tool mat-typography\"\n        (click)=\"searchEmit()\"\n      >\n        {{\n          'igo.integration.advanced-map-tool.advanced-swipe.search-tool'\n            | translate\n        }}\n      </span>\n    </mat-list-item>\n    <mat-list-item>\n      <mat-icon matListItemIcon>library_add</mat-icon>\n      <span\n        matListItemTitle\n        class=\"catalog-tool mat-typography\"\n        (click)=\"catalogEmit()\"\n      >\n        {{\n          'igo.integration.advanced-map-tool.advanced-swipe.catalog-tool'\n            | translate\n        }}\n      </span>\n    </mat-list-item>\n    <mat-list-item>\n      <mat-icon matListItemIcon>star</mat-icon>\n      <span\n        matListItemTitle\n        class=\"context-tool mat-typography\"\n        (click)=\"contextEmit()\"\n      >\n        {{\n          'igo.integration.advanced-map-tool.advanced-swipe.context-tool'\n            | translate\n        }}\n      </span>\n    </mat-list-item>\n  </mat-list>\n</ng-template>\n", styles: [":host{padding:12px 0}:host .igo-swipe-select-container{padding:12px 0}:host .igo-swipe-select-container mat-form-field{width:100%}:host .igo-form{display:flex;flex-direction:column;width:100%}:host mat-slide-toggle{flex:1}:host mat-slide-toggle ::ng-deep .mdc-form-field{display:flex;justify-content:space-between}:host mat-slide-toggle ::ng-deep .mdc-label{flex:1}:host .map-empty,:host .search-tool,:host .catalog-tool,:host .context-tool{margin:4px}:host .map-empty{padding:12px 0;text-align:justify}:host .search-tool,:host .catalog-tool,:host .context-tool{cursor:pointer}:host mat-list mat-list-item h4{font-weight:700}:host mat-list-item ::ng-deep .mdc-list-item__primary-text{font-size:smaller}:host .advanced-tool-line{height:2px;background-color:gray}\n"] }]
-        }], ctorParameters: () => [{ type: MapState }, { type: i1$3.ContextService }, { type: i3$2.UntypedFormBuilder }, { type: ToolState }] });
+                    ], template: "<div\n  *ngIf=\"userControlledLayerList?.length; else noLayersBlock\"\n  class=\"igo-swipe-select-container\"\n>\n  <form class=\"igo-form\" [formGroup]=\"form\">\n    <mat-form-field>\n      <mat-label>{{\n        'igo.integration.advanced-map-tool.advanced-swipe.swipe-select'\n          | translate\n      }}</mat-label>\n      <mat-select formControlName=\"layers\" multiple>\n        <mat-option [value]=\"1\" (click)=\"selectAll(e)\" #e>\n          {{\n            'igo.integration.advanced-map-tool.advanced-swipe.selectAll'\n              | translate\n          }}\n        </mat-option>\n        <mat-divider></mat-divider>\n        <mat-option\n          *ngFor=\"let layer of userControlledLayerList\"\n          [value]=\"layer\"\n          (click)=\"applyNewLayers(e)\"\n          >{{ layer.title }}</mat-option\n        >\n      </mat-select>\n    </mat-form-field>\n    <mat-slide-toggle\n      class=\"swipe-toggle mat-typography\"\n      [checked]=\"swipe\"\n      [labelPosition]=\"'before'\"\n      (change)=\"startSwipe($event.checked)\"\n    >\n      {{ 'igo.integration.advanced-map-tool.advanced-swipe.swipe' | translate }}\n    </mat-slide-toggle>\n  </form>\n</div>\n\n<ng-template #noLayersBlock>\n  <mat-list>\n    <p class=\"map-empty mat-typography\">\n      {{ 'igo.integration.advanced-map-tool.advanced-swipe.empty' | translate }}\n    </p>\n    <p class=\"map-empty mat-typography\">\n      {{\n        'igo.integration.advanced-map-tool.advanced-swipe.customize' | translate\n      }}\n    </p>\n    <mat-list-item>\n      <mat-icon matListItemIcon>search</mat-icon>\n      <span\n        matListItemTitle\n        class=\"search-tool mat-typography\"\n        (click)=\"searchEmit()\"\n      >\n        {{\n          'igo.integration.advanced-map-tool.advanced-swipe.search-tool'\n            | translate\n        }}\n      </span>\n    </mat-list-item>\n    <mat-list-item>\n      <mat-icon matListItemIcon>library_add</mat-icon>\n      <span\n        matListItemTitle\n        class=\"catalog-tool mat-typography\"\n        (click)=\"catalogEmit()\"\n      >\n        {{\n          'igo.integration.advanced-map-tool.advanced-swipe.catalog-tool'\n            | translate\n        }}\n      </span>\n    </mat-list-item>\n    <mat-list-item>\n      <mat-icon matListItemIcon>star</mat-icon>\n      <span\n        matListItemTitle\n        class=\"context-tool mat-typography\"\n        (click)=\"contextEmit()\"\n      >\n        {{\n          'igo.integration.advanced-map-tool.advanced-swipe.context-tool'\n            | translate\n        }}\n      </span>\n    </mat-list-item>\n  </mat-list>\n</ng-template>\n", styles: [":host{padding:12px 0}:host .igo-swipe-select-container{padding:12px 0}:host .igo-swipe-select-container mat-form-field{width:100%}:host .igo-form{display:flex;flex-direction:column;width:100%}:host mat-slide-toggle{flex:1}:host mat-slide-toggle ::ng-deep .mdc-form-field{display:flex;justify-content:space-between}:host mat-slide-toggle ::ng-deep .mdc-label{flex:1}:host .map-empty,:host .search-tool,:host .catalog-tool,:host .context-tool{margin:4px}:host .map-empty{padding:12px 0;text-align:justify}:host .search-tool,:host .catalog-tool,:host .context-tool{cursor:pointer}:host mat-list mat-list-item h4{font-weight:700}:host mat-list-item ::ng-deep .mdc-list-item__primary-text{font-size:smaller}:host .advanced-tool-line{height:2px;background-color:gray}\n"] }]
+        }], ctorParameters: () => [{ type: MapState }, { type: i2$3.UntypedFormBuilder }, { type: ToolState }] });
 
 let AdvancedMapToolComponent = class AdvancedMapToolComponent {
     mapState;
     get tracking$() {
-        return this.mapState.map.geolocationController.tracking$;
+        return this.mapState.map.geolocationController?.tracking$;
     }
     get followPosition$() {
-        return this.mapState.map.geolocationController.followPosition$;
+        return this.mapState.map.geolocationController?.followPosition$;
     }
     constructor(mapState) {
         this.mapState = mapState;
     }
     toggleTracking(value) {
+        if (!this.mapState.map.geolocationController) {
+            return;
+        }
         this.mapState.map.geolocationController.tracking = value;
     }
     toggleFollow(value) {
+        if (!this.mapState.map.geolocationController) {
+            return;
+        }
         this.mapState.map.geolocationController.followPosition = value;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AdvancedMapToolComponent, deps: [{ token: MapState }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AdvancedMapToolComponent, isStandalone: true, selector: "igo-advanced-map-tool", ngImport: i0, template: "<h4 class=\"nameOfTool\">\n  {{\n    'igo.integration.advanced-map-tool.advanced-swipe.swipe-tool' | translate\n  }}\n</h4>\n<igo-advanced-swipe></igo-advanced-swipe>\n<mat-divider class=\"advanced-tool-line\"></mat-divider>\n<h4 class=\"nameOfTool\">\n  {{\n    'igo.integration.advanced-map-tool.advanced-coordinates.coordinates'\n      | translate\n  }}\n</h4>\n<igo-advanced-coordinates></igo-advanced-coordinates>\n<mat-divider class=\"advanced-tool-line\"></mat-divider>\n\n<h4 class=\"nameOfTool\">\n  {{ 'igo.integration.advanced-map-tool.geolocation.title' | translate }}\n</h4>\n\n<div class=\"igo-input-container\">\n  <div class=\"geolocation-slide-toggle-container\">\n    <mat-slide-toggle\n      class=\"geolocation-option\"\n      [checked]=\"tracking$ | async\"\n      [labelPosition]=\"'before'\"\n      (change)=\"toggleTracking($event.checked)\"\n    >\n      {{ 'igo.integration.advanced-map-tool.geolocation.tracking' | translate }}\n    </mat-slide-toggle>\n\n    <mat-slide-toggle\n      class=\"geolocation-option\"\n      [disabled]=\"(tracking$ | async) !== true\"\n      [labelPosition]=\"'before'\"\n      [checked]=\"followPosition$ | async\"\n      (change)=\"toggleFollow($event.checked)\"\n    >\n      {{ 'igo.integration.advanced-map-tool.geolocation.follow' | translate }}\n    </mat-slide-toggle>\n  </div>\n</div>\n", styles: [":host{display:block;padding:0 16px 12px}.nameOfTool{text-align:center;font-weight:700;font-size:small;margin:12px 0 8px}.advanced-tool-line{height:2px;background-color:gray}.geolocation-slide-toggle-container{display:flex;flex-direction:column;padding:12px 0}.geolocation-slide-toggle-container mat-slide-toggle{flex:1}.geolocation-slide-toggle-container mat-slide-toggle:not(:last-child){margin-bottom:16px}.geolocation-slide-toggle-container mat-slide-toggle ::ng-deep .mdc-form-field{display:flex;justify-content:space-between}.geolocation-slide-toggle-container mat-slide-toggle ::ng-deep .mdc-label{flex:1}mat-divider{margin:0 -16px}\n"], dependencies: [{ kind: "component", type: AdvancedSwipeComponent, selector: "igo-advanced-swipe" }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i8$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: AdvancedCoordinatesComponent, selector: "igo-advanced-coordinates", inputs: ["projectionsLimitations"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i13.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: IgoLanguageModule }, { kind: "pipe", type: i6$1.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AdvancedMapToolComponent, isStandalone: true, selector: "igo-advanced-map-tool", ngImport: i0, template: "<h4 class=\"nameOfTool\">\n  {{\n    'igo.integration.advanced-map-tool.advanced-swipe.swipe-tool' | translate\n  }}\n</h4>\n<igo-advanced-swipe></igo-advanced-swipe>\n<mat-divider class=\"advanced-tool-line\"></mat-divider>\n<h4 class=\"nameOfTool\">\n  {{\n    'igo.integration.advanced-map-tool.advanced-coordinates.coordinates'\n      | translate\n  }}\n</h4>\n<igo-advanced-coordinates></igo-advanced-coordinates>\n<mat-divider class=\"advanced-tool-line\"></mat-divider>\n\n<h4 class=\"nameOfTool\">\n  {{ 'igo.integration.advanced-map-tool.geolocation.title' | translate }}\n</h4>\n\n<div class=\"igo-input-container\">\n  <div class=\"geolocation-slide-toggle-container\">\n    <mat-slide-toggle\n      class=\"geolocation-option\"\n      [checked]=\"tracking$ | async\"\n      [labelPosition]=\"'before'\"\n      (change)=\"toggleTracking($event.checked)\"\n    >\n      {{ 'igo.integration.advanced-map-tool.geolocation.tracking' | translate }}\n    </mat-slide-toggle>\n\n    <mat-slide-toggle\n      class=\"geolocation-option\"\n      [disabled]=\"(tracking$ | async) !== true\"\n      [labelPosition]=\"'before'\"\n      [checked]=\"followPosition$ | async\"\n      (change)=\"toggleFollow($event.checked)\"\n    >\n      {{ 'igo.integration.advanced-map-tool.geolocation.follow' | translate }}\n    </mat-slide-toggle>\n  </div>\n</div>\n", styles: [":host{display:block;padding:0 16px 12px}.nameOfTool{text-align:center;font-weight:700;font-size:small;margin:12px 0 8px}.advanced-tool-line{height:2px;background-color:gray}.geolocation-slide-toggle-container{display:flex;flex-direction:column;padding:12px 0}.geolocation-slide-toggle-container mat-slide-toggle{flex:1}.geolocation-slide-toggle-container mat-slide-toggle:not(:last-child){margin-bottom:16px}.geolocation-slide-toggle-container mat-slide-toggle ::ng-deep .mdc-form-field{display:flex;justify-content:space-between}.geolocation-slide-toggle-container mat-slide-toggle ::ng-deep .mdc-label{flex:1}mat-divider{margin:0 -16px}\n"], dependencies: [{ kind: "component", type: AdvancedSwipeComponent, selector: "igo-advanced-swipe" }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i7$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: AdvancedCoordinatesComponent, selector: "igo-advanced-coordinates", inputs: ["projectionsLimitations"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i13.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: IgoLanguageModule }, { kind: "pipe", type: i11.TranslatePipe, name: "translate" }] });
 };
 AdvancedMapToolComponent = __decorate([
     ToolComponent({
@@ -3381,7 +3382,6 @@ class WorkspaceButtonComponent {
     workspaceState;
     hasWorkspace$ = new BehaviorSubject(false);
     hasWorkspace$$;
-    _layer;
     layer$ = new BehaviorSubject(undefined);
     set layer(value) {
         this._layer = value;
@@ -3390,6 +3390,7 @@ class WorkspaceButtonComponent {
     get layer() {
         return this._layer;
     }
+    _layer;
     color = 'primary';
     constructor(workspaceState) {
         this.workspaceState = workspaceState;
@@ -3398,7 +3399,7 @@ class WorkspaceButtonComponent {
         this.hasWorkspace$$ = combineLatest([
             this.workspaceState.workspaceEnabled$,
             this.layer$
-        ]).subscribe((bunch) => this.hasWorkspace$.next(bunch[0] && bunch[1]?.options.workspace?.enabled));
+        ]).subscribe(([enabled, layer]) => this.hasWorkspace$.next(enabled && isLayerItem(layer) && layer.options.workspace?.enabled));
     }
     ngOnDestroy() {
         this.hasWorkspace$$.unsubscribe();
@@ -3416,7 +3417,7 @@ class WorkspaceButtonComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WorkspaceButtonComponent, deps: [{ token: WorkspaceState }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: WorkspaceButtonComponent, isStandalone: true, selector: "igo-workspace-button", inputs: { layer: "layer", color: "color" }, ngImport: i0, template: "<button\n  *ngIf=\"hasWorkspace$ | async\"\n  mat-icon-button\n  tooltip-position=\"below\"\n  matTooltipShowDelay=\"500\"\n  [matTooltip]=\"'igo.integration.workspace.toggleWorkspace' | translate\"\n  [color]=\"color\"\n  (click)=\"activateWorkspace()\"\n>\n  <mat-icon>table</mat-icon>\n</button>\n", styles: [""], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: IgoLanguageModule }, { kind: "pipe", type: i6$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: WorkspaceButtonComponent, isStandalone: true, selector: "igo-workspace-button", inputs: { layer: "layer", color: "color" }, ngImport: i0, template: "<button\n  *ngIf=\"hasWorkspace$ | async\"\n  mat-icon-button\n  tooltip-position=\"below\"\n  matTooltipShowDelay=\"500\"\n  [matTooltip]=\"'igo.integration.workspace.toggleWorkspace' | translate\"\n  [color]=\"color\"\n  (click)=\"activateWorkspace()\"\n>\n  <mat-icon>table</mat-icon>\n</button>\n", styles: [""], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: IgoLanguageModule }, { kind: "pipe", type: i11.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WorkspaceButtonComponent, decorators: [{
             type: Component,
@@ -3438,8 +3439,11 @@ let MapDetailsToolComponent = class MapDetailsToolComponent {
     mapState;
     toolState;
     searchSourceService;
-    cdRef;
     importExportState;
+    configService;
+    mediaService;
+    cdr;
+    isDesktop;
     delayedShowEmptyMapContent = false;
     toggleLegendOnVisibilityChange = false;
     expandLegendOfVisibleLayers = false;
@@ -3449,12 +3453,24 @@ let MapDetailsToolComponent = class MapDetailsToolComponent {
     layerListControls = {};
     queryBadge = false;
     layerAdditionAllowed = true;
+    _layerViewerOptions;
+    get layerViewerOptions() {
+        return {
+            filterAndSortOptions: this.layerFilterAndSortOptions,
+            legend: {
+                showForVisibleLayers: this.expandLegendOfVisibleLayers,
+                showOnVisibilityChange: this.toggleLegendOnVisibilityChange,
+                updateOnResolutionChange: this.updateLegendOnResolutionChange
+            },
+            queryBadge: this.queryBadge,
+            ...this._layerViewerOptions
+        };
+    }
     get map() {
         return this.mapState.map;
     }
     get layers$() {
-        return this.map.layers$.pipe(map$1((layers) => layers.filter((layer) => layer.showInLayerList !== false &&
-            (!this.excludeBaseLayers || !layer.baseLayer))));
+        return this.map.layerController.all$;
     }
     get excludeBaseLayers() {
         return this.layerListControls.excludeBaseLayers || false;
@@ -3488,18 +3504,22 @@ let MapDetailsToolComponent = class MapDetailsToolComponent {
     get contextToolInToolbar() {
         return this.toolState.toolbox.getToolbar().indexOf('contextManager') !== -1;
     }
-    constructor(mapState, toolState, searchSourceService, cdRef, importExportState) {
+    constructor(mapState, toolState, searchSourceService, importExportState, configService, mediaService, cdr) {
         this.mapState = mapState;
         this.toolState = toolState;
         this.searchSourceService = searchSourceService;
-        this.cdRef = cdRef;
         this.importExportState = importExportState;
+        this.configService = configService;
+        this.mediaService = mediaService;
+        this.cdr = cdr;
+        this._layerViewerOptions = this.configService.getConfig('layer');
     }
     ngOnInit() {
+        this.handleMedia();
         // prevent message to be shown too quickly. Waiting for layers
         setTimeout(() => {
             this.delayedShowEmptyMapContent = true;
-            this.cdRef.detectChanges();
+            this.cdr.detectChanges();
         }, 250);
     }
     searchEmit() {
@@ -3523,8 +3543,14 @@ let MapDetailsToolComponent = class MapDetailsToolComponent {
         this.importExportState.setMode(ImportExportMode.export);
         this.toolState.toolbox.activateTool('importExport');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MapDetailsToolComponent, deps: [{ token: MapState }, { token: ToolState }, { token: i1$1.SearchSourceService }, { token: i0.ChangeDetectorRef }, { token: ImportExportState }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MapDetailsToolComponent, isStandalone: true, selector: "igo-map-details-tool", inputs: { toggleLegendOnVisibilityChange: "toggleLegendOnVisibilityChange", expandLegendOfVisibleLayers: "expandLegendOfVisibleLayers", updateLegendOnResolutionChange: "updateLegendOnResolutionChange", ogcButton: "ogcButton", timeButton: "timeButton", layerListControls: "layerListControls", queryBadge: "queryBadge", layerAdditionAllowed: "layerAdditionAllowed" }, ngImport: i0, template: "<igo-layer-list\n  class=\"mapDetailsList\"\n  *ngIf=\"(layers$ | async).length; else empty\"\n  [map]=\"map\"\n  igoLayerListBinding\n  [excludeBaseLayers]=\"excludeBaseLayers\"\n  [layerFilterAndSortOptions]=\"layerFilterAndSortOptions\"\n  [expandLegendOfVisibleLayers]=\"expandLegendOfVisibleLayers\"\n  [toggleLegendOnVisibilityChange]=\"toggleLegendOnVisibilityChange\"\n  [updateLegendOnResolutionChange]=\"updateLegendOnResolutionChange\"\n  [queryBadge]=\"queryBadge\"\n>\n  <ng-template #igoLayerItemToolbar let-layer=\"layer\">\n    <!-- <igo-download-button [layer]=\"layer\"></igo-download-button> -->\n    <igo-workspace-button [layer]=\"layer\"></igo-workspace-button>\n    <igo-export-button\n      [layer]=\"layer\"\n      (click)=\"activateExport(layer)\"\n    ></igo-export-button>\n    <igo-ogc-filter-button\n      [header]=\"ogcButton\"\n      [layer]=\"layer\"\n    ></igo-ogc-filter-button>\n    <igo-time-filter-button\n      [header]=\"timeButton\"\n      [layer]=\"layer\"\n    ></igo-time-filter-button>\n    <igo-track-feature-button\n      [trackFeature]=\"true\"\n      [layer]=\"layer\"\n    ></igo-track-feature-button>\n    <igo-metadata-button [layer]=\"layer\"></igo-metadata-button>\n  </ng-template>\n</igo-layer-list>\n\n<ng-template #empty>\n  <mat-list *ngIf=\"delayedShowEmptyMapContent\">\n    <p class=\"map-empty mat-typography\">\n      {{ 'igo.integration.mapTool.empty' | translate }}\n    </p>\n    <p\n      *ngIf=\"\n        layerAdditionAllowed &&\n        (searchToolInToolbar || catalogToolInToolbar || contextToolInToolbar)\n      \"\n      class=\"map-empty mat-typography\"\n    >\n      {{ 'igo.integration.mapTool.customize' | translate }}\n    </p>\n    <mat-list-item *ngIf=\"layerAdditionAllowed && searchToolInToolbar\">\n      <mat-icon matListItemIcon>search</mat-icon>\n      <span\n        matListItemTitle\n        class=\"search-tool mat-typography\"\n        (click)=\"searchEmit()\"\n      >\n        {{ 'igo.integration.mapTool.search-tool' | translate }}\n      </span>\n    </mat-list-item>\n    <mat-list-item *ngIf=\"layerAdditionAllowed && catalogToolInToolbar\">\n      <mat-icon matListItemIcon>library_add</mat-icon>\n      <span\n        matListItemTitle\n        class=\"catalog-tool mat-typography\"\n        (click)=\"catalogEmit()\"\n      >\n        {{ 'igo.integration.mapTool.catalog-tool' | translate }}\n      </span>\n    </mat-list-item>\n    <mat-list-item *ngIf=\"layerAdditionAllowed && contextToolInToolbar\">\n      <mat-icon matListItemIcon>star</mat-icon>\n      <span\n        matListItemTitle\n        class=\"context-tool mat-typography\"\n        (click)=\"contextEmit()\"\n      >\n        {{ 'igo.integration.mapTool.context-tool' | translate }}\n      </span>\n    </mat-list-item>\n  </mat-list>\n</ng-template>\n", styles: [":host .map-empty,:host .search-tool,:host .catalog-tool,:host .context-tool{margin:10px}:host .map-empty{text-align:justify}:host .search-tool,:host .catalog-tool,:host .context-tool{cursor:pointer}:host mat-list mat-list-item h4{font-weight:700}:host mat-list-item ::ng-deep .mdc-list-item__primary-text{font-size:smaller}:host mat-list.mat-mdc-list-base mat-list-item.mat-mdc-list-item ::ng-deep div.mdc-list-item__content div.mdc-list-item__primary-text{padding-left:5px}:host .mapDetailsList{overflow:hidden}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LayerListComponent, selector: "igo-layer-list", inputs: ["layersAreAllVisible", "ogcButton", "timeButton", "map", "layers", "floatLabel", "layerFilterAndSortOptions", "excludeBaseLayers", "toggleLegendOnVisibilityChange", "expandLegendOfVisibleLayers", "updateLegendOnResolutionChange", "queryBadge"], outputs: ["appliedFilterAndSort"] }, { kind: "directive", type: LayerListBindingDirective, selector: "[igoLayerListBinding]" }, { kind: "component", type: WorkspaceButtonComponent, selector: "igo-workspace-button", inputs: ["layer", "color"] }, { kind: "component", type: ExportButtonComponent, selector: "igo-export-button", inputs: ["layer", "color"] }, { kind: "component", type: OgcFilterButtonComponent, selector: "igo-ogc-filter-button", inputs: ["layer", "map", "color", "header"] }, { kind: "component", type: TimeFilterButtonComponent, selector: "igo-time-filter-button", inputs: ["layer", "map", "color", "header"] }, { kind: "component", type: TrackFeatureButtonComponent, selector: "igo-track-feature-button", inputs: ["layer", "trackFeature"] }, { kind: "component", type: MetadataButtonComponent, selector: "igo-metadata-button", inputs: ["layer", "color"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i10.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i10.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i10.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: i10.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: IgoLanguageModule }, { kind: "pipe", type: i6$1.TranslatePipe, name: "translate" }] });
+    handleMedia() {
+        this.mediaService.media$.subscribe((result) => {
+            this.isDesktop = result === Media.Desktop;
+            this.cdr.detectChanges();
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MapDetailsToolComponent, deps: [{ token: MapState }, { token: ToolState }, { token: i1.SearchSourceService }, { token: ImportExportState }, { token: i5.ConfigService }, { token: i3$1.MediaService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MapDetailsToolComponent, isStandalone: true, selector: "igo-map-details-tool", inputs: { toggleLegendOnVisibilityChange: "toggleLegendOnVisibilityChange", expandLegendOfVisibleLayers: "expandLegendOfVisibleLayers", updateLegendOnResolutionChange: "updateLegendOnResolutionChange", ogcButton: "ogcButton", timeButton: "timeButton", layerListControls: "layerListControls", queryBadge: "queryBadge", layerAdditionAllowed: "layerAdditionAllowed" }, ngImport: i0, template: "<igo-layer-viewer\n  class=\"mapDetailsList\"\n  *ngIf=\"(layers$ | async).length; else empty\"\n  [map]=\"map\"\n  [options]=\"layerViewerOptions\"\n  [excludeBaseLayers]=\"excludeBaseLayers\"\n  [isDesktop]=\"isDesktop\"\n>\n  <ng-template #customBottomActions let-layer=\"layer\">\n    <igo-workspace-button [layer]=\"layer\"></igo-workspace-button>\n    <igo-export-button\n      [layer]=\"layer\"\n      (click)=\"activateExport(layer)\"\n    ></igo-export-button>\n    <igo-ogc-filter-button\n      [header]=\"ogcButton\"\n      [layer]=\"layer\"\n    ></igo-ogc-filter-button>\n    <igo-time-filter-button\n      [header]=\"timeButton\"\n      [layer]=\"layer\"\n    ></igo-time-filter-button>\n    <igo-track-feature-button\n      [trackFeature]=\"true\"\n      [layer]=\"layer\"\n    ></igo-track-feature-button>\n    <igo-metadata-button [layer]=\"layer\"></igo-metadata-button>\n  </ng-template>\n</igo-layer-viewer>\n\n<ng-template #empty>\n  <mat-list *ngIf=\"delayedShowEmptyMapContent\">\n    <p class=\"map-empty mat-typography\">\n      {{ 'igo.integration.mapTool.empty' | translate }}\n    </p>\n    <p\n      *ngIf=\"\n        layerAdditionAllowed &&\n        (searchToolInToolbar || catalogToolInToolbar || contextToolInToolbar)\n      \"\n      class=\"map-empty mat-typography\"\n    >\n      {{ 'igo.integration.mapTool.customize' | translate }}\n    </p>\n    <mat-list-item *ngIf=\"layerAdditionAllowed && searchToolInToolbar\">\n      <mat-icon matListItemIcon>search</mat-icon>\n      <span\n        matListItemTitle\n        class=\"search-tool mat-typography\"\n        (click)=\"searchEmit()\"\n      >\n        {{ 'igo.integration.mapTool.search-tool' | translate }}\n      </span>\n    </mat-list-item>\n    <mat-list-item *ngIf=\"layerAdditionAllowed && catalogToolInToolbar\">\n      <mat-icon matListItemIcon>library_add</mat-icon>\n      <span\n        matListItemTitle\n        class=\"catalog-tool mat-typography\"\n        (click)=\"catalogEmit()\"\n      >\n        {{ 'igo.integration.mapTool.catalog-tool' | translate }}\n      </span>\n    </mat-list-item>\n    <mat-list-item *ngIf=\"layerAdditionAllowed && contextToolInToolbar\">\n      <mat-icon matListItemIcon>star</mat-icon>\n      <span\n        matListItemTitle\n        class=\"context-tool mat-typography\"\n        (click)=\"contextEmit()\"\n      >\n        {{ 'igo.integration.mapTool.context-tool' | translate }}\n      </span>\n    </mat-list-item>\n  </mat-list>\n</ng-template>\n", styles: [":host .map-empty,:host .search-tool,:host .catalog-tool,:host .context-tool{margin:10px}:host .map-empty{text-align:justify}:host .search-tool,:host .catalog-tool,:host .context-tool{cursor:pointer}:host mat-list mat-list-item h4{font-weight:700}:host mat-list-item ::ng-deep .mdc-list-item__primary-text{font-size:smaller}:host mat-list.mat-mdc-list-base mat-list-item.mat-mdc-list-item ::ng-deep div.mdc-list-item__content div.mdc-list-item__primary-text{padding-left:5px}:host .mapDetailsList{overflow:hidden}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LayerViewerComponent, selector: "igo-layer-viewer", inputs: ["map", "options", "isDesktop", "excludeBaseLayers"], outputs: ["appliedFilterAndSort"] }, { kind: "component", type: WorkspaceButtonComponent, selector: "igo-workspace-button", inputs: ["layer", "color"] }, { kind: "component", type: ExportButtonComponent, selector: "igo-export-button", inputs: ["layer", "color"] }, { kind: "component", type: OgcFilterButtonComponent, selector: "igo-ogc-filter-button", inputs: ["layer", "map", "color", "header"] }, { kind: "component", type: TimeFilterButtonComponent, selector: "igo-time-filter-button", inputs: ["layer", "map", "color", "header"] }, { kind: "component", type: TrackFeatureButtonComponent, selector: "igo-track-feature-button", inputs: ["layer", "trackFeature"] }, { kind: "component", type: MetadataButtonComponent, selector: "igo-metadata-button", inputs: ["layer", "color"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i9.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i9.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i9.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: i9.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: IgoLanguageModule }, { kind: "pipe", type: i11.TranslatePipe, name: "translate" }] });
 };
 MapDetailsToolComponent = __decorate([
     ToolComponent({
@@ -3535,15 +3561,16 @@ MapDetailsToolComponent = __decorate([
     __metadata("design:paramtypes", [MapState,
         ToolState,
         SearchSourceService,
-        ChangeDetectorRef,
-        ImportExportState])
+        ImportExportState,
+        ConfigService,
+        MediaService,
+        ChangeDetectorRef])
 ], MapDetailsToolComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MapDetailsToolComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igo-map-details-tool', standalone: true, imports: [
                         NgIf,
-                        LayerListComponent,
-                        LayerListBindingDirective,
+                        LayerViewerComponent,
                         WorkspaceButtonComponent,
                         ExportButtonComponent,
                         OgcFilterButtonComponent,
@@ -3554,8 +3581,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         MatIconModule,
                         AsyncPipe,
                         IgoLanguageModule
-                    ], template: "<igo-layer-list\n  class=\"mapDetailsList\"\n  *ngIf=\"(layers$ | async).length; else empty\"\n  [map]=\"map\"\n  igoLayerListBinding\n  [excludeBaseLayers]=\"excludeBaseLayers\"\n  [layerFilterAndSortOptions]=\"layerFilterAndSortOptions\"\n  [expandLegendOfVisibleLayers]=\"expandLegendOfVisibleLayers\"\n  [toggleLegendOnVisibilityChange]=\"toggleLegendOnVisibilityChange\"\n  [updateLegendOnResolutionChange]=\"updateLegendOnResolutionChange\"\n  [queryBadge]=\"queryBadge\"\n>\n  <ng-template #igoLayerItemToolbar let-layer=\"layer\">\n    <!-- <igo-download-button [layer]=\"layer\"></igo-download-button> -->\n    <igo-workspace-button [layer]=\"layer\"></igo-workspace-button>\n    <igo-export-button\n      [layer]=\"layer\"\n      (click)=\"activateExport(layer)\"\n    ></igo-export-button>\n    <igo-ogc-filter-button\n      [header]=\"ogcButton\"\n      [layer]=\"layer\"\n    ></igo-ogc-filter-button>\n    <igo-time-filter-button\n      [header]=\"timeButton\"\n      [layer]=\"layer\"\n    ></igo-time-filter-button>\n    <igo-track-feature-button\n      [trackFeature]=\"true\"\n      [layer]=\"layer\"\n    ></igo-track-feature-button>\n    <igo-metadata-button [layer]=\"layer\"></igo-metadata-button>\n  </ng-template>\n</igo-layer-list>\n\n<ng-template #empty>\n  <mat-list *ngIf=\"delayedShowEmptyMapContent\">\n    <p class=\"map-empty mat-typography\">\n      {{ 'igo.integration.mapTool.empty' | translate }}\n    </p>\n    <p\n      *ngIf=\"\n        layerAdditionAllowed &&\n        (searchToolInToolbar || catalogToolInToolbar || contextToolInToolbar)\n      \"\n      class=\"map-empty mat-typography\"\n    >\n      {{ 'igo.integration.mapTool.customize' | translate }}\n    </p>\n    <mat-list-item *ngIf=\"layerAdditionAllowed && searchToolInToolbar\">\n      <mat-icon matListItemIcon>search</mat-icon>\n      <span\n        matListItemTitle\n        class=\"search-tool mat-typography\"\n        (click)=\"searchEmit()\"\n      >\n        {{ 'igo.integration.mapTool.search-tool' | translate }}\n      </span>\n    </mat-list-item>\n    <mat-list-item *ngIf=\"layerAdditionAllowed && catalogToolInToolbar\">\n      <mat-icon matListItemIcon>library_add</mat-icon>\n      <span\n        matListItemTitle\n        class=\"catalog-tool mat-typography\"\n        (click)=\"catalogEmit()\"\n      >\n        {{ 'igo.integration.mapTool.catalog-tool' | translate }}\n      </span>\n    </mat-list-item>\n    <mat-list-item *ngIf=\"layerAdditionAllowed && contextToolInToolbar\">\n      <mat-icon matListItemIcon>star</mat-icon>\n      <span\n        matListItemTitle\n        class=\"context-tool mat-typography\"\n        (click)=\"contextEmit()\"\n      >\n        {{ 'igo.integration.mapTool.context-tool' | translate }}\n      </span>\n    </mat-list-item>\n  </mat-list>\n</ng-template>\n", styles: [":host .map-empty,:host .search-tool,:host .catalog-tool,:host .context-tool{margin:10px}:host .map-empty{text-align:justify}:host .search-tool,:host .catalog-tool,:host .context-tool{cursor:pointer}:host mat-list mat-list-item h4{font-weight:700}:host mat-list-item ::ng-deep .mdc-list-item__primary-text{font-size:smaller}:host mat-list.mat-mdc-list-base mat-list-item.mat-mdc-list-item ::ng-deep div.mdc-list-item__content div.mdc-list-item__primary-text{padding-left:5px}:host .mapDetailsList{overflow:hidden}\n"] }]
-        }], ctorParameters: () => [{ type: MapState }, { type: ToolState }, { type: i1$1.SearchSourceService }, { type: i0.ChangeDetectorRef }, { type: ImportExportState }], propDecorators: { toggleLegendOnVisibilityChange: [{
+                    ], template: "<igo-layer-viewer\n  class=\"mapDetailsList\"\n  *ngIf=\"(layers$ | async).length; else empty\"\n  [map]=\"map\"\n  [options]=\"layerViewerOptions\"\n  [excludeBaseLayers]=\"excludeBaseLayers\"\n  [isDesktop]=\"isDesktop\"\n>\n  <ng-template #customBottomActions let-layer=\"layer\">\n    <igo-workspace-button [layer]=\"layer\"></igo-workspace-button>\n    <igo-export-button\n      [layer]=\"layer\"\n      (click)=\"activateExport(layer)\"\n    ></igo-export-button>\n    <igo-ogc-filter-button\n      [header]=\"ogcButton\"\n      [layer]=\"layer\"\n    ></igo-ogc-filter-button>\n    <igo-time-filter-button\n      [header]=\"timeButton\"\n      [layer]=\"layer\"\n    ></igo-time-filter-button>\n    <igo-track-feature-button\n      [trackFeature]=\"true\"\n      [layer]=\"layer\"\n    ></igo-track-feature-button>\n    <igo-metadata-button [layer]=\"layer\"></igo-metadata-button>\n  </ng-template>\n</igo-layer-viewer>\n\n<ng-template #empty>\n  <mat-list *ngIf=\"delayedShowEmptyMapContent\">\n    <p class=\"map-empty mat-typography\">\n      {{ 'igo.integration.mapTool.empty' | translate }}\n    </p>\n    <p\n      *ngIf=\"\n        layerAdditionAllowed &&\n        (searchToolInToolbar || catalogToolInToolbar || contextToolInToolbar)\n      \"\n      class=\"map-empty mat-typography\"\n    >\n      {{ 'igo.integration.mapTool.customize' | translate }}\n    </p>\n    <mat-list-item *ngIf=\"layerAdditionAllowed && searchToolInToolbar\">\n      <mat-icon matListItemIcon>search</mat-icon>\n      <span\n        matListItemTitle\n        class=\"search-tool mat-typography\"\n        (click)=\"searchEmit()\"\n      >\n        {{ 'igo.integration.mapTool.search-tool' | translate }}\n      </span>\n    </mat-list-item>\n    <mat-list-item *ngIf=\"layerAdditionAllowed && catalogToolInToolbar\">\n      <mat-icon matListItemIcon>library_add</mat-icon>\n      <span\n        matListItemTitle\n        class=\"catalog-tool mat-typography\"\n        (click)=\"catalogEmit()\"\n      >\n        {{ 'igo.integration.mapTool.catalog-tool' | translate }}\n      </span>\n    </mat-list-item>\n    <mat-list-item *ngIf=\"layerAdditionAllowed && contextToolInToolbar\">\n      <mat-icon matListItemIcon>star</mat-icon>\n      <span\n        matListItemTitle\n        class=\"context-tool mat-typography\"\n        (click)=\"contextEmit()\"\n      >\n        {{ 'igo.integration.mapTool.context-tool' | translate }}\n      </span>\n    </mat-list-item>\n  </mat-list>\n</ng-template>\n", styles: [":host .map-empty,:host .search-tool,:host .catalog-tool,:host .context-tool{margin:10px}:host .map-empty{text-align:justify}:host .search-tool,:host .catalog-tool,:host .context-tool{cursor:pointer}:host mat-list mat-list-item h4{font-weight:700}:host mat-list-item ::ng-deep .mdc-list-item__primary-text{font-size:smaller}:host mat-list.mat-mdc-list-base mat-list-item.mat-mdc-list-item ::ng-deep div.mdc-list-item__content div.mdc-list-item__primary-text{padding-left:5px}:host .mapDetailsList{overflow:hidden}\n"] }]
+        }], ctorParameters: () => [{ type: MapState }, { type: ToolState }, { type: i1.SearchSourceService }, { type: ImportExportState }, { type: i5.ConfigService }, { type: i3$1.MediaService }, { type: i0.ChangeDetectorRef }], propDecorators: { toggleLegendOnVisibilityChange: [{
                 type: Input
             }], expandLegendOfVisibleLayers: [{
                 type: Input
@@ -3593,10 +3620,10 @@ let MapLegendToolComponent = class MapLegendToolComponent {
         return this.mapState.map;
     }
     get visibleOrInRangeLayers$() {
-        return this.layers$.pipe(map$1((layers) => layers.filter((layer) => layer.visible$.value && layer.isInResolutionsRange$.value)));
+        return this.layers$.pipe(map$1((layers) => layers.filter((layer) => layer.displayed)));
     }
     get visibleLayers$() {
-        return this.layers$.pipe(map$1((layers) => layers.filter((layer) => layer.visible$.value)));
+        return this.layers$.pipe(map$1((layers) => layers.filter((layer) => layer.visible)));
     }
     get excludeBaseLayers() {
         return this.layerListControls.excludeBaseLayers || false;
@@ -3622,13 +3649,13 @@ let MapLegendToolComponent = class MapLegendToolComponent {
     }
     ngOnInit() {
         this.resolution$$ = combineLatest([
-            this.map.layers$,
+            this.map.layerController.all$,
             this.map.viewController.resolution$
         ])
             .pipe(debounceTime(10))
             .subscribe((bunch) => {
             this.layers$.next(bunch[0].filter((layer) => layer.showInLayerList !== false &&
-                (!this.excludeBaseLayers || !layer.baseLayer)));
+                (!this.excludeBaseLayers || !isBaseLayer(layer))));
         });
         if (this.allowShowAllLegends) {
             this.mapState.showAllLegendsValue =
@@ -3681,8 +3708,8 @@ let MapLegendToolComponent = class MapLegendToolComponent {
     contextEmit() {
         this.toolState.toolbox.activateTool('contextManager');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MapLegendToolComponent, deps: [{ token: MapState }, { token: ToolState }, { token: i1$1.SearchSourceService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MapLegendToolComponent, isStandalone: true, selector: "igo-map-legend-tool", inputs: { updateLegendOnResolutionChange: "updateLegendOnResolutionChange", layerAdditionAllowed: "layerAdditionAllowed", allowShowAllLegends: "allowShowAllLegends", showAllLegendsValue: "showAllLegendsValue", layerListControls: "layerListControls" }, ngImport: i0, template: "<igo-layer-legend-list\n  *ngIf=\"showAllLegend()\"\n  igoLayerLegendListBinding\n  [excludeBaseLayers]=\"excludeBaseLayers\"\n  [allowShowAllLegends]=\"allowShowAllLegends\"\n  [updateLegendOnResolutionChange]=\"updateLegendOnResolutionChange\"\n  [showAllLegendsValue]=\"showAllLegendsValue$ | async\"\n  (allLegendsShown)=\"onShowAllLegends($event)\"\n>\n</igo-layer-legend-list>\n<ng-template\n  *ngIf=\"(layers$ | async).length !== 0; else emptyLayers\"\n></ng-template>\n\n<p\n  class=\"map-empty mat-typography\"\n  *ngIf=\"\n    !allowShowAllLegends &&\n    (layers$ | async).length !== 0 &&\n    (visibleOrInRangeLayers$ | async).length === 0\n  \"\n>\n  {{\n    (visibleLayers$ | async).length\n      ? ('igo.integration.mapTool.noLayersInRange' | translate)\n      : ('igo.integration.mapTool.noLayersVisible' | translate)\n  }}\n</p>\n\n<ng-template #emptyLayers>\n  <mat-list *ngIf=\"delayedShowEmptyMapContent\">\n    <p class=\"map-empty mat-typography\">\n      {{ 'igo.integration.mapTool.empty' | translate }}\n    </p>\n    <p\n      *ngIf=\"\n        layerAdditionAllowed &&\n        (searchToolInToolbar || catalogToolInToolbar || contextToolInToolbar)\n      \"\n      class=\"map-empty mat-typography\"\n    >\n      {{ 'igo.integration.mapTool.customize' | translate }}\n    </p>\n\n    <mat-list-item *ngIf=\"layerAdditionAllowed && searchToolInToolbar\">\n      <mat-icon matListItemIcon>search</mat-icon>\n      <span\n        matListItemTitle\n        class=\"search-tool mat-typography\"\n        (click)=\"searchEmit()\"\n      >\n        {{ 'igo.integration.mapTool.search-tool' | translate }}\n      </span>\n    </mat-list-item>\n    <mat-list-item *ngIf=\"layerAdditionAllowed && catalogToolInToolbar\">\n      <mat-icon matListItemIcon>library_add</mat-icon>\n      <span\n        matListItemTitle\n        class=\"catalog-tool mat-typography\"\n        (click)=\"catalogEmit()\"\n      >\n        {{ 'igo.integration.mapTool.catalog-tool' | translate }}\n      </span>\n    </mat-list-item>\n    <mat-list-item *ngIf=\"layerAdditionAllowed && contextToolInToolbar\">\n      <mat-icon matListItemIcon>star</mat-icon>\n      <span\n        matListItemTitle\n        class=\"context-tool mat-typography\"\n        (click)=\"contextEmit()\"\n      >\n        {{ 'igo.integration.mapTool.context-tool' | translate }}\n      </span>\n    </mat-list-item>\n  </mat-list>\n</ng-template>\n", styles: [":host .map-empty,:host .search-tool,:host .catalog-tool,:host .context-tool{margin:10px}:host .map-empty{text-align:justify}:host .search-tool,:host .catalog-tool,:host .context-tool{cursor:pointer}:host mat-list mat-list-item h4{font-weight:700}:host mat-list-item ::ng-deep .mdc-list-item__primary-text{font-size:smaller}:host mat-list.mat-mdc-list-base mat-list-item.mat-mdc-list-item ::ng-deep div.mdc-list-item__content div.mdc-list-item__primary-text{padding-left:5px}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LayerLegendListComponent, selector: "igo-layer-legend-list", inputs: ["layers", "excludeBaseLayers", "updateLegendOnResolutionChange", "allowShowAllLegends", "showAllLegendsValue"], outputs: ["allLegendsShown"] }, { kind: "directive", type: LayerLegendListBindingDirective, selector: "[igoLayerLegendListBinding]" }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i10.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i10.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i10.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: i10.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: IgoLanguageModule }, { kind: "pipe", type: i6$1.TranslatePipe, name: "translate" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MapLegendToolComponent, deps: [{ token: MapState }, { token: ToolState }, { token: i1.SearchSourceService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MapLegendToolComponent, isStandalone: true, selector: "igo-map-legend-tool", inputs: { updateLegendOnResolutionChange: "updateLegendOnResolutionChange", layerAdditionAllowed: "layerAdditionAllowed", allowShowAllLegends: "allowShowAllLegends", showAllLegendsValue: "showAllLegendsValue", layerListControls: "layerListControls" }, ngImport: i0, template: "<igo-layer-legend-list\n  *ngIf=\"showAllLegend()\"\n  igoLayerLegendListBinding\n  [excludeBaseLayers]=\"excludeBaseLayers\"\n  [allowShowAllLegends]=\"allowShowAllLegends\"\n  [updateLegendOnResolutionChange]=\"updateLegendOnResolutionChange\"\n  [showAllLegendsValue]=\"showAllLegendsValue$ | async\"\n  (allLegendsShown)=\"onShowAllLegends($event)\"\n>\n</igo-layer-legend-list>\n<ng-template\n  *ngIf=\"(layers$ | async).length !== 0; else emptyLayers\"\n></ng-template>\n\n<p\n  class=\"map-empty mat-typography\"\n  *ngIf=\"\n    !allowShowAllLegends &&\n    (layers$ | async).length !== 0 &&\n    (visibleOrInRangeLayers$ | async).length === 0\n  \"\n>\n  {{\n    (visibleLayers$ | async).length\n      ? ('igo.integration.mapTool.noLayersInRange' | translate)\n      : ('igo.integration.mapTool.noLayersVisible' | translate)\n  }}\n</p>\n\n<ng-template #emptyLayers>\n  <mat-list *ngIf=\"delayedShowEmptyMapContent\">\n    <p class=\"map-empty mat-typography\">\n      {{ 'igo.integration.mapTool.empty' | translate }}\n    </p>\n    <p\n      *ngIf=\"\n        layerAdditionAllowed &&\n        (searchToolInToolbar || catalogToolInToolbar || contextToolInToolbar)\n      \"\n      class=\"map-empty mat-typography\"\n    >\n      {{ 'igo.integration.mapTool.customize' | translate }}\n    </p>\n\n    <mat-list-item *ngIf=\"layerAdditionAllowed && searchToolInToolbar\">\n      <mat-icon matListItemIcon>search</mat-icon>\n      <span\n        matListItemTitle\n        class=\"search-tool mat-typography\"\n        (click)=\"searchEmit()\"\n      >\n        {{ 'igo.integration.mapTool.search-tool' | translate }}\n      </span>\n    </mat-list-item>\n    <mat-list-item *ngIf=\"layerAdditionAllowed && catalogToolInToolbar\">\n      <mat-icon matListItemIcon>library_add</mat-icon>\n      <span\n        matListItemTitle\n        class=\"catalog-tool mat-typography\"\n        (click)=\"catalogEmit()\"\n      >\n        {{ 'igo.integration.mapTool.catalog-tool' | translate }}\n      </span>\n    </mat-list-item>\n    <mat-list-item *ngIf=\"layerAdditionAllowed && contextToolInToolbar\">\n      <mat-icon matListItemIcon>star</mat-icon>\n      <span\n        matListItemTitle\n        class=\"context-tool mat-typography\"\n        (click)=\"contextEmit()\"\n      >\n        {{ 'igo.integration.mapTool.context-tool' | translate }}\n      </span>\n    </mat-list-item>\n  </mat-list>\n</ng-template>\n", styles: [":host .map-empty,:host .search-tool,:host .catalog-tool,:host .context-tool{margin:10px}:host .map-empty{text-align:justify}:host .search-tool,:host .catalog-tool,:host .context-tool{cursor:pointer}:host mat-list mat-list-item h4{font-weight:700}:host mat-list-item ::ng-deep .mdc-list-item__primary-text{font-size:smaller}:host mat-list.mat-mdc-list-base mat-list-item.mat-mdc-list-item ::ng-deep div.mdc-list-item__content div.mdc-list-item__primary-text{padding-left:5px}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LayerLegendListComponent, selector: "igo-layer-legend-list", inputs: ["layers", "excludeBaseLayers", "updateLegendOnResolutionChange", "allowShowAllLegends", "showAllLegendsValue"], outputs: ["allLegendsShown"] }, { kind: "directive", type: LayerLegendListBindingDirective, selector: "[igoLayerLegendListBinding]" }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i9.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i9.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i9.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: i9.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: IgoLanguageModule }, { kind: "pipe", type: i11.TranslatePipe, name: "translate" }] });
 };
 MapLegendToolComponent = __decorate([
     ToolComponent({
@@ -3706,7 +3733,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         AsyncPipe,
                         IgoLanguageModule
                     ], template: "<igo-layer-legend-list\n  *ngIf=\"showAllLegend()\"\n  igoLayerLegendListBinding\n  [excludeBaseLayers]=\"excludeBaseLayers\"\n  [allowShowAllLegends]=\"allowShowAllLegends\"\n  [updateLegendOnResolutionChange]=\"updateLegendOnResolutionChange\"\n  [showAllLegendsValue]=\"showAllLegendsValue$ | async\"\n  (allLegendsShown)=\"onShowAllLegends($event)\"\n>\n</igo-layer-legend-list>\n<ng-template\n  *ngIf=\"(layers$ | async).length !== 0; else emptyLayers\"\n></ng-template>\n\n<p\n  class=\"map-empty mat-typography\"\n  *ngIf=\"\n    !allowShowAllLegends &&\n    (layers$ | async).length !== 0 &&\n    (visibleOrInRangeLayers$ | async).length === 0\n  \"\n>\n  {{\n    (visibleLayers$ | async).length\n      ? ('igo.integration.mapTool.noLayersInRange' | translate)\n      : ('igo.integration.mapTool.noLayersVisible' | translate)\n  }}\n</p>\n\n<ng-template #emptyLayers>\n  <mat-list *ngIf=\"delayedShowEmptyMapContent\">\n    <p class=\"map-empty mat-typography\">\n      {{ 'igo.integration.mapTool.empty' | translate }}\n    </p>\n    <p\n      *ngIf=\"\n        layerAdditionAllowed &&\n        (searchToolInToolbar || catalogToolInToolbar || contextToolInToolbar)\n      \"\n      class=\"map-empty mat-typography\"\n    >\n      {{ 'igo.integration.mapTool.customize' | translate }}\n    </p>\n\n    <mat-list-item *ngIf=\"layerAdditionAllowed && searchToolInToolbar\">\n      <mat-icon matListItemIcon>search</mat-icon>\n      <span\n        matListItemTitle\n        class=\"search-tool mat-typography\"\n        (click)=\"searchEmit()\"\n      >\n        {{ 'igo.integration.mapTool.search-tool' | translate }}\n      </span>\n    </mat-list-item>\n    <mat-list-item *ngIf=\"layerAdditionAllowed && catalogToolInToolbar\">\n      <mat-icon matListItemIcon>library_add</mat-icon>\n      <span\n        matListItemTitle\n        class=\"catalog-tool mat-typography\"\n        (click)=\"catalogEmit()\"\n      >\n        {{ 'igo.integration.mapTool.catalog-tool' | translate }}\n      </span>\n    </mat-list-item>\n    <mat-list-item *ngIf=\"layerAdditionAllowed && contextToolInToolbar\">\n      <mat-icon matListItemIcon>star</mat-icon>\n      <span\n        matListItemTitle\n        class=\"context-tool mat-typography\"\n        (click)=\"contextEmit()\"\n      >\n        {{ 'igo.integration.mapTool.context-tool' | translate }}\n      </span>\n    </mat-list-item>\n  </mat-list>\n</ng-template>\n", styles: [":host .map-empty,:host .search-tool,:host .catalog-tool,:host .context-tool{margin:10px}:host .map-empty{text-align:justify}:host .search-tool,:host .catalog-tool,:host .context-tool{cursor:pointer}:host mat-list mat-list-item h4{font-weight:700}:host mat-list-item ::ng-deep .mdc-list-item__primary-text{font-size:smaller}:host mat-list.mat-mdc-list-base mat-list-item.mat-mdc-list-item ::ng-deep div.mdc-list-item__content div.mdc-list-item__primary-text{padding-left:5px}\n"] }]
-        }], ctorParameters: () => [{ type: MapState }, { type: ToolState }, { type: i1$1.SearchSourceService }, { type: i0.ChangeDetectorRef }], propDecorators: { updateLegendOnResolutionChange: [{
+        }], ctorParameters: () => [{ type: MapState }, { type: ToolState }, { type: i1.SearchSourceService }, { type: i0.ChangeDetectorRef }], propDecorators: { updateLegendOnResolutionChange: [{
                 type: Input
             }], layerAdditionAllowed: [{
                 type: Input
@@ -3758,7 +3785,7 @@ class MapProximityState {
             .subscribe((bunch) => {
             this.proximityFeatureStore.clear();
             const enabled = bunch[0];
-            const layers = this.map.layers;
+            const layers = this.map.layerController.all;
             const currentPos = this.map.geolocationController.position$.value;
             const locationType = bunch[1];
             const proximityRadiusValue = bunch[2];
@@ -3781,7 +3808,8 @@ class MapProximityState {
             const coordLonLat = olProj.transform(coord, this.map.projection, 'EPSG:4269');
             const roundedCoordLonLat = roundCoordTo(coordLonLat, 6);
             this.currentPositionCoordinate$.next(roundedCoordLonLat);
-            const layersToMonitor = layers.filter((layer) => layer.ol instanceof olLayerVector &&
+            const layersToMonitor = layers.filter((layer) => isLayerItem(layer) &&
+                layer.ol instanceof olLayerVector &&
                 layer.dataSource.options.queryable &&
                 layer.visible &&
                 layer.isInResolutionsRange);
@@ -3852,15 +3880,13 @@ class MapProximityState {
         });
     }
     getQueryTitle(feature, layer) {
-        let title;
-        if (layer.options?.source?.options) {
+        if (isLayerItem(layer) && layer.options?.source?.options) {
             const dataSourceOptions = layer.options.source
                 .options;
             if (dataSourceOptions.queryTitle) {
-                title = this.getLabelMatch(feature, dataSourceOptions.queryTitle);
+                return this.getLabelMatch(feature, dataSourceOptions.queryTitle);
             }
         }
-        return title;
     }
     getLabelMatch(feature, labelMatch) {
         let label = labelMatch;
@@ -3970,7 +3996,7 @@ let MapProximityToolComponent = class MapProximityToolComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MapProximityToolComponent, deps: [{ token: MapState }, { token: MapProximityState }, { token: i2$1.LanguageService }, { token: i4$1.MessageService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MapProximityToolComponent, isStandalone: true, selector: "igo-map-proximity-tool", viewQueries: [{ propertyName: "table", first: true, predicate: ["table"], descendants: true, static: true }], ngImport: i0, template: "<igo-entity-table\n  #table\n  class=\"table-compact\"\n  [store]=\"mapProximityState.proximityFeatureStore\"\n  [template]=\"tableTemplate\"\n></igo-entity-table>\n<br />\n<mat-form-field\n  *ngIf=\"mapProximityState.currentPositionCoordinate$ | async as coord\"\n  class=\"coordinates\"\n>\n  <textarea\n    #textArea\n    matInput\n    readonly\n    rows=\"1\"\n    [placeholder]=\"'igo.integration.map-proximity-tool.lon' | translate\"\n    [value]=\"coord[0]\"\n  ></textarea>\n</mat-form-field>\n<mat-form-field\n  *ngIf=\"mapProximityState.currentPositionCoordinate$ | async as coord2\"\n  class=\"coordinates2\"\n>\n  <textarea\n    #textArea\n    matInput\n    readonly\n    rows=\"1\"\n    [placeholder]=\"'igo.integration.map-proximity-tool.lat' | translate\"\n    [value]=\"coord2[1]\"\n  ></textarea>\n</mat-form-field>\n\n<button\n  *ngIf=\"\n    (mapProximityState.currentPositionCoordinate$ | async) &&\n    (mapProximityState.currentPositionCoordinate$ | async).length\n  \"\n  mat-icon-button\n  (click)=\"copyTextToClipboard()\"\n>\n  <mat-icon>content_copy</mat-icon>\n</button>\n<div class=\"title-container\">\n  <mat-label class=\"title mat-typography\">{{\n    'igo.integration.map-proximity-tool.method' | translate\n  }}</mat-label>\n</div>\n<div class=\"igo-input-container mat-typography\">\n  <mat-radio-group (change)=\"onLocationTypeChange($event)\">\n    <mat-radio-button\n      [checked]=\"\n        (mapProximityState.proximitylocationType$ | async) === 'geolocation'\n      \"\n      value=\"geolocation\"\n      >{{\n        'igo.integration.map-proximity-tool.geolocation' | translate\n      }}</mat-radio-button\n    >\n    <mat-radio-button\n      [checked]=\"\n        (mapProximityState.proximitylocationType$ | async) === 'mapCenter'\n      \"\n      value=\"mapCenter\"\n      >{{\n        'igo.integration.map-proximity-tool.mapCenter' | translate\n      }}</mat-radio-button\n    >\n  </mat-radio-group>\n</div>\n\n<div class=\"radius-unit\">\n  <mat-form-field class=\"radius-field\" floatLabel=\"always\">\n    <mat-label>{{\n      'igo.integration.map-proximity-tool.radiusM' | translate\n    }}</mat-label>\n    <input\n      type=\"number\"\n      pattern=\"[0-9]*\"\n      [(ngModel)]=\"maxDistance\"\n      matInput\n      placeholder=\"{{\n        'igo.integration.map-proximity-tool.radiusM' | translate\n      }}\"\n    />\n  </mat-form-field>\n</div>\n", styles: [":host .table-compact{height:auto}:host .table-compact ::ng-deep .mat-mdc-header-cell.mat-column-selectionCheckbox{width:52px}:host textarea{resize:none}:host mat-form-field{padding:10px 15px}:host mat-form-field.coordinates{width:110px}:host mat-form-field.coordinates2{width:100px;padding:0 10px 0 3px}:host mat-form-field.igo-input-container{width:60%;padding:0 15px}:host .radius-unit{display:flex;width:90%;margin-left:2px;padding:5px}:host .radius-unit mat-form-field.radius-field{display:flex;flex-flow:column nowrap;width:100%}:host .title-container{padding:10px}:host .title{margin-left:5px;font-size:initial}:host .mat-mdc-radio-group{display:flex;flex-direction:column}:host .mat-mdc-radio-button{display:inline-flex;position:relative;margin-left:12px}\n"], dependencies: [{ kind: "component", type: EntityTableComponent, selector: "igo-entity-table", inputs: ["store", "paginator", "template", "scrollBehavior", "sortNullsFirst", "withPaginator", "paginatorOptions"], outputs: ["entityClick", "entitySelectChange", "entitySortChange"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$3.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i8$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i9.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i9.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: IgoLanguageModule }, { kind: "pipe", type: i6$1.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MapProximityToolComponent, isStandalone: true, selector: "igo-map-proximity-tool", viewQueries: [{ propertyName: "table", first: true, predicate: ["table"], descendants: true, static: true }], ngImport: i0, template: "<igo-entity-table\n  #table\n  class=\"table-compact\"\n  [store]=\"mapProximityState.proximityFeatureStore\"\n  [template]=\"tableTemplate\"\n></igo-entity-table>\n<br />\n<mat-form-field\n  *ngIf=\"mapProximityState.currentPositionCoordinate$ | async as coord\"\n  class=\"coordinates\"\n>\n  <textarea\n    #textArea\n    matInput\n    readonly\n    rows=\"1\"\n    [placeholder]=\"'igo.integration.map-proximity-tool.lon' | translate\"\n    [value]=\"coord[0]\"\n  ></textarea>\n</mat-form-field>\n<mat-form-field\n  *ngIf=\"mapProximityState.currentPositionCoordinate$ | async as coord2\"\n  class=\"coordinates2\"\n>\n  <textarea\n    #textArea\n    matInput\n    readonly\n    rows=\"1\"\n    [placeholder]=\"'igo.integration.map-proximity-tool.lat' | translate\"\n    [value]=\"coord2[1]\"\n  ></textarea>\n</mat-form-field>\n\n<button\n  *ngIf=\"\n    (mapProximityState.currentPositionCoordinate$ | async) &&\n    (mapProximityState.currentPositionCoordinate$ | async).length\n  \"\n  mat-icon-button\n  (click)=\"copyTextToClipboard()\"\n>\n  <mat-icon>content_copy</mat-icon>\n</button>\n<div class=\"title-container\">\n  <mat-label class=\"title mat-typography\">{{\n    'igo.integration.map-proximity-tool.method' | translate\n  }}</mat-label>\n</div>\n<div class=\"igo-input-container mat-typography\">\n  <mat-radio-group (change)=\"onLocationTypeChange($event)\">\n    <mat-radio-button\n      [checked]=\"\n        (mapProximityState.proximitylocationType$ | async) === 'geolocation'\n      \"\n      value=\"geolocation\"\n      >{{\n        'igo.integration.map-proximity-tool.geolocation' | translate\n      }}</mat-radio-button\n    >\n    <mat-radio-button\n      [checked]=\"\n        (mapProximityState.proximitylocationType$ | async) === 'mapCenter'\n      \"\n      value=\"mapCenter\"\n      >{{\n        'igo.integration.map-proximity-tool.mapCenter' | translate\n      }}</mat-radio-button\n    >\n  </mat-radio-group>\n</div>\n\n<div class=\"radius-unit\">\n  <mat-form-field class=\"radius-field\" floatLabel=\"always\">\n    <mat-label>{{\n      'igo.integration.map-proximity-tool.radiusM' | translate\n    }}</mat-label>\n    <input\n      type=\"number\"\n      pattern=\"[0-9]*\"\n      [(ngModel)]=\"maxDistance\"\n      matInput\n      placeholder=\"{{\n        'igo.integration.map-proximity-tool.radiusM' | translate\n      }}\"\n    />\n  </mat-form-field>\n</div>\n", styles: [":host .table-compact{height:auto}:host .table-compact ::ng-deep .mat-mdc-header-cell.mat-column-selectionCheckbox{width:52px}:host textarea{resize:none}:host mat-form-field{padding:10px 15px}:host mat-form-field.coordinates{width:110px}:host mat-form-field.coordinates2{width:100px;padding:0 10px 0 3px}:host mat-form-field.igo-input-container{width:60%;padding:0 15px}:host .radius-unit{display:flex;width:90%;margin-left:2px;padding:5px}:host .radius-unit mat-form-field.radius-field{display:flex;flex-flow:column nowrap;width:100%}:host .title-container{padding:10px}:host .title{margin-left:5px;font-size:initial}:host .mat-mdc-radio-group{display:flex;flex-direction:column}:host .mat-mdc-radio-button{display:inline-flex;position:relative;margin-left:12px}\n"], dependencies: [{ kind: "component", type: EntityTableComponent, selector: "igo-entity-table", inputs: ["store", "paginator", "template", "scrollBehavior", "sortNullsFirst", "withPaginator", "paginatorOptions"], outputs: ["entityClick", "entitySelectChange", "entitySortChange"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i7$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i8$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i9$1.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i9$1.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: IgoLanguageModule }, { kind: "pipe", type: i11.TranslatePipe, name: "translate" }] });
 };
 MapProximityToolComponent = __decorate([
     ToolComponent({
@@ -4013,6 +4039,10 @@ let MapToolComponent = class MapToolComponent {
     mapState;
     toolState;
     importExportState;
+    configService;
+    mediaService;
+    cdr;
+    isDesktop;
     toggleLegendOnVisibilityChange = false;
     expandLegendOfVisibleLayers = false;
     updateLegendOnResolutionChange = false;
@@ -4042,10 +4072,30 @@ let MapToolComponent = class MapToolComponent {
         }
         return filterSortOptions;
     }
-    constructor(mapState, toolState, importExportState) {
+    _layerViewerOptions;
+    get layerViewerOptions() {
+        return {
+            filterAndSortOptions: this.layerFilterAndSortOptions,
+            legend: {
+                showForVisibleLayers: this.expandLegendOfVisibleLayers,
+                showOnVisibilityChange: this.toggleLegendOnVisibilityChange,
+                updateOnResolutionChange: this.updateLegendOnResolutionChange
+            },
+            queryBadge: this.queryBadge,
+            ...this._layerViewerOptions
+        };
+    }
+    constructor(mapState, toolState, importExportState, configService, mediaService, cdr) {
         this.mapState = mapState;
         this.toolState = toolState;
         this.importExportState = importExportState;
+        this.configService = configService;
+        this.mediaService = mediaService;
+        this.cdr = cdr;
+        this._layerViewerOptions = this.configService.getConfig('layer');
+    }
+    ngOnInit() {
+        this.handleMedia();
     }
     activateExport(layer) {
         let id = layer.id;
@@ -4059,8 +4109,14 @@ let MapToolComponent = class MapToolComponent {
         this.importExportState.setMode(ImportExportMode.export);
         this.toolState.toolbox.activateTool('importExport');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MapToolComponent, deps: [{ token: MapState }, { token: ToolState }, { token: ImportExportState }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MapToolComponent, isStandalone: true, selector: "igo-map-tool", inputs: { toggleLegendOnVisibilityChange: "toggleLegendOnVisibilityChange", expandLegendOfVisibleLayers: "expandLegendOfVisibleLayers", updateLegendOnResolutionChange: "updateLegendOnResolutionChange", ogcButton: "ogcButton", timeButton: "timeButton", layerListControls: "layerListControls", queryBadge: "queryBadge" }, ngImport: i0, template: "<mat-tab-group>\n  <mat-tab [label]=\"'igo.integration.tools.map' | translate\">\n    <igo-layer-list\n      [map]=\"map\"\n      igoLayerListBinding\n      [excludeBaseLayers]=\"excludeBaseLayers\"\n      [layerFilterAndSortOptions]=\"layerFilterAndSortOptions\"\n      [expandLegendOfVisibleLayers]=\"expandLegendOfVisibleLayers\"\n      [toggleLegendOnVisibilityChange]=\"toggleLegendOnVisibilityChange\"\n      [updateLegendOnResolutionChange]=\"updateLegendOnResolutionChange\"\n      [queryBadge]=\"queryBadge\"\n    >\n      <ng-template #igoLayerItemToolbar let-layer=\"layer\">\n        <!-- <igo-download-button [layer]=\"layer\"></igo-download-button> -->\n        <igo-workspace-button [layer]=\"layer\"></igo-workspace-button>\n        <igo-export-button\n          [layer]=\"layer\"\n          (click)=\"activateExport(layer)\"\n        ></igo-export-button>\n        <igo-ogc-filter-button\n          [header]=\"ogcButton\"\n          [layer]=\"layer\"\n        ></igo-ogc-filter-button>\n        <igo-time-filter-button\n          [header]=\"timeButton\"\n          [layer]=\"layer\"\n        ></igo-time-filter-button>\n        <igo-track-feature-button\n          [trackFeature]=\"true\"\n          [layer]=\"layer\"\n        ></igo-track-feature-button>\n        <igo-metadata-button [layer]=\"layer\"></igo-metadata-button>\n      </ng-template>\n    </igo-layer-list>\n  </mat-tab>\n\n  <mat-tab [label]=\"'igo.integration.tools.contexts' | translate\">\n    <igo-context-list igoContextListBinding></igo-context-list>\n  </mat-tab>\n</mat-tab-group>\n", styles: [":host ::ng-deep .mat-mdc-tab-body-content{overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i5$2.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i5$2.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: LayerListComponent, selector: "igo-layer-list", inputs: ["layersAreAllVisible", "ogcButton", "timeButton", "map", "layers", "floatLabel", "layerFilterAndSortOptions", "excludeBaseLayers", "toggleLegendOnVisibilityChange", "expandLegendOfVisibleLayers", "updateLegendOnResolutionChange", "queryBadge"], outputs: ["appliedFilterAndSort"] }, { kind: "directive", type: LayerListBindingDirective, selector: "[igoLayerListBinding]" }, { kind: "component", type: WorkspaceButtonComponent, selector: "igo-workspace-button", inputs: ["layer", "color"] }, { kind: "component", type: ExportButtonComponent, selector: "igo-export-button", inputs: ["layer", "color"] }, { kind: "component", type: OgcFilterButtonComponent, selector: "igo-ogc-filter-button", inputs: ["layer", "map", "color", "header"] }, { kind: "component", type: TimeFilterButtonComponent, selector: "igo-time-filter-button", inputs: ["layer", "map", "color", "header"] }, { kind: "component", type: TrackFeatureButtonComponent, selector: "igo-track-feature-button", inputs: ["layer", "trackFeature"] }, { kind: "component", type: MetadataButtonComponent, selector: "igo-metadata-button", inputs: ["layer", "color"] }, { kind: "component", type: ContextListComponent, selector: "igo-context-list", inputs: ["contexts", "selectedContext", "map", "defaultContextId", "term"], outputs: ["select", "unselect", "edit", "delete", "save", "clone", "create", "hide", "show", "showHiddenContexts", "favorite", "managePermissions", "manageTools", "filterPermissionsChanged"] }, { kind: "directive", type: ContextListBindingDirective, selector: "[igoContextListBinding]" }, { kind: "ngmodule", type: IgoLanguageModule }, { kind: "pipe", type: i6$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    handleMedia() {
+        this.mediaService.media$.subscribe((result) => {
+            this.isDesktop = result === Media.Desktop;
+            this.cdr.detectChanges();
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MapToolComponent, deps: [{ token: MapState }, { token: ToolState }, { token: ImportExportState }, { token: i5.ConfigService }, { token: i3$1.MediaService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MapToolComponent, isStandalone: true, selector: "igo-map-tool", inputs: { toggleLegendOnVisibilityChange: "toggleLegendOnVisibilityChange", expandLegendOfVisibleLayers: "expandLegendOfVisibleLayers", updateLegendOnResolutionChange: "updateLegendOnResolutionChange", ogcButton: "ogcButton", timeButton: "timeButton", layerListControls: "layerListControls", queryBadge: "queryBadge" }, ngImport: i0, template: "<mat-tab-group>\n  <mat-tab [label]=\"'igo.integration.tools.map' | translate\">\n    <igo-layer-viewer\n      [map]=\"map\"\n      [options]=\"layerViewerOptions\"\n      [excludeBaseLayers]=\"excludeBaseLayers\"\n      [isDesktop]=\"isDesktop\"\n    >\n      <ng-template #customBottomActions let-layer=\"layer\">\n        <igo-workspace-button [layer]=\"layer\"></igo-workspace-button>\n        <igo-export-button\n          [layer]=\"layer\"\n          (click)=\"activateExport(layer)\"\n        ></igo-export-button>\n        <igo-ogc-filter-button\n          [header]=\"ogcButton\"\n          [layer]=\"layer\"\n        ></igo-ogc-filter-button>\n        <igo-time-filter-button\n          [header]=\"timeButton\"\n          [layer]=\"layer\"\n        ></igo-time-filter-button>\n        <igo-track-feature-button\n          [trackFeature]=\"true\"\n          [layer]=\"layer\"\n        ></igo-track-feature-button>\n        <igo-metadata-button [layer]=\"layer\"></igo-metadata-button>\n      </ng-template>\n    </igo-layer-viewer>\n  </mat-tab>\n\n  <mat-tab [label]=\"'igo.integration.tools.contexts' | translate\">\n    <igo-context-list igoContextListBinding></igo-context-list>\n  </mat-tab>\n</mat-tab-group>\n", styles: [":host ::ng-deep .mat-mdc-tab-body-content{overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i5$2.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i5$2.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: WorkspaceButtonComponent, selector: "igo-workspace-button", inputs: ["layer", "color"] }, { kind: "component", type: ExportButtonComponent, selector: "igo-export-button", inputs: ["layer", "color"] }, { kind: "component", type: OgcFilterButtonComponent, selector: "igo-ogc-filter-button", inputs: ["layer", "map", "color", "header"] }, { kind: "component", type: TimeFilterButtonComponent, selector: "igo-time-filter-button", inputs: ["layer", "map", "color", "header"] }, { kind: "component", type: TrackFeatureButtonComponent, selector: "igo-track-feature-button", inputs: ["layer", "trackFeature"] }, { kind: "component", type: MetadataButtonComponent, selector: "igo-metadata-button", inputs: ["layer", "color"] }, { kind: "component", type: LayerViewerComponent, selector: "igo-layer-viewer", inputs: ["map", "options", "isDesktop", "excludeBaseLayers"], outputs: ["appliedFilterAndSort"] }, { kind: "component", type: ContextListComponent, selector: "igo-context-list", inputs: ["contexts", "selectedContext", "map", "defaultContextId", "term"], outputs: ["select", "unselect", "edit", "delete", "save", "clone", "create", "hide", "show", "showHiddenContexts", "favorite", "managePermissions", "manageTools", "filterPermissionsChanged"] }, { kind: "directive", type: ContextListBindingDirective, selector: "[igoContextListBinding]" }, { kind: "ngmodule", type: IgoLanguageModule }, { kind: "pipe", type: i11.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 };
 MapToolComponent = __decorate([
     ToolComponent({
@@ -4070,25 +4126,27 @@ MapToolComponent = __decorate([
     }),
     __metadata("design:paramtypes", [MapState,
         ToolState,
-        ImportExportState])
+        ImportExportState,
+        ConfigService,
+        MediaService,
+        ChangeDetectorRef])
 ], MapToolComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MapToolComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igo-map-tool', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
                         MatTabsModule,
-                        LayerListComponent,
-                        LayerListBindingDirective,
                         WorkspaceButtonComponent,
                         ExportButtonComponent,
                         OgcFilterButtonComponent,
                         TimeFilterButtonComponent,
                         TrackFeatureButtonComponent,
                         MetadataButtonComponent,
+                        LayerViewerComponent,
                         ContextListComponent,
                         ContextListBindingDirective,
                         IgoLanguageModule
-                    ], template: "<mat-tab-group>\n  <mat-tab [label]=\"'igo.integration.tools.map' | translate\">\n    <igo-layer-list\n      [map]=\"map\"\n      igoLayerListBinding\n      [excludeBaseLayers]=\"excludeBaseLayers\"\n      [layerFilterAndSortOptions]=\"layerFilterAndSortOptions\"\n      [expandLegendOfVisibleLayers]=\"expandLegendOfVisibleLayers\"\n      [toggleLegendOnVisibilityChange]=\"toggleLegendOnVisibilityChange\"\n      [updateLegendOnResolutionChange]=\"updateLegendOnResolutionChange\"\n      [queryBadge]=\"queryBadge\"\n    >\n      <ng-template #igoLayerItemToolbar let-layer=\"layer\">\n        <!-- <igo-download-button [layer]=\"layer\"></igo-download-button> -->\n        <igo-workspace-button [layer]=\"layer\"></igo-workspace-button>\n        <igo-export-button\n          [layer]=\"layer\"\n          (click)=\"activateExport(layer)\"\n        ></igo-export-button>\n        <igo-ogc-filter-button\n          [header]=\"ogcButton\"\n          [layer]=\"layer\"\n        ></igo-ogc-filter-button>\n        <igo-time-filter-button\n          [header]=\"timeButton\"\n          [layer]=\"layer\"\n        ></igo-time-filter-button>\n        <igo-track-feature-button\n          [trackFeature]=\"true\"\n          [layer]=\"layer\"\n        ></igo-track-feature-button>\n        <igo-metadata-button [layer]=\"layer\"></igo-metadata-button>\n      </ng-template>\n    </igo-layer-list>\n  </mat-tab>\n\n  <mat-tab [label]=\"'igo.integration.tools.contexts' | translate\">\n    <igo-context-list igoContextListBinding></igo-context-list>\n  </mat-tab>\n</mat-tab-group>\n", styles: [":host ::ng-deep .mat-mdc-tab-body-content{overflow:hidden}\n"] }]
-        }], ctorParameters: () => [{ type: MapState }, { type: ToolState }, { type: ImportExportState }], propDecorators: { toggleLegendOnVisibilityChange: [{
+                    ], template: "<mat-tab-group>\n  <mat-tab [label]=\"'igo.integration.tools.map' | translate\">\n    <igo-layer-viewer\n      [map]=\"map\"\n      [options]=\"layerViewerOptions\"\n      [excludeBaseLayers]=\"excludeBaseLayers\"\n      [isDesktop]=\"isDesktop\"\n    >\n      <ng-template #customBottomActions let-layer=\"layer\">\n        <igo-workspace-button [layer]=\"layer\"></igo-workspace-button>\n        <igo-export-button\n          [layer]=\"layer\"\n          (click)=\"activateExport(layer)\"\n        ></igo-export-button>\n        <igo-ogc-filter-button\n          [header]=\"ogcButton\"\n          [layer]=\"layer\"\n        ></igo-ogc-filter-button>\n        <igo-time-filter-button\n          [header]=\"timeButton\"\n          [layer]=\"layer\"\n        ></igo-time-filter-button>\n        <igo-track-feature-button\n          [trackFeature]=\"true\"\n          [layer]=\"layer\"\n        ></igo-track-feature-button>\n        <igo-metadata-button [layer]=\"layer\"></igo-metadata-button>\n      </ng-template>\n    </igo-layer-viewer>\n  </mat-tab>\n\n  <mat-tab [label]=\"'igo.integration.tools.contexts' | translate\">\n    <igo-context-list igoContextListBinding></igo-context-list>\n  </mat-tab>\n</mat-tab-group>\n", styles: [":host ::ng-deep .mat-mdc-tab-body-content{overflow:hidden}\n"] }]
+        }], ctorParameters: () => [{ type: MapState }, { type: ToolState }, { type: ImportExportState }, { type: i5.ConfigService }, { type: i3$1.MediaService }, { type: i0.ChangeDetectorRef }], propDecorators: { toggleLegendOnVisibilityChange: [{
                 type: Input
             }], expandLegendOfVisibleLayers: [{
                 type: Input
@@ -4113,6 +4171,10 @@ let MapToolsComponent = class MapToolsComponent {
     mapState;
     searchSourceService;
     importExportState;
+    configService;
+    mediaService;
+    cdr;
+    isDesktop;
     layers$ = new BehaviorSubject([]);
     showAllLegendsValue$ = new BehaviorSubject(false);
     resolution$$;
@@ -4151,10 +4213,10 @@ let MapToolsComponent = class MapToolsComponent {
     }
     queryBadge = false;
     get visibleOrInRangeLayers$() {
-        return this.layers$.pipe(map$1((layers) => layers.filter((layer) => layer.visible$.value && layer.isInResolutionsRange$.value)));
+        return this.layers$.pipe(map$1((layers) => layers.filter((layer) => layer.displayed)));
     }
     get visibleLayers$() {
-        return this.layers$.pipe(map$1((layers) => layers.filter((layer) => layer.visible$.value)));
+        return this.layers$.pipe(map$1((layers) => layers.filter((layer) => layer.visible)));
     }
     get excludeBaseLayers() {
         return this.layerListControls.excludeBaseLayers || false;
@@ -4175,6 +4237,19 @@ let MapToolsComponent = class MapToolsComponent {
         }
         return filterSortOptions;
     }
+    _layerViewerOptions;
+    get layerViewerOptions() {
+        return {
+            filterAndSortOptions: this.layerFilterAndSortOptions,
+            legend: {
+                showForVisibleLayers: this.expandLegendOfVisibleLayers,
+                showOnVisibilityChange: this.toggleLegendOnVisibilityChange,
+                updateOnResolutionChange: this.updateLegendOnResolutionChange
+            },
+            queryBadge: this.queryBadge,
+            ...this._layerViewerOptions
+        };
+    }
     tabGroup;
     get searchToolInToolbar() {
         return (this.toolState.toolbox.getToolbar().indexOf('searchResults') !== -1 &&
@@ -4189,23 +4264,27 @@ let MapToolsComponent = class MapToolsComponent {
     get contextToolInToolbar() {
         return this.toolState.toolbox.getToolbar().indexOf('contextManager') !== -1;
     }
-    constructor(layerListToolState, toolState, mapState, searchSourceService, importExportState) {
+    constructor(layerListToolState, toolState, mapState, searchSourceService, importExportState, configService, mediaService, cdr) {
         this.layerListToolState = layerListToolState;
         this.toolState = toolState;
         this.mapState = mapState;
         this.searchSourceService = searchSourceService;
         this.importExportState = importExportState;
+        this.configService = configService;
+        this.mediaService = mediaService;
+        this.cdr = cdr;
+        this._layerViewerOptions = this.configService.getConfig('layer');
     }
     ngOnInit() {
+        this.handleMedia();
         this.selectedTab();
         this.resolution$$ = combineLatest([
-            this.map.layers$,
+            this.map.layerController.all$,
             this.map.viewController.resolution$
         ])
             .pipe(debounceTime(10))
-            .subscribe((bunch) => {
-            this.layers$.next(bunch[0].filter((layer) => layer.showInLayerList !== false &&
-                (!this.excludeBaseLayers || !layer.baseLayer)));
+            .subscribe(([layers]) => {
+            this.layers$.next(layers);
         });
         if (this.allowShowAllLegends) {
             this.mapState.showAllLegendsValue =
@@ -4246,8 +4325,7 @@ let MapToolsComponent = class MapToolsComponent {
     }
     tabChanged(tab) {
         this.layerListToolState.setSelectedTab(tab.index);
-        this.layers$.next(this.map.layers.filter((layer) => layer.showInLayerList !== false &&
-            (!this.excludeBaseLayers || !layer.baseLayer)));
+        this.layers$.next(this.map.layerController.all);
     }
     onLayerListChange(appliedFilters) {
         this.layerListToolState.setKeyword(appliedFilters.keyword);
@@ -4331,8 +4409,14 @@ let MapToolsComponent = class MapToolsComponent {
         }
         return false;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MapToolsComponent, deps: [{ token: LayerListToolState }, { token: ToolState }, { token: MapState }, { token: i1$1.SearchSourceService }, { token: ImportExportState }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MapToolsComponent, isStandalone: true, selector: "igo-map-tools", inputs: { allowShowAllLegends: "allowShowAllLegends", showAllLegendsValue: "showAllLegendsValue", toggleLegendOnVisibilityChange: "toggleLegendOnVisibilityChange", expandLegendOfVisibleLayers: "expandLegendOfVisibleLayers", updateLegendOnResolutionChange: "updateLegendOnResolutionChange", selectedTabAtOpening: "selectedTabAtOpening", ogcButton: "ogcButton", timeButton: "timeButton", layerAdditionAllowed: "layerAdditionAllowed", layerListControls: "layerListControls", queryBadge: "queryBadge" }, viewQueries: [{ propertyName: "tabGroup", first: true, predicate: ["tabGroup"], descendants: true, static: true }], ngImport: i0, template: "<mat-tab-group\n  #tabGroup\n  [selectedIndex]=\"layerListToolState.selectedTab$ | async\"\n  (selectedTabChange)=\"tabChanged($event)\"\n>\n  <mat-tab [label]=\"'igo.integration.tools.layers' | translate\">\n    <igo-layer-list\n      *ngIf=\"(layers$ | async).length !== 0; else emptyLayers\"\n      igoLayerListBinding\n      [excludeBaseLayers]=\"excludeBaseLayers\"\n      [layerFilterAndSortOptions]=\"layerFilterAndSortOptions\"\n      [expandLegendOfVisibleLayers]=\"expandLegendOfVisibleLayers\"\n      [toggleLegendOnVisibilityChange]=\"toggleLegendOnVisibilityChange\"\n      [updateLegendOnResolutionChange]=\"updateLegendOnResolutionChange\"\n      [queryBadge]=\"queryBadge\"\n      [map]=\"map\"\n      (appliedFilterAndSort)=\"onLayerListChange($event)\"\n    >\n      <ng-template #igoLayerItemToolbar let-layer=\"layer\">\n        <igo-style-modal-layer-button\n          *ngIf=\"isStyleEditButton(layer)\"\n          [layer]=\"layer\"\n        ></igo-style-modal-layer-button>\n        <igo-metadata-button [layer]=\"layer\"></igo-metadata-button>\n        <igo-track-feature-button\n          [trackFeature]=\"true\"\n          [layer]=\"layer\"\n        ></igo-track-feature-button>\n        <igo-time-filter-button\n          *ngIf=\"isTimeFilterButton(layer)\"\n          [header]=\"timeButton\"\n          [layer]=\"layer\"\n          (click)=\"activateTimeFilter()\"\n        ></igo-time-filter-button>\n        <igo-ogc-filter-button\n          *ngIf=\"isOGCFilterButton(layer)\"\n          [header]=\"ogcButton\"\n          [layer]=\"layer\"\n          (click)=\"activateOgcFilter()\"\n        ></igo-ogc-filter-button>\n        <igo-export-button\n          *ngIf=\"isExportButton(layer)\"\n          [layer]=\"layer\"\n          (click)=\"activateExport(layer)\"\n        ></igo-export-button>\n        <igo-workspace-button [layer]=\"layer\"></igo-workspace-button>\n      </ng-template>\n    </igo-layer-list>\n  </mat-tab>\n\n  <mat-tab [label]=\"'igo.integration.tools.legend' | translate\">\n    <igo-layer-legend-list\n      *ngIf=\"showAllLegend()\"\n      igoLayerLegendListBinding\n      [allowShowAllLegends]=\"allowShowAllLegends\"\n      [showAllLegendsValue]=\"showAllLegendsValue$ | async\"\n      (allLegendsShown)=\"onShowAllLegends($event)\"\n      [excludeBaseLayers]=\"excludeBaseLayers\"\n      [updateLegendOnResolutionChange]=\"updateLegendOnResolutionChange\"\n    >\n    </igo-layer-legend-list>\n    <ng-template\n      *ngIf=\"(layers$ | async).length !== 0; else emptyLayers\"\n    ></ng-template>\n\n    <p\n      class=\"map-empty mat-typography\"\n      *ngIf=\"\n        !allowShowAllLegends &&\n        (layers$ | async).length !== 0 &&\n        (visibleOrInRangeLayers$ | async).length === 0\n      \"\n    >\n      {{\n        (visibleLayers$ | async).length\n          ? ('igo.integration.mapTool.noLayersInRange' | translate)\n          : ('igo.integration.mapTool.noLayersVisible' | translate)\n      }}\n    </p>\n  </mat-tab>\n\n  <ng-template #emptyLayers>\n    <mat-list *ngIf=\"delayedShowEmptyMapContent\">\n      <p class=\"map-empty mat-typography\">\n        {{ 'igo.integration.mapTool.empty' | translate }}\n      </p>\n      <p\n        *ngIf=\"\n          layerAdditionAllowed &&\n          (searchToolInToolbar || catalogToolInToolbar || contextToolInToolbar)\n        \"\n        class=\"map-empty mat-typography\"\n      >\n        {{ 'igo.integration.mapTool.customize' | translate }}\n      </p>\n\n      <mat-list-item *ngIf=\"layerAdditionAllowed && searchToolInToolbar\">\n        <mat-icon matListItemIcon>search</mat-icon>\n        <span\n          matListItemTitle\n          class=\"search-tool mat-typography\"\n          (click)=\"searchEmit()\"\n        >\n          {{ 'igo.integration.mapTool.search-tool' | translate }}\n        </span>\n      </mat-list-item>\n      <mat-list-item *ngIf=\"layerAdditionAllowed && catalogToolInToolbar\">\n        <mat-icon matListItemIcon>library_add</mat-icon>\n        <span\n          matListItemTitle\n          class=\"catalog-tool mat-typography\"\n          (click)=\"catalogEmit()\"\n        >\n          {{ 'igo.integration.mapTool.catalog-tool' | translate }}\n        </span>\n      </mat-list-item>\n      <mat-list-item *ngIf=\"layerAdditionAllowed && contextToolInToolbar\">\n        <mat-icon matListItemIcon>star</mat-icon>\n        <span\n          matListItemTitle\n          class=\"context-tool mat-typography\"\n          (click)=\"contextEmit()\"\n        >\n          {{ 'igo.integration.mapTool.context-tool' | translate }}\n        </span>\n      </mat-list-item>\n    </mat-list>\n  </ng-template>\n</mat-tab-group>\n", styles: [":host mat-tab-group{height:100%}:host ::ng-deep .mat-mdc-tab-body-wrapper{flex:1}:host ::ng-deep .mat-tab-body{margin-top:8px}:host ::ng-deep .mat-mdc-tab-body-content{overflow:hidden}:host .map-empty,:host .search-tool,:host .catalog-tool,:host .context-tool{margin:10px}:host .map-empty{text-align:justify}:host .search-tool,:host .catalog-tool,:host .context-tool{cursor:pointer}:host mat-list mat-list-item h4{font-weight:700}:host mat-list-item ::ng-deep .mdc-list-item__primary-text{font-size:smaller}:host mat-list.mat-mdc-list-base mat-list-item.mat-mdc-list-item ::ng-deep div.mdc-list-item__content div.mdc-list-item__primary-text{padding-left:5px}\n"], dependencies: [{ kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i5$2.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i5$2.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LayerListComponent, selector: "igo-layer-list", inputs: ["layersAreAllVisible", "ogcButton", "timeButton", "map", "layers", "floatLabel", "layerFilterAndSortOptions", "excludeBaseLayers", "toggleLegendOnVisibilityChange", "expandLegendOfVisibleLayers", "updateLegendOnResolutionChange", "queryBadge"], outputs: ["appliedFilterAndSort"] }, { kind: "directive", type: LayerListBindingDirective, selector: "[igoLayerListBinding]" }, { kind: "component", type: StyleModalLayerButtonComponent, selector: "igo-style-modal-layer-button", inputs: ["layer"] }, { kind: "component", type: MetadataButtonComponent, selector: "igo-metadata-button", inputs: ["layer", "color"] }, { kind: "component", type: TrackFeatureButtonComponent, selector: "igo-track-feature-button", inputs: ["layer", "trackFeature"] }, { kind: "component", type: TimeFilterButtonComponent, selector: "igo-time-filter-button", inputs: ["layer", "map", "color", "header"] }, { kind: "component", type: OgcFilterButtonComponent, selector: "igo-ogc-filter-button", inputs: ["layer", "map", "color", "header"] }, { kind: "component", type: ExportButtonComponent, selector: "igo-export-button", inputs: ["layer", "color"] }, { kind: "component", type: WorkspaceButtonComponent, selector: "igo-workspace-button", inputs: ["layer", "color"] }, { kind: "component", type: LayerLegendListComponent, selector: "igo-layer-legend-list", inputs: ["layers", "excludeBaseLayers", "updateLegendOnResolutionChange", "allowShowAllLegends", "showAllLegendsValue"], outputs: ["allLegendsShown"] }, { kind: "directive", type: LayerLegendListBindingDirective, selector: "[igoLayerLegendListBinding]" }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i10.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i10.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i10.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: i10.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: IgoLanguageModule }, { kind: "pipe", type: i6$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    handleMedia() {
+        this.mediaService.media$.subscribe((result) => {
+            this.isDesktop = result === Media.Desktop;
+            this.cdr.detectChanges();
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MapToolsComponent, deps: [{ token: LayerListToolState }, { token: ToolState }, { token: MapState }, { token: i1.SearchSourceService }, { token: ImportExportState }, { token: i5.ConfigService }, { token: i3$1.MediaService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MapToolsComponent, isStandalone: true, selector: "igo-map-tools", inputs: { allowShowAllLegends: "allowShowAllLegends", showAllLegendsValue: "showAllLegendsValue", toggleLegendOnVisibilityChange: "toggleLegendOnVisibilityChange", expandLegendOfVisibleLayers: "expandLegendOfVisibleLayers", updateLegendOnResolutionChange: "updateLegendOnResolutionChange", selectedTabAtOpening: "selectedTabAtOpening", ogcButton: "ogcButton", timeButton: "timeButton", layerAdditionAllowed: "layerAdditionAllowed", layerListControls: "layerListControls", queryBadge: "queryBadge" }, viewQueries: [{ propertyName: "tabGroup", first: true, predicate: ["tabGroup"], descendants: true, static: true }], ngImport: i0, template: "<mat-tab-group\n  #tabGroup\n  [selectedIndex]=\"layerListToolState.selectedTab$ | async\"\n  (selectedTabChange)=\"tabChanged($event)\"\n>\n  <mat-tab [label]=\"'igo.integration.tools.layers' | translate\">\n    <igo-layer-viewer\n      [options]=\"layerViewerOptions\"\n      [map]=\"map\"\n      [excludeBaseLayers]=\"excludeBaseLayers\"\n      [isDesktop]=\"isDesktop\"\n      (appliedFilterAndSort)=\"onLayerListChange($event)\"\n    >\n      <ng-template #customBottomActions let-layer=\"layer\">\n        <igo-style-modal-layer-button\n          *ngIf=\"isStyleEditButton(layer)\"\n          [layer]=\"layer\"\n        ></igo-style-modal-layer-button>\n        <igo-metadata-button [layer]=\"layer\"></igo-metadata-button>\n        <igo-track-feature-button\n          [trackFeature]=\"true\"\n          [layer]=\"layer\"\n        ></igo-track-feature-button>\n        <igo-time-filter-button\n          *ngIf=\"isTimeFilterButton(layer)\"\n          [header]=\"timeButton\"\n          [layer]=\"layer\"\n          (click)=\"activateTimeFilter()\"\n        ></igo-time-filter-button>\n        <igo-ogc-filter-button\n          *ngIf=\"isOGCFilterButton(layer)\"\n          [header]=\"ogcButton\"\n          [layer]=\"layer\"\n          (click)=\"activateOgcFilter()\"\n        ></igo-ogc-filter-button>\n        <igo-export-button\n          *ngIf=\"isExportButton(layer)\"\n          [layer]=\"layer\"\n          (click)=\"activateExport(layer)\"\n        ></igo-export-button>\n        <igo-workspace-button [layer]=\"layer\"></igo-workspace-button>\n      </ng-template>\n\n      <ng-container ngProjectAs=\"[emptyList]\">\n        <ng-template [ngTemplateOutlet]=\"emptyLayers\"></ng-template>\n      </ng-container>\n    </igo-layer-viewer>\n  </mat-tab>\n\n  <mat-tab [label]=\"'igo.integration.tools.legend' | translate\">\n    <igo-layer-legend-list\n      *ngIf=\"showAllLegend()\"\n      igoLayerLegendListBinding\n      [allowShowAllLegends]=\"allowShowAllLegends\"\n      [showAllLegendsValue]=\"showAllLegendsValue$ | async\"\n      (allLegendsShown)=\"onShowAllLegends($event)\"\n      [excludeBaseLayers]=\"excludeBaseLayers\"\n      [updateLegendOnResolutionChange]=\"updateLegendOnResolutionChange\"\n    >\n    </igo-layer-legend-list>\n    <ng-template\n      *ngIf=\"(layers$ | async).length !== 0; else emptyLayers\"\n    ></ng-template>\n\n    <p\n      class=\"map-empty mat-typography\"\n      *ngIf=\"\n        !allowShowAllLegends &&\n        (layers$ | async).length !== 0 &&\n        (visibleOrInRangeLayers$ | async).length === 0\n      \"\n    >\n      {{\n        (visibleLayers$ | async).length\n          ? ('igo.integration.mapTool.noLayersInRange' | translate)\n          : ('igo.integration.mapTool.noLayersVisible' | translate)\n      }}\n    </p>\n  </mat-tab>\n\n  <ng-template #emptyLayers>\n    <mat-list *ngIf=\"delayedShowEmptyMapContent\">\n      <p class=\"map-empty mat-typography\">\n        {{ 'igo.integration.mapTool.empty' | translate }}\n      </p>\n      <p\n        *ngIf=\"\n          layerAdditionAllowed &&\n          (searchToolInToolbar || catalogToolInToolbar || contextToolInToolbar)\n        \"\n        class=\"map-empty mat-typography\"\n      >\n        {{ 'igo.integration.mapTool.customize' | translate }}\n      </p>\n\n      <mat-list-item *ngIf=\"layerAdditionAllowed && searchToolInToolbar\">\n        <mat-icon matListItemIcon>search</mat-icon>\n        <span\n          matListItemTitle\n          class=\"search-tool mat-typography\"\n          (click)=\"searchEmit()\"\n        >\n          {{ 'igo.integration.mapTool.search-tool' | translate }}\n        </span>\n      </mat-list-item>\n      <mat-list-item *ngIf=\"layerAdditionAllowed && catalogToolInToolbar\">\n        <mat-icon matListItemIcon>library_add</mat-icon>\n        <span\n          matListItemTitle\n          class=\"catalog-tool mat-typography\"\n          (click)=\"catalogEmit()\"\n        >\n          {{ 'igo.integration.mapTool.catalog-tool' | translate }}\n        </span>\n      </mat-list-item>\n      <mat-list-item *ngIf=\"layerAdditionAllowed && contextToolInToolbar\">\n        <mat-icon matListItemIcon>star</mat-icon>\n        <span\n          matListItemTitle\n          class=\"context-tool mat-typography\"\n          (click)=\"contextEmit()\"\n        >\n          {{ 'igo.integration.mapTool.context-tool' | translate }}\n        </span>\n      </mat-list-item>\n    </mat-list>\n  </ng-template>\n</mat-tab-group>\n", styles: [":host mat-tab-group{height:100%}:host ::ng-deep mat-tab-header{border-bottom:1px solid #ccc}:host ::ng-deep .mat-mdc-tab-body-wrapper{flex:1}:host ::ng-deep .mat-tab-body{margin-top:8px}:host ::ng-deep .mat-mdc-tab-body-content{overflow:hidden}:host .map-empty,:host .search-tool,:host .catalog-tool,:host .context-tool{margin:10px}:host .map-empty{text-align:justify}:host .search-tool,:host .catalog-tool,:host .context-tool{cursor:pointer}:host mat-list mat-list-item h4{font-weight:700}:host mat-list-item ::ng-deep .mdc-list-item__primary-text{font-size:smaller}:host mat-list.mat-mdc-list-base mat-list-item.mat-mdc-list-item ::ng-deep div.mdc-list-item__content div.mdc-list-item__primary-text{padding-left:5px}\n"], dependencies: [{ kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i5$2.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i5$2.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LayerViewerComponent, selector: "igo-layer-viewer", inputs: ["map", "options", "isDesktop", "excludeBaseLayers"], outputs: ["appliedFilterAndSort"] }, { kind: "component", type: StyleModalLayerButtonComponent, selector: "igo-style-modal-layer-button", inputs: ["layer"] }, { kind: "component", type: MetadataButtonComponent, selector: "igo-metadata-button", inputs: ["layer", "color"] }, { kind: "component", type: TrackFeatureButtonComponent, selector: "igo-track-feature-button", inputs: ["layer", "trackFeature"] }, { kind: "component", type: TimeFilterButtonComponent, selector: "igo-time-filter-button", inputs: ["layer", "map", "color", "header"] }, { kind: "component", type: OgcFilterButtonComponent, selector: "igo-ogc-filter-button", inputs: ["layer", "map", "color", "header"] }, { kind: "component", type: ExportButtonComponent, selector: "igo-export-button", inputs: ["layer", "color"] }, { kind: "component", type: WorkspaceButtonComponent, selector: "igo-workspace-button", inputs: ["layer", "color"] }, { kind: "component", type: LayerLegendListComponent, selector: "igo-layer-legend-list", inputs: ["layers", "excludeBaseLayers", "updateLegendOnResolutionChange", "allowShowAllLegends", "showAllLegendsValue"], outputs: ["allLegendsShown"] }, { kind: "directive", type: LayerLegendListBindingDirective, selector: "[igoLayerLegendListBinding]" }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i9.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i9.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i9.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: i9.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: IgoLanguageModule }, { kind: "pipe", type: i11.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 };
 MapToolsComponent = __decorate([
     ToolComponent({
@@ -4344,15 +4428,18 @@ MapToolsComponent = __decorate([
         ToolState,
         MapState,
         SearchSourceService,
-        ImportExportState])
+        ImportExportState,
+        ConfigService,
+        MediaService,
+        ChangeDetectorRef])
 ], MapToolsComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MapToolsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igo-map-tools', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
                         MatTabsModule,
                         NgIf,
-                        LayerListComponent,
-                        LayerListBindingDirective,
+                        NgTemplateOutlet,
+                        LayerViewerComponent,
                         StyleModalLayerButtonComponent,
                         MetadataButtonComponent,
                         TrackFeatureButtonComponent,
@@ -4366,8 +4453,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         MatIconModule,
                         AsyncPipe,
                         IgoLanguageModule
-                    ], template: "<mat-tab-group\n  #tabGroup\n  [selectedIndex]=\"layerListToolState.selectedTab$ | async\"\n  (selectedTabChange)=\"tabChanged($event)\"\n>\n  <mat-tab [label]=\"'igo.integration.tools.layers' | translate\">\n    <igo-layer-list\n      *ngIf=\"(layers$ | async).length !== 0; else emptyLayers\"\n      igoLayerListBinding\n      [excludeBaseLayers]=\"excludeBaseLayers\"\n      [layerFilterAndSortOptions]=\"layerFilterAndSortOptions\"\n      [expandLegendOfVisibleLayers]=\"expandLegendOfVisibleLayers\"\n      [toggleLegendOnVisibilityChange]=\"toggleLegendOnVisibilityChange\"\n      [updateLegendOnResolutionChange]=\"updateLegendOnResolutionChange\"\n      [queryBadge]=\"queryBadge\"\n      [map]=\"map\"\n      (appliedFilterAndSort)=\"onLayerListChange($event)\"\n    >\n      <ng-template #igoLayerItemToolbar let-layer=\"layer\">\n        <igo-style-modal-layer-button\n          *ngIf=\"isStyleEditButton(layer)\"\n          [layer]=\"layer\"\n        ></igo-style-modal-layer-button>\n        <igo-metadata-button [layer]=\"layer\"></igo-metadata-button>\n        <igo-track-feature-button\n          [trackFeature]=\"true\"\n          [layer]=\"layer\"\n        ></igo-track-feature-button>\n        <igo-time-filter-button\n          *ngIf=\"isTimeFilterButton(layer)\"\n          [header]=\"timeButton\"\n          [layer]=\"layer\"\n          (click)=\"activateTimeFilter()\"\n        ></igo-time-filter-button>\n        <igo-ogc-filter-button\n          *ngIf=\"isOGCFilterButton(layer)\"\n          [header]=\"ogcButton\"\n          [layer]=\"layer\"\n          (click)=\"activateOgcFilter()\"\n        ></igo-ogc-filter-button>\n        <igo-export-button\n          *ngIf=\"isExportButton(layer)\"\n          [layer]=\"layer\"\n          (click)=\"activateExport(layer)\"\n        ></igo-export-button>\n        <igo-workspace-button [layer]=\"layer\"></igo-workspace-button>\n      </ng-template>\n    </igo-layer-list>\n  </mat-tab>\n\n  <mat-tab [label]=\"'igo.integration.tools.legend' | translate\">\n    <igo-layer-legend-list\n      *ngIf=\"showAllLegend()\"\n      igoLayerLegendListBinding\n      [allowShowAllLegends]=\"allowShowAllLegends\"\n      [showAllLegendsValue]=\"showAllLegendsValue$ | async\"\n      (allLegendsShown)=\"onShowAllLegends($event)\"\n      [excludeBaseLayers]=\"excludeBaseLayers\"\n      [updateLegendOnResolutionChange]=\"updateLegendOnResolutionChange\"\n    >\n    </igo-layer-legend-list>\n    <ng-template\n      *ngIf=\"(layers$ | async).length !== 0; else emptyLayers\"\n    ></ng-template>\n\n    <p\n      class=\"map-empty mat-typography\"\n      *ngIf=\"\n        !allowShowAllLegends &&\n        (layers$ | async).length !== 0 &&\n        (visibleOrInRangeLayers$ | async).length === 0\n      \"\n    >\n      {{\n        (visibleLayers$ | async).length\n          ? ('igo.integration.mapTool.noLayersInRange' | translate)\n          : ('igo.integration.mapTool.noLayersVisible' | translate)\n      }}\n    </p>\n  </mat-tab>\n\n  <ng-template #emptyLayers>\n    <mat-list *ngIf=\"delayedShowEmptyMapContent\">\n      <p class=\"map-empty mat-typography\">\n        {{ 'igo.integration.mapTool.empty' | translate }}\n      </p>\n      <p\n        *ngIf=\"\n          layerAdditionAllowed &&\n          (searchToolInToolbar || catalogToolInToolbar || contextToolInToolbar)\n        \"\n        class=\"map-empty mat-typography\"\n      >\n        {{ 'igo.integration.mapTool.customize' | translate }}\n      </p>\n\n      <mat-list-item *ngIf=\"layerAdditionAllowed && searchToolInToolbar\">\n        <mat-icon matListItemIcon>search</mat-icon>\n        <span\n          matListItemTitle\n          class=\"search-tool mat-typography\"\n          (click)=\"searchEmit()\"\n        >\n          {{ 'igo.integration.mapTool.search-tool' | translate }}\n        </span>\n      </mat-list-item>\n      <mat-list-item *ngIf=\"layerAdditionAllowed && catalogToolInToolbar\">\n        <mat-icon matListItemIcon>library_add</mat-icon>\n        <span\n          matListItemTitle\n          class=\"catalog-tool mat-typography\"\n          (click)=\"catalogEmit()\"\n        >\n          {{ 'igo.integration.mapTool.catalog-tool' | translate }}\n        </span>\n      </mat-list-item>\n      <mat-list-item *ngIf=\"layerAdditionAllowed && contextToolInToolbar\">\n        <mat-icon matListItemIcon>star</mat-icon>\n        <span\n          matListItemTitle\n          class=\"context-tool mat-typography\"\n          (click)=\"contextEmit()\"\n        >\n          {{ 'igo.integration.mapTool.context-tool' | translate }}\n        </span>\n      </mat-list-item>\n    </mat-list>\n  </ng-template>\n</mat-tab-group>\n", styles: [":host mat-tab-group{height:100%}:host ::ng-deep .mat-mdc-tab-body-wrapper{flex:1}:host ::ng-deep .mat-tab-body{margin-top:8px}:host ::ng-deep .mat-mdc-tab-body-content{overflow:hidden}:host .map-empty,:host .search-tool,:host .catalog-tool,:host .context-tool{margin:10px}:host .map-empty{text-align:justify}:host .search-tool,:host .catalog-tool,:host .context-tool{cursor:pointer}:host mat-list mat-list-item h4{font-weight:700}:host mat-list-item ::ng-deep .mdc-list-item__primary-text{font-size:smaller}:host mat-list.mat-mdc-list-base mat-list-item.mat-mdc-list-item ::ng-deep div.mdc-list-item__content div.mdc-list-item__primary-text{padding-left:5px}\n"] }]
-        }], ctorParameters: () => [{ type: LayerListToolState }, { type: ToolState }, { type: MapState }, { type: i1$1.SearchSourceService }, { type: ImportExportState }], propDecorators: { allowShowAllLegends: [{
+                    ], template: "<mat-tab-group\n  #tabGroup\n  [selectedIndex]=\"layerListToolState.selectedTab$ | async\"\n  (selectedTabChange)=\"tabChanged($event)\"\n>\n  <mat-tab [label]=\"'igo.integration.tools.layers' | translate\">\n    <igo-layer-viewer\n      [options]=\"layerViewerOptions\"\n      [map]=\"map\"\n      [excludeBaseLayers]=\"excludeBaseLayers\"\n      [isDesktop]=\"isDesktop\"\n      (appliedFilterAndSort)=\"onLayerListChange($event)\"\n    >\n      <ng-template #customBottomActions let-layer=\"layer\">\n        <igo-style-modal-layer-button\n          *ngIf=\"isStyleEditButton(layer)\"\n          [layer]=\"layer\"\n        ></igo-style-modal-layer-button>\n        <igo-metadata-button [layer]=\"layer\"></igo-metadata-button>\n        <igo-track-feature-button\n          [trackFeature]=\"true\"\n          [layer]=\"layer\"\n        ></igo-track-feature-button>\n        <igo-time-filter-button\n          *ngIf=\"isTimeFilterButton(layer)\"\n          [header]=\"timeButton\"\n          [layer]=\"layer\"\n          (click)=\"activateTimeFilter()\"\n        ></igo-time-filter-button>\n        <igo-ogc-filter-button\n          *ngIf=\"isOGCFilterButton(layer)\"\n          [header]=\"ogcButton\"\n          [layer]=\"layer\"\n          (click)=\"activateOgcFilter()\"\n        ></igo-ogc-filter-button>\n        <igo-export-button\n          *ngIf=\"isExportButton(layer)\"\n          [layer]=\"layer\"\n          (click)=\"activateExport(layer)\"\n        ></igo-export-button>\n        <igo-workspace-button [layer]=\"layer\"></igo-workspace-button>\n      </ng-template>\n\n      <ng-container ngProjectAs=\"[emptyList]\">\n        <ng-template [ngTemplateOutlet]=\"emptyLayers\"></ng-template>\n      </ng-container>\n    </igo-layer-viewer>\n  </mat-tab>\n\n  <mat-tab [label]=\"'igo.integration.tools.legend' | translate\">\n    <igo-layer-legend-list\n      *ngIf=\"showAllLegend()\"\n      igoLayerLegendListBinding\n      [allowShowAllLegends]=\"allowShowAllLegends\"\n      [showAllLegendsValue]=\"showAllLegendsValue$ | async\"\n      (allLegendsShown)=\"onShowAllLegends($event)\"\n      [excludeBaseLayers]=\"excludeBaseLayers\"\n      [updateLegendOnResolutionChange]=\"updateLegendOnResolutionChange\"\n    >\n    </igo-layer-legend-list>\n    <ng-template\n      *ngIf=\"(layers$ | async).length !== 0; else emptyLayers\"\n    ></ng-template>\n\n    <p\n      class=\"map-empty mat-typography\"\n      *ngIf=\"\n        !allowShowAllLegends &&\n        (layers$ | async).length !== 0 &&\n        (visibleOrInRangeLayers$ | async).length === 0\n      \"\n    >\n      {{\n        (visibleLayers$ | async).length\n          ? ('igo.integration.mapTool.noLayersInRange' | translate)\n          : ('igo.integration.mapTool.noLayersVisible' | translate)\n      }}\n    </p>\n  </mat-tab>\n\n  <ng-template #emptyLayers>\n    <mat-list *ngIf=\"delayedShowEmptyMapContent\">\n      <p class=\"map-empty mat-typography\">\n        {{ 'igo.integration.mapTool.empty' | translate }}\n      </p>\n      <p\n        *ngIf=\"\n          layerAdditionAllowed &&\n          (searchToolInToolbar || catalogToolInToolbar || contextToolInToolbar)\n        \"\n        class=\"map-empty mat-typography\"\n      >\n        {{ 'igo.integration.mapTool.customize' | translate }}\n      </p>\n\n      <mat-list-item *ngIf=\"layerAdditionAllowed && searchToolInToolbar\">\n        <mat-icon matListItemIcon>search</mat-icon>\n        <span\n          matListItemTitle\n          class=\"search-tool mat-typography\"\n          (click)=\"searchEmit()\"\n        >\n          {{ 'igo.integration.mapTool.search-tool' | translate }}\n        </span>\n      </mat-list-item>\n      <mat-list-item *ngIf=\"layerAdditionAllowed && catalogToolInToolbar\">\n        <mat-icon matListItemIcon>library_add</mat-icon>\n        <span\n          matListItemTitle\n          class=\"catalog-tool mat-typography\"\n          (click)=\"catalogEmit()\"\n        >\n          {{ 'igo.integration.mapTool.catalog-tool' | translate }}\n        </span>\n      </mat-list-item>\n      <mat-list-item *ngIf=\"layerAdditionAllowed && contextToolInToolbar\">\n        <mat-icon matListItemIcon>star</mat-icon>\n        <span\n          matListItemTitle\n          class=\"context-tool mat-typography\"\n          (click)=\"contextEmit()\"\n        >\n          {{ 'igo.integration.mapTool.context-tool' | translate }}\n        </span>\n      </mat-list-item>\n    </mat-list>\n  </ng-template>\n</mat-tab-group>\n", styles: [":host mat-tab-group{height:100%}:host ::ng-deep mat-tab-header{border-bottom:1px solid #ccc}:host ::ng-deep .mat-mdc-tab-body-wrapper{flex:1}:host ::ng-deep .mat-tab-body{margin-top:8px}:host ::ng-deep .mat-mdc-tab-body-content{overflow:hidden}:host .map-empty,:host .search-tool,:host .catalog-tool,:host .context-tool{margin:10px}:host .map-empty{text-align:justify}:host .search-tool,:host .catalog-tool,:host .context-tool{cursor:pointer}:host mat-list mat-list-item h4{font-weight:700}:host mat-list-item ::ng-deep .mdc-list-item__primary-text{font-size:smaller}:host mat-list.mat-mdc-list-base mat-list-item.mat-mdc-list-item ::ng-deep div.mdc-list-item__content div.mdc-list-item__primary-text{padding-left:5px}\n"] }]
+        }], ctorParameters: () => [{ type: LayerListToolState }, { type: ToolState }, { type: MapState }, { type: i1.SearchSourceService }, { type: ImportExportState }, { type: i5.ConfigService }, { type: i3$1.MediaService }, { type: i0.ChangeDetectorRef }], propDecorators: { allowShowAllLegends: [{
                 type: Input
             }], showAllLegendsValue: [{
                 type: Input
@@ -4459,8 +4546,9 @@ class MeasureState {
         this.store = new FeatureStore([], {
             map: this.mapState.map
         });
-        this.mapState.map.layers$.subscribe((layers) => {
-            if (layers.filter((l) => l.id?.startsWith('igo-measures-')).length === 0) {
+        this.mapState.map.layerController.all$.subscribe((layers) => {
+            const hasMeasure = layers.some((l) => l.id?.startsWith('igo-measures-'));
+            if (!hasMeasure) {
                 this.store.deleteMany(this.store.all());
                 this.mapState.map.ol
                     .getOverlays()
@@ -4680,7 +4768,7 @@ class SearchState {
         this.monitorLayerDeletion();
     }
     monitorLayerDeletion() {
-        this.mapState.map.layers$.subscribe((layers) => {
+        this.mapState.map.layerController.all$.subscribe((layers) => {
             this.searchLayerStores.forEach((store) => {
                 const layer = layers.find((l) => l.id === store.layer.id);
                 if (!layer) {
@@ -4741,12 +4829,12 @@ class SearchState {
         this.storageService.set('searchResultsGeometryEnabled', value);
         this.searchResultsGeometryEnabled$.next(value);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SearchState, deps: [{ token: i1$1.SearchSourceService }, { token: i4.StorageService }, { token: WorkspaceState }, { token: i5.ConfigService }, { token: MapState }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SearchState, deps: [{ token: i1.SearchSourceService }, { token: i4.StorageService }, { token: WorkspaceState }, { token: i5.ConfigService }, { token: MapState }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SearchState });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SearchState, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1$1.SearchSourceService }, { type: i4.StorageService }, { type: WorkspaceState }, { type: i5.ConfigService }, { type: MapState }] });
+        }], ctorParameters: () => [{ type: i1.SearchSourceService }, { type: i4.StorageService }, { type: WorkspaceState }, { type: i5.ConfigService }, { type: MapState }] });
 
 class SearchBarBindingDirective {
     component;
@@ -4794,7 +4882,7 @@ class SearchBarBindingDirective {
             this.searchState.setSearchType(searchType);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SearchBarBindingDirective, deps: [{ token: i1$1.SearchBarComponent, self: true }, { token: SearchState }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SearchBarBindingDirective, deps: [{ token: i1.SearchBarComponent, self: true }, { token: SearchState }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: SearchBarBindingDirective, isStandalone: true, selector: "[igoSearchBarBinding]", host: { listeners: { "searchTermChange": "onSearchTermChange($event)", "searchTypeChange": "onSearchTypeChange($event)" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SearchBarBindingDirective, decorators: [{
@@ -4803,7 +4891,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                     selector: '[igoSearchBarBinding]',
                     standalone: true
                 }]
-        }], ctorParameters: () => [{ type: i1$1.SearchBarComponent, decorators: [{
+        }], ctorParameters: () => [{ type: i1.SearchBarComponent, decorators: [{
                     type: Self
                 }] }, { type: SearchState }], propDecorators: { onSearchTermChange: [{
                 type: HostListener,
@@ -5292,7 +5380,7 @@ let SearchResultsToolComponent = class SearchResultsToolComponent {
         }, 250);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SearchResultsToolComponent, deps: [{ token: MapState }, { token: SearchState }, { token: i0.ElementRef }, { token: ToolState }, { token: DirectionState }, { token: i5.ConfigService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SearchResultsToolComponent, isStandalone: true, selector: "igo-search-results-tool", inputs: { showIcons: "showIcons", topPanelStateDefault: "topPanelStateDefault", topPanelState: "topPanelState" }, ngImport: i0, template: "<div\n  *ngIf=\"(!store || store.stateView.empty) && (debouncedEmpty$ | async)\"\n  style=\"margin: 10px\"\n>\n  <section class=\"mat-typography\">\n    <h4>\n      <strong>{{\n        'igo.integration.searchResultsTool.noResults' | translate\n      }}</strong>\n    </h4>\n    <p>\n      <strong>{{\n        'igo.integration.searchResultsTool.doSearch' | translate\n      }}</strong>\n    </p>\n    <div\n      [innerHTML]=\"\n        'igo.integration.searchResultsTool.examples' | translate | sanitizeHtml\n      \"\n    ></div>\n  </section>\n</div>\n\n<igo-flexible\n  *ngIf=\"(debouncedEmpty$ | async) === false\"\n  #topPanel\n  initial=\"100%\"\n  initialMobile=\"100%\"\n  collapsed=\"calc(100% - 58px)\"\n  collapsedMobile=\"calc(100% - 58px)\"\n  expanded=\"60%\"\n  expandedMobile=\"60%\"\n  [state]=\"(feature$ | async) ? topPanelState : 'initial'\"\n>\n  <div class=\"igo-content\">\n    <igo-search-results\n      [store]=\"store\"\n      [showIcons]=\"showIcons\"\n      [term]=\"term\"\n      [termSplitter]=\"termSplitter\"\n      [settingsChange$]=\"settingsChange$\"\n      placeholder=\"false\"\n      (resultFocus)=\"onResultFocus($event)\"\n      (resultSelect)=\"onResultSelect($event)\"\n      (resultUnfocus)=\"onResultUnfocus($event)\"\n      (resultMouseenter)=\"onResultFocus($event)\"\n      (resultMouseleave)=\"onResultUnfocus($event)\"\n      (moreResults)=\"onSearch($event)\"\n      [map]=\"map\"\n    >\n      <ng-template #igoSearchItemToolbar let-result=\"result\">\n        <igo-search-add-button\n          [map]=\"map\"\n          [store]=\"store\"\n          [stores]=\"stores\"\n          [layer]=\"result\"\n          [saveSearchResultInLayer]=\"saveSearchResultInLayer\"\n        >\n        </igo-search-add-button>\n      </ng-template>\n    </igo-search-results>\n  </div>\n\n  <div igoFlexibleFill class=\"igo-content\">\n    <igo-panel\n      [title]=\"featureTitle\"\n      *ngIf=\"feature$ | async\"\n      (click)=\"toggleTopPanel($event)\"\n      [cursorPointer]=\"true\"\n    >\n      <button\n        mat-icon-button\n        panelLeftButton\n        class=\"igo-icon-button\"\n        (click)=\"toggleTopPanel()\"\n      >\n        <mat-icon>{{\n          (topPanelState$ | async) === 'collapsed'\n            ? 'arrow_upward'\n            : 'arrow_downward'\n        }}</mat-icon>\n      </button>\n\n      <button\n        *ngIf=\"feature.geometry\"\n        mat-icon-button\n        panelRightButton\n        class=\"igo-icon-button\"\n        [matTooltip]=\"\n          ((isSelectedResultOutOfView$ | async)\n            ? 'igo.integration.searchResultsTool.zoomOnFeatureTooltipOutOfView'\n            : 'igo.integration.searchResultsTool.zoomOnFeatureTooltip'\n          ) | translate\n        \"\n        matTooltipShowDelay=\"500\"\n        (click)=\"zoomToFeatureExtent()\"\n      >\n        <mat-icon\n          aria-hidden=\"false\"\n          [matBadge]=\"(isSelectedResultOutOfView$ | async) ? '!' : ''\"\n          matBadgeColor=\"accent\"\n          matBadgeSize=\"small\"\n          [matBadgeHidden]=\"(isSelectedResultOutOfView$ | async) === false\"\n          >zoom_in</mat-icon\n        >\n      </button>\n\n      <igo-feature-details\n        igoFeatureDetailsDirective\n        [feature]=\"feature$ | async\"\n        [map]=\"map\"\n        [toolbox]=\"toolState.toolbox\"\n        (routingEvent)=\"getRoute()\"\n      >\n      </igo-feature-details>\n    </igo-panel>\n  </div>\n</igo-flexible>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FlexibleComponent, selector: "igo-flexible", inputs: ["initial", "collapsed", "expanded", "initialMobile", "collapsedMobile", "expandedMobile", "direction", "state"] }, { kind: "component", type: SearchResultsComponent, selector: "igo-search-results", inputs: ["map", "store", "showIcons", "mode", "withZoomButton", "tabsMode", "term", "settingsChange$", "termSplitter"], outputs: ["resultFocus", "resultUnfocus", "resultSelect", "moreResults", "resultMouseenter", "resultMouseleave"] }, { kind: "component", type: SearchResultAddButtonComponent, selector: "igo-search-add-button", inputs: ["layer", "store", "added", "map", "saveSearchResultInLayer", "color", "stores"] }, { kind: "component", type: PanelComponent, selector: "igo-panel", inputs: ["title", "withHeader", "cursorPointer"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i9$1.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: FeatureDetailsComponent, selector: "igo-feature-details", inputs: ["source", "map", "toolbox", "feature"], outputs: ["routeEvent", "selectFeature", "htmlDisplayEvent"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: IgoLanguageModule }, { kind: "pipe", type: i6$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SearchResultsToolComponent, isStandalone: true, selector: "igo-search-results-tool", inputs: { showIcons: "showIcons", topPanelStateDefault: "topPanelStateDefault", topPanelState: "topPanelState" }, ngImport: i0, template: "<div\n  *ngIf=\"(!store || store.stateView.empty) && (debouncedEmpty$ | async)\"\n  style=\"margin: 10px\"\n>\n  <section class=\"mat-typography\">\n    <h4>\n      <strong>{{\n        'igo.integration.searchResultsTool.noResults' | translate\n      }}</strong>\n    </h4>\n    <p>\n      <strong>{{\n        'igo.integration.searchResultsTool.doSearch' | translate\n      }}</strong>\n    </p>\n    <div\n      [innerHTML]=\"\n        'igo.integration.searchResultsTool.examples' | translate | sanitizeHtml\n      \"\n    ></div>\n  </section>\n</div>\n\n<igo-flexible\n  *ngIf=\"(debouncedEmpty$ | async) === false\"\n  #topPanel\n  initial=\"100%\"\n  initialMobile=\"100%\"\n  collapsed=\"calc(100% - 58px)\"\n  collapsedMobile=\"calc(100% - 58px)\"\n  expanded=\"60%\"\n  expandedMobile=\"60%\"\n  [state]=\"(feature$ | async) ? topPanelState : 'initial'\"\n>\n  <div class=\"igo-content\">\n    <igo-search-results\n      [store]=\"store\"\n      [showIcons]=\"showIcons\"\n      [term]=\"term\"\n      [termSplitter]=\"termSplitter\"\n      [settingsChange$]=\"settingsChange$\"\n      placeholder=\"false\"\n      (resultFocus)=\"onResultFocus($event)\"\n      (resultSelect)=\"onResultSelect($event)\"\n      (resultUnfocus)=\"onResultUnfocus($event)\"\n      (resultMouseenter)=\"onResultFocus($event)\"\n      (resultMouseleave)=\"onResultUnfocus($event)\"\n      (moreResults)=\"onSearch($event)\"\n      [map]=\"map\"\n    >\n      <ng-template #igoSearchItemToolbar let-result=\"result\">\n        <igo-search-add-button\n          [map]=\"map\"\n          [store]=\"store\"\n          [stores]=\"stores\"\n          [layer]=\"result\"\n          [saveSearchResultInLayer]=\"saveSearchResultInLayer\"\n        >\n        </igo-search-add-button>\n      </ng-template>\n    </igo-search-results>\n  </div>\n\n  <div igoFlexibleFill class=\"igo-content\">\n    <igo-panel\n      [title]=\"featureTitle\"\n      *ngIf=\"feature$ | async\"\n      (click)=\"toggleTopPanel($event)\"\n      [cursorPointer]=\"true\"\n    >\n      <button\n        mat-icon-button\n        panelLeftButton\n        class=\"igo-icon-button\"\n        (click)=\"toggleTopPanel()\"\n      >\n        <mat-icon>{{\n          (topPanelState$ | async) === 'collapsed'\n            ? 'arrow_upward'\n            : 'arrow_downward'\n        }}</mat-icon>\n      </button>\n\n      <button\n        *ngIf=\"feature.geometry\"\n        mat-icon-button\n        panelRightButton\n        class=\"igo-icon-button\"\n        [matTooltip]=\"\n          ((isSelectedResultOutOfView$ | async)\n            ? 'igo.integration.searchResultsTool.zoomOnFeatureTooltipOutOfView'\n            : 'igo.integration.searchResultsTool.zoomOnFeatureTooltip'\n          ) | translate\n        \"\n        matTooltipShowDelay=\"500\"\n        (click)=\"zoomToFeatureExtent()\"\n      >\n        <mat-icon\n          aria-hidden=\"false\"\n          [matBadge]=\"(isSelectedResultOutOfView$ | async) ? '!' : ''\"\n          matBadgeColor=\"accent\"\n          matBadgeSize=\"small\"\n          [matBadgeHidden]=\"(isSelectedResultOutOfView$ | async) === false\"\n          >zoom_in</mat-icon\n        >\n      </button>\n\n      <igo-feature-details\n        igoFeatureDetailsDirective\n        [feature]=\"feature$ | async\"\n        [map]=\"map\"\n        [toolbox]=\"toolState.toolbox\"\n        (routingEvent)=\"getRoute()\"\n      >\n      </igo-feature-details>\n    </igo-panel>\n  </div>\n</igo-flexible>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FlexibleComponent, selector: "igo-flexible", inputs: ["initial", "collapsed", "expanded", "initialMobile", "collapsedMobile", "expandedMobile", "direction", "state"] }, { kind: "component", type: SearchResultsComponent, selector: "igo-search-results", inputs: ["map", "store", "showIcons", "mode", "withZoomButton", "tabsMode", "term", "settingsChange$", "termSplitter"], outputs: ["resultFocus", "resultUnfocus", "resultSelect", "moreResults", "resultMouseenter", "resultMouseleave"] }, { kind: "component", type: SearchResultAddButtonComponent, selector: "igo-search-add-button", inputs: ["layer", "store", "added", "map", "saveSearchResultInLayer", "color", "stores"] }, { kind: "component", type: PanelComponent, selector: "igo-panel", inputs: ["title", "withHeader", "cursorPointer"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i9$2.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: FeatureDetailsComponent, selector: "igo-feature-details", inputs: ["source", "map", "toolbox", "feature"], outputs: ["routeEvent", "selectFeature", "htmlDisplayEvent"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: IgoLanguageModule }, { kind: "pipe", type: i11.TranslatePipe, name: "translate" }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 };
 SearchResultsToolComponent = __decorate([
     ToolComponent({
@@ -5479,11 +5567,14 @@ class AnalyticsListenerService {
             if (!layers) {
                 return;
             }
-            layers.map((layer) => {
+            layers.forEach((layer) => {
                 let wmsParams;
                 let wmtsParams;
                 let xyzParams;
                 let restParams;
+                if (isLayerGroup(layer)) {
+                    return;
+                }
                 switch (layer.dataSource.options.type) {
                     case 'wms': {
                         const wmsDataSource = layer.dataSource
@@ -5541,7 +5632,7 @@ class AnalyticsListenerService {
             });
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AnalyticsListenerService, deps: [{ token: i1$4.AnalyticsService }, { token: i2.AuthService }, { token: ContextState }, { token: ToolState }, { token: MapState }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AnalyticsListenerService, deps: [{ token: i1$3.AnalyticsService }, { token: i2.AuthService }, { token: ContextState }, { token: ToolState }, { token: MapState }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AnalyticsListenerService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AnalyticsListenerService, decorators: [{
@@ -5549,7 +5640,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i1$4.AnalyticsService }, { type: i2.AuthService }, { type: ContextState }, { type: ToolState }, { type: MapState }] });
+        }], ctorParameters: () => [{ type: i1$3.AnalyticsService }, { type: i2.AuthService }, { type: ContextState }, { type: ToolState }, { type: MapState }] });
 
 const INTEGRATION_FILTER_DIRECTIVES = [
     OgcFilterToolComponent,
@@ -5588,7 +5679,7 @@ class QueryState {
         const geoPropertiesStrategy = new GeoPropertiesStrategy({ map: this.mapState.map }, this.propertyTypeDetectorService, this.capabilitiesService);
         this.store.addStrategy(geoPropertiesStrategy, true);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: QueryState, deps: [{ token: i5.ConfigService }, { token: i1$1.PropertyTypeDetectorService }, { token: i1$1.CapabilitiesService }, { token: MapState }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: QueryState, deps: [{ token: i5.ConfigService }, { token: i1.PropertyTypeDetectorService }, { token: i1.CapabilitiesService }, { token: MapState }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: QueryState, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: QueryState, decorators: [{
@@ -5596,7 +5687,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i5.ConfigService }, { type: i1$1.PropertyTypeDetectorService }, { type: i1$1.CapabilitiesService }, { type: MapState }] });
+        }], ctorParameters: () => [{ type: i5.ConfigService }, { type: i1.PropertyTypeDetectorService }, { type: i1.CapabilitiesService }, { type: MapState }] });
 
 /**
  * @deprecated import the SearchResultsToolComponent directly