AW-3573

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

@@ -13,7 +13,7 @@
             </span>
             <a href="#" title="Zoom to extent" class="btn btn-light btn-sm" (click)="handleZoomToExtent($event,itemLayer)"><i class="far fa-search-plus" aria-hidden="true"></i></a>
             <span *ngIf="firstLayer(itemLayer)"><a href="#" title="Toggle legend" class="btn btn-light btn-sm" (click)="itemLayer.legendVisible=toggleLegend($event,itemLayer.legendVisible)"><i class="far fa-chart-bar" aria-hidden="true"></i></a></span>
-            <span class="float-right"><a href="#" title="Remove overlay" class="btn btn-light btn-sm" (click)="handleDelete($event,itemLayer)"><i class="fas fa-layer-minus" aria-hidden="true"></i></a></span>
+            <span *ngIf="!dataLayers" class="float-right"><a href="#" title="Remove overlay" class="btn btn-light btn-sm" (click)="handleDelete($event,itemLayer)"><i class="fas fa-layer-minus" aria-hidden="true"></i></a></span>
           </div>
           <div *ngIf="itemLayer.legendVisible">
             <div class="card legend">

projects/common-map/src/fm-map/components/aol/layer-list/layer-list.component.ts

@@ -10,6 +10,7 @@ import { IItemLayer } from '../../../models/item.layer';
 export class LayerListComponent  {
   @Input() itemLayers: IItemLayer[] = [];
   @Input() baseLayers: boolean = false;
+  @Input() dataLayers: boolean = false;
   @Output() onToggleVisibility = new EventEmitter<IItemLayer>();
   @Output() onSetOpacity = new EventEmitter<{layer: IItemLayer,opacity:number }>();
   @Output() onDelete = new EventEmitter<IItemLayer>();

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

@@ -19,6 +19,13 @@
             <fm-map-layer-list [itemLayers]="overlayLayers|async" [selectedLayer]="selectedOverlayLayer|async" (onDelete)="handleOnDelete($event)" (onToggleVisibility)="handleOnToggleVisibility($event)" (onSetOpacity)="handleOnSetOpacity($event)" (onZoomToExtent)="handleZoomToExtent($event)" (onSelectLayer)="handleSelectOverlayLayer($event)"></fm-map-layer-list>
           </div>
         </li>
+        <li class="nav-item py-0" *ngIf="selectedItemLayer$ | async as selectedItemLayer">
+          <span><i class="fal fa-layer-group" aria-hidden="true"></i>&nbsp;<span i18n>Data</span></span>
+          <div class="mb-4">
+            <fm-map-layer-list [dataLayers]="true" [itemLayers]="[selectedItemLayer]" [selectedLayer]="selectedItemLayer" (onToggleVisibility)="handleOnToggleVisibility($event)" (onSetOpacity)="handleOnSetOpacity($event)" (onZoomToExtent)="handleZoomToExtent($event)" (onSelectLayer)="handleSelectOverlayLayer($event)"></fm-map-layer-list>
+          </div>
+        </li>
+
       </ul>
   </div>
   </div>

projects/common-map/src/fm-map/components/layer-switcher/layer-switcher.component.ts

@@ -16,6 +16,7 @@ export class LayerSwitcher  implements OnInit,OnChanges{
   public showLayerSwitcher:Observable<boolean>;
   public overlayLayers: Observable<Array<IItemLayer>>;
   public selectedOverlayLayer: Observable<IItemLayer>;
+  public selectedItemLayer$: Observable<IItemLayer>;
   public baseLayers: Observable<Array<IItemLayer>>;
   public selectedBaseLayer: Observable<IItemLayer>;
 
@@ -27,6 +28,7 @@ export class LayerSwitcher  implements OnInit,OnChanges{
     this.selectedOverlayLayer = this.store.select(mapReducers.selectGetSelectedOverlayLayer);
     this.baseLayers = this.store.select(mapReducers.selectGetBaseLayers);
     this.selectedBaseLayer = this.store.select(mapReducers.selectGetSelectedBaseLayer);
+    this.selectedItemLayer$ = this.store.select(mapReducers.selectGetSelectedItemLayer)
     this.showLayerSwitcher = this.store.select(mapReducers.selectGetShowLayerSwitcher);
   }
 

projects/common-map/src/fm-map/reducers/map.reducer.ts

@@ -385,17 +385,25 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
     }
     case mapActions.SETVISIBILITY: {
       let a = action as mapActions.SetVisibility;
-      let newLayers = state.overlayLayers.slice(0);
-      let i = state.overlayLayers.indexOf(a.itemLayer);
-      newLayers[i].visible = a.visibility;
-      return tassign(state, { overlayLayers: newLayers });
+      if(state.selectedItemLayer == a.itemLayer) {
+        return tassign(state,{selectedItemLayer: tassign(state.selectedItemLayer,{visible:a.visibility})});
+      } else {
+        let newLayers = state.overlayLayers.slice(0);
+        let i = state.overlayLayers.indexOf(a.itemLayer);
+        newLayers[i].visible = a.visibility;
+        return tassign(state, { overlayLayers: newLayers });  
+      }
     }
     case mapActions.SETOPACITY: {
       let a = action as mapActions.SetOpacity;
-      let newLayers = state.overlayLayers.slice(0);
-      let i = state.overlayLayers.indexOf(a.itemLayer);
-      newLayers[i].opacity = a.opacity;
-      return tassign(state, { overlayLayers: newLayers });
+      if(state.selectedItemLayer == a.itemLayer) {
+         return tassign(state,{selectedItemLayer: tassign(state.selectedItemLayer,{opacity:a.opacity})});
+      } else {
+        let newLayers = state.overlayLayers.slice(0);
+        let i = state.overlayLayers.indexOf(a.itemLayer);
+        newLayers[i].opacity = a.opacity;
+        return tassign(state, { overlayLayers: newLayers });  
+      }
     }
     case mapActions.SETLAYERINDEX: {
       let a = action as mapActions.SetLayerIndex;