Add zoom to show alert

projects/common-map/src/fm-map/common-map.module.ts

@@ -68,6 +68,7 @@ import {LayerSwitcher} from './components/layer-switcher/layer-switcher.componen
 import {HistogramDetailsComponent} from './components/legend/histogram-details/histogram-details.component';
 import {StatisticsDetailsComponent} from './components/legend/statistics-details/statistics-details.component';
 import { ifZoomToShowDirective} from './components/if-zoom-to-show/if-zoom-to-show.directive';
+import { ZoomToShowAlert} from './components/zoom-to-show-alert/zoom-to-show-alert.component';
 
 export function LocalStorageSync(reducer: ActionReducer<any>): ActionReducer<any> {
   const r = function(state, action) {
@@ -149,7 +150,8 @@ export {
   ForPackage ,
   ITemporalItemLayer,
   TemporalItemLayer,
-  ifZoomToShowDirective
+  ifZoomToShowDirective,
+  ZoomToShowAlert
 }
 
 @NgModule({
@@ -202,7 +204,8 @@ export {
     LayerSwitcher,
     HistogramDetailsComponent,
     StatisticsDetailsComponent,
-    ifZoomToShowDirective
+    ifZoomToShowDirective,
+    ZoomToShowAlert
   ],
   entryComponents: [
     FeatureListComponent,
@@ -255,7 +258,8 @@ export {
        FeatureListCropfieldComponent,
        FeatureListFeatureContainerComponent,
        ZoomToExtentComponent,
-       ifZoomToShowDirective
+       ifZoomToShowDirective,
+       ZoomToShowAlert
   ],
   providers: [
     FeatureIconService,

projects/common-map/src/fm-map/components/feature-list/feature-list.component.html

@@ -1,5 +1,5 @@
 <div *ngIf="features;let features">
-  <fm-back-button></fm-back-button>>
+  <fm-back-button></fm-back-button>
   <div class="row m-0 pl-3 pr-3" *ngFor="let feature of features" [ngClass]="{'selected':isFeatureSelected(feature)}" (click)="handleFeatureClick(feature)" (mouseenter)="handleFeatureMouseEnter(feature)" (mouseleave)="handleFeatureMouseLeave(feature)">
     <fm-map-feature-list-feature-container [feature]="feature"></fm-map-feature-list-feature-container>
   </div>

projects/common-map/src/fm-map/components/if-zoom-to-show/if-zoom-to-show.directive.ts

@@ -1,25 +1,39 @@
-import { Directive, ViewContainerRef,TemplateRef,OnInit,Input } from '@angular/core';
-import { IItemLayer } from '../../models/item.layer';
+import { Directive, ViewContainerRef,TemplateRef,OnInit,Input, OnChanges } from '@angular/core';
+import { layer } from 'ol';
 import { MapComponent } from 'ngx-openlayers';
 
 @Directive({
   selector: '[fm-map-ifZoomToShow]',
 })
-export class ifZoomToShowDirective  implements OnInit {
-  @Input('fm-map-ifZoomToShow') itemLayer$:IItemLayer;
+export class ifZoomToShowDirective  implements OnInit,OnChanges {
+  @Input('fm-map-ifZoomToShow') layer$:layer;
 
   constructor(private templateRef$: TemplateRef<any>,private viewContainerRef$: ViewContainerRef,private map$: MapComponent) { }
-  private hasView = false;
-  ngOnInit() {    
-    let minZoom = this.itemLayer$.layer.getMinZoom();
-    let currentZoom = this.map$.instance.getView().getZoom();
+  private showView = false;
 
-      if ( currentZoom < minZoom ) {
-        this.viewContainerRef$.createEmbeddedView(this.templateRef$);
-        this.hasView=true;
-      } else if (this.hasView) {
+  ngOnInit() {    
+    this.map$.instance.on('moveend', (e) => {
+      this.checkZoom();     
+    });
+  }
+
+  ngOnChanges() {
+    this.checkZoom();
+  }
+
+  checkZoom() {
+    if(this.layer$ && this.map$.instance) {
+      let minZoom = this.layer$.getMinZoom();
+      let currentZoom = this.map$.instance.getView().getZoom();
+      let view = currentZoom < minZoom;
+      if(view!= this.showView) {
+        this.showView=view;
+        if ( !this.showView) {
           this.viewContainerRef$.clear();
-        this.hasView = false;     
+        } else {
+          this.viewContainerRef$.createEmbeddedView(this.templateRef$);
+        }  
+      }      
     }      
   }
 }

projects/common-map/src/fm-map/components/selected-item-geotiff/selected-item-geotiff.component.html

@@ -27,6 +27,7 @@
           </ng-container>
         </ul>
       </div>
+      <fm-map-zoom-to-show-alert [layer]="itemLayer?.layer"></fm-map-zoom-to-show-alert>
     </div>
   </div>
 </div>

projects/common-map/src/fm-map/components/selected-item-shape/selected-item-shape.component.html

@@ -26,6 +26,7 @@
           </ng-container>
         </ul>
       </div>
+      <fm-map-zoom-to-show-alert [layer]="itemLayer?.layer"></fm-map-zoom-to-show-alert>
     </div>
   </div>
 </div>

projects/common-map/src/fm-map/components/selected-item-temporal/selected-item-temporal.component.html

@@ -22,6 +22,7 @@
               </button>
             </div>
           </div>
+          <fm-map-zoom-to-show-alert [layer]="currentItemLayer()?.layer"></fm-map-zoom-to-show-alert>
         </div>
         <div class="card menu-card pt-2">
           <div *ngIf="layers.length>1">

projects/common-map/src/fm-map/components/selected-item-temporal/selected-item-temporal.component.ts

@@ -8,6 +8,7 @@ import { ForItemType } from '../for-item/for-itemtype.decorator';
 import { AbstractSelectedItemComponent } from '../selected-item/selected-item.component';
 import { ITemporalItemLayer} from '../../models/item.layer';
 import * as mapActions from '../../actions/map.actions';
+import { IItemLayer } from 'common-map/public-api';
 
 
 @ForItemType("vnd.farmmaps.itemtype.temporal")
@@ -27,6 +28,10 @@ export class SelectedItemTemporalComponent extends AbstractSelectedItemComponent
     this.store.dispatch(new mapActions.SetLayerIndex(layerIndex));
   }
 
+  currentItemLayer():IItemLayer {
+    return  (this.itemLayer as ITemporalItemLayer)?.selectedItemLayer
+  }
+
   hasNext():boolean {
     let temporalItemLayer = this.itemLayer as  ITemporalItemLayer;
     return temporalItemLayer && temporalItemLayer.nextItemLayer != null;

projects/common-map/src/fm-map/components/zoom-to-show-alert/zoom-to-show-alert.component.ts

@@ -0,0 +1,11 @@
+import { Component, Input } from '@angular/core';
+import { layer } from 'ol';
+
+@Component({
+  selector: 'fm-map-zoom-to-show-alert',
+  template: '<div *fm-map-ifZoomToShow="layer" class="alert alert-info"><i class="fas fa-search-plus" aria-hidden="true" i18n-title title="Add as layer"></i>&nbsp;<span i18n>Zoom in to show layer</span></div>'
+})
+export class ZoomToShowAlert {
+  @Input() layer: layer;
+}
+