Set layerindex

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

@@ -88,14 +88,16 @@ export class ItemLayersComponent extends LayerGroupComponent implements OnChange
 
   createLayer(itemLayer: IItemLayer): Layer {
     var layer: Layer = null;   
+    var layerIndex = -1;
     if (itemLayer.item.itemType == 'vnd.farmmaps.itemtype.geotiff.processed') {
-      let source = new XYZ({ maxZoom: 19, minZoom: 1, url: `${this._apiEndPoint}/api/v1/items/${itemLayer.item.code}/tiles/{z}/{x}/{y}.png?v=${itemLayer.item.updated.getTime()}` });
+      layerIndex = itemLayer.layerIndex != -1 ? itemLayer.layerIndex : itemLayer.item.data.layers[0].index;
+      let source = new XYZ({ maxZoom: 19, minZoom: 1, url: `${this._apiEndPoint}/api/v1/items/${itemLayer.item.code}/tiles/${layerIndex}/{z}/{x}/{y}.png?v=${itemLayer.item.updated.getTime()}` });
       layer = new Tile({ source: source });
       var data = itemLayer.item.data;
       var l = (data && data.layers && data.layers.length > 0) ? data.layers[0] : null;
       if (l && l.rendering && l.rendering.renderoutputType == "Tiles") {
         var rt = l.rendering as IRenderoutputTiles;
-        let source = new XYZ({ maxZoom: rt.maxzoom, minZoom: rt.minzoom, url: `${this._apiEndPoint}/api/v1/items/${itemLayer.item.code}/tiles/{z}/{x}/{y}.png?v=${itemLayer.item.updated.getTime()}` });
+        let source = new XYZ({ maxZoom: rt.maxzoom, minZoom: rt.minzoom, url: `${this._apiEndPoint}/api/v1/items/${itemLayer.item.code}/tiles/${layerIndex}/{z}/{x}/{y}.png?v=${itemLayer.item.updated.getTime()}` });
         layer = new Tile({ source: source });
       }
       if (l && l.rendering && l.rendering.renderoutputType == "Image") {
@@ -105,12 +107,12 @@ export class ItemLayersComponent extends LayerGroupComponent implements OnChange
           units: 'pixels',
           extent: ri.extent
         });
-        let source = new ImageStatic({ imageExtent: ri.extent, projection: projection, url: `${this._apiEndPoint}/api/v1/items/${itemLayer.item.code}/mapimage?v=${itemLayer.item.updated.getTime()}` });
+        let source = new ImageStatic({ imageExtent: ri.extent, projection: projection, url: `${this._apiEndPoint}/api/v1/items/${itemLayer.item.code}/mapimage/${layerIndex}?v=${itemLayer.item.updated.getTime()}` });
         layer = new Image({ source: source });
       }
     } else if (itemLayer.item.itemType == 'vnd.farmmaps.itemtype.shape.processed') {
       var data = itemLayer.item.data;
-      var layerIndex = itemLayer.layerIndex != -1 ? itemLayer.layerIndex : itemLayer.item.data.layers[0].index;
+      layerIndex = itemLayer.layerIndex != -1 ? itemLayer.layerIndex : itemLayer.item.data.layers[0].index;
       var l = itemLayer.item.data.layers[layerIndex];
       if (l && l.rendering && l.rendering.renderoutputType == "VectorTiles") {
         var rt = itemLayer.item.data.layers[layerIndex].rendering as IRenderoutputTiles;

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

@@ -8,6 +8,11 @@
       </div>
       <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>
+          </div>
           <fm-map-layer-legend [layer]="layers[selectedLayer]" [histogramenabled]="true"></fm-map-layer-legend>
         </div>
       </div>

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

@@ -1,13 +1,12 @@
-import { Component, Input, Injectable, OnInit } from '@angular/core';
+import { Component, Injectable } 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 { commonReducers, ItemTypeService, ItemService, FolderService } from '@farmmaps/common';
-import { Router, ActivatedRoute, ParamMap, Event } from '@angular/router';
+import { Router } from '@angular/router';
 import { ForItemType } from '../for-item/for-itemtype.decorator';
 import { AbstractSelectedItemComponent } from '../selected-item/selected-item.component';
-import { Observable } from 'rxjs';
+import * as mapActions from '../../actions/map.actions';
 
 
 @ForItemType("vnd.farmmaps.itemtype.geotiff.processed")
@@ -26,5 +25,6 @@ export class SelectedItemGeotiffComponent extends AbstractSelectedItemComponent
 
   onLayerChanged(layerIndex: number) {
     this.selectedLayer = layerIndex;
+    this.store.dispatch(new mapActions.SetLayerIndex(layerIndex));
   }
 }

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

@@ -10,7 +10,7 @@
       <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>
-      <a href="/api/v1/items/{{item.code}}/data" class="btn btn-outline-secondary" i18n><i class="fa fa-download" aria-hidden="true" title="Download"></i> Download</a>
+      <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>