feat: Option to add WMS layers as one group or separate layers

hslayers · Feb 5, 2024 · a7c8558 · a7c8558
1 parent 870bc5f
commit a7c8558
Show file tree

Hide file tree

Showing 9 changed files with 72 additions and 32 deletions.
diff --git a/projects/hslayers/src/assets/locales/cs.json b/projects/hslayers/src/assets/locales/cs.json
@@ -314,7 +314,9 @@
     "on": "zapnuto",
     "off": "vypnuto",
     "Tile": "Dlaždice",
-    "done": "Hotovo"
+    "done": "Hotovo",
+    "group": "skupina",
+    "separateLayers": "samostatné vrstvy"
   },
   "COMPOSITIONS": {
     "addByAddress": "Přidat kompozici z adresy",
@@ -1033,4 +1035,4 @@
     "waypointLayer": "Vrstva s body trasy",
     "waypoints": "Body trasy"
   }
-}
+}
diff --git a/projects/hslayers/src/assets/locales/en.json b/projects/hslayers/src/assets/locales/en.json
@@ -314,7 +314,9 @@
     "on": "on",
     "off": "off",
     "Tile": "Tile",
-    "done": "Done"
+    "done": "Done",
+    "group": "group",
+    "separateLayers": "separate layers"
   },
   "COMPOSITIONS": {
     "addByAddress": "Add composition by address",
@@ -1033,4 +1035,4 @@
     "waypointLayer": "Waypoint layer",
     "waypoints": "Waypoints"
   }
-}
+}
diff --git a/projects/hslayers/src/assets/locales/sk.json b/projects/hslayers/src/assets/locales/sk.json
@@ -314,7 +314,9 @@
     "on": "zapnuté",
     "off": "vypnuté",
     "Tile": "Dlaždica",
-    "done": "Hotovo"
+    "done": "Hotovo",
+    "group": "skupina",
+    "separateLayers": "samostatné vrstvy"
   },
   "COMPOSITIONS": {
     "addByAddress": "Pridať kompozíciu z adresy",
@@ -1033,4 +1035,4 @@
     "top": "Hore",
     "us inch": "Palec (US)"
   }
-}
+}
diff --git a/projects/hslayers/src/components/add-data/common/common.service.ts b/projects/hslayers/src/components/add-data/common/common.service.ts
@@ -124,20 +124,23 @@ export class HsAddDataCommonService {
   }
 
   /**
-   * Constructs body of LAYER parameter for getMap request
+   * Constructs body of LAYER parameter for getMap request for grouped layer e.g.
+   * for a basemap or thematic layer with property group set to true
    * @param layerOrLayers - layer object or layers received from capabilities. If no layer is provided
    * merge all checked layer ids into one string
    * @param property - layer property
-   * @returns
    */
-  createBasemapName(layerOrLayers: any | Array<any>, property: string): string {
+  getGroupedLayerNames(
+    layerOrLayers: any | Array<any>,
+    property: string,
+  ): string {
     const baseNameParts = [];
     if (Array.isArray(layerOrLayers)) {
       for (const layer of layerOrLayers) {
         if (layer.checked) {
           baseNameParts.push(layer[property]);
         } else if (layer.Layer) {
-          const nested = this.createBasemapName(layer.Layer, property);
+          const nested = this.getGroupedLayerNames(layer.Layer, property);
           nested.length > 0 ? baseNameParts.push(nested) : null;
         }
       }

diff --git a/projects/hslayers/src/components/add-data/common/url/details/details.component.html b/projects/hslayers/src/components/add-data/common/url/details/details.component.html
@@ -1,27 +1,40 @@
 <div [hidden]="!hsAddDataCommonService.showDetails || hsAddDataCommonService.loadingInfo">
   <div class="d-flex flex-column my-3 mb-2">
-    <div class="input-group"
+    <div class="input-group" *ngIf="data.group === true || type !== 'wms'"
       style="box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;">
       <span class="input-group-text control-label">{{'COMMON.title' | translateHs }}</span>
       <input class="form-control" name="baseTitle" [(ngModel)]="data.title" />
     </div>
 
-    <div class="d-flex flex-row justify-content-start align-items-baseline m-1 ">
-      {{'COMMON.addAs' | translateHs }}
-      <div class="btn-group ms-2 mt-2 ">
-        <button type="button" class="btn btn-sm btn-light btn-outline-secondary" (click)="data.base = true"
-          [ngClass]="{'active':data.base}">
-          {{'COMPOSITONKEYWORDS.Basemap' | translateHs }}
-        </button>
-        <button type="button" class="btn btn-sm btn-light btn-outline-secondary " (click)="data.base = false"
-          [ngClass]="{'active': !data.base}">
-          {{'COMMON.layer' | translateHs }}
-        </button>
+    <div class="hs-add-url-wms-addas d-flex flex-row justify-content-start align-items-baseline my-2">
+      <span class="control-label input-group-text">{{'COMMON.addAs' | translateHs }}</span>
+      <div class="d-flex flex-fill gap-2 justify-content-end align-items-center">
+        <div class="btn-group ">
+          <button type="button" class="btn btn-sm btn-outline-secondary" (click)="setBase(true)"
+            [ngClass]="{'active':data.base}">
+            {{'COMPOSITONKEYWORDS.Basemap' | translateHs }}
+          </button>
+          <button type="button" class="btn btn-sm btn-outline-secondary " (click)="setBase(false)"
+            [ngClass]="{'active': !data.base}">
+            {{'COMMON.layer' | translateHs }}
+          </button>
+        </div>
+        <div class="btn-group " *ngIf="type === 'wms'">
+          <button type="button" class="text-capitalize btn btn-sm btn-outline-secondary" (click)="data.group = true"
+            [ngClass]="{'active':data.group}">
+            {{'COMMON.group' | translateHs }}
+          </button>
+          <button type="button" class="text-capitalize btn btn-sm btn-outline-secondary " (click)="data.group = false"
+            [ngClass]="{'active': !data.group}" [disabled]="data.base === true">
+            {{'COMMON.separateLayers' | translateHs }}
+          </button>
+        </div>
       </div>
+
     </div>
   </div>
 
-  <button type="button" class="btn w-100 btn-outline-secondary dropdown-toggle dropdown-toggle-split"
+  <button type="button" class="btn w-100 btn-outline-secondary dropdown-toggle dropdown-toggle-split mb-2"
     (click)="advancedPanelVisible = !advancedPanelVisible">
     {{'COMMON.advancedOptions' | translateHs }}
   </button>
@@ -92,7 +105,6 @@
   <ng-container *ngIf="type === 'wms'">
     <hs-target-position [(addUnder)]="data.add_under"></hs-target-position>
   </ng-container>
-  <hr />
   <hs-layer-table [type]="type" [injectedService]="injectedService"> </hs-layer-table>
   <hs-url-add class="w-100" [injectedService]="injectedService" [services]="data.services" [layers]="data.layers">
   </hs-url-add>

diff --git a/projects/hslayers/src/components/add-data/common/url/details/details.component.ts b/projects/hslayers/src/components/add-data/common/url/details/details.component.ts
@@ -7,6 +7,11 @@ import {HsUrlTypeServiceModel} from '../../../url/models/url-type-service.model'
 @Component({
   selector: 'hs-url-details',
   templateUrl: './details.component.html',
+  styles: `
+  .hs-add-url-wms-addas button{
+    min-width: 5rem
+  }
+`,
 })
 export class HsUrlDetailsComponent implements AfterContentInit {
   @Input() injectedService: HsUrlTypeServiceModel;
@@ -18,6 +23,9 @@ export class HsUrlDetailsComponent implements AfterContentInit {
   constructor(public hsAddDataCommonService: HsAddDataCommonService) {}
   ngAfterContentInit(): void {
     this.data = this.injectedService.data;
+    if (this.type == 'wms') {
+      this.data.group = true;
+    }
     this.getDimensionValues = this.hsAddDataCommonService.getDimensionValues;
   }
 
@@ -26,4 +34,9 @@ export class HsUrlDetailsComponent implements AfterContentInit {
       this.data.srs,
     );
   }
+
+  setBase(state: boolean) {
+    this.data.base = state;
+    this.data.group = state || this.data.group;
+  }
 }
diff --git a/projects/hslayers/src/components/add-data/url/types/data-object.type.ts b/projects/hslayers/src/components/add-data/url/types/data-object.type.ts
@@ -5,6 +5,11 @@ export type UrlDataObject = {
   add_all?: boolean;
   add_under?: Layer<Source>;
   base?: boolean;
+  /**
+   *  Used with WMS to control whether each checked layer should be added as a separate layer
+   * or only one layer grouping all the checked
+   */
+  group?: boolean;
   bbox?: string;
   caps?: any;
   description?: string;

diff --git a/projects/hslayers/src/components/add-data/url/wms/wms.service.ts b/projects/hslayers/src/components/add-data/url/wms/wms.service.ts
@@ -363,7 +363,7 @@ export class HsUrlWmsService implements HsUrlTypeServiceModel {
     this.data.visible = checkedOnly
       ? this.data.layers.filter((l) => l.checked === true).length <= 10
       : false;
-    if (this.data.base) {
+    if (this.data.base || this.data.group) {
       const newLayer = this.getLayer(
         {},
         {
@@ -432,12 +432,13 @@ export class HsUrlWmsService implements HsUrlTypeServiceModel {
       attributions,
       projection: this.data.srs,
       params: {
-        LAYERS: this.data.base
-          ? this.hsAddDataCommonService.createBasemapName(
-              this.data.layers,
-              'Name',
-            )
-          : layer.Name,
+        LAYERS:
+          this.data.base || this.data.group
+            ? this.hsAddDataCommonService.getGroupedLayerNames(
+                this.data.layers,
+                'Name',
+              )
+            : layer.Name,
         INFO_FORMAT: layer.queryable ? options.queryFormat : undefined,
         FORMAT: options.imageFormat,
         VERSION: this.data.version,

diff --git a/projects/hslayers/src/components/layermanager/layermanager-metadata.service.ts b/projects/hslayers/src/components/layermanager/layermanager-metadata.service.ts
@@ -332,7 +332,7 @@ export class HsLayerManagerMetadataService {
    * Helper used in to get usable extent from layers capabilities object
    */
   private getCapsExtent(layerObj: any, layerCaps: HsWmsLayer): Extent {
-    // Extent of selected layer or service in case its missing
+    // Extent of selected layer or service in case it's missing
     let extent =
       (layerObj.EX_GeographicBoundingBox || layerObj.BoundingBox) ??
       (layerCaps.EX_GeographicBoundingBox || layerCaps.BoundingBox);