WMS feature info no appending

projects/hslayers/components/query/default-info-panel-body/default-info-panel-body.component.html

@@ -1,29 +1,33 @@
 @if ((hsQueryBaseService.features.length > 0) || (hsQueryBaseService.coordinates.length > 0)) {
-  <div
-    class="card hs-main-panel">
-    <div class="card-body">
-      <div ngbDropdown [hidden]="!(hsQueryBaseService.featureInfoHtmls.length > 0)">
-        <button ngbDropdownToggle class="btn btn-light w-100 rounded-0">
-          {{'QUERY.featureInfo' | translateHs }}
-        </button>
-        @for (html of hsQueryBaseService.featureInfoHtmls; track html) {
-          <div ngbDropdownMenu class="position-relative w-100"
-          [innerHtml]="html"></div>
-        }
-      </div>
-      <hs-query-feature-list></hs-query-feature-list>
-      <table class="table table-striped" style="table-layout:fixed"
-        [hidden]="!(hsQueryBaseService.attributes.length > 0)">
-        <tbody>
-          @for (attribute of hsQueryBaseService.attributes; track attribute) {
-            <tr>
-              <td class="first-col">{{attribute.name}}</td>
-              <td class="second-col" [innerHtml]="attribute.value"></td>
-            </tr>
-          }
-        </tbody>
-      </table>
+<div class="card hs-main-panel">
+  <div class="card-body">
+    @if(hsQueryBaseService.featureInfoHtmls.length > 0) {
+    <div ngbDropdown>
+      <button ngbDropdownToggle class="btn btn-light w-100 rounded-0">
+        {{'QUERY.featureInfo' | translateHs }}
+      </button>
+      @for (html of hsQueryBaseService.featureInfoHtmls; track html) {
+      <div ngbDropdownMenu class="position-relative w-100 px-1 mt-1" [innerHtml]="html"></div>
+      }
     </div>
-    <iframe id="invisible_popup" style="display:block; z-index:12122;left:-10000px; position:absolute"></iframe>
+    }
+    @else if(hsQueryBaseService.wmsFeatureInfoLoading) {
+    <div class="d-flex justify-content-center p-2" style="min-height: 38px;"><span
+        class="hs-loader hs-loader-dark ml-auto"></span></div>
+    }
+    <hs-query-feature-list></hs-query-feature-list>
+    <table class="table table-striped" style="table-layout:fixed"
+      [hidden]="!(hsQueryBaseService.attributes.length > 0)">
+      <tbody>
+        @for (attribute of hsQueryBaseService.attributes; track attribute) {
+        <tr>
+          <td class="first-col">{{attribute.name}}</td>
+          <td class="second-col" [innerHtml]="attribute.value"></td>
+        </tr>
+        }
+      </tbody>
+    </table>
   </div>
-}
+  <iframe id="invisible_popup" style="display:block; z-index:12122;left:-10000px; position:absolute"></iframe>
+</div>
+}

projects/hslayers/components/query/query-wms.service.ts

@@ -75,6 +75,11 @@ export class HsQueryWmsService {
     coordinate: number[],
     layer: Layer<Source>,
   ): Promise<void> {
+    this.infoCounter++;
+    if (this.infoCounter > 1) {
+      this.hsQueryBaseService.multiWmsQuery = true;
+    }
+
     const req_url = this.hsUtilsService.proxify(url);
     const reqHash = this.hsQueryBaseService.currentQuery;
     try {
@@ -132,12 +137,19 @@ export class HsQueryWmsService {
     }
     if (infoFormat.includes('html')) {
       if (response.length <= 1) {
+        this.infoCounter--;
+        if (this.infoCounter === 0) {
+          this.queriesCollected(coordinate);
+        }
         return;
       }
-      if (getFeatureInfoTarget(layer) == 'info-panel') {
+      if (getFeatureInfoTarget(layer) === 'info-panel') {
         this.hsQueryBaseService.pushFeatureInfoHtml(response);
       } else {
-        this.hsQueryBaseService.fillIframeAndResize(response, true);
+        this.hsQueryBaseService.fillIframeAndResize(
+          response,
+          this.hsQueryBaseService.multiWmsQuery,
+        );
         if (getPopupClass(layer) != undefined) {
           this.hsQueryBaseService.popupClassname =
             'ol-popup ' + getPopupClass(layer);
@@ -231,6 +243,9 @@ export class HsQueryWmsService {
    * @param coordinate - Clicked coordinates
    */
   queriesCollected(coordinate: number[]): void {
+    this.hsQueryBaseService.multiWmsQuery = false;
+    this.hsQueryBaseService.wmsFeatureInfoLoading = false;
+
     const invisiblePopup: any = this.hsQueryBaseService.getInvisiblePopup();
     if (
       this.hsQueryBaseService.features.length > 0 ||
@@ -250,12 +265,24 @@ export class HsQueryWmsService {
     coordinate: number[],
   ): void {
     if (this.isLayerWmsQueryable(layer)) {
+      /*
+       * Reset info panel before new request/set of requests.
+       * To prevent appending to previous query results
+       */
+      if (this.infoCounter === 0) {
+        const invisiblePopup = this.hsQueryBaseService.getInvisiblePopup();
+        if (invisiblePopup) {
+          invisiblePopup.contentDocument.body.innerHTML = '';
+        }
+        if (getFeatureInfoTarget(layer) === 'info-panel') {
+          this.hsQueryBaseService.wmsFeatureInfoLoading = true;
+        }
+        this.hsQueryBaseService.featureInfoHtmls = [];
+      }
       if (instOf(layer.getSource(), WMTS)) {
         this.hsQueryWmtsService
           .parseRequestURL(layer as Layer<WMTS>, coordinate)
           .then((res) => {
-            console.log(res);
-            this.infoCounter++;
             this.request(res.url, res.format, coordinate, layer);
           });
         return;
@@ -267,6 +294,8 @@ export class HsQueryWmsService {
       } else if (instOf(layer.getSource(), TileWMS)) {
         source = layer.getSource() as TileWMS;
       }
+
+      const info_format = source.getParams().INFO_FORMAT;
       const map = this.hsMapService.getMap();
       const viewResolution = map.getView().getResolution();
       let url = source.getFeatureInfoUrl(
@@ -276,7 +305,7 @@ export class HsQueryWmsService {
           ? source.getProjection()
           : this.hsMapService.getCurrentProj(),
         {
-          INFO_FORMAT: source.getParams().INFO_FORMAT,
+          INFO_FORMAT: info_format,
           /**
            * FIXME: Might return multiple results for the same layer not always 1 of each
            */
@@ -300,16 +329,11 @@ export class HsQueryWmsService {
         }
       }
       if (url) {
-        this.hsLogService.log(url);
-
+        //this.hsLogService.log(url);
         if (
-          source.getParams().INFO_FORMAT.includes('xml') ||
-          source.getParams().INFO_FORMAT.includes('html') ||
-          source.getParams().INFO_FORMAT.includes('gml') ||
-          source.getParams().INFO_FORMAT.includes('json')
+          ['xml', 'html', 'json', 'gml'].some((o) => info_format.includes(o))
         ) {
-          this.infoCounter++;
-          this.request(url, source.getParams().INFO_FORMAT, coordinate, layer);
+          this.request(url, info_format, coordinate, layer);
         }
       }
     }

projects/hslayers/css/hslayers-ng.scss

@@ -1058,7 +1058,7 @@ html:has(div.hs-layout.hsl.hs-mobile-view) {
     display: none;
     position: absolute;
     background-color: hsl(0, 0%, 100%);
-    padding: 15px 25px 15px 15px;
+    padding: 0 15px 15px 15px;
     border: 1px solid #cccccc;
     bottom: 12px;
     left: -50px;
@@ -1090,17 +1090,16 @@ html:has(div.hs-layout.hsl.hs-mobile-view) {
   }
 
   .ol-popup-content {
-    min-width: 170px;
-    max-height: 200px;
+    min-width: var(--hs-ol-popup-content-min-width, 200px);
+    max-height: var(--hs-ol-popup-content-max-height, 45vh);
     overflow-x: auto;
   }
 
   .ol-popup-closer {
-    position: absolute;
-    top: 2px;
-    right: 2px;
-    font-size: 150%;
-    padding: 0 4px;
+    margin-left: auto;
+    width: 15px;
+    display: block;
+    font-size: 1.5rem;
     color: gray;
     text-decoration: none;
   }

projects/hslayers/services/query/query-base.service.ts

@@ -76,6 +76,9 @@ export class HsQueryBaseService {
   queryStatusChanges: Subject<boolean> = new Subject();
   vectorSelectorCreated: Subject<Select> = new Subject();
 
+  multiWmsQuery = false;
+  wmsFeatureInfoLoading = false;
+
   constructor(
     private hsMapService: HsMapService,
     private hsConfig: HsConfig,
@@ -163,7 +166,12 @@ export class HsQueryBaseService {
    * @param html - Feature info html content
    */
   pushFeatureInfoHtml(html: string): void {
-    this.featureInfoHtmls.push(this.domSanitizer.bypassSecurityTrustHtml(html));
+    const sanitizedHtml = this.domSanitizer.bypassSecurityTrustHtml(html);
+    if (this.multiWmsQuery) {
+      this.featureInfoHtmls.push(sanitizedHtml);
+    } else {
+      this.featureInfoHtmls = [sanitizedHtml];
+    }
     this.dataCleared = false;
   }
 
@@ -179,23 +187,16 @@ export class HsQueryBaseService {
     } else {
       iframe.contentDocument.body.innerHTML = response;
     }
-    let tmp_width = iframe.contentWindow.innerWidth;
-    if (
-      tmp_width >
-      this.hsLayoutService.contentWrapper.querySelector('.hs-ol-map')
-        .clientWidth -
-        60
-    ) {
-      tmp_width =
-        this.hsLayoutService.contentWrapper.querySelector('.hs-ol-map')
-          .clientWidth - 60;
-    }
-    iframe.style.width = tmp_width + 'px';
-    let tmp_height = iframe.contentWindow.innerHeight;
-    if (tmp_height > 700) {
-      tmp_height = 700;
-    }
-    iframe.style.height = tmp_height + 'px';
+    const mapElement =
+      this.hsLayoutService.contentWrapper.querySelector('.hs-ol-map');
+    const maxWidth = mapElement.clientWidth - 60;
+    const maxHeight = 700;
+
+    const tmp_width = Math.min(iframe.contentWindow.innerWidth, maxWidth);
+    const tmp_height = Math.min(iframe.contentWindow.innerHeight, maxHeight);
+
+    iframe.style.width = `${tmp_width}px`;
+    iframe.style.height = `${tmp_height}px`;
   }
 
   /**