HTM-1886 | HTM-1883: Enable choosing a layer style in the viewer when configured

projects/admin-api/src/lib/models/geo-service-layer.model.ts

@@ -1,4 +1,4 @@
-import { WmsStyleModel } from './wms-style.model';
+import { WmsStyleModel } from "@tailormap-viewer/api";
 
 export interface GeoServiceLayerModel {
   id: string;

projects/admin-api/src/lib/models/index.ts

@@ -52,4 +52,3 @@ export * from './taskschedule.model';
 export * from './task.model';
 export * from './task-details.model';
 export * from './admin-server-config.model';
-export * from './wms-style.model';

projects/admin-api/src/lib/models/layer-settings-wms.model.ts

@@ -1,5 +1,5 @@
 import { LayerSettingsModel } from './layer-settings.model';
-import { WmsStyleModel } from './wms-style.model';
+import { WmsStyleModel } from '@tailormap-viewer/api';
 
 export interface LayerSettingsWmsModel extends LayerSettingsModel {
   tilingDisabled?: boolean;

projects/admin-core/src/lib/catalog/geo-service-layer-details/geo-service-layer-details.component.ts

@@ -6,13 +6,14 @@ import {
 import { ActivatedRoute } from '@angular/router';
 import { Store } from '@ngrx/store';
 import { GeoServiceService } from '../services/geo-service.service';
-import { LayerSettingsModel, WmsStyleModel } from '@tailormap-admin/admin-api';
+import { LayerSettingsModel } from '@tailormap-admin/admin-api';
 import { GeoServiceLayerSettingsModel } from '../models/geo-service-layer-settings.model';
 import { AdminSnackbarService } from '../../shared/services/admin-snackbar.service';
 import { UploadCategoryEnum } from '@tailormap-admin/admin-api';
 import { UPLOAD_REMOVE_SERVICE } from '../../shared/components/select-upload/models/upload-remove-service.injection-token';
 import { LegendImageRemoveService } from '../services/legend-image-remove.service';
 import { AdminProjectionsHelper, ProjectionAvailability } from '../../application/helpers/admin-projections-helper';
+import { WmsStyleModel } from '@tailormap-viewer/api';
 
 @Component({
   selector: 'tm-admin-geo-service-layer-details',

projects/admin-core/src/lib/catalog/layer-settings-form/layer-settings-form.component.ts

@@ -4,14 +4,14 @@ import { FormControl, FormGroup } from '@angular/forms';
 import {
   AuthorizationGroups,
   AuthorizationRuleGroup, GeoServiceProtocolEnum, GroupModel, LayerSettingsModel, LayerSettingsWmsModel, LayerSettingsXyzModel,
-  WmsStyleModel,
+
 } from '@tailormap-admin/admin-api';
 import { ComparableValuesArray, FormHelper } from '../../helpers/form.helper';
 import { TypesHelper } from '@tailormap-viewer/shared';
 import { GroupService } from '../../user/services/group.service';
 import { Store } from '@ngrx/store';
 import { selectGeoServiceById, selectGeoServiceLayersByGeoServiceId } from '../state/catalog.selectors';
-import { BoundsModel, TileLayerHiDpiModeEnum } from '@tailormap-viewer/api';
+import { BoundsModel, TileLayerHiDpiModeEnum, WmsStyleModel } from '@tailormap-viewer/api';
 import { ExtendedGeoServiceLayerModel } from '../models/extended-geo-service-layer.model';
 import { ProjectionAvailability } from '../../application/helpers/admin-projections-helper';
 

projects/api/src/lib/models/app-layer.model.ts

@@ -4,6 +4,8 @@ import { LayerSearchIndexModel } from './layer-search-index.model';
 import { HiddenLayerFunctionality } from './hidden-layer-functionality.model';
 import { Tileset3dStyle } from './tileset-3d-style.model';
 
+import { WmsStyleModel } from './wms-style.model';
+
 export interface AppLayerModel {
   id: string;
   layerName: string;
@@ -34,4 +36,6 @@ export interface AppLayerModel {
   webMercatorAvailable?: boolean;
   tileset3dStyle?: Tileset3dStyle;
   hiddenFunctionality?: HiddenLayerFunctionality[] | null;
+  styles?: WmsStyleModel[] | null;
+  selectedStyleName?: string | null;
 }

projects/api/src/lib/models/index.ts

@@ -60,3 +60,4 @@ export * from './tileset-3d-style.model';
 export * from './layer-export-capabilities.model';
 export * from './attachment-attribute.model';
 export * from './attachment-metadata.model';
+export * from './wms-style.model';

projects/core/src/lib/components/legend/legend-layer/legend-layer.component.ts

@@ -1,6 +1,7 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { LegendInfoModel } from '../models/legend-info.model';
 import { LegendImageModel } from '@tailormap-viewer/shared';
+import { ServerType } from '@tailormap-viewer/api';
 
 @Component({
   selector: 'tm-legend-layer',
@@ -16,9 +17,10 @@ export class LegendLayerComponent {
   public showTitle = true;
 
   public getLegend(legendInfo: LegendInfoModel): LegendImageModel {
+    const selectedStyle = legendInfo.layer.styles?.find(s => s.name === legendInfo.layer.selectedStyleName);
     return {
-      url: legendInfo.url,
-      serverType: legendInfo.layer.service?.serverType ?? 'generic',
+      url: selectedStyle?.legendUrl ?? legendInfo.url,
+      serverType: legendInfo.layer.service?.serverType ?? ServerType.GENERIC,
       legendType: legendInfo.layer.legendType ?? 'static',
       title: legendInfo.layer.title,
     };

projects/core/src/lib/components/toc/toc-node-layer/toc-node-layer.component.css

@@ -43,3 +43,7 @@
 .not-visible-on-map .icon {
   color: var(--text-color);
 }
+
+.style-radio-button {
+  font-style: italic;
+}

projects/core/src/lib/components/toc/toc-node-layer/toc-node-layer.component.html

@@ -41,4 +41,23 @@
       </mat-icon>
     }
   </div>
+
+  @if (hasStyles()) {
+    <div class="styles-list-container">
+      <mat-radio-group
+        (change)="styleChanged($event.value)"
+        class="styles-list"
+      >
+        @for (style of node.metadata?.styles || []; track style) {
+          <mat-radio-button [checked]="style === node.metadata?.styles?.[0]"
+                            [value]="style"
+                            class="style-radio-button"
+                            tmTooltip="{{ style.abstractText ?? '' }}"
+          >
+            {{ style.title ?? style.name }}
+          </mat-radio-button>
+        }
+      </mat-radio-group>
+    </div>
+  }
 }

projects/core/src/lib/components/toc/toc-node-layer/toc-node-layer.component.ts

@@ -1,6 +1,6 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { TreeModel } from '@tailormap-viewer/shared';
-import { AppLayerModel } from '@tailormap-viewer/api';
+import { AppLayerModel, WmsStyleModel } from '@tailormap-viewer/api';
 import { ScaleHelper } from '@tailormap-viewer/map';
 
 @Component({
@@ -38,6 +38,9 @@ export class TocNodeLayerComponent {
   @Output()
   public editLayer = new EventEmitter<string>();
 
+  @Output()
+  public changeStyle = new EventEmitter<{ layerId: string; selectedStyle: WmsStyleModel }>();
+
   public isLevel() {
     return this.node?.type === 'level';
   }
@@ -85,4 +88,12 @@ export class TocNodeLayerComponent {
   public editLayerClicked(node: TreeModel<AppLayerModel>) {
     this.editLayer.emit(node.id);
   }
+
+  protected hasStyles() {
+    return !!this.node?.metadata?.styles && this.node.metadata.styles.length > 0;
+  }
+
+  protected styleChanged(style: WmsStyleModel) {
+    this.changeStyle.emit({ layerId: this.node?.id || '', selectedStyle: style });
+  }
 }

projects/core/src/lib/components/toc/toc/toc.component.css

@@ -58,3 +58,7 @@
 tm-toc-filter-input {
   display: block;
 }
+
+.toc-tree ::ng-deep .tree-node-checkbox {
+  align-self: flex-start;
+}

projects/core/src/lib/components/toc/toc/toc.component.html

@@ -9,6 +9,7 @@
     [editableLayerIds]="getCurrentlyEditableLayerIds()"
     (zoomToScale)="zoomToScale($event)"
     (editLayer)="editLayer($event)"
+    (changeStyle)="changeStyle($event)"
   ></tm-toc-node-layer>
 </ng-template>
 

projects/core/src/lib/components/toc/toc/toc.component.ts

@@ -7,14 +7,16 @@ import { map, tap } from 'rxjs/operators';
 import { MenubarService } from '../../menubar';
 import { TocMenuButtonComponent } from '../toc-menu-button/toc-menu-button.component';
 import { Store } from '@ngrx/store';
-import { AppLayerModel, AuthenticatedUserService, BaseComponentTypeEnum, TocConfigModel } from '@tailormap-viewer/api';
+import { AppLayerModel, AuthenticatedUserService, BaseComponentTypeEnum, TocConfigModel, WmsStyleModel } from '@tailormap-viewer/api';
 import { MapService } from '@tailormap-viewer/map';
 import { selectFilteredLayerTree, selectFilterEnabled } from '../state/toc.selectors';
 import { toggleFilterEnabled } from '../state/toc.actions';
 import {
   select3dTilesLayers, selectEditableLayers, selectIn3dView, selectLayersWithoutWebMercatorIds, selectSelectedNode, selectSelectedNodeId,
 } from '../../../map/state/map.selectors';
-import { moveLayerTreeNode, setLayerVisibility, toggleLevelExpansion, toggleSelectedLayerId } from '../../../map/state/map.actions';
+import {
+  moveLayerTreeNode, setLayerStyle, setLayerVisibility, toggleLevelExpansion, toggleSelectedLayerId,
+} from '../../../map/state/map.actions';
 import { selectFilteredLayerIds } from '../../../state/filter-state/filter.selectors';
 import { setEditActive, setSelectedEditLayer } from '../../edit/state/edit.actions';
 import { ComponentConfigHelper } from '../../../shared';
@@ -164,4 +166,9 @@ export class TocComponent implements OnInit, OnDestroy {
     this.store$.dispatch(setSelectedEditLayer( { layer }));
     this.store$.dispatch(setEditActive({ active: true }));
   }
+
+  protected changeStyle({ layerId, selectedStyle }: { layerId: string; selectedStyle: WmsStyleModel }) {
+    this.store$.dispatch(setLayerStyle({ layerId, selectedStyleName: selectedStyle.name }));
+    this.mapService.setLayerStyle(layerId, selectedStyle.name);
+  }
 }

projects/core/src/lib/components/toolbar/simple-search/simple-search.component.ts

@@ -197,7 +197,6 @@ export class SimpleSearchComponent implements OnInit {
   private moveSummeryUp() {
     const summary = document.querySelector('.result-summary');
     const panel = document.querySelector('.search-panel');
-    console.debug('Moving summary up', summary, panel);
     if (!summary || !panel || summary.parentElement !== panel) {
       return;
     }

projects/core/src/lib/map/helpers/layer-model.helper.ts

@@ -4,6 +4,9 @@ import { AppLayerModel, ServiceModel, ServiceProtocol } from '@tailormap-viewer/
 export class LayerModelHelper {
 
   public static getLayerWithInitialValues(layer: AppLayerModel): AppLayerWithInitialValuesModel {
+    if (layer.styles?.length) {
+      layer.selectedStyleName ??= layer.styles[0].name;
+    }
     return {
       ...layer,
       initialValues: {

projects/core/src/lib/map/services/application-map.service.ts

@@ -197,6 +197,8 @@ export class ApplicationMapService implements OnDestroy {
         filter: typeof extendedAppLayer.filter === 'string' ? extendedAppLayer.filter : undefined,
         language: service.serverType === ServerType.GEOSERVER ? this.localeId : undefined,
         webMercatorAvailable: extendedAppLayer.webMercatorAvailable,
+        styles: extendedAppLayer.styles,
+        selectedStyleName: extendedAppLayer.selectedStyleName,
       };
       return of(layer);
     }

projects/core/src/lib/map/state/map.actions.ts

@@ -64,6 +64,12 @@ export const setLayerOpacity = createAction(
   `${mapActionsPrefix} Set Layer Opacity`,
   props<{ opacity: Array<{ id: string; opacity: number }> }>(),
 );
+
+export const setLayerStyle = createAction(
+  `${mapActionsPrefix} Set Layer Style`,
+  props<{ layerId: string; selectedStyleName: string }>(),
+);
+
 export const addLayerDetails = createAction(
   `${mapActionsPrefix} Add Layer Details`,
   props<{ layerDetails: LayerDetailsModel }>(),

projects/core/src/lib/map/state/map.reducer.ts

@@ -204,6 +204,19 @@ const onSetLayerOpacity = (state: MapState, payload: ReturnType<typeof MapAction
   }),
 });
 
+const onSetLayerStyle = (state: MapState, payload: ReturnType<typeof MapActions.setLayerStyle>): MapState => ({
+  ...state,
+  layers: state.layers.map(layer => {
+    if (payload.layerId === layer.id) {
+      return {
+        ...layer,
+        selectedStyleName: payload.selectedStyleName,
+      };
+    }
+    return layer;
+  }),
+});
+
 const onAddLayerDetails = (
   state: MapState,
   payload: ReturnType<typeof MapActions.addLayerDetails>,
@@ -245,6 +258,7 @@ const mapReducerImpl = createReducer<MapState>(
   on(MapActions.setSelectedBackgroundNodeId, onSetSelectedBackgroundNodeId),
   on(MapActions.setSelectedTerrainNodeId, onSetSelectedTerrainNodeId),
   on(MapActions.setLayerOpacity, onSetLayerOpacity),
+  on(MapActions.setLayerStyle, onSetLayerStyle),
   on(MapActions.addLayerDetails, onAddLayerDetails),
   on(MapActions.updateLayerTreeNodes, onUpdateLayerTreeNodes),
   on(MapActions.toggleIn3dView, onToggleIn3DView),

projects/map/src/lib/helpers/ol-layer.helper.ts

@@ -35,6 +35,7 @@ export interface LayerProperties {
 }
 
 interface WmsServiceParamsModel {
+  STYLES: string;
   LAYERS: string;
   VERSION: string;
   QUERY_LAYERS?: string;
@@ -385,6 +386,7 @@ export class OlLayerHelper {
       VERSION: '1.3.0',
       QUERY_LAYERS: layer.queryLayers,
       TRANSPARENT: 'TRUE',
+      STYLES: '',
     };
     if (layer.filter && layer.serverType === TMServerType.GEOSERVER) {
       // TODO: implement filtering for other servers than geoserver (transform CQL to SLD for SLD_BODY param)
@@ -396,6 +398,9 @@ export class OlLayerHelper {
     if (addCacheBust) {
       params.CACHE = Date.now();
     }
+    if (layer.styles && layer.selectedStyleName) {
+      params.STYLES = layer.selectedStyleName;
+    }
     return params;
   }
 

projects/map/src/lib/map-service/map.service.ts

@@ -65,6 +65,13 @@ export class MapService {
       });
   }
 
+  public setLayerStyle(layerId: string, styleName: string) {
+    this.getLayerManager$().pipe(take(1))
+      .subscribe(manager => {
+        manager.setLayerStyle(layerId, styleName);
+      });
+  }
+
   public getLayerManager$(): Observable<LayerManagerModel> {
     return this.map.getLayerManager$();
   }

projects/map/src/lib/models/layer-manager.model.ts

@@ -15,5 +15,6 @@ export interface LayerManagerModel {
   setLayerOpacity(layerId: string, opacity: number): void;
   setLayerOrder(layerIds: string[]): void;
   refreshLayer(layerId: string): void;
+  setLayerStyle(layerId: string, styleName: string): void;
   getLegendUrl(layerId: string): string;
 }

projects/map/src/lib/models/wms-layer.model.ts

@@ -1,5 +1,5 @@
 import { ServiceLayerModel } from './service-layer.model';
-import { ServerType } from '@tailormap-viewer/api';
+import { ServerType, WmsStyleModel } from '@tailormap-viewer/api';
 
 export interface WMSLayerModel extends ServiceLayerModel {
   layers: string;
@@ -8,4 +8,6 @@ export interface WMSLayerModel extends ServiceLayerModel {
   tilingDisabled?: boolean;
   tilingGutter?: number;
   language?: string;
+  styles?: WmsStyleModel[] | null;
+  selectedStyleName?: string | null;
 }

projects/map/src/lib/openlayers-map/open-layers-layer-manager.ts

@@ -273,6 +273,15 @@ export class OpenLayersLayerManager implements LayerManagerModel {
     }
   }
 
+  public setLayerStyle(layerId: string, styleName: string) {
+    const layer = this.layers.get(layerId);
+    if (!layer || !isOpenLayersWMSLayer(layer)) {
+      return;
+    }
+    layer.getSource()?.updateParams({ STYLES: styleName });
+    this.refreshLayer(layerId);
+  }
+
   public getLegendUrl(layerId: string): string {
     const layer = this.layers.get(layerId);
     if (!layer) {

projects/shared/src/lib/components/tree/tree.component.html

@@ -22,13 +22,15 @@
                           [checked]="isChecked(node)"
                           [disabled]="readOnlyMode"
                           (click)="$event.stopPropagation()"
-                          (change)="toggleLeafChecked(node)"></mat-checkbox>
+                          (change)="toggleLeafChecked(node)"
+                          class="tree-node-checkbox"></mat-checkbox>
           } @else if (useRadioInputs) {
             <mat-radio-button [disabled]="readOnlyMode"
                               [checked]="isChecked(node)"
                               [aria-label]="'toggle ' + node.label"
                               (click)="handleRadioChange(node, $event)"
-                              [value]="node"></mat-radio-button>
+                              [value]="node"
+                              class="tree-radio-button"></mat-radio-button>
           }
         } @else {
           @if (!hideRootCollapseArrow || node.level !== 0) {
@@ -45,7 +47,8 @@
                           (click)="$event.stopPropagation()"
                           (change)="toggleGroupChecked(node)"
                           [checked]="isChecked(node)"
-                          [indeterminate]="isIndeterminate(node)"></mat-checkbox>
+                          [indeterminate]="isIndeterminate(node)"
+                          class="tree-node-checkbox"></mat-checkbox>
           }
         }
         <div class="tree-node__drag-container"