AW-1079

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

@@ -57,7 +57,7 @@
         </div>
   
         <div *ngIf="state.selectedItem;let item">
-          <fm-map-selected-item-container [item]="item" [itemLayer]="state.selectedItemLayer"></fm-map-selected-item-container>
+          <fm-map-selected-item-container [item]="item" [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>

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

@@ -16,7 +16,8 @@ export class SelectedItemContainerComponent {
   }
 
   @Input() item: IItem;
-  @Input() itemLayer:IItemLayer
+  @Input() itemLayer:IItemLayer;
+  @Input() overlayLayers:Array<IItemLayer>;
 
   @ViewChild(WidgetHostDirective, { static: true }) widgetHost: WidgetHostDirective; 
 
@@ -44,6 +45,7 @@ export class SelectedItemContainerComponent {
     const componentRef = viewContainerRef.createComponent(componentFactory);
     (<AbstractSelectedItemComponent>componentRef.instance).item = this.item;
     (<AbstractSelectedItemComponent>componentRef.instance).itemLayer = this.itemLayer;
+    (<AbstractSelectedItemComponent>componentRef.instance).overlayLayers = this.overlayLayers;
   }
 
   ngOnChanges(changes: SimpleChanges) {
@@ -53,5 +55,8 @@ export class SelectedItemContainerComponent {
     if (changes["itemLayer"] && changes["itemLayer"].currentValue) {
       this.loadComponent();
     }
+    if (changes["overlayLayers"] && changes["overlayLayers"].currentValue) {
+      this.loadComponent();
+    }
   }
 }

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

@@ -20,7 +20,10 @@
         <ul class="p-0 mt-2">
           <!--<li><a href="/api/v1/items/{{item.code}}/file" class="mt-1 mr-1" i18n><i class="fa fa-download" aria-hidden="true" title="Download"></i> Download</a></li>-->
           <li *ngIf="item.isEditable"><a href="#" class="mt-1 mr-1" (click)="handleOnEdit(item)" i18n><i class="fa fa-pencil" aria-hidden="true" title="Edit"></i> Edit</a></li>
-          <li *ngIf="itemTypeService.isLayer(item)"><a href="#" (click)="handleAddAsLayer(item,itemLayer.layerIndex)" class="mt-1 mr-1" i18n><i class="fa fa-eye" aria-hidden="true" title="Add as layer"></i> Add as overlay</a></li>
+          <ng-container *ngIf="itemTypeService.isLayer(item)">
+            <li *ngIf="!getItemLayer(item,itemLayer.layerIndex)"><a   href="#" (click)="handleAddAsLayer(item,itemLayer.layerIndex)" i18n><i class="fa fa-eye" aria-hidden="true" title="Add as layer"></i> Add as overlay</a></li> 
+            <li *ngIf="getItemLayer(item,itemLayer.layerIndex)"><a  href="#" (click)="handleRemoveLayer(item,itemLayer.layerIndex)" i18n><i class="fa fa-eye" aria-hidden="true" title="Remove overlay"></i> Remove overlay</a></li>
+          </ng-container>
         </ul>
       </div>
     </div>

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

@@ -20,7 +20,10 @@
         <ul class="p-0 mt-2">
           <!--<li><a href="/api/v1/items/{{item.code}}/file" class="mt-1 mr-1" i18n><i class="fa fa-download" aria-hidden="true" title="Download"></i> Download</a></li>-->
           <li *ngIf="item.isEditable"><a href="#" class="mt-1 mr-1" (click)="handleOnEdit(item)" i18n><i class="fa fa-pencil" aria-hidden="true" title="Edit"></i> Edit</a></li>
-          <li *ngIf="itemTypeService.isLayer(item)"><a href="#" (click)="handleAddAsLayer(item,itemLayer.layerIndex)" class="mt-1 mr-1" i18n><i class="fa fa-eye" aria-hidden="true" title="Add as layer"></i> Add as overlay</a></li>
+          <ng-container *ngIf="itemTypeService.isLayer(item)">
+            <li *ngIf="!getItemLayer(item,itemLayer.layerIndex)"><a   href="#" (click)="handleAddAsLayer(item,itemLayer.layerIndex)" i18n><i class="fa fa-eye" aria-hidden="true" title="Add as layer"></i> Add as overlay</a></li> 
+            <li *ngIf="getItemLayer(item,itemLayer.layerIndex)"><a  href="#" (click)="handleRemoveLayer(item,itemLayer.layerIndex)" i18n><i class="fa fa-eye" aria-hidden="true" title="Remove overlay"></i> Remove overlay</a></li>
+          </ng-container>
         </ul>
       </div>
     </div>

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

@@ -9,10 +9,18 @@
     <div class="card-body">
       <div class="mb-2"><a href="#" (click)="handleBackToList($event)" i18n>Back</a></div>
       <h1 class="card-title">{{item.name}}</h1>
-      <a *ngIf="itemTypeService.hasViewer(item)" href="#" (click)="handleOnView(item)" class="btn btn-outline-secondary" i18n><i class="fa fa-eye" aria-hidden="true" title="View"></i> View</a>
+      <div class="card menu-card">
+        <ul class="p-0 mt-2">
+          <li *ngIf="itemTypeService.hasViewer(item)"><a href="#" (click)="handleOnView(item)" class="btn btn-outline-secondary" i18n><i class="fa fa-eye" aria-hidden="true" title="View"></i> View</a></li>
+          <li *ngIf="item.isEditable"><a href="#" (click)="handleOnEdit(item)" i18n><i class="fa fa-pencil" aria-hidden="true" title="Edit"></i> Edit</a></li>
+          <ng-container *ngIf="itemTypeService.isLayer(item)">
+            <li *ngIf="!getItemLayer(item)"><a href="#" (click)="handleAddAsLayer(item)" i18n><i class="fa fa-eye" aria-hidden="true" title="Add as layer"></i> Add as overlay</a></li>
+            <li  *ngIf="getItemLayer(item)"><a href="#" (click)="handleRemoveLayer(item)" i18n><i class="fa fa-eye" aria-hidden="true" title="Remove overlay"></i> Remove overlay</a></li>
+          </ng-container>
+        </ul>
               <!-- <a [href]="config.getConfig('apiEndPoint')+ '/api/v1/items/'+ item.code+ '/download'" class="btn btn-outline-secondary" i18n><i class="fa fa-download" aria-hidden="true" title="Download"></i> Download</a> -->
-      <a *ngIf="item.isEditable" href="#" class="btn btn-outline-secondary" (click)="handleOnEdit(item)" i18n><i class="fa fa-pencil" aria-hidden="true" title="Edit"></i> Edit</a>
+
-      <a *ngIf="itemTypeService.isLayer(item)" href="#" (click)="handleAddAsLayer(item)" class="btn btn-outline-secondary" i18n><i class="fa fa-eye" aria-hidden="true" title="Add as layer"></i> Add as overlay</a>
+      </div>            
     </div>
   </div>
 </div>

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

@@ -11,3 +11,19 @@
 .card-title {
   font-size: 1rem;
 }
+
+ul {
+  list-style:none;
+}
+
+li {
+  margin-top:1rem;
+}
+
+.menu-card {
+  margin-left: -7px;
+  padding-left: 7px;
+  margin-right: -7px;
+  padding-right: 7px;
+  margin-bottom: 7px;
+}

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

@@ -11,7 +11,8 @@ import { IItemLayer } from '../../models/item.layer';
 @Injectable()
 export abstract class AbstractSelectedItemComponent {
   @Input() item: IItem
-  @Input() itemLayer: IItemLayer
+  @Input() itemLayer: IItemLayer;
+  @Input() overlayLayers: Array<IItemLayer>;
   constructor(public store: Store<mapReducers.State | commonReducers.State>, public itemTypeService: ItemTypeService, private location: Location, public router: Router) {
   }
 
@@ -39,6 +40,21 @@ export abstract class AbstractSelectedItemComponent {
     return false;
   }
 
+  handleRemoveLayer(item: IItem,layerIndex:number = -1) {
+    let itemLayer = this.getItemLayer(item,layerIndex);
+    if(itemLayer) {
+      this.store.dispatch(new mapActions.RemoveLayer(itemLayer));
+    }
+    return false;
+  }
+
+  getItemLayer(item:IItem,layerIndex:number = -1):IItemLayer {
+    let li = layerIndex==-1?0:layerIndex;
+    let selected = this.overlayLayers.filter(ol => ol.item.code == item.code && ol.layerIndex == li);
+    if(selected.length==0) return null;
+    return selected[0];
+  }
+
   handleBackToList(event: MouseEvent) {
     event.preventDefault();
     this.location.back();