Add zoom to show alert

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

@@ -67,6 +67,8 @@ import { PanToLocation} from './components/aol/pan-to-location/pan-to-location.c
 import {LayerSwitcher} from './components/layer-switcher/layer-switcher.component';
 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) {
@@ -147,7 +149,9 @@ export {
   ForSourceTask,
   ForPackage ,
   ITemporalItemLayer,
-  TemporalItemLayer 
+  TemporalItemLayer,
+  ifZoomToShowDirective,
+  ZoomToShowAlert
 }
 
 @NgModule({
@@ -199,7 +203,9 @@ export {
     PanToLocation,
     LayerSwitcher,
     HistogramDetailsComponent,
-    StatisticsDetailsComponent
+    StatisticsDetailsComponent,
+    ifZoomToShowDirective,
+    ZoomToShowAlert
   ],
   entryComponents: [
     FeatureListComponent,
@@ -251,7 +257,9 @@ export {
        FeatureListCroppingschemeComponent,
        FeatureListCropfieldComponent,
        FeatureListFeatureContainerComponent,
-       ZoomToExtentComponent
+       ZoomToExtentComponent,
+       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

@@ -0,0 +1,39 @@
+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,OnChanges {
+  @Input('fm-map-ifZoomToShow') layer$:layer;
+
+  constructor(private templateRef$: TemplateRef<any>,private viewContainerRef$: ViewContainerRef,private map$: MapComponent) { }
+  private showView = false;
+
+  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();
+        } else {
+          this.viewContainerRef$.createEmbeddedView(this.templateRef$);
+        }  
+      }      
+    }      
+  }
+}

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

@@ -47,33 +47,34 @@
       <fm-map-rotation-reset></fm-map-rotation-reset>
     </div>
     <fm-map-file-drop-target [parentCode]="state.parentCode" (onFileDropped)="handleFileDropped($event)"></fm-map-file-drop-target>
-  </aol-map>
-  <div *ngIf="noContent">
-    <fm-map-map-search #mapSearch [openedModalName]="state.openedModalName" (onOpenModal)="handleOpenModal($event)" (onCloseModal)="handleCloseModal()" [ngClass]="{'menuVisible':state.menuVisible}" (onToggleMenu)="handleToggleMenu($event)" (onSearchCollapse)="handleSearchCollapse($event)" (onSearchExpand)="handleSearchExpand($event)" [collapsed]="state.searchCollapsed" [searchMinified]="state.searchMinified" (onSearch)="handleSearch($event)" (onClear)="handleClearSearch($event)" [filterOptions]="state.queryState" [clearEnabled]="state.clearEnabled" [period]="state.period"></fm-map-map-search>
-  </div>
-  <fm-side-panel [resizeable]="true" [visible]="state.panelVisible && noContent" [collapsed]="state.panelCollapsed" [collapsable]="false">
-    <div class="panel-wrapper" *ngIf="noContent">
-      <div class="panel-top bg-secondary" *ngIf="!(state.searchMinified)">
-      </div>
-      <div class="panel-bottom">
 
-        <div *ngIf="!(state.selectedItem)">
+    <div *ngIf="noContent">
-          <fm-map-feature-list-container [features]="state.features" [selectedFeature]="state.selectedFeature" [queryState]="state.queryState" [clickedFeature]="clickedFeature"></fm-map-feature-list-container>
+      <fm-map-map-search #mapSearch [openedModalName]="state.openedModalName" (onOpenModal)="handleOpenModal($event)" (onCloseModal)="handleCloseModal()" [ngClass]="{'menuVisible':state.menuVisible}" (onToggleMenu)="handleToggleMenu($event)" (onSearchCollapse)="handleSearchCollapse($event)" (onSearchExpand)="handleSearchExpand($event)" [collapsed]="state.searchCollapsed" [searchMinified]="state.searchMinified" (onSearch)="handleSearch($event)" (onClear)="handleClearSearch($event)" [filterOptions]="state.queryState" [clearEnabled]="state.clearEnabled" [period]="state.period"></fm-map-map-search>
+    </div>
+    <fm-side-panel [resizeable]="true" [visible]="state.panelVisible && noContent" [collapsed]="state.panelCollapsed" [collapsable]="false">
+      <div class="panel-wrapper" *ngIf="noContent">
+        <div class="panel-top bg-secondary" *ngIf="!(state.searchMinified)">
         </div>
-
+        <div class="panel-bottom">
-        <div *ngIf="state.selectedItem;let item">
+  
-          <fm-map-selected-item-container [item]="item" [parentItem]="state.parentItem" [itemLayer]="state.selectedItemLayer" [overlayLayers]="state.overlayLayers"></fm-map-selected-item-container>
+          <div *ngIf="!(state.selectedItem)">
+            <fm-map-feature-list-container [features]="state.features" [selectedFeature]="state.selectedFeature" [queryState]="state.queryState" [clickedFeature]="clickedFeature"></fm-map-feature-list-container>
+          </div>
+  
+          <div *ngIf="state.selectedItem;let item">
+            <fm-map-selected-item-container [item]="item" [parentItem]="state.parentItem" [itemLayer]="state.selectedItemLayer" [overlayLayers]="state.overlayLayers"></fm-map-selected-item-container>
+          </div>
+          <div *ngIf="state.features.length == 0" class="no-results  m-2">
+            <div *ngIf="state.queryState.query">Cannot find <span>{{state.queryState?.query}}</span></div>
+            <div *ngIf="state.queryState?.tags">Cannot find tag <span>{{state.queryState?.tags}}</span></div>
+          </div>
         </div>
-        <div *ngIf="state.features.length == 0" class="no-results  m-2">
+      </div>  
-          <div *ngIf="state.queryState.query">Cannot find <span>{{state.queryState?.query}}</span></div>
+    </fm-side-panel>
-          <div *ngIf="state.queryState?.tags">Cannot find tag <span>{{state.queryState?.tags}}</span></div>
+    <fm-side-panel [resizeable]="true" [visible]="!noContent">
-        </div>
+      <router-outlet></router-outlet>
-      </div>
+    </fm-side-panel>
-    </div>  
+  </aol-map>  
-  </fm-side-panel>
-  <fm-side-panel [resizeable]="true" [visible]="!noContent">
-    <router-outlet></router-outlet>
-  </fm-side-panel>
 </ng-container>
 
 

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;
+}
+