Renamed prefixes in angular.json

2019-11-04 13:43:46 +01:00
parent c32214f544
commit cec43a636c
183 changed files with 4 additions and 4 deletions
--- a/projects/common-map/src/fm-map/components/aol/file-drop-target/file-drop-target.component.ts
+++ b/projects/common-map/src/fm-map/components/aol/file-drop-target/file-drop-target.component.ts
@@ -0,0 +1,73 @@
+import { Component, Input, OnDestroy, OnInit, EventEmitter, Output, Inject } from '@angular/core';
+import { MapComponent } from 'ngx-openlayers';
+
+import * as proj  from 'ol/proj';
+import {Point,Geometry} from 'ol/geom';
+import { GeoJSON } from 'ol/format';
+import { Feature } from 'ol';
+
+export interface IDroppedFile {
+  files: any,
+  event: any,
+  geometry: any
+  parentCode: string;
+}
+
+@Component({
+  selector: 'fm-map-file-drop-target',
+  template: ''
+})
+export class FileDropTargetComponent implements OnInit, OnDestroy {
+  element: Element;
+  @Output() onFileDropped = new EventEmitter<IDroppedFile>();
+  @Input() parentCode: string;
+  @Input() features: Array<Feature>;
+
+  constructor(private map: MapComponent) {
+  }
+
+  ngOnInit() {
+    this.element = this.map.instance.getViewport();
+    let other = this;
+    this.element.addEventListener('drop', this.onDrop, false);
+    this.element.addEventListener('dragover', this.preventDefault, false);
+    this.element.addEventListener('dragenter', this.preventDefault, false);
+  }
+
+  private onDrop = (event: DragEvent) => {
+    this.stopEvent(event);
+    let geojsonFormat = new GeoJSON(); 
+    var parentCode = this.parentCode;
+    var coordinate = this.map.instance.getEventCoordinate(event);
+    //coordinate = proj.transform(coordinate, this.map.instance.getView().getProjection(), 'EPSG:4326');
+    var geometry:Geometry = new Point(coordinate);
+    var hitFeatures = this.map.instance.getFeaturesAtPixel([event.pageX, event.pageY]);
+    var hitFeature = hitFeatures && hitFeatures.length > 0 ? hitFeatures[0] : null;
+    if (hitFeature) {
+      if (hitFeature.get("code")) {
+        parentCode = hitFeature.get("code");
+      }
+      geometry = geojsonFormat.readGeometry(geojsonFormat.writeGeometry(geometry)); // create copy instead of reference
+    }
+    var projectedGeometry = geometry.transform(this.map.instance.getView().getProjection(), 'EPSG:4326');   
+      
+    if (event.dataTransfer && event.dataTransfer.files) {
+      this.onFileDropped.emit({ files: event.dataTransfer.files, event: event, geometry: JSON.parse(geojsonFormat.writeGeometry(projectedGeometry)),parentCode:parentCode})
+    }
+  }
+   
+  private preventDefault(event) {
+    event.preventDefault();
+  }
+
+  private stopEvent(event) {
+    event.stopPropagation();
+    event.preventDefault();
+  }
+
+  ngOnDestroy() {
+    this.element.removeEventListener('drop', this.onDrop);
+    this.element.removeEventListener('dragover', this.preventDefault);
+    this.element.removeEventListener('dragenter', this.preventDefault);
+  }
+}
--- a/projects/common-map/src/fm-map/components/aol/gps-location/gps-location.component.html
+++ b/projects/common-map/src/fm-map/components/aol/gps-location/gps-location.component.html
@@ -0,0 +1,15 @@
+<div class="gps-location">
+  <svg #location height="1000" width="1000">
+    <defs>
+      <linearGradient id="grad1" x1="0%" y1="100%" x2="0%" y2="0%">
+        <stop offset="0%" class="stop1" />
+        <stop offset="100%" class="stop2" />
+      </linearGradient>
+    </defs>
+    <circle class="tolerance" cx="500" cy="500" stroke="none" [attr.r]="locTolerancePixels" />
+    <path *ngIf="showHeading" class="heading" stroke="none" [attr.d]="path" fill="url(#grad1)" [attr.transform]="rotate"></path>
+    <circle class="border" cx="500" cy="500" r="7" stroke="none" />
+    <circle class="center" cx="500" cy="500" r="6" stroke="none" />
+
+  </svg>
+</div>
--- a/projects/common-map/src/fm-map/components/aol/gps-location/gps-location.component.scss
+++ b/projects/common-map/src/fm-map/components/aol/gps-location/gps-location.component.scss
@@ -0,0 +1,36 @@
+@import "../../../_theme.scss";
+@import "~bootstrap/scss/bootstrap.scss";
+
+
+.gps-location {
+  display:none; 
+}
+
+.center, .tolerance, .border {
+  stroke-width: 0;
+}
+
+.tolerance {
+  fill: theme-color();
+  fill-opacity:0.4;
+}
+
+.border {
+  fill: white;
+}
+
+.center {
+  fill: theme-color();
+}
+
+.stop1 {
+  stop-color: theme-color();
+  stop-opacity:1;
+}
+
+.stop2 {
+  stop-color: theme-color();
+  stop-opacity: 0;
+}
+
+
--- a/projects/common-map/src/fm-map/components/aol/gps-location/gps-location.component.ts
+++ b/projects/common-map/src/fm-map/components/aol/gps-location/gps-location.component.ts
@@ -0,0 +1,68 @@
+import { Component, OnInit, Input, ViewChild, ElementRef, OnChanges, SimpleChanges } from '@angular/core';
+import { MapComponent } from 'ngx-openlayers';
+import Overlay from 'ol/Overlay';
+import { fromLonLat, toLonLat } from 'ol/proj';
+
+
+@Component({
+  selector: 'fm-map-gps-location',
+  templateUrl: './gps-location.component.html',
+  styleUrls: ['./gps-location.component.scss']
+})
+export class GpsLocation  implements OnInit,OnChanges{
+
+  @Input() enable:boolean;
+  public instance: Overlay;
+  @Input() position: Position;
+  @Input() location: number[]=[0,0];
+  @Input() locationTolerance: number = 0;
+  @Input() showHeading: boolean = false;
+  @Input() heading: number = 0;
+  @Input() headingTolerance: number = 0;
+  public locTolerancePixels: number = 0;
+  public path: string = "";
+  public rotate: string = "";
+  private resolution: number = 0;
+  @ViewChild('location') locationElement: ElementRef;
+
+  constructor(private map: MapComponent) {
+    
+  }
+
+  recalcLocationTolerance() {
+    this.locTolerancePixels = this.resolution >0? this.locationTolerance / this.resolution:0;
+  }
+
+  ngOnInit() {
+    this.instance = new Overlay({
+      stopEvent:false,
+      positioning: 'center-center',
+      position: fromLonLat( this.location),
+      element: this.locationElement.nativeElement
+    });
+    var x = Math.tan(this.headingTolerance * Math.PI / 180)*40;
+    var y = Math.cos(this.headingTolerance * Math.PI / 180) * 40;
+    var y1 = Math.round(500 - y);
+    var x1 = Math.round(500 - x);
+    var y2 = Math.round(y1);
+    var x2 = Math.round(500 + x);
+    this.path = "M " + x2 + " " + y2 + " A 45 45,0,0,0, " + x1 + " " + y1 + " L 493 500 L 507 500 Z";
+    this.rotate = "rotate(" + Math.round(this.heading) + " 500 500)";
+    this.locTolerancePixels = this.locationTolerance;
+    this.map.instance.addOverlay(this.instance);
+    this.map.instance.getView().on('change:resolution', (evt) => {
+      this.resolution = evt.target.get('resolution');
+      this.recalcLocationTolerance();
+    });
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes.position && this.instance) {
+      var p = changes.position.currentValue as Position;
+      this.instance.setPosition(fromLonLat([p.coords.longitude, p.coords.latitude]));
+      this.locationTolerance = p.coords.accuracy;
+      this.recalcLocationTolerance();
+      this.heading = p.coords.heading;
+    }
+  }
+}
--- a/projects/common-map/src/fm-map/components/aol/item-features-source/item-features-source.component.ts
+++ b/projects/common-map/src/fm-map/components/aol/item-features-source/item-features-source.component.ts
@@ -0,0 +1,90 @@
+import { Component, Host, Input, Output, EventEmitter, OnInit, OnChanges, SimpleChanges, forwardRef, Inject, InjectionToken } from '@angular/core';
+import { HttpClient } from "@angular/common/http";
+import { LayerVectorComponent, SourceVectorComponent, MapComponent, LayerImageComponent } from 'ngx-openlayers';
+import { LayerVectorImageComponent } from '../layer-vector-image/layer-vector-image.component';
+import { ItemService } from '@farmmaps/common';
+import { IItem } from '@farmmaps/common';
+import { ISelectedFeatures } from '../../../models';
+
+import {Vector} from 'ol/source';
+import {Feature,Collection} from 'ol';
+import {Extent} from 'ol/extent';
+import * as style from 'ol/style';
+import * as proj from 'ol/proj';
+import Projection from 'ol/proj/Projection';
+import * as loadingstrategy from 'ol/loadingstrategy';
+import {GeoJSON} from 'ol/format';
+
+@Component({
+  selector: 'fm-map-item-features-source',
+  template: `<ng-content></ng-content>`,
+  providers: [
+    { provide: SourceVectorComponent, useExisting: forwardRef(() => ItemFeaturesSourceComponent) }
+  ]
+})
+
+export class ItemFeaturesSourceComponent extends SourceVectorComponent implements OnInit, OnChanges {
+  instance:Vector;
+  features: Collection<Feature>;
+  @Input() item: IItem;
+  @Input() layerIndex: number = 0;
+  constructor(@Host() private layer: LayerVectorImageComponent, private itemService: ItemService, @Host() private map: MapComponent) {
+    super(layer);
+  }
+
+  private colorIndex = 0;
+  private styleCache = {};
+
+  ngOnInit() {
+    this.instance = new Vector({
+      loader: (extent: Extent, resolution: number, projection: Projection) => {
+        let format = new GeoJSON();
+        this.itemService.getItemFeatures(this.item.code, extent, projection.getCode(), this.layerIndex).subscribe((data) => {
+          var features = format.readFeatures(data);        
+          // TODO 13/6/2019 The line below causes an endless loop. Action required?
+          this.instance.addFeatures(features);
+          // TODO 13/6/2019 Action required: check if feature collection hasn't been changed (Willem)
+          // var t = this.vectorSource.getFeatures();
+        });
+      },
+      format: new GeoJSON(),
+      strategy: loadingstrategy.bbox
+    });
+    this.features = new Collection<Feature>();
+    this.layer.instance
+    this.layer.instance.setStyle((feature) => {
+      var resolution = this.map.instance.getView().getResolution();
+      var r = (2 / resolution) / 2;
+      var color = feature.get("color");
+      return new style.Style(
+        {
+          fill: new style.Fill({
+            color: color
+          }),
+          image: new style.Circle({
+            fill: new style.Fill({
+              color: color
+            }),
+            stroke: new style.Stroke({
+              color: color,
+              width: 1.25
+            }),
+            radius: r
+          }),
+          stroke: new style.Stroke({
+            color: color,
+            width: 1.25
+          })
+        });           
+    });
+    this.host.instance.setSource(this.instance);
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (this.instance) {
+      if (changes['layerIndex']) {
+        this.instance.clear();
+      }      
+    }
+  }
+}
--- a/projects/common-map/src/fm-map/components/aol/item-layers/item-layers.component.js.map
+++ b/projects/common-map/src/fm-map/components/aol/item-layers/item-layers.component.js.map
--- a/projects/common-map/src/fm-map/components/aol/item-layers/item-layers.component.ts
+++ b/projects/common-map/src/fm-map/components/aol/item-layers/item-layers.component.ts
@@ -0,0 +1,276 @@
+import { Component, Host, Input, Output, EventEmitter, Optional, QueryList, OnInit, AfterViewInit, OnChanges, SimpleChanges, SkipSelf, forwardRef, Inject, InjectionToken } from '@angular/core';
+import { HttpClient } from "@angular/common/http";
+import { LayerVectorComponent, LayerTileComponent, LayerGroupComponent, MapComponent } from 'ngx-openlayers';
+import { ItemService } from '@farmmaps/common';
+import { AppConfig } from '@farmmaps/common';
+import { IItemLayer, ILayerData, IRenderoutputTiles, IRenderoutputImage, IGradientstop, ILayer, IHistogram } from '../../../models';
+
+import {Extent} from 'ol/extent';
+import Projection from 'ol/proj/Projection';
+import * as proj from 'ol/proj';
+import * as loadingstrategy from 'ol/loadingstrategy';
+import * as style from 'ol/style';
+import {Tile,Layer,Image} from 'ol/layer';
+import {XYZ,ImageStatic,OSM,BingMaps,TileWMS,TileArcGISRest} from 'ol/source';
+import {Vector as VectorSource} from 'ol/source';
+import { Vector as VectorLayer } from 'ol/layer';
+import VectorTileSource from 'ol/source/VectorTile';
+import VectorTileLayer from 'ol/layer/VectorTile';
+import {GeoJSON,MVT} from 'ol/format';
+import { from } from 'rxjs';
+
+@Component({
+  selector: 'fm-map-item-layers',
+  template: `<ng-content></ng-content>`,
+  providers: [
+    { provide: LayerGroupComponent, useExisting: forwardRef(() => ItemLayersComponent) }
+  ]
+})
+
+export class ItemLayersComponent extends LayerGroupComponent implements OnChanges, OnInit {
+  @Input() itemLayers: IItemLayer[];
+  @Input() itemLayer: IItemLayer;
+  private _apiEndPoint: string;
+
+  constructor(private itemService: ItemService, @Host() private map: MapComponent, public appConfig: AppConfig) {
+    super(map);
+    this._apiEndPoint = appConfig.getConfig("apiEndPoint");
+  }
+
+  private styleCache = {}
+
+  componentToHex(c) {
+    var hex = c.toString(16);
+    return hex.length == 1 ? "0" + hex : hex;
+  }
+
+   rgbaToHex(r, g, b,a) {
+     return "#" + this.componentToHex(r) + this.componentToHex(g) + this.componentToHex(b) + this.componentToHex(a);
+  }
+
+  getColorFromGradient(layer: ILayer,  feature): style.Style {
+    var value = feature.get(layer.name);
+    var gradient: IGradientstop[] = layer.renderer.colorMap.gradient;
+    var histogram: IHistogram = layer.renderer.band.histogram;
+    var index = (value - histogram.min) / histogram.max;
+    var min = gradient[0];
+    var max = gradient[gradient.length - 1];
+    for (var n = 0; n < gradient.length; n++) {
+      var s = gradient[n];
+      if (s.relativestop <= index && min.relativestop < s.relativestop && n < gradient.length - 1) min = s;
+      if (s.relativestop >= index && max.relativestop > s.relativestop && n > 0) max = s;
+    }
+    var i = index - min.relativestop;
+    var size = max.relativestop - min.relativestop;
+    var alpha = Math.round( min.color.alpha + ((max.color.alpha - min.color.alpha) * i / size));
+    var red = Math.round(min.color.red + ((max.color.red - min.color.red) * i / size));
+    var green = Math.round(min.color.green + ((max.color.green - min.color.green) * i / size));
+    var blue = Math.round(min.color.blue + ((max.color.blue - min.color.blue) * i / size));
+
+    return new style.Style(
+      {
+        image: new style.Circle({
+          fill: new style.Fill({
+            color: this.rgbaToHex(red,green,blue,alpha)
+          }),
+          radius: 3
+        }),
+        fill: new style.Fill({
+          color: this.rgbaToHex(red, green, blue, alpha)
+        }),
+        stroke: new style.Stroke({
+          color: this.rgbaToHex(red, green, blue, alpha),
+          width: 1.25
+        }),
+      });
+  }
+
+  createLayer(itemLayer: IItemLayer): Layer {
+    var layer: Layer = null;    
+    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()}` });
+      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()}` });
+        layer = new Tile({ source: source });
+      }
+      if (l && l.rendering && l.rendering.renderoutputType == "Image") {
+        var ri = l.rendering as IRenderoutputImage;
+        let projection = new Projection({
+          code: 'image',
+          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()}` });
+        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;
+      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;
+        layer = new VectorTileLayer({
+          declutter: true,
+          source: new VectorTileSource({
+            maxZoom: rt.maxzoom,
+            minZoom: rt.minzoom,
+            format: new MVT(),
+            url: `${this._apiEndPoint}/api/v1/items/${itemLayer.item.code}/vectortiles/{z}/{x}/{y}.pbf?v=${itemLayer.item.updated.getTime()}`
+          }),
+          style: (feature) => {
+            return this.getColorFromGradient(l, feature);           
+          }
+        })
+      } if (l && l.rendering && l.rendering.renderoutputType == "Tiles") {
+        var rt = l.rendering as IRenderoutputTiles;
+        layer = new Tile({
+          source: new XYZ({
+            maxZoom: rt.maxzoom,
+            minZoom: rt.minzoom,
+            url: `${this._apiEndPoint}/api/v1/items/${itemLayer.item.code}/vectortiles/image_tiles/${layerIndex}/{z}/{x}/{y}.png?v=${itemLayer.item.updated.getTime()}`
+          })
+        });
+      } else {
+        let __this = this;
+        let format = new GeoJSON();
+        let source = new VectorSource({
+          strategy: loadingstrategy.bbox,
+          loader: function (extent: Extent, resolution: number, projection: Projection) {
+            var source = this as VectorSource;
+            __this.itemService.getItemFeatures(itemLayer.item.code, extent, projection.getCode(), layerIndex).subscribe(function (data) {
+              var features = format.readFeatures(data);
+              for (let f of features) {
+                if (f.get("code")) {
+                  f.setId(f.get("code"));
+                }
+              }
+              source.addFeatures(features);
+            });
+          }
+        });
+        layer = new VectorLayer({
+          source: source,
+          style: (feature) => {
+            var key = feature.get("color");
+            if (!this.styleCache[key]) {
+              var color = feature.get("color");
+              this.styleCache[key] = new style.Style(
+                {
+                  fill: new style.Fill({
+                    color: color
+                  }),
+                  stroke: new style.Stroke({
+                    color: color,
+                    width: 1.25
+                  }),
+                  image: new style.Circle({
+                    fill: new style.Fill({
+                      color: color
+                    }),
+                    stroke: new style.Stroke({
+                      color: color,
+                      width: 1.25
+                    }),
+                    radius: 5
+                  }),
+                }
+              )
+            }
+            return this.styleCache[key];
+          }
+        });
+      }      
+    } else if (itemLayer.item.itemType == 'vnd.farmmaps.itemtype.layer') {
+      let data = itemLayer.item.data as ILayerData;
+      switch (data.interfaceType) {
+        case 'OSM': {
+          let source = new OSM();
+          layer = new Tile({ source: source });
+          break;
+        }
+        case 'BingMaps': {
+          let source = new BingMaps(data.options);
+          layer = new Tile({ source: source });
+          break;
+        }
+        case 'TileWMS': {
+          let source = new TileWMS(data.options);
+          layer = new Tile({ source: source });
+          break;
+        }
+        case 'TileArcGISRest': {
+          let source = new TileArcGISRest(data.options);
+          layer = new Tile({ source: source });
+          break;
+        }
+        default: {
+          break;
+        }
+      }
+    }
+    if (layer) {
+      let geometry = new GeoJSON().readGeometry(itemLayer.item.geometry);
+      let extent = geometry ? proj.transformExtent(geometry.getExtent(), 'EPSG:4326', 'EPSG:3857') : null;
+      if (extent) layer.setExtent(extent);
+    }
+
+    return layer;
+  }
+
+  ngOnInit() {
+    super.ngOnInit();
+    this.updateLayers(this.itemLayers);
+  }
+
+  updateLayers(itemLayers: IItemLayer[]) {
+    if (itemLayers) {
+      var olLayers = this.instance.getLayers();
+      itemLayers.forEach((itemLayer, index) => {
+
+        var layer = itemLayer.layer;
+        let olIndex = olLayers.getArray().indexOf(layer);
+        if (olIndex < 0) {
+          // New layer: we add it to the map
+          layer = this.createLayer(itemLayer);
+          if (layer) {
+            itemLayer.layer = layer;
+          }
+          olLayers.insertAt(index, layer);
+        } else if (index !== olIndex) {
+          // layer has moved inside the layers list
+          olLayers.removeAt(olIndex);
+          olLayers.insertAt(index, layer);
+        }
+        layer.setOpacity(itemLayer.opacity);
+        layer.setVisible(itemLayer.visible);
+      });
+      // Remove the layers that have disapeared from childrenLayers
+      if (olLayers.getLength() > itemLayers.length) {
+        for (let i = itemLayers.length; i < olLayers.getLength(); i++) {
+          olLayers.removeAt(i);
+        }
+      }
+    }   
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (this.instance) {
+      if (changes['itemLayers']) {
+        var itemLayers = changes['itemLayers'].currentValue as IItemLayer[];
+        this.updateLayers(itemLayers);
+      }
+      if (changes['itemLayer']) {
+        var itemLayer = changes['itemLayer'].currentValue as IItemLayer;
+        if(itemLayer) {
+          this.updateLayers([itemLayer]);
+        } else {
+          this.updateLayers([]);
+        }
+      }
+    }
+  }
+}
--- a/projects/common-map/src/fm-map/components/aol/item-vector-source/item-vector-source.component.ts
+++ b/projects/common-map/src/fm-map/components/aol/item-vector-source/item-vector-source.component.ts
@@ -0,0 +1,207 @@
+import { Component, Host, Input, Output, EventEmitter, OnInit, OnChanges, SimpleChanges, forwardRef, Inject, InjectionToken } from '@angular/core';
+import { LayerVectorComponent, SourceVectorComponent, MapComponent } from 'ngx-openlayers';
+import { ItemService,ItemTypeService,IItem, IItemType } from '@farmmaps/common';
+
+import { Feature } from 'ol';
+import { Point } from 'ol/geom';
+import { MapBrowserEvent } from 'ol';
+import * as style from 'ol/style';
+import * as color from 'ol/color';
+import * as loadingstrategy from 'ol/loadingstrategy';
+import * as condition from 'ol/events/condition';
+import * as extent from 'ol/extent';
+import {Vector,Cluster} from 'ol/source';
+import {Layer} from 'ol/layer';
+import {GeoJSON} from 'ol/format';
+import {Select} from 'ol/interaction';
+ 
+@Component({
+  selector: 'fm-map-item-source-vector',
+  template: `<ng-content></ng-content>`,
+  providers: [
+    { provide: SourceVectorComponent , useExisting: forwardRef(() => ItemVectorSourceComponent) }
+  ]
+})
+export class ItemVectorSourceComponent extends SourceVectorComponent implements OnInit, OnChanges {
+  instance: Vector;
+  private _format: GeoJSON;
+  private _select: Select;
+  private _hoverSelect: Select;
+  private _iconScale: number = 0.05;
+  @Input() features: Array<Feature>;
+  @Input() selectedFeature: Feature;
+  @Input() selectedItem: IItem;
+  @Output() onFeaturesSelected: EventEmitter<Feature> = new EventEmitter<Feature>();
+  private styleCache = {
+    'file': new style.Style({
+      image: new style.Icon({
+          anchor: [0.5, 1],
+          scale: 0.05,
+        src: this.getIconImageDataUrl("fa fa-file-o")
+      }),         
+      stroke: new style.Stroke({
+        color: 'red',
+        width: 1
+      }),
+      fill: new style.Fill({
+        color: 'rgba(0, 0, 255, 0.1)'
+      }),
+      geometry: (feature) => this.geometry(feature)
+    }),
+    'selected': new style.Style({
+      image: new style.Icon({
+        anchor: [0.5, 1],
+        scale: 0.08,
+        src: this.getIconImageDataUrl(null)
+      }),
+      stroke: new style.Stroke({
+        color: 'red',
+        width: 3
+      }),
+      fill: new style.Fill({
+        color: 'rgba(0, 0, 255, 0.1)'
+      }),
+      geometry: (feature) => this.geometry(feature)
+    })
+    };
+
+  constructor(@Host() private layer: LayerVectorComponent, private itemService: ItemService, @Host() private map: MapComponent, private itemTypeService: ItemTypeService) {
+    super(layer);
+    this._format = new GeoJSON();
+  }
+
+  geometry(feature: Feature) {
+    let view = this.map.instance.getView();
+    let resolution = view.getResolution();
+    var geometry = feature.getGeometry();
+    let e = geometry.getExtent();
+    //var size = Math.max((e[2] - e[0]) / resolution, (e[3] - e[1]) / resolution);
+    if (resolution > 12) {
+      geometry = new Point(extent.getCenter(e));
+    }
+    return geometry;
+  }
+
+  getIconImageDataUrl(iconClass:string, backgroundColor: string = "#c80a6e",color:string = "#ffffff"): string {
+    var canvas = document.createElement('canvas');
+    canvas.width = 365;
+    canvas.height = 560;
+    var ctx = canvas.getContext('2d');
+    ctx.lineWidth = 6;
+    ctx.fillStyle = backgroundColor;
+    ctx.strokeStyle = "#000000";
+    var path = new Path2D("m182.9 551.7c0 0.1 0.2 0.3 0.2 0.3s175.2-269 175.2-357.4c0-130.1-88.8-186.7-175.4-186.9-86.6 0.2-175.4 56.8-175.4 186.9 0 88.4 175.3 357.4 175.3 357.4z");
+    ctx.fill(path)
+
+    var iconCharacter = "";
+    if (iconClass != null) {
+      var element = document.createElement("i");
+      element.style.display = "none";
+      element.className = iconClass;
+      document.body.appendChild(element);
+      iconCharacter = getComputedStyle(element, "::before").content.replace(/"/g, '');
+      let iconFont = "200px " +getComputedStyle(element, "::before").fontFamily
+      document.body.removeChild(element);
+      ctx.strokeStyle = color;
+      ctx.fillStyle = color;
+      ctx.lineWidth = 15;
+      ctx.font = iconFont;
+      var ts = ctx.measureText(iconCharacter);
+      ctx.fillText(iconCharacter, 182.9 - (ts.width / 2), 250);
+      ctx.strokeText(iconCharacter, 182.9 - (ts.width / 2), 250);
+    }
+
+    return canvas.toDataURL();
+  }
+
+  ngOnInit() {
+    this.strategy = loadingstrategy.bbox;
+    this.format = new GeoJSON();
+    this._select = new Select({
+      style: (feature) => {        
+        return this.styleCache['selected'];
+      },
+      hitTolerance: 10,
+      layers: [this.layer.instance as Layer]
+    });
+    this._hoverSelect = new Select({
+      style: (feature) => {
+        return this.styleCache['selected'];
+      },
+      hitTolerance: 10,
+      condition: (e: MapBrowserEvent) => {
+        return e.type == 'pointermove';
+      },
+      layers: [this.layer.instance as Layer]
+    });
+    this.map.instance.addInteraction(this._select);
+    this.map.instance.addInteraction(this._hoverSelect);      
+    this._select.on('select', (e) => {
+      if (e.selected.length > 0 && e.selected[0]) {
+        this.onFeaturesSelected.emit(e.selected[0]);
+      } else {
+        this.onFeaturesSelected.emit(null);
+      }
+    });
+    this.instance = new Vector(this);
+    this.host.instance.setSource(this.instance);
+      
+    this.host.instance.setStyle((feature) => {     
+      var key = feature.get('itemType') + (this.selectedItem?"_I":"");
+      if (!this.styleCache[key]) {
+        if (this.itemTypeService.itemTypes[key]) {
+          let itemType = this.itemTypeService.itemTypes[key];
+          let fillColor = color.asArray(itemType.iconColor);
+          fillColor[3] = this.selectedItem?0:0.5;
+          this.styleCache[key] = new style.Style({
+              image: itemType.icon ? new style.Icon({
+                  anchor: [0.5, 1],
+                  scale: 0.05,
+                  src: this.getIconImageDataUrl(itemType.icon)
+                }):null,
+              stroke: new style.Stroke({
+                color: 'red',
+                width: 1
+              }),
+              fill: new style.Fill({
+                color: fillColor
+              }),
+              geometry: (feature) => this.geometry(feature)
+            });                   
+        } else {
+          key = 'file';
+        }
+      } 
+      var styleEntry = this.styleCache[key];
+      return styleEntry;
+    });
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes["features"] && this.instance) {
+      this.instance.clear(true);
+      this._select.getFeatures().clear();
+      this.instance.addFeatures(changes["features"].currentValue);
+    }
+
+    if (changes["selectedFeature"] && this.instance) {
+      var features = this._select.getFeatures();
+      var feature = changes["selectedFeature"].currentValue
+      //this.instance.clear(false);
+      //this.instance.addFeatures(features.getArray());
+      features.clear();
+      if (feature) {
+        //this.instance.removeFeature(feature);
+        features.push(feature)
+      }    
+    }
+    if (changes["selectedItem"] && this.instance) {
+      var item = changes["selectedItem"].currentValue
+      if (item) {
+        this.map.instance.removeInteraction(this._hoverSelect);  
+      } else {
+        this.map.instance.addInteraction(this._hoverSelect);  
+      }
+    }
+  }
+}
--- a/projects/common-map/src/fm-map/components/aol/layer-list/layer-list.component.html
+++ b/projects/common-map/src/fm-map/components/aol/layer-list/layer-list.component.html
@@ -0,0 +1,29 @@
+<div class="layerlist" *ngIf="itemLayers.length > 0;else noLayers">
+  <div class="list-group">
+    <div *ngFor="let itemLayer of itemLayers" class="list-group-item list-group-item-action p-2 text-truncate" [ngClass]="{'active' : selectedLayer==itemLayer}">
+      <div (click)="handleSelectLayer($event,itemLayer)"  [title]="itemLayer.item.name">{{itemLayer.item.name}}</div>
+        <div class="mt-1" *ngIf="selectedLayer==itemLayer && !baseLayers">
+          <span class="btn-group">
+            <a title="Toggle visibility"href="#" class="btn btn-light btn-sm" (click)="handleToggleVisibility($event,itemLayer)"><i class="fa" aria-hidden="true" [ngClass]="{'fa-eye':!itemLayer.visible,'fa-eye-slash':itemLayer.visible}"></i></a>
+            <a title="Transparency 25%" *ngIf="itemLayer.visible" href="#" class="btn btn-light btn-sm" (click)="handleSetOpacity($event,itemLayer,0.25)">25%</a>
+            <a title="Transparency 50%" *ngIf="itemLayer.visible" href="#" class="btn btn-light btn-sm" (click)="handleSetOpacity($event,itemLayer,0.5)">50%</a>
+            <a title="Transparency 75%" *ngIf="itemLayer.visible" href="#" class="btn btn-light btn-sm" (click)="handleSetOpacity($event,itemLayer,0.75)">75%</a>
+            <a title="No transparency" *ngIf="itemLayer.visible" href="#" class="btn btn-light btn-sm" (click)="handleSetOpacity($event,itemLayer,1)">100%</a>
+          </span>
+          <a href="#" title="Zoom to extent" class="btn btn-light btn-sm" (click)="handleZoomToExtent($event,itemLayer)"><i class="fa 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="fa fa-bar-chart" 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="fa fa-minus" aria-hidden="true"></i></a></span>
+        </div>
+        <div *ngIf="itemLayer.legendVisible">
+          <div class="card legend">
+            <fm-map-layer-legend [layer]="firstLayer(itemLayer)" (click)="handleLegendClick($event,itemLayer);"></fm-map-layer-legend>
+          </div>
+        </div>
+    </div>
+  </div>
+</div>
+<ng-template #noLayers>
+  <div class="list-group">
+    <div class="list-group-item" i18n>No layers</div>
+  </div>    
+</ng-template>
--- a/projects/common-map/src/fm-map/components/aol/layer-list/layer-list.component.scss
+++ b/projects/common-map/src/fm-map/components/aol/layer-list/layer-list.component.scss
@@ -0,0 +1,18 @@
+.layerlist ul {
+  list-style:none;
+  padding:0;
+}
+
+.active span.btn.btn-lnk.p-0.border-0 {
+  color:white;
+}
+
+.btn-sm {
+  padding:0.25rem 0.3rem;
+}
+
+.legend {
+  margin-top:0.5rem;
+  color:black;
+  padding:0.25rem;
+}
--- a/projects/common-map/src/fm-map/components/aol/layer-list/layer-list.component.ts
+++ b/projects/common-map/src/fm-map/components/aol/layer-list/layer-list.component.ts
@@ -0,0 +1,64 @@
+import { Component,Input,Output,EventEmitter } from '@angular/core';
+import { IItemLayer } from '../../../models';
+
+@Component({
+  selector: 'fm-map-layer-list',
+  templateUrl: './layer-list.component.html',
+  styleUrls: ['./layer-list.component.scss']
+})
+
+export class LayerListComponent  {
+  @Input() itemLayers: IItemLayer[];
+  @Input() baseLayers: boolean = false;
+  @Output() onToggleVisibility = new EventEmitter<IItemLayer>();
+  @Output() onSetOpacity = new EventEmitter<{layer: IItemLayer,opacity:number }>();
+  @Output() onDelete = new EventEmitter<IItemLayer>();
+  @Output() onZoomToExtent = new EventEmitter<IItemLayer>();
+  @Output() onSelectLayer = new EventEmitter<IItemLayer>();
+  @Input() selectedLayer: IItemLayer;
+
+  constructor( ) {
+  }
+
+  handleDelete(event:MouseEvent, item:IItemLayer) {
+    this.onDelete.emit(item);
+    event.preventDefault();
+  }
+
+  handleToggleVisibility(event:MouseEvent, item: IItemLayer) {
+    this.onToggleVisibility.emit(item);
+    item.legendVisible = item.visible && item.legendVisible;
+    event.preventDefault();
+  }
+
+  handleSetOpacity(event: MouseEvent, layer: IItemLayer,opacity:number) {
+    this.onSetOpacity.emit({ layer,opacity });
+    event.preventDefault();
+  }
+
+  handleZoomToExtent(event: MouseEvent, item: IItemLayer) {
+    this.onZoomToExtent.emit(item);
+    event.preventDefault();
+  }
+
+  handleSelectLayer(event: MouseEvent, item: IItemLayer) {
+    this.onSelectLayer.emit(item);
+    event.preventDefault();
+  }
+
+  firstLayer(item: IItemLayer): any {
+    if (item && item.item && item.item.data && item.item.data.layers && item.item.data.layers.length > 0) return item.item.data.layers[0];
+    return null;
+  }
+
+  toggleLegend(event: MouseEvent, lg: boolean) {  
+    event.preventDefault();
+    return !lg;
+  }
+
+  handleLegendClick(event: MouseEvent, item: IItemLayer) {
+    this.onSelectLayer.emit(item);
+    this.onZoomToExtent.emit(item);
+    event.preventDefault();
+  }
+}
--- a/projects/common-map/src/fm-map/components/aol/layer-vector-image/layer-vector-image.component.ts
+++ b/projects/common-map/src/fm-map/components/aol/layer-vector-image/layer-vector-image.component.ts
@@ -0,0 +1,31 @@
+import { Component, OnDestroy, OnInit, Input, Optional, OnChanges, SimpleChanges } from '@angular/core';
+import { Vector } from 'ol/layer';
+import { Style } from 'ol/style';
+import { StyleFunction } from 'ol/style/Style';
+import { LayerVectorComponent, LayerGroupComponent, MapComponent } from 'ngx-openlayers';
+import { RenderType  } from 'ol/layer/Vector';
+
+@Component({
+  selector: 'fm-map-aol-layer-vector-image',
+  template: `
+    <ng-content></ng-content>
+  `,
+})
+export class LayerVectorImageComponent extends LayerVectorComponent implements OnInit, OnDestroy, OnChanges {
+  public source: Vector;
+
+  @Input()
+  renderMode: RenderType | string = "image";  
+
+  constructor(map: MapComponent) {
+    super(map);
+  }
+
+  ngOnInit() {
+    super.ngOnInit();
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    super.ngOnChanges(changes);
+  }
+}
--- a/projects/common-map/src/fm-map/components/aol/rotation-reset/rotation-reset.component.ts
+++ b/projects/common-map/src/fm-map/components/aol/rotation-reset/rotation-reset.component.ts
@@ -0,0 +1,53 @@
+import { Component, Host, Input, OnInit, ChangeDetectorRef  } from '@angular/core';
+import { ViewComponent, MapComponent } from 'ngx-openlayers';
+
+import {View} from 'ol';
+
+
+
+@Component({
+  selector: 'fm-map-rotation-reset',
+  template: `<div (click)="handleClick($event)" class="rounded-circle compass" [style.transform]="Rotation()" [ngClass]="{'compass-n':IsNorth()}"></div>`,
+  styles: [`.compass {
+      width:2.5em;
+      height:2.5em;
+      background-color: white;
+      background-size: contain;
+      background-image: url(data:image/png;base64,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);
+      opacity: 1;
+    }
+    .compass-n {    
+      background-image: url(data:image/png;base64,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);
+      transition: opacity 1s ease-out;
+      transition-delay: 2s;
+      opacity:0;
+    }
+`]
+})
+export class RotationResetComponent implements OnInit {
+  view: View;
+
+  public Rotation() {
+    let rotation =  this.view ? this.view.getRotation() : 0;
+    return `rotate(${rotation}rad)`;
+  }
+
+  public IsNorth() {
+    return this.view ? this.view.getRotation() == 0 : true;
+  }
+
+  ngOnInit(): void {
+    this.view = this.map.instance.getView();
+    this.view.on('change:rotation', () => {
+      this.changeDetectorRef$.detectChanges();
+    });
+  }
+
+  constructor( @Host() private map: MapComponent, private changeDetectorRef$: ChangeDetectorRef ) {
+  }
+
+  handleClick(event:Event) {
+    this.view.animate({ rotation: 0 });
+    event.preventDefault();
+  }
+}
--- a/projects/common-map/src/fm-map/components/aol/switch2d3d/switch2d3d.component.ts
+++ b/projects/common-map/src/fm-map/components/aol/switch2d3d/switch2d3d.component.ts
@@ -0,0 +1,40 @@
+// import { Component, OnInit,Input  } from '@angular/core';
+//import { MapComponent } from 'ngx-openlayers';
+//import OLCesium from 'olcs/OLCesium.js';
+
+
+// @Component({
+//   selector: 'fm-map-switch2d3d',
+//   template: '<div (click)="handleClick($event)" class="rounded-circle twotreed">{{label}}</div>',
+//   styles: [`.twotreed {
+//     width:2.5em;
+//     height:2.5em;
+//     background-color: white;
+//     text-align:center;
+//     line-height:2.5em;
+//     font-weight:bold;
+//     cursor:default;}`]
+
+// })
+// export class Switch2D3DComponent {
+
+//   @Input() enable:boolean;
+//   public label: string = "3D";
+//   private ol3d: OLCesium;
+
+
+//   constructor(private map: MapComponent) {
+    
+//   }
+
+//   ngOnInit() {
+//     this.ol3d = new OLCesium({ map: this.map.instance }); // ol2dMap is the ol.Map instance
+//   }
+
+//   handleClick(event) {
+//     this.enable = !this.enable;
+//     if (this.enable)
+//       this.ol3d.setEnabled(this.enable);
+//       this.label = this.enable?"2D":"3D";
+//   }
+// }
--- a/projects/common-map/src/fm-map/components/aol/zoom-to-extent/zoom-to-extent.component.ts
+++ b/projects/common-map/src/fm-map/components/aol/zoom-to-extent/zoom-to-extent.component.ts
@@ -0,0 +1,39 @@
+import { Component, Host, Input, OnInit, OnChanges, SimpleChanges, forwardRef } from '@angular/core';
+import { ViewComponent, MapComponent } from 'ngx-openlayers';
+
+ 
+@Component({
+  selector: 'fm-map-zoom-to-extent',
+  template: `<ng-content></ng-content>`
+})
+export class ZoomToExtentComponent implements OnChanges {
+  view: ViewComponent;
+  map: MapComponent;
+  @Input() extent: number[];
+  @Input() animate: boolean = false;
+
+  constructor(@Host() view: ViewComponent, @Host() map: MapComponent) {
+    this.view = view;
+    this.map = map;
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (this.extent) {
+      var options = { padding: [0, 0, 0, 0],minResolution:1 };
+      let size = this.map.instance.getSize();
+      let rem = parseFloat(getComputedStyle(document.documentElement).fontSize);
+      let threshold = 44 * rem;
+      var left = 1 * rem;
+      var right = 1 * rem;
+      var bottom = Math.round(size[1] / 2);
+      var top = 1 * rem;
+      if (size[0] > threshold) {
+        bottom = 1 * rem;
+        left = 23 * rem;
+      }
+      options.padding = [top, right, bottom, left];
+      if (this.animate) options["duration"] = 2000;
+      this.view.instance.fit(this.extent, options);
+    }
+  }
+}