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

hslayers · Feb 13, 2024 · ea65154 · ea65154
1 parent 5dbec30
commit ea65154
Show file tree

Hide file tree

Showing 9 changed files with 70 additions and 29 deletions.
diff --git a/projects/hslayers/components/add-data/common/url/details/details.component.html b/projects/hslayers/components/add-data/common/url/details/details.component.html
@@ -1,23 +1,36 @@
 <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 mx-2 ">
+        <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>
 

diff --git a/projects/hslayers/components/add-data/common/url/details/details.component.ts b/projects/hslayers/components/add-data/common/url/details/details.component.ts
@@ -7,6 +7,11 @@ import {HsUrlTypeServiceModel} from 'hslayers-ng/types';
 @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;
@@ -26,4 +31,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/components/add-data/url/wms/wms.component.html b/projects/hslayers/components/add-data/url/wms/wms.component.html
@@ -1,7 +1,6 @@
 <form class="form-horizontal" name="frmConnectWms" role="form">
     <hs-common-url type="wms" [(url)]="hsAddDataCommonService.url" (connect)="hsAddDataOwsService.connect()">
     </hs-common-url>
-    <hs-url-progress
-        *ngIf="hsAddDataCommonService.loadingInfo"></hs-url-progress><!-- TODO: Remove function call from template -->
+    <hs-url-progress *ngIf="hsAddDataCommonService.loadingInfo"></hs-url-progress>
     <hs-url-details [injectedService]="hsUrlWmsService" type="wms"></hs-url-details>
-</form>
+</form>
diff --git a/projects/hslayers/shared/add-data/common.service.ts b/projects/hslayers/shared/add-data/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/shared/add-data/url/wms.service.ts b/projects/hslayers/shared/add-data/url/wms.service.ts
@@ -70,6 +70,7 @@ export class HsUrlWmsService implements HsUrlTypeServiceModel {
         trackBy: 'Name',
         nameProperty: 'Title',
       },
+      group: true,
     };
   }
 
@@ -359,7 +360,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(
         {},
         {
@@ -428,12 +429,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/assets/locales/cs.json b/projects/hslayers/src/assets/locales/cs.json
@@ -314,7 +314,10 @@
     "on": "zapnuto",
     "off": "vypnuto",
     "Tile": "Dlaždice",
-    "done": "Hotovo"
+    "done": "Hotovo",
+    "group": "skupina",
+    "single": "singl",
+    "separateLayers": "samostatné vrstvy"
   },
   "COMPOSITIONS": {
     "addByAddress": "Přidat kompozici z adresy",

diff --git a/projects/hslayers/src/assets/locales/en.json b/projects/hslayers/src/assets/locales/en.json
@@ -314,7 +314,10 @@
     "on": "on",
     "off": "off",
     "Tile": "Tile",
-    "done": "Done"
+    "done": "Done",
+    "group": "group",
+    "single": "single",
+    "separateLayers": "separate layers"
   },
   "COMPOSITIONS": {
     "addByAddress": "Add composition by address",

diff --git a/projects/hslayers/src/assets/locales/sk.json b/projects/hslayers/src/assets/locales/sk.json
@@ -314,7 +314,10 @@
     "on": "zapnuté",
     "off": "vypnuté",
     "Tile": "Dlaždica",
-    "done": "Hotovo"
+    "done": "Hotovo",
+    "group": "skupina",
+    "single": "slobodný",
+    "separateLayers": "samostatné vrstvy"
   },
   "COMPOSITIONS": {
     "addByAddress": "Pridať kompozíciu z adresy",

diff --git a/projects/hslayers/types/add-data/data-object.type.ts b/projects/hslayers/types/add-data/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;