Fix layer selection

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

@@ -278,7 +278,7 @@ export class ItemLayersComponent extends LayerGroupComponent implements OnChange
       itemLayers.forEach((itemLayer, index) => {
         if(itemLayer.item.itemType ==  'vnd.farmmaps.itemtype.temporal') {
           let il = itemLayer as ITemporalItemLayer;
-          let previousLayer = this.addOrUpdateOlLayer(il.previousItemLayer,newLayers.length);
+          let previousLayer = this.addOrUpdateOlLayer(il.previousItemLayer,newLayers.length);          
           if(previousLayer) newLayers.push(previousLayer);
           let selectedLayer = this.addOrUpdateOlLayer(il.selectedItemLayer,newLayers.length);
           if(selectedLayer) newLayers.push(selectedLayer);

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

@@ -9,18 +9,18 @@
       <div class="legend-container" *ngIf="item?.data.layers;let layers">
         <div class="card menu-card">
           <div *ngIf="layers.length>1">
-            <select (change)="onLayerChanged($event.target.value)">
-              <option *ngFor="let l of layers;let layerIndex = index" [value]="layerIndex">{{l.name}}</option>
+            <select (change)="onLayerChanged($event.target.value)"  [value]="itemLayer.layerIndex">
+              <option *ngFor="let l of layers;" [value]="l.index">{{l.name}}</option>
             </select>
           </div>
-          <fm-map-layer-legend [layer]="layers[selectedLayer]" [histogramenabled]="true"></fm-map-layer-legend>
+          <fm-map-layer-legend [layer]="layers[itemLayer.layerIndex]" [histogramenabled]="true"></fm-map-layer-legend>
         </div>
       </div>
       <div class="card menu-card">
         <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)" class="mt-1 mr-1" i18n><i class="fa fa-eye" aria-hidden="true" title="Add as layer"></i> Add as overlay</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>
         </ul>
       </div>
     </div>

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

@@ -9,18 +9,18 @@
       <div class="legend-container" *ngIf="item?.data.layers;let layers">
         <div class="card menu-card">
           <div *ngIf="layers.length>1">
-            <select (change)="onLayerChanged($event.target.value)">
+            <select (change)="onLayerChanged($event.target.value)" [value]="itemLayer.layerIndex">
               <option *ngFor="let l of layers;" [value]="l.index">{{l.name}}</option>
             </select>
           </div>
-          <fm-map-layer-legend [showTitle]="layers.length==1" [layer]="layers[selectedLayer]" [histogramenabled]="true"></fm-map-layer-legend>
+          <fm-map-layer-legend [showTitle]="layers.length==1" [layer]="layers[itemLayer.layerIndex]" [histogramenabled]="true"></fm-map-layer-legend>
         </div>
       </div>
       <div class="card menu-card">
         <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,selectedLayer)" class="mt-1 mr-1" i18n><i class="fa fa-eye" aria-hidden="true" title="Add as layer"></i> Add as overlay</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>
         </ul>
       </div>
     </div>

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

@@ -1,32 +1,30 @@
-import { Component, Input, Injectable, OnInit } from '@angular/core';
-import { Location } from '@angular/common';
-import { Feature } from 'ol';
-import { Store } from '@ngrx/store';
-import * as mapReducers from '../../reducers/map.reducer';
-import { commonReducers, ItemTypeService, IItem, Item, ItemService, FolderService, IListItem} from '@farmmaps/common';
-import * as mapActions from '../../actions/map.actions';
-import { Router, ActivatedRoute, ParamMap, Event } from '@angular/router';
-import { ForItemType } from '../for-item/for-itemtype.decorator';
-import { AbstractSelectedItemComponent } from '../selected-item/selected-item.component';
-import { Observable } from 'rxjs';
-
-
-@ForItemType("vnd.farmmaps.itemtype.shape.processed")
-@Injectable()
-@Component({
-  selector: 'fm-map-selected-item-shape',
-  templateUrl: './selected-item-shape.component.html',
-  styleUrls: ['./selected-item-shape.component.scss']
-})
-export class SelectedItemShapeComponent extends AbstractSelectedItemComponent {
-
-  constructor(store: Store<mapReducers.State | commonReducers.State>, itemTypeService: ItemTypeService, location: Location, router: Router, private itemService$: ItemService,private folderService$: FolderService) {
-    super(store, itemTypeService,location,router);
-  }
-  public selectedLayer: number = 0;
-
-  onLayerChanged(layerIndex: number) {
-    this.selectedLayer = layerIndex;
-    this.store.dispatch(new mapActions.SetLayerIndex(layerIndex));
-  }
-}
+import { Component, Input, Injectable, OnInit } from '@angular/core';
+import { Location } from '@angular/common';
+import { Feature } from 'ol';
+import { Store } from '@ngrx/store';
+import * as mapReducers from '../../reducers/map.reducer';
+import { commonReducers, ItemTypeService, IItem, Item, ItemService, FolderService, IListItem} from '@farmmaps/common';
+import * as mapActions from '../../actions/map.actions';
+import { Router, ActivatedRoute, ParamMap, Event } from '@angular/router';
+import { ForItemType } from '../for-item/for-itemtype.decorator';
+import { AbstractSelectedItemComponent } from '../selected-item/selected-item.component';
+import { Observable } from 'rxjs';
+
+
+@ForItemType("vnd.farmmaps.itemtype.shape.processed")
+@Injectable()
+@Component({
+  selector: 'fm-map-selected-item-shape',
+  templateUrl: './selected-item-shape.component.html',
+  styleUrls: ['./selected-item-shape.component.scss']
+})
+export class SelectedItemShapeComponent extends AbstractSelectedItemComponent {
+
+  constructor(store: Store<mapReducers.State | commonReducers.State>, itemTypeService: ItemTypeService, location: Location, router: Router, private itemService$: ItemService,private folderService$: FolderService) {
+    super(store, itemTypeService,location,router);
+  }
+  
+  onLayerChanged(layerIndex: number) {
+    this.store.dispatch(new mapActions.SetLayerIndex(layerIndex));
+  }
+}

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

@@ -10,17 +10,17 @@
       <div class="legend-container" *ngIf="item?.data.layers;let layers">
         <div class="card menu-card">
           <div *ngIf="layers.length>1">
-            <select (change)="onLayerChanged($event.target.value)">
-              <option *ngFor="let l of layers;let layerIndex = index" [value]="layerIndex">{{l.name}}</option>
+            <select (change)="onLayerChanged($event.target.value)" [value]="itemLayer.layerIndex">
+              <option *ngFor="let l of layers;" [value]="l.index">{{l.name}}</option>
             </select>
           </div>
-          <fm-map-layer-legend [layer]="layers[selectedLayer]" [histogramenabled]="true"></fm-map-layer-legend>
+          <fm-map-layer-legend [layer]="layers[itemLayer.layerIndex]" [histogramenabled]="true"></fm-map-layer-legend>
         </div>
       </div>
       <div class="card menu-card">
         <ul class="p-0 mt-2">
           <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)" class="mt-1 mr-1" i18n><i class="fa fa-eye" aria-hidden="true" title="Add as layer"></i> Add as overlay</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>
           <li *ngIf="hasNext()"><a href="#" (click)="handleNextTemporal($event)" class="mt-1 mr-1" i18n>Next <span>({{nextDate()|date}})</span></a></li>
           <li *ngIf="hasPrevious()"><a href="#" (click)="handlePreviousTemporal($event)" class="mt-1 mr-1" i18n>Previous <span>({{previousDate()|date}})</span></a></li>
         </ul>

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

@@ -22,10 +22,8 @@ export class SelectedItemTemporalComponent extends AbstractSelectedItemComponent
   constructor(store: Store<mapReducers.State | commonReducers.State>, itemTypeService: ItemTypeService, location: Location, router: Router, private itemService$: ItemService,private folderService$: FolderService) {
     super(store, itemTypeService,location,router);
   }
-  public selectedLayer: number = 0;
 
   onLayerChanged(layerIndex: number) {
-    this.selectedLayer = layerIndex;
     this.store.dispatch(new mapActions.SetLayerIndex(layerIndex));
   }