@regionerne/gis-komponent 0.0.100 → 0.0.102

package/fesm2022/regionerne-gis-komponent.mjs

@@ -407,8 +407,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
 class LayoutService {
     _map;
     mapResizedSubject = new Subject();
+    mapSetSubject = new BehaviorSubject(false);
     set map(value) {
         this._map = value;
+        this.mapSetSubject.next(true);
     }
     async keepWidgetInViewPort(dragPosition, widgetName, widgetHeight, widgetWidth, resizedContainerHeight = null, resizedContainerWidth = null) {
         //Expanding or changing map size, make sure the widget stays in viewport
@@ -1174,43 +1176,47 @@ class LayerSelectorComponent {
         }
     }
     async _loadPosition(collapsed) {
-        try {
-            // Default height and width when collapsed
-            let widgetHeight = WidgetConstants.collapsedHeight;
-            let widgetWidth = WidgetConstants.collapsedWidth;
-            if (!collapsed) {
-                // Custom height and width when expanded
-                widgetHeight = WidgetConstants.layerSelectorHeight;
-                widgetWidth = WidgetConstants.layerSelectorWidth;
-            }
-            const widgetPositionOptions = {
-                initialPosition: this.profile.layerSelectorInitialPosition,
-                widgetName: this.POSITION_STORAGE_KEY,
-                widgetHeight: widgetHeight,
-                widgetWidth: widgetWidth
-            };
-            const savedPosition = localStorage.getItem(this.POSITION_STORAGE_KEY);
-            if (this._profileService.getProfileVersionChanged() &&
-                this.profile?.layerSelectorInitialPosition) {
-                //Profile version changed in backend, use that
-                this.layerSelectorDragPosition = await this._layoutService.calculateWidgetPosition(widgetPositionOptions);
-            }
-            else if (savedPosition) {
-                this.layerSelectorDragPosition = JSON.parse(savedPosition);
-            }
-            else if (this.profile?.layerSelectorInitialPosition) {
-                this.layerSelectorDragPosition = await this._layoutService.calculateWidgetPosition(widgetPositionOptions);
+        this._layoutService.mapSetSubject
+            .pipe(filter(mapSet => mapSet === true), take(1))
+            .subscribe(async (mapSet) => {
+            try {
+                // Default height and width when collapsed
+                let widgetHeight = WidgetConstants.collapsedHeight;
+                let widgetWidth = WidgetConstants.collapsedWidth;
+                if (!collapsed) {
+                    // Custom height and width when expanded
+                    widgetHeight = WidgetConstants.layerSelectorHeight;
+                    widgetWidth = WidgetConstants.layerSelectorWidth;
+                }
+                const widgetPositionOptions = {
+                    initialPosition: this.profile.layerSelectorInitialPosition,
+                    widgetName: this.POSITION_STORAGE_KEY,
+                    widgetHeight: widgetHeight,
+                    widgetWidth: widgetWidth
+                };
+                const savedPosition = localStorage.getItem(this.POSITION_STORAGE_KEY);
+                if (this._profileService.getProfileVersionChanged() &&
+                    this.profile?.layerSelectorInitialPosition) {
+                    //Profile version changed in backend, use that
+                    this.layerSelectorDragPosition = await this._layoutService.calculateWidgetPosition(widgetPositionOptions);
+                }
+                else if (savedPosition) {
+                    this.layerSelectorDragPosition = JSON.parse(savedPosition);
+                }
+                else if (this.profile?.layerSelectorInitialPosition) {
+                    this.layerSelectorDragPosition = await this._layoutService.calculateWidgetPosition(widgetPositionOptions);
+                }
+                else {
+                    // Default position for layer selector
+                    this.layerSelectorDragPosition = { x: WidgetConstants.layerSelectorDefaultX, y: WidgetConstants.layerSelectorDefaultY };
+                    this._savePosition(this.layerSelectorDragPosition);
+                }
             }
-            else {
-                // Default position for layer selector
-                this.layerSelectorDragPosition = { x: WidgetConstants.layerSelectorDefaultX, y: WidgetConstants.layerSelectorDefaultY };
-                this._savePosition(this.layerSelectorDragPosition);
+            catch (error) {
+                console.error('Error loading position from localStorage:', error);
+                this.layerSelectorDragPosition = { x: 0, y: 0 };
             }
-        }
-        catch (error) {
-            console.error('Error loading position from localStorage:', error);
-            this.layerSelectorDragPosition = { x: 0, y: 0 };
-        }
+        });
     }
     _cacheProfileInfo() {
         const cacheItem = { profile: this.profile, cachedLayerGroups: this.filteredLayerGroups.concat(this.filteredBackgroundLayerGroups) };
@@ -2842,7 +2848,6 @@ class GeometrySearchService extends SearchProviderBase {
         return intersects(layer.geometryField, searchValue);
     }
     map(l, f) {
-        console.log("🚀 ~ GeometrySearchService ~ map ~ l:", l);
         const fc = f;
         return {
             title: l.name,
@@ -3162,7 +3167,6 @@ class ToolboxComponent {
         this.drawInteraction.on('drawend', (evt) => {
             this._geometrySearchService.search(evt.feature.getGeometry(), this.profile.searchResultLimit).subscribe({
                 next: result => {
-                    console.log("🚀 ~ ToolboxComponent ~ _enablePolygonSearch ~ result:", result);
                     this.geometrySearchResult = result.filter(result => result.total > 0);
                 }
             });
@@ -4206,6 +4210,7 @@ class ToolboxComponent {
     ngOnInit() {
         this._originalMapHeight = this.map.getSize()[1];
         this._originalMapWidth = this.map.getSize()[0];
+        this.bufferInMeters = this.settings.defaultBufferInMeters ?? 0.2;
         this._layoutService.mapResizedSubject.subscribe(async (mapResized) => {
             //Map resized, make sure it stays in viewport
             this.dragPosition = await this._layoutService.keepWidgetInViewPort(this.dragPosition, this._POSITION_STORAGE_KEY, WidgetConstants.toolboxHeight, WidgetConstants.toolboxWidth, this.mapHeight, this.mapWidth);
@@ -4350,44 +4355,48 @@ class ToolboxComponent {
         }
     }
     async _loadPosition(collapsed) {
-        try {
-            // Default height and width when collapsed
-            let widgetHeight = WidgetConstants.collapsedHeight;
-            let widgetWidth = WidgetConstants.collapsedWidth;
-            if (!collapsed) {
-                // Custom height and width when expanded
-                widgetHeight = WidgetConstants.toolboxHeight;
-                widgetWidth = WidgetConstants.toolboxWidth;
-            }
-            const container = this.map.getViewport();
-            const widgetPositionOptions = {
-                initialPosition: this.profile.toolboxInitialPosition,
-                widgetName: this._POSITION_STORAGE_KEY,
-                widgetHeight: widgetHeight,
-                widgetWidth: widgetWidth,
-            };
-            const savedPosition = localStorage.getItem(this._POSITION_STORAGE_KEY);
-            if (this._profileService.getProfileVersionChanged() &&
-                this.profile?.toolboxInitialPosition) {
-                //Profile version changed in backend, use that
-                this.dragPosition = await this._layoutService.calculateWidgetPosition(widgetPositionOptions);
-            }
-            else if (savedPosition) {
-                this.dragPosition = JSON.parse(savedPosition);
-            }
-            else if (this.profile?.toolboxInitialPosition) {
-                this.dragPosition = await this._layoutService.calculateWidgetPosition(widgetPositionOptions);
+        this._layoutService.mapSetSubject
+            .pipe(filter(mapSet => mapSet === true), take(1))
+            .subscribe(async (mapSet) => {
+            try {
+                // Default height and width when collapsed
+                let widgetHeight = WidgetConstants.collapsedHeight;
+                let widgetWidth = WidgetConstants.collapsedWidth;
+                if (!collapsed) {
+                    // Custom height and width when expanded
+                    widgetHeight = WidgetConstants.toolboxHeight;
+                    widgetWidth = WidgetConstants.toolboxWidth;
+                }
+                const container = this.map.getViewport();
+                const widgetPositionOptions = {
+                    initialPosition: this.profile.toolboxInitialPosition,
+                    widgetName: this._POSITION_STORAGE_KEY,
+                    widgetHeight: widgetHeight,
+                    widgetWidth: widgetWidth,
+                };
+                const savedPosition = localStorage.getItem(this._POSITION_STORAGE_KEY);
+                if (this._profileService.getProfileVersionChanged() &&
+                    this.profile?.toolboxInitialPosition) {
+                    //Profile version changed in backend, use that
+                    this.dragPosition = await this._layoutService.calculateWidgetPosition(widgetPositionOptions);
+                }
+                else if (savedPosition) {
+                    this.dragPosition = JSON.parse(savedPosition);
+                }
+                else if (this.profile?.toolboxInitialPosition) {
+                    this.dragPosition = await this._layoutService.calculateWidgetPosition(widgetPositionOptions);
+                }
+                else {
+                    // Default position for toolbox
+                    this.dragPosition = { x: WidgetConstants.toolboxDefaultX, y: WidgetConstants.toolboxDefaultY };
+                    this._savePosition();
+                }
             }
-            else {
-                // Default position for toolbox
-                this.dragPosition = { x: WidgetConstants.toolboxDefaultX, y: WidgetConstants.toolboxDefaultY };
-                this._savePosition();
+            catch (error) {
+                console.error('Error loading position from localStorage:', error);
+                this.dragPosition = { x: 0, y: 0 };
             }
-        }
-        catch (error) {
-            console.error('Error loading position from localStorage:', error);
-            this.dragPosition = { x: 0, y: 0 };
-        }
+        });
     }
     _savePosition() {
         try {
@@ -4936,43 +4945,47 @@ class ActiveObjectsComponent {
         this._dialogService.open({ primaryText: 'OK', message: wktString, title: 'WKT for objekt' }).subscribe();
     }
     async _loadPosition(collapsed) {
-        try {
-            // Default height and width when collapsed
-            let widgetHeight = WidgetConstants.collapsedHeight;
-            let widgetWidth = WidgetConstants.collapsedWidth;
-            if (!collapsed) {
-                // Custom height and width when expanded
-                widgetHeight = WidgetConstants.activeObjectsHeight;
-                widgetWidth = WidgetConstants.activeObjectsWidth;
-            }
-            const widgetPositionOptions = {
-                initialPosition: this.profile.activeObjectsInitialPosition,
-                widgetName: this.POSITION_STORAGE_KEY,
-                widgetHeight: widgetHeight,
-                widgetWidth: widgetWidth
-            };
-            const savedPosition = localStorage.getItem(this.POSITION_STORAGE_KEY);
-            if (this._profileService.getProfileVersionChanged() &&
-                this.profile?.activeObjectsInitialPosition) {
-                //Profile version changed in backend, use that
-                this.dragPosition = await this._layoutService.calculateWidgetPosition(widgetPositionOptions);
-            }
-            else if (savedPosition) {
-                this.dragPosition = JSON.parse(savedPosition);
-            }
-            else if (this.profile?.activeObjectsInitialPosition) {
-                this.dragPosition = await this._layoutService.calculateWidgetPosition(widgetPositionOptions);
+        this._layoutService.mapSetSubject
+            .pipe(filter(mapSet => mapSet === true), take(1))
+            .subscribe(async (mapSet) => {
+            try {
+                // Default height and width when collapsed
+                let widgetHeight = WidgetConstants.collapsedHeight;
+                let widgetWidth = WidgetConstants.collapsedWidth;
+                if (!collapsed) {
+                    // Custom height and width when expanded
+                    widgetHeight = WidgetConstants.activeObjectsHeight;
+                    widgetWidth = WidgetConstants.activeObjectsWidth;
+                }
+                const widgetPositionOptions = {
+                    initialPosition: this.profile.activeObjectsInitialPosition,
+                    widgetName: this.POSITION_STORAGE_KEY,
+                    widgetHeight: widgetHeight,
+                    widgetWidth: widgetWidth
+                };
+                const savedPosition = localStorage.getItem(this.POSITION_STORAGE_KEY);
+                if (this._profileService.getProfileVersionChanged() &&
+                    this.profile?.activeObjectsInitialPosition) {
+                    //Profile version changed in backend, use that
+                    this.dragPosition = await this._layoutService.calculateWidgetPosition(widgetPositionOptions);
+                }
+                else if (savedPosition) {
+                    this.dragPosition = JSON.parse(savedPosition);
+                }
+                else if (this.profile?.activeObjectsInitialPosition) {
+                    this.dragPosition = await this._layoutService.calculateWidgetPosition(widgetPositionOptions);
+                }
+                else {
+                    // Default position for active objects
+                    this.dragPosition = { x: WidgetConstants.activeObjectsDefaultX, y: WidgetConstants.activeObjectsDefaultY };
+                    this._savePosition(this.dragPosition);
+                }
             }
-            else {
-                // Default position for active objects
-                this.dragPosition = { x: WidgetConstants.activeObjectsDefaultX, y: WidgetConstants.activeObjectsDefaultY };
-                this._savePosition(this.dragPosition);
+            catch (error) {
+                console.error('Error loading position from localStorage:', error);
+                this.dragPosition = { x: 0, y: 0 };
             }
-        }
-        catch (error) {
-            console.error('Error loading position from localStorage:', error);
-            this.dragPosition = { x: 0, y: 0 };
-        }
+        });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ActiveObjectsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ActiveObjectsComponent, isStandalone: true, selector: "activeObjects", inputs: { settings: "settings", profile: "profile" }, outputs: { sessionDone: "sessionDone" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"active-objects-wrapper global-wrapper-container\" cdkDrag cdkDragBoundary=\".map-container\"\n    [cdkDragFreeDragPosition]=\"dragPosition\" (cdkDragEnded)=\"onDragEnded($event)\" [class.collapsed]=\"collapsed\">\n    <div class=\"drag-handle-active-objects\" cdkDragHandle>\n        <mat-icon class=\"active-object-icon\" (click)=\"zoomToAll()\" matTooltip=\"Aktive objekter\"\n            [matTooltipShowDelay]=\"500\" [matTooltipHideDelay]=\"100\" matTooltipPosition=\"above\">\n            format_list_bulleted_add\n        </mat-icon>\n\n        <div class=\"right-icons\">\n            <mat-icon class=\"toggle-icon\" (click)=\"togglePanel()\">\n                {{ collapsed ? 'flip_to_front' : 'remove' }}\n            </mat-icon>\n        </div>\n    </div>\n\n    <div class=\"active-objects-container\">\n        @if(!collapsed) {\n            <input type=\"range\" min=\"0\" max=\"1\" step=\"0.05\" [(ngModel)]=\"opacity\" (input)=\"updateOpacity()\"\n                (mousedown)=\"stopDrag($event)\" (touchstart)=\"stopDrag($event)\" (pointerdown)=\"stopDrag($event)\">\n            <div class=\"header-icons\">\n                <div class=\"header-left-controls\">\n                    <span class=\"active-count\">Objekter ({{ activeFeatures.length}})</span>\n                    <mat-icon class=\"zoom-icon\" [class.zoom-active]=\"isZoomedToAll\" (click)=\"zoomToAll()\"\n                        matTooltip=\"Zoom til alle\" matTooltipPosition=\"above\">\n                        fit_screen\n                    </mat-icon>\n                    <mat-icon class=\"reset-icon\" (click)=\"reset()\" matTooltip=\"Nulstil\" matTooltipPosition=\"above\">\n                        replay\n                    </mat-icon>\n                </div>\n\n                <div class=\"header-right-controls\">\n                    @if(!centerPointOk) {\n                    <mat-icon class=\"warning-icon\" matTooltip=\"Der er ikke noget centerpunkt og det skal der v\u00E6re\"\n                        [matTooltipShowDelay]=\"500\" [matTooltipHideDelay]=\"100\" matTooltipPosition=\"above\">\n                        warning\n                    </mat-icon>\n                    } @else if (allFeaturesOk && endSessionEnabled) {                        \n                        @if (endSessionButtonLabel) {\n                            <button (click)=\"endSession()\" matTooltip=\"Afslut\" [matTooltipShowDelay]=\"500\" [matTooltipHideDelay]=\"100\" matTooltipPosition=\"above\">\n                                {{endSessionButtonLabel}}\n                            </button>\n                            } @else {\n                            <mat-icon class=\"end-session-icon\" (click)=\"endSession()\" matTooltip=\"Afslut\"\n                                [matTooltipShowDelay]=\"500\" [matTooltipHideDelay]=\"100\" matTooltipPosition=\"above\">\n                                done_all\n                            </mat-icon>\n                        }\n                    }\n                </div>\n            </div>\n        }\n\n        @if(!collapsed) {\n        <div class=\"active-objects-content\">\n            <div class=\"item-list\">\n                @for(item of activeFeatures; track item.id) {\n                <div class=\"item\" [class.listhighlight]=\"listHighlightedIds.has(item.id)\" [attr.data-id]=\"item.id\">\n                    <div class=\"item-text\">\n                        <span (click)=\"highlight(item.id)\" class=\"item-id\">{{item.display}} {{item.area}}</span>\n                        @if(item.containedMissingIn && item.containedMissingIn.length > 0) {\n                        <div class=\"item-warning\">\n                            <mat-icon>error</mat-icon>\n                            <span>Udenfor {{item.containedMissingIn.join(', ')}}</span>\n                        </div>\n                        }\n                    </div>\n                    <img \n                        [src]=\"wktIconBase64\" \n                        class=\"compact-icon custom-image-icon\"\n                        (click)=\"showItemWKT(item.feature)\" \n                        matTooltip=\"Vis WKT\" \n                        [matTooltipShowDelay]=\"200\"\n                        [matTooltipHideDelay]=\"300\" \n                        matTooltipClass=\"custom-tooltip\"\n                        matTooltipPosition=\"below\"\n                        alt=\"Vis WKT\">\n                        \n\n                    @if(!item.locked) {\n                    <mat-icon (click)=\"delete(item.id)\" matTooltip=\"Slet\" [matTooltipShowDelay]=\"500\"\n                        [matTooltipHideDelay]=\"100\" matTooltipPosition=\"above\">\n                        delete\n                    </mat-icon>\n                    }\n                </div>\n                }\n            </div>\n\n        </div>\n        }\n    </div>\n</div>", styles: [".active-objects-wrapper{position:absolute;top:0!important;left:0!important;margin:0!important;z-index:2;box-shadow:0 2px 10px #0000001a;width:350px;transition:width .3s ease,max-width .3s ease;border-radius:5px!important}.active-objects-wrapper.collapsed .drag-handle-active-objects .active-object-icon{cursor:default!important}.active-objects-wrapper.collapsed .drag-handle-active-objects .right-icons .toggle-icon{cursor:pointer!important}.active-objects-wrapper :not(.collapsed){max-width:350px}.active-objects-wrapper.cdk-drag-dragging{opacity:.8;z-index:1001}.active-count{color:#fff;margin-bottom:10px}.listhighlight{color:#0af!important;font-weight:700}.item{display:flex;justify-content:space-between;align-items:center;padding:0 14px;border-radius:5px;background:transparent!important;transition:all .2s ease;color:#fff;min-height:40px;cursor:default}.item .item-text{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden;gap:4px}.item .item-text .item-warning{display:inline-flex;align-items:center;gap:6px;font-size:11px;width:fit-content;max-width:100%;color:#dfca0e;margin-top:2px;margin-bottom:2px}.item .item-text .item-warning mat-icon{font-size:14px;width:14px;height:14px;color:#dfca0e;margin:0;cursor:default;flex-shrink:0}.item .item-text .item-warning mat-icon:hover{color:#ccb913}.item .item-text .item-warning span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}.item .item-id{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:250px}.item .item-area{color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:250px}.item mat-icon{cursor:pointer;color:#bdc1c3cc;font-size:18px;width:18px;height:18px;flex-shrink:0;margin-left:8px;transition:color .2s ease,background .2s ease}.item mat-icon:hover{color:#d3d3d3}.highlight-active{color:#6ccb78!important;transition:all .2s ease}.drag-handle-active-objects .active-object-icon{cursor:default!important;transition:all .2s ease;-webkit-user-select:none;user-select:none;font-size:18px!important;display:flex;align-items:center;justify-content:center;flex-shrink:0}.drag-handle-active-objects .right-icons{display:flex;align-items:center;gap:7px}.drag-handle-active-objects .right-icons .toggle-icon{cursor:pointer!important;transition:all .2s ease;-webkit-user-select:none;user-select:none;font-size:18px!important;display:flex;align-items:center;justify-content:center;flex-shrink:0}.drag-handle-active-objects .right-icons .toggle-icon:hover{color:#d3d3d3}.active-objects-container{display:flex;flex-direction:column;width:100%;transition:all .3s ease;cursor:default;box-sizing:border-box;border-bottom-left-radius:5px!important;border-bottom-right-radius:5px!important}.active-objects-container .panel-header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:8px 12px;cursor:default;background:color-mix(in srgb,#000 70%,transparent);border-bottom:1px solid rgba(255,255,255,.1)}.active-objects-container .collapsed-title{color:#fff;font-weight:600;font-size:12px;padding:8px 4px;cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .2s ease;white-space:nowrap;text-align:center}.active-objects-container .collapsed-title:hover{color:#1976d2}.active-objects-container input[type=range]{width:95%;height:4px;margin:8px auto;-webkit-appearance:none;background:#fff3;border-radius:2px;outline:none}.active-objects-container input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#fff;cursor:pointer;transition:background .2s ease}.active-objects-container input[type=range]::-webkit-slider-thumb:hover{background:#6ccb78}.active-objects-container input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#fff;cursor:pointer;border:none}.active-objects-container input[type=range]::-moz-range-thumb:hover{background:#6ccb78}.header-icons{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;padding:5px 10px!important}.header-icons .header-left-controls,.header-icons .header-right-controls{display:flex;align-items:center;gap:8px}.header-icons .header-right-controls button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:0 12px;height:26px;min-width:56px;max-width:150px;background:linear-gradient(135deg,#6ccb781f,#6ccb780f);border:1px solid rgba(108,203,120,.55);border-radius:5px;color:#6ccb78;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;outline:none;box-shadow:0 0 #6ccb7800,inset 0 1px #ffffff0f;transition:background .22s ease,border-color .22s ease,color .22s ease,box-shadow .22s ease,transform .12s ease}.header-icons .header-right-controls button mat-icon{font-size:14px;width:14px;height:14px;flex-shrink:0;transition:transform .3s ease;margin:0}.header-icons .header-right-controls button:hover{background:linear-gradient(135deg,#6ccb7838,#6ccb781a);border-color:#6ccb78e6;color:#88d994}.header-icons .header-right-controls button:hover mat-icon{transform:scale(1.15)}.header-icons .header-right-controls button:active{background:#6ccb782e;border-color:#6ccb78;color:#fff;box-shadow:0 0 6px #6ccb7833,inset 0 2px 4px #0000004d;transform:translateY(0)}.header-icons .header-right-controls button:focus-visible{outline:2px solid rgba(108,203,120,.6);outline-offset:2px}.header-icons .header-right-controls .end-session-icon{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:5px;color:#fff;cursor:pointer;transition:color .2s ease,background .2s ease,box-shadow .2s ease,transform .12s ease}.header-icons .header-right-controls .end-session-icon:hover{color:#d3d3d3!important}.header-icons .zoom-icon{cursor:pointer;color:#fff;font-size:18px;transition:all .2s ease}.header-icons .zoom-icon:hover{color:#d3d3d3}.header-icons .zoom-icon.zoom-active{color:#d3d3d3!important}.header-icons .reset-icon{cursor:pointer;color:#fff;font-size:18px;transition:all .2s ease}.header-icons .reset-icon:hover{color:#d3d3d3}.header-icons .warning-icon{color:#6ccb78;font-size:18px;cursor:help}.header-icons .end-session-icon{cursor:pointer;color:#6ccb78;font-size:18px;transition:all .2s ease}.header-icons .end-session-icon:hover{color:#d3d3d3}.active-objects-content{display:block;width:100%;max-height:278px;overflow:auto;border-bottom-left-radius:5px!important;border-bottom-right-radius:5px!important}.active-objects-content::-webkit-scrollbar{width:12px}.active-objects-content::-webkit-scrollbar-track{background:#757474;border-radius:8px}.active-objects-content::-webkit-scrollbar-thumb{background:#1a1c1f;border-radius:8px;border:2px solid #2a2c30}.active-objects-content::-webkit-scrollbar-thumb:hover{background:#0f1012}.active-objects-content::-webkit-scrollbar-button{width:12px;height:16px;background:#2a2c30;border:1px solid #1a1c1f}.active-objects-content::-webkit-scrollbar-button:vertical:decrement{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 4l-4 4h8z'/%3E%3C/svg%3E\") no-repeat center;border-radius:8px 8px 0 0}.active-objects-content::-webkit-scrollbar-button:vertical:decrement:hover{background-color:#1a1c1f}.active-objects-content::-webkit-scrollbar-button:vertical:increment{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8l4-4H2z'/%3E%3C/svg%3E\") no-repeat center;border-radius:0 0 8px 8px}.active-objects-content::-webkit-scrollbar-button:vertical:increment:hover{background-color:#1a1c1f}.active-objects-content .zoom-icon{color:#fff;font-size:18px;transition:all .2s ease}.active-objects-content .zoom-icon:hover{color:#6ccb78}.active-objects-content .zoom-icon.zoom-active{color:#6ccb78!important}mat-expansion-panel{border-radius:0!important;box-shadow:none!important;width:100%}mat-expansion-panel:last-child{border-bottom:none}mat-expansion-panel ::ng-deep .mat-expansion-panel-header .mat-content{display:flex;justify-content:space-between;align-items:center;color:#fff}mat-expansion-panel ::ng-deep .mat-expansion-panel-body{padding:0}.item-list{display:flex;flex-direction:column}@media (max-width: 768px){.active-objects-wrapper{right:.5em;top:8em;width:280px}.item{padding:6px 10px}}@media (max-width: 480px){.active-objects-wrapper{right:.5em;left:.5em;width:auto}.item-list{max-height:200px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$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: i1$3.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i5.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
@@ -5181,43 +5194,47 @@ class MapSearchComponent {
         }
     }
     async _loadPosition(collapsed) {
-        try {
-            // Default height and width when collapsed
-            let widgetHeight = WidgetConstants.collapsedHeight;
-            let widgetWidth = WidgetConstants.collapsedWidth;
-            if (!collapsed) {
-                // Custom height and width when expanded
-                widgetHeight = WidgetConstants.searchHeight;
-                widgetWidth = WidgetConstants.searchWidth;
-            }
-            const widgetPositionOptions = {
-                initialPosition: this.profile.searchInitialPosition,
-                widgetName: this.POSITION_STORAGE_KEY,
-                widgetHeight: widgetHeight,
-                widgetWidth: widgetWidth
-            };
-            const savedPosition = localStorage.getItem(this.POSITION_STORAGE_KEY);
-            if (this._profileService.getProfileVersionChanged() &&
-                this.profile?.searchInitialPosition) {
-                //Profile version changed in backend, use that
-                this.dragPosition = await this._layoutService.calculateWidgetPosition(widgetPositionOptions);
-            }
-            else if (savedPosition) {
-                this.dragPosition = JSON.parse(savedPosition);
-            }
-            else if (this.profile && this.profile.searchInitialPosition) {
-                this.dragPosition = await this._layoutService.calculateWidgetPosition(widgetPositionOptions);
+        this._layoutService.mapSetSubject
+            .pipe(filter(mapSet => mapSet === true), take(1))
+            .subscribe(async (mapSet) => {
+            try {
+                // Default height and width when collapsed
+                let widgetHeight = WidgetConstants.collapsedHeight;
+                let widgetWidth = WidgetConstants.collapsedWidth;
+                if (!collapsed) {
+                    // Custom height and width when expanded
+                    widgetHeight = WidgetConstants.searchHeight;
+                    widgetWidth = WidgetConstants.searchWidth;
+                }
+                const widgetPositionOptions = {
+                    initialPosition: this.profile.searchInitialPosition,
+                    widgetName: this.POSITION_STORAGE_KEY,
+                    widgetHeight: widgetHeight,
+                    widgetWidth: widgetWidth
+                };
+                const savedPosition = localStorage.getItem(this.POSITION_STORAGE_KEY);
+                if (this._profileService.getProfileVersionChanged() &&
+                    this.profile?.searchInitialPosition) {
+                    //Profile version changed in backend, use that
+                    this.dragPosition = await this._layoutService.calculateWidgetPosition(widgetPositionOptions);
+                }
+                else if (savedPosition) {
+                    this.dragPosition = JSON.parse(savedPosition);
+                }
+                else if (this.profile && this.profile.searchInitialPosition) {
+                    this.dragPosition = await this._layoutService.calculateWidgetPosition(widgetPositionOptions);
+                }
+                else {
+                    // Default position for search
+                    this.dragPosition = { x: WidgetConstants.searchDefaultX, y: WidgetConstants.searchDefaultY };
+                    this._savePosition(this.dragPosition);
+                }
             }
-            else {
-                // Default position for search
-                this.dragPosition = { x: WidgetConstants.searchDefaultX, y: WidgetConstants.searchDefaultY };
-                this._savePosition(this.dragPosition);
+            catch (error) {
+                console.error('Error loading position from localStorage:', error);
+                this.dragPosition = { x: 0, y: 0 };
             }
-        }
-        catch (error) {
-            console.error('Error loading position from localStorage:', error);
-            this.dragPosition = { x: 0, y: 0 };
-        }
+        });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MapSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: MapSearchComponent, isStandalone: true, selector: "lib-map-search", inputs: { profile: "profile" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"search-container global-wrapper-container\" \n  cdkDrag \n  cdkDragBoundary=\".map-container\" \n  [cdkDragFreeDragPosition]=\"dragPosition\"\n  (cdkDragEnded)=\"onDragEnded($event)\"\n  [class.collapsed]=\"collapsed\">\n  <div class=\"drag-handle\" cdkDragHandle>\n    <mat-icon \n      class=\"icon-left\" \n      matTooltip=\"S\u00F8g\" \n      [matTooltipShowDelay]=\"500\"\n      [matTooltipHideDelay]=\"100\" \n      matTooltipPosition=\"above\">\n      manage_search\n    </mat-icon>\n    <div class=\"right-icons\">    \n      <mat-icon class=\"toggle-icon\" (click)=\"toggleSearch()\">\n        {{ collapsed ? 'flip_to_front' : 'remove' }}\n      </mat-icon>\n    </div>\n  </div>\n\n  <div class=\"search-content\" *ngIf=\"!collapsed\">\n    <label class=\"search-label\">S\u00F8g</label>\n    <mat-form-field appearance=\"outline\" class=\"search-field\">\n      <mat-icon matPrefix class=\"search-icon\">search</mat-icon>\n      <input\n        type=\"text\"\n        matInput\n        [(ngModel)]=\"searchAddress\"\n        [matAutocomplete]=\"auto\"\n        (input)=\"filterResults()\"\n      />\n      <mat-autocomplete #auto=\"matAutocomplete\" [displayWith]=\"displaySearchFn\">\n        <ng-container *ngFor=\"let result of filteredResults\" >\n          <mat-option disabled class=\"result-title\">\n            {{ result.title }} ({{result.items.length}}\n            <span *ngIf=\"result.total\"> af {{result.total }}</span>)\n          </mat-option>\n          <mat-option *ngFor=\"let item of result.items\" [value]=\"item\" class=\"custom-option\"\n            (mouseenter)=\"highlight(item.wkt, $event)\">\n            <div class=\"item-container\">\n              <span class=\"item-header\">{{item.header}}</span>\n            </div>\n          </mat-option>\n        </ng-container>\n      </mat-autocomplete>\n    </mat-form-field>\n  </div>\n</div>", styles: [".search-container{position:absolute;top:0!important;left:0!important;margin:0!important;z-index:2;max-width:550px;min-width:48px;border-radius:5px;transition:width .3s ease,max-width .3s ease}.search-container.collapsed .drag-handle{box-sizing:border-box}.search-container.collapsed .drag-handle .icon-left{margin-left:3px}.search-container.cdk-drag-dragging{opacity:.8;cursor:grab}@media (max-width: 768px){.search-container{left:2em;top:1.5em;max-width:450px}.search-container.collapsed{width:90px!important;min-width:90px!important;max-width:90px!important}}@media (max-width: 480px){.search-container{left:1.5em;right:1.5em;max-width:calc(100vw - 3em)}.search-container.collapsed{width:90px!important;min-width:90px!important;max-width:90px!important}}.compact-icon.custom-image-icon{padding:4px;background:none;border:1px solid rgba(255,255,255,.2)}.compact-icon.custom-image-icon img{width:100%;height:100%;object-fit:contain;transition:filter .2s ease}.compact-icon.custom-image-icon.active{background:linear-gradient(147.38deg,#0ea5e9,#075985);border-color:transparent;box-shadow:0 4px 12px #0ea5e966}.compact-icon.custom-image-icon.active img{filter:brightness(0) invert(1)}.compact-icon.custom-image-icon.active:hover{box-shadow:0 6px 20px #0ea5e980}.compact-icon.custom-image-icon:hover:not(.active){background:color-mix(in srgb,#000 70%,transparent);border-color:#0ea5e9;box-shadow:0 2px 8px #0ea5e94d}.compact-icon.custom-image-icon:hover:not(.active) img{filter:brightness(0) invert(.8)}.drag-handle .icon-left{cursor:default!important}.right-icons{display:flex;align-items:center;gap:6px}.search-content{display:flex;flex-direction:column;transition:all .3s ease;box-sizing:border-box;border-radius:0 0 5px 5px;padding:8px 12px 4px;gap:4px}.search-label{color:#fff}.compact-icon{transition:all .3s cubic-bezier(.4,0,.2,1)}.compact-icon.custom-image-icon{background:none;border:1px solid rgba(255,255,255,.2);border-radius:4px;cursor:pointer}.toggle-icon{cursor:pointer!important;transition:all .2s ease;-webkit-user-select:none;user-select:none;font-size:18px!important;display:flex;align-items:center;justify-content:center;flex-shrink:0}.toggle-icon:hover{color:#d3d3d3}.search-field{width:100%;min-width:350px;flex:1}.search-field .search-icon{color:#fff}.search-field ::ng-deep .mat-mdc-form-field-label{color:#fff!important}::ng-deep .mat-mdc-option .mat-pseudo-checkbox-minimal{color:#fff!important}::ng-deep .mat-mdc-autocomplete-panel{border-radius:5px!important;background:#4c4d51!important;box-shadow:0 8px 24px #00000026!important;overflow-y:auto!important;font-family:Avenir Next W01,Lato,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar{width:12px}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-track{background:#757474;border-radius:8px}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-thumb{background:#1a1c1f;border-radius:8px;border:2px solid #2a2c30}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-thumb:hover{background:#0f1012}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-button{width:12px;height:16px;background:#2a2c30;border:1px solid #1a1c1f}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-button:vertical:decrement{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 4l-4 4h8z'/%3E%3C/svg%3E\") no-repeat center;border-radius:8px 8px 0 0}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-button:vertical:decrement:hover{background-color:#1a1c1f}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-button:vertical:increment{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8l4-4H2z'/%3E%3C/svg%3E\") no-repeat center;border-radius:0 0 8px 8px}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-button:vertical:increment:hover{background-color:#1a1c1f}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option{min-height:30px!important;border-radius:5px!important;overflow-x:hidden}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option:hover{background-color:#ffffff1a!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mat-mdc-option-active,::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mdc-list-item--selected{background-color:#ffffff1a!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .mdc-list-item__primary-text{font-size:14px;width:100%;opacity:1!important}.search-result-option{display:flex;flex-direction:column;gap:8px}.result-title{font-weight:600;color:#bdc1c3cc!important}.item-container{display:flex;align-items:center;justify-content:space-between;width:100%}.item-container .item-header{color:#fff!important;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.search-result-item{display:flex;align-items:center;justify-content:space-between;padding:6px 4px;border-radius:5px;margin-left:4px;transition:all .6s ease}.search-result-item:hover{color:#f4f4f5;background:#ffffff1a}.search-result-item .item-header{font-size:14px;color:#fff!important;flex:1;font-weight:500}::ng-deep .mat-mdc-form-field:not(.mat-form-field-disabled) .mat-mdc-floating-label.mdc-floating-label{color:#fff!important}@media (max-width: 768px){.search-container{left:2em;top:1.5em;max-width:450px}.search-container.collapsed{width:88px;min-width:88px;max-width:88px}}@media (max-width: 480px){.search-container{left:1.5em;right:1.5em;max-width:calc(100vw - 3em)}.search-container.collapsed{width:40px;min-width:40px;max-width:40px;right:auto}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$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: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i5$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i5$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i5.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
@@ -5320,43 +5337,47 @@ class LegendsListComponent {
         }
     }
     async _loadPosition(collapsed) {
-        try {
-            // Default height and width when collapsed
-            let widgetHeight = WidgetConstants.collapsedHeight;
-            let widgetWidth = WidgetConstants.collapsedWidth;
-            if (!collapsed) {
-                // Custom height and width when expanded
-                widgetHeight = WidgetConstants.legendsHeight;
-                widgetWidth = WidgetConstants.legendsWidth;
-            }
-            const widgetPositionOptions = {
-                initialPosition: this.profile.legendsListInitialPosition,
-                widgetName: this.POSITION_STORAGE_KEY,
-                widgetHeight: widgetHeight,
-                widgetWidth: widgetWidth
-            };
-            const savedPosition = localStorage.getItem(this.POSITION_STORAGE_KEY);
-            if (this._profileService.getProfileVersionChanged() &&
-                this.profile?.legendsListInitialPosition) {
-                //Profile version changed in backend, use that
-                this.dragPosition = await this._layoutService.calculateWidgetPosition(widgetPositionOptions);
-            }
-            else if (savedPosition) {
-                this.dragPosition = JSON.parse(savedPosition);
-            }
-            else if (this.profile?.legendsListInitialPosition) {
-                this.dragPosition = await this._layoutService.calculateWidgetPosition(widgetPositionOptions);
+        this._layoutService.mapSetSubject
+            .pipe(filter(mapSet => mapSet === true), take(1))
+            .subscribe(async (mapSet) => {
+            try {
+                // Default height and width when collapsed
+                let widgetHeight = WidgetConstants.collapsedHeight;
+                let widgetWidth = WidgetConstants.collapsedWidth;
+                if (!collapsed) {
+                    // Custom height and width when expanded
+                    widgetHeight = WidgetConstants.legendsHeight;
+                    widgetWidth = WidgetConstants.legendsWidth;
+                }
+                const widgetPositionOptions = {
+                    initialPosition: this.profile.legendsListInitialPosition,
+                    widgetName: this.POSITION_STORAGE_KEY,
+                    widgetHeight: widgetHeight,
+                    widgetWidth: widgetWidth
+                };
+                const savedPosition = localStorage.getItem(this.POSITION_STORAGE_KEY);
+                if (this._profileService.getProfileVersionChanged() &&
+                    this.profile?.legendsListInitialPosition) {
+                    //Profile version changed in backend, use that
+                    this.dragPosition = await this._layoutService.calculateWidgetPosition(widgetPositionOptions);
+                }
+                else if (savedPosition) {
+                    this.dragPosition = JSON.parse(savedPosition);
+                }
+                else if (this.profile?.legendsListInitialPosition) {
+                    this.dragPosition = await this._layoutService.calculateWidgetPosition(widgetPositionOptions);
+                }
+                else {
+                    // Default position for legends list
+                    this.dragPosition = { x: WidgetConstants.legendsDefaultX, y: WidgetConstants.legendsDefaultY };
+                    this._savePosition(this.dragPosition);
+                }
             }
-            else {
-                // Default position for legends list
-                this.dragPosition = { x: WidgetConstants.legendsDefaultX, y: WidgetConstants.legendsDefaultY };
-                this._savePosition(this.dragPosition);
+            catch (error) {
+                console.error('Error loading legends list position from localStorage:', error);
+                this.dragPosition = { x: 0, y: 0 };
             }
-        }
-        catch (error) {
-            console.error('Error loading legends list position from localStorage:', error);
-            this.dragPosition = { x: 0, y: 0 };
-        }
+        });
     }
     _setFilteredLegends() {
         if (!this.profile?.id) {
@@ -5648,8 +5669,11 @@ class FastSwitchSelectorComponent {
     config = inject(GISKOMPONENT_CONFIG);
     map;
     profile;
-    collapsed = true;
     selectedLayer;
+    nextLayer;
+    selectedLayerIndex = 0;
+    nextLayerIndex = 0;
+    nextLayerTooltip = '';
     layerGroup = [];
     fastSwitchLayers = [];
     _baseUrl = this.config.apiBaseUrl;
@@ -5665,24 +5689,30 @@ class FastSwitchSelectorComponent {
                     }
                     else {
                         this._layerHelper.toggleLayerInMap(this.map, layer.id, true);
+                        this.nextLayerTooltip = `Vis "${this.layerGroup[1]?.name}" som baggrundskort`;
                     }
                 });
                 if (this.layerGroup.length > 0)
                     this.selectedLayer = this.layerGroup[0];
+                if (this.layerGroup.length > 1)
+                    this.nextLayer = this.layerGroup[1];
             });
         }
     }
-    toggleCollapsed() {
-        this.collapsed = !this.collapsed;
-    }
-    layerChanged(layer) {
-        // Turn off current layer
-        if (this.selectedLayer?.id)
+    toggleNextLayer() {
+        if (this.selectedLayer?.id) {
+            // Turn off current layer
             this._layerHelper.toggleLayerInMap(this.map, this.selectedLayer?.id, false);
-        this.selectedLayer = layer;
-        // Turn on new layer
-        this._layerHelper.toggleLayerInMap(this.map, layer.id, true);
-        this.collapsed = true;
+            this.selectedLayerIndex = this.selectedLayerIndex < (this.layerGroup.length - 1) ?
+                this.selectedLayerIndex + 1 : 0; // Go back to first element when array is traversed
+            this.selectedLayer = this.layerGroup[this.selectedLayerIndex];
+            this.nextLayerIndex = this.selectedLayerIndex < (this.layerGroup.length - 1) ?
+                this.selectedLayerIndex + 1 : 0; // Go back to first element when array is traversed
+            this.nextLayerTooltip = `Vis "${this.layerGroup[this.nextLayerIndex]?.name}" som baggrundskort`;
+            this.nextLayer = this.layerGroup[this.nextLayerIndex];
+            // Turn on new layer
+            this._layerHelper.toggleLayerInMap(this.map, this.selectedLayer.id, true);
+        }
     }
     _getImageUrl(fileName) {
         return `${this._baseUrl}/api/image/${fileName}`;
@@ -5728,12 +5758,12 @@ class FastSwitchSelectorComponent {
         }));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FastSwitchSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: FastSwitchSelectorComponent, isStandalone: true, selector: "lib-fast-switch-selector", inputs: { map: "map", profile: "profile" }, usesOnChanges: true, ngImport: i0, template: "@if (layerGroup && layerGroup.length > 0) {\n    <div class=\"fast-switch-body-wrapper\" \n        [class.collapsed]=\"collapsed\">\n        @if (collapsed && selectedLayer?.imageUrl) {\n            <div class=\"fast-switch-collapsed\">\n                <div class=\"legend\">\n                    <img [src]=\"selectedLayer?.imageUrl\" class=\"legend-thumbnail\" (click)=\"toggleCollapsed()\"/>\n                </div>\n            </div>\n        }\n        @if (!collapsed) {\n            <div class=\"fast-switch-expanded global-wrapper-container\">\n            \n                <div class=\"ol-unselectable ol-control legends-list-body\">\n                    <div class=\"item-list\">\n                    @for (layer of layerGroup; track layer.id; let i = $index) {\n                        @if (layer.imageUrl) {\n                        <mat-expansion-panel [expanded]=\"true\"> \n                            <div class=\"legend\">\n                            <img [src]=\"layer.imageUrl\" class=\"legend-thumbnail\" (click)=\"layerChanged(layer)\"/>\n                            </div>\n                        </mat-expansion-panel>\n                        }\n                    }\n                    </div>\n                </div>\n            </div>\n        }\n    </div>\n}", styles: [".fast-switch-body-wrapper{position:absolute;bottom:100px;left:20px}.fast-switch-body-wrapper .fast-switch-collapsed{width:100px;max-height:100px}.fast-switch-body-wrapper .fast-switch-expanded{width:145px;max-height:610px;position:absolute;bottom:0}.fast-switch-body-wrapper .legends-list-body{bottom:0}.fast-switch-body-wrapper .legend-thumbnail{width:100px;height:100px;border:5px solid white;border-radius:6px}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: DragDropModule }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i6.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatTooltipModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: FastSwitchSelectorComponent, isStandalone: true, selector: "lib-fast-switch-selector", inputs: { map: "map", profile: "profile" }, usesOnChanges: true, ngImport: i0, template: "@if (layerGroup && layerGroup.length > 0) {\n    <div class=\"fast-switch-body-wrapper\" >\n        @if (selectedLayer?.imageUrl) {\n            <div class=\"fast-switch-collapsed\">\n                <div class=\"legend\">\n                    <img [src]=\"nextLayer?.imageUrl\" \n                        class=\"legend-thumbnail\" \n                        (click)=\"toggleNextLayer()\"\n                        [matTooltip]=\"nextLayerTooltip\" \n                        [matTooltipShowDelay]=\"200\"\n                        [matTooltipHideDelay]=\"300\" \n                        matTooltipClass=\"custom-tooltip\"\n                        matTooltipPosition=\"after\"\n                        [alt]=\"nextLayerTooltip\"/>\n                </div>\n            </div>\n        }\n    </div>\n}", styles: [".fast-switch-body-wrapper{position:absolute;bottom:100px;left:20px}.fast-switch-body-wrapper .fast-switch-collapsed{width:100px;max-height:100px}.fast-switch-body-wrapper .fast-switch-expanded{width:145px;max-height:610px;position:absolute;bottom:0}.fast-switch-body-wrapper .legends-list-body{bottom:0}.fast-switch-body-wrapper .legend-thumbnail{width:100px;height:100px;border:5px solid white;border-radius:6px}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: DragDropModule }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FastSwitchSelectorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-fast-switch-selector', imports: [MatFormFieldModule, CommonModule, MatIconModule, FormsModule, DragDropModule,
-                        MatExpansionModule, MatInputModule, MatTooltipModule], template: "@if (layerGroup && layerGroup.length > 0) {\n    <div class=\"fast-switch-body-wrapper\" \n        [class.collapsed]=\"collapsed\">\n        @if (collapsed && selectedLayer?.imageUrl) {\n            <div class=\"fast-switch-collapsed\">\n                <div class=\"legend\">\n                    <img [src]=\"selectedLayer?.imageUrl\" class=\"legend-thumbnail\" (click)=\"toggleCollapsed()\"/>\n                </div>\n            </div>\n        }\n        @if (!collapsed) {\n            <div class=\"fast-switch-expanded global-wrapper-container\">\n            \n                <div class=\"ol-unselectable ol-control legends-list-body\">\n                    <div class=\"item-list\">\n                    @for (layer of layerGroup; track layer.id; let i = $index) {\n                        @if (layer.imageUrl) {\n                        <mat-expansion-panel [expanded]=\"true\"> \n                            <div class=\"legend\">\n                            <img [src]=\"layer.imageUrl\" class=\"legend-thumbnail\" (click)=\"layerChanged(layer)\"/>\n                            </div>\n                        </mat-expansion-panel>\n                        }\n                    }\n                    </div>\n                </div>\n            </div>\n        }\n    </div>\n}", styles: [".fast-switch-body-wrapper{position:absolute;bottom:100px;left:20px}.fast-switch-body-wrapper .fast-switch-collapsed{width:100px;max-height:100px}.fast-switch-body-wrapper .fast-switch-expanded{width:145px;max-height:610px;position:absolute;bottom:0}.fast-switch-body-wrapper .legends-list-body{bottom:0}.fast-switch-body-wrapper .legend-thumbnail{width:100px;height:100px;border:5px solid white;border-radius:6px}\n"] }]
+                        MatExpansionModule, MatInputModule, MatTooltipModule], template: "@if (layerGroup && layerGroup.length > 0) {\n    <div class=\"fast-switch-body-wrapper\" >\n        @if (selectedLayer?.imageUrl) {\n            <div class=\"fast-switch-collapsed\">\n                <div class=\"legend\">\n                    <img [src]=\"nextLayer?.imageUrl\" \n                        class=\"legend-thumbnail\" \n                        (click)=\"toggleNextLayer()\"\n                        [matTooltip]=\"nextLayerTooltip\" \n                        [matTooltipShowDelay]=\"200\"\n                        [matTooltipHideDelay]=\"300\" \n                        matTooltipClass=\"custom-tooltip\"\n                        matTooltipPosition=\"after\"\n                        [alt]=\"nextLayerTooltip\"/>\n                </div>\n            </div>\n        }\n    </div>\n}", styles: [".fast-switch-body-wrapper{position:absolute;bottom:100px;left:20px}.fast-switch-body-wrapper .fast-switch-collapsed{width:100px;max-height:100px}.fast-switch-body-wrapper .fast-switch-expanded{width:145px;max-height:610px;position:absolute;bottom:0}.fast-switch-body-wrapper .legends-list-body{bottom:0}.fast-switch-body-wrapper .legend-thumbnail{width:100px;height:100px;border:5px solid white;border-radius:6px}\n"] }]
         }], propDecorators: { map: [{
                 type: Input
             }], profile: [{
@@ -5803,7 +5833,6 @@ class GisKomponentComponent {
     profileSelected(profileIdentifier) {
         this._profileService.getByIdentifier(profileIdentifier).subscribe({
             next: profile => {
-                console.log("🚀 ~ GisKomponentComponent ~ profileSelected ~ profile:", profile);
                 this._currentItems.profile = profile;
                 this.toolbarCollapsed = profile.toolbarCollapsed;
                 this.selectedProfile = profile;
@@ -5819,7 +5848,6 @@ class GisKomponentComponent {
                 this.currentZoomLevel = profile.zoom ?? 8;
                 this._getCapabilitiesObject(profile).subscribe({
                     next: capabilityObject => {
-                        console.log("🚀 ~ GisKomponentComponent ~ profileSelected ~ capabilityObject:", capabilityObject);
                         let allLayergroups = [...profile.layerGroups];
                         if (profile.fastSwitchLayerGroup) {
                             const mappedFastSwitchGroup = { ...profile.fastSwitchLayerGroup, sortOrder: -1, fastSwitchLayerGroup: true };
@@ -5827,7 +5855,7 @@ class GisKomponentComponent {
                         }
                         const layers = allLayergroups.map((lg) => new OLLayerGroup({
                             layers: lg.layers
-                                .filter(layer => layer.activeInSelector)
+                                .filter(layer => layer.activeInSelector || layer.visible) // # bug 286
                                 .sort((a, b) => a.sortOrder - b.sortOrder)
                                 .map((l, index) => this._mapLayer(l, capabilityObject, 'EPSG:25832', lg.id, lg.fastSwitchLayerGroup === true ? -1 : index)), // for now, we default to EPSG:25832.
                             properties: { id: lg.id }