💄 display zoom warning dependently on zoom level

src/app/app.service.ts

@@ -218,7 +218,7 @@ export class AppService {
             },
             //path: 'User generated',
           },
-          minZoom: 15,
+          minZoom: this.calcService.MIN_LPIS_VISIBLE_ZOOM,
           opacity: 0.7,
           source: lpisSource,
         }),
@@ -227,7 +227,7 @@ export class AppService {
             title: 'LPIS (WMS)',
             queryCapabilities: false,
           },
-          maxZoom: 15,
+          maxZoom: this.calcService.MIN_LPIS_VISIBLE_ZOOM,
           source: new TileWMS({
             url: 'https://gis.lesprojekt.cz/cgi-bin/mapserv?map=/home/dima/maps/foodie/lpis.map',
             params: {

src/app/calculator/calculator.component.html

@@ -27,7 +27,7 @@
       <ng-template #noField>
         <div>
           <p class="p-1 text-info">{{ 'CALCULATOR.selectField' | translate}}</p>
-          <p class="p-1 text-warning" *ngIf="!lpisWfsVisible()"><i class="icon-warning-sign"></i>&nbsp;{{ 'CALCULATOR.zoomIn' | translate}}</p>
+          <p class="p-1 text-warning" *ngIf="!lpisWfsVisible"><i class="icon-warning-sign"></i>&nbsp;{{ 'CALCULATOR.zoomIn' | translate}}</p>
         </div>
       </ng-template>
       <div>

src/app/calculator/calculator.component.ts

@@ -20,6 +20,7 @@ export class CalculatorComponent implements HsPanelComponent {
     selectedProduct: Index;
     selectedFieldsProperties: {[x: string]: any}[];
   };
+  lpisWfsVisible: boolean;
   name: 'calculator';
   viewRef: ViewRef;
 
@@ -35,16 +36,19 @@ export class CalculatorComponent implements HsPanelComponent {
         this.data.selectedFieldsProperties.push(feature.getProperties());
       }
     });
+    this.calcService.viewChanges.subscribe((view) => {
+      if (view.getZoom() > this.calcService.MIN_LPIS_VISIBLE_ZOOM) {
+        this.lpisWfsVisible = true;
+        return;
+      }
+      this.lpisWfsVisible = false;
+    });
   }
 
   isVisible(): boolean {
     return this.hsLayoutService.panelVisible('calculator');
   }
 
-  lpisWfsVisible(): boolean {
-    return this.calcService.lpisWfsVisible();
-  }
-
   noFieldSelected(): boolean {
     return this.fieldService.noFieldSelected();
   }

src/app/calculator/calculator.service.ts

@@ -22,6 +22,7 @@ export class CalculatorService {
   AVAILABLE_PRODUCTS = ['EVI', 'RVI4S1'] as const;
   BLUR_MIN_VALUE = 0 as const;
   BLUR_MAX_VALUE = 5 as const;
+  MIN_LPIS_VISIBLE_ZOOM = 15 as const;
   SERVICE_BASE_URL = 'https://fieldcalc.lesprojekt.cz/' as const;
   availableDates: Array<string>;
   blurValue = 0;
@@ -30,6 +31,7 @@ export class CalculatorService {
   lpisLoading = false;
   quantileCount = 4;
   selectedDate: string;
+  viewChanges: Subject<any> = new Subject();
   //selectedProduct;
   private _datesLoading: boolean;
   private _zonesLoading: boolean;
@@ -55,11 +57,10 @@ export class CalculatorService {
       this.selectedDate = undefined;
     });
     this.hsEventBus.olMapLoads.subscribe((map) => {
-      console.log(map);
+      map.getView().on('change:resolution', (evt) => {
+        this.viewChanges.next(evt.target);
+      });
     });
-    this.hsEventBus.mapExtentChanges.subscribe((obj) => {
-      console.log(obj);
-    })
   }
 
   noDates(): boolean {
@@ -170,10 +171,6 @@ export class CalculatorService {
     }
   }
 
-  lpisWfsVisible(): boolean {
-    return;
-  }
-
   /**
    * Updates WMS-t layer with the source image
    * @param date - ISO date