Merge branch 'feature/AW5739Angular_v16' into develop

2023-12-28 12:31:33 +01:00 · 2023-12-28 12:31:33 +01:00 · d36185dbbf
commit d36185dbbf
parent 5cbb6f32f9 eb9a8489b8
142 changed files with 17280 additions and 8537 deletions
--- a/.gitignore
+++ b/.gitignore
@ -51,4 +51,5 @@ projects/common-map/node_modules/
 .angular/*
 projects/common-map3d/node_modules/
 projects/common-map/node_modules/
+projects/common-aol/node_modules/
 projects/common/node_modules/
--- a/angular.json
+++ b/angular.json
@ -253,6 +253,34 @@
          }
        }
      }
+    },
+    "common-aol": {
+      "projectType": "library",
+      "root": "projects/common-aol",
+      "sourceRoot": "projects/common-aol/src",
+      "prefix": "fm-aol",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:ng-packagr:build",
+          "options": {
+            "tsConfig": "projects/common-aol/tsconfig.lib.json",
+            "project": "projects/common-aol/ng-package.json"
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "projects/common-aol/tsconfig.lib.prod.json"
+            }
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "projects/common-aol/src/test.ts",
+            "tsConfig": "projects/common-aol/tsconfig.spec.json",
+            "karmaConfig": "projects/common-aol/karma.conf.js"
+          }
+        }
+      }
    }
  },
  "cli": {
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -1,7 +1,7 @@
 {
  "name": "farmmaps-lib-app",
  "version": "4.2.0",
-  "scripts":   {
+  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
@ -10,23 +10,24 @@
    "e2e": "ng e2e"
  },
  "private": true,
-  "dependencies":   {
-    "@angular/animations": "^14.1.3",
-    "@angular/common": "^14.1.3",
-    "@angular/compiler": "^14.1.3",
-    "@angular/core": "^14.1.3",
+  "dependencies": {
    "@angular-eslint/eslint-plugin": "^15.2.1",
-    "@angular/forms": "^14.1.3",
-    "@angular/platform-browser": "^14.1.3",
-    "@angular/platform-browser-dynamic": "^14.1.3",
-    "@angular/router": "^14.1.3",
+    "@angular/animations": "^16.2.12",
+    "@angular/common": "^16.2.12",
+    "@angular/compiler": "^16.2.12",
+    "@angular/core": "^16.2.12",
+    "@angular/forms": "^16.2.12",
+    "@angular/platform-browser": "^16.2.12",
+    "@angular/platform-browser-dynamic": "^16.2.12",
+    "@angular/router": "^16.2.12",
    "@farmmaps/common": "file:dist/common",
+    "@farmmaps/common-aol": "file:dist/common-aol",
    "@farmmaps/common-map": "file:dist/common-map",
    "@farmmaps/common-map3d": "file:dist/common-map3d",
-    "@microsoft/signalr": "^3.1.16",
-    "@ng-bootstrap/ng-bootstrap": "^13.0.0",
-    "@ngrx/effects": "^14",
-    "@ngrx/router-store": "^14",
+    "@microsoft/signalr": "^8.0.0",
+    "@ng-bootstrap/ng-bootstrap": "^15.0.0",
+    "@ngrx/effects": "^15",
+    "@ngrx/router-store": "^15",
    "@ngrx/store": "^14",
    "@popperjs/core": "^2.11.6",
    "angular-oauth2-oidc": "^13",
@ -39,10 +40,9 @@
    "https-browserify": "^1.0.0",
    "moment": "^2.29.4",
    "ngrx-store-localstorage": "^14",
-    "ngx-avatar": "^4.1.0",
-    "ngx-clipboard": "^14.0.1",
-    "ngx-image-cropper": "^3.3.5",
-    "ngx-openlayers": "1.0.0-next.19",
+    "ngx-avatars": "^1.7.0",
+    "ngx-clipboard": "^15.1.0",
+    "ngx-image-cropper": "^6.0.2",
    "ngx-uploadx": "^5.2.0",
    "ol": "6.14.1",
    "olcs": "^2.13.1",
@ -54,15 +54,15 @@
    "tslib": "^2.4.0",
    "url": "^0.11.0",
    "util": "^0.12.4",
-    "zone.js": "~0.11.4"
+    "zone.js": "~0.13.3"
  },
-  "devDependencies":   {
-    "@angular-builders/custom-webpack": "^14",
-    "@angular-devkit/build-angular": "^14.1.3",
-    "@angular/cli": "^14.1.3",
-    "@angular/compiler-cli": "^14.1.3",
-    "@angular/language-service": "^14.1.3",
-    "@angular/localize": "^14.1.3",
+  "devDependencies": {
+    "@angular-builders/custom-webpack": "^16.0.1",
+    "@angular-devkit/build-angular": "^16.2.11",
+    "@angular/cli": "^16.2.11",
+    "@angular/compiler-cli": "^16.2.12",
+    "@angular/language-service": "^16.2.12",
+    "@angular/localize": "^16.2.12",
    "@types/arcgis-rest-api": "^10.4.5",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "^2.0.9",
@ -70,7 +70,6 @@
    "@typescript-eslint/eslint-plugin": "^5.54.0",
    "@typescript-eslint/eslint-plugin-tslint": "^5.54.0",
    "@typescript-eslint/parser": "^5.54.0",
-    "codelyzer": "^0.0.28",
    "eslint": "^8.35.0",
    "eslint-config-prettier": "^8.6.0",
    "eslint-plugin-import": "^2.27.5",
@ -81,9 +80,9 @@
    "karma-coverage-istanbul-reporter": "^3.0.3",
    "karma-jasmine": "^5.1.0",
    "karma-jasmine-html-reporter": "^2.0.0",
-    "ng-packagr": "^14.1.0",
-    "protractor": "~7.0.0",
+    "ng-packagr": "^16.2.3",
+    "protractor": "^7.0.0",
    "ts-node": "^8.8.1",
-    "typescript": "~4.6.4"
+    "typescript": "~5.1.6"
  }
-}
+}
--- a/projects/common-aol/.eslintrc.js
+++ b/projects/common-aol/.eslintrc.js
@ -0,0 +1,22 @@
+module.exports = {
+    "env": {
+        "browser": true,
+        "es2021": true
+    },
+    "extends": [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/recommended"
+    ],
+    "overrides": [
+    ],
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "ecmaVersion": "latest",
+        "sourceType": "module"
+    },
+    "plugins": [
+        "@typescript-eslint"
+    ],
+    "rules": {
+    }
+}
--- a/projects/common-aol/README.MD
+++ b/projects/common-aol/README.MD
@ -0,0 +1,24 @@
+# CommonAol
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 7.2.0.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project common-aol` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project common-aol`.
+> Note: Don't forget to add `--project common-aol` or else it will be added to the default project in your `angular.json` file. 
+
+## Build
+
+Run `ng build common-aol` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build common-aol`, go to the dist folder `cd dist/common-aol` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test common-aol` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
--- a/projects/common-aol/ng-package.json
+++ b/projects/common-aol/ng-package.json
@ -0,0 +1,10 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/common-aol",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  },
+  "allowedNonPeerDependencies": [
+    "."
+  ]
+}
--- a/projects/common-aol/package-lock.json
+++ b/projects/common-aol/package-lock.json
--- a/projects/common-aol/package.json
+++ b/projects/common-aol/package.json
@ -0,0 +1,21 @@
+{
+    "name": "@farmmaps/common-aol",
+    "version": "2.1.0",
+    "publishConfig": {
+        "registry": "https://repository.akkerweb.nl/repository/npm-hosted/"
+    },
+    "dependencies": {
+        "tslib": "^2.0.0",
+        "@types/openlayers": "4.3.x || 4.4.x",
+        "openlayers": "4.3.x || 4.4.x"
+    },
+    "peerDependencies": {
+        "@angular/core": ">=16.0.0",
+        "ngrx-store-localstorage": ">=16.0.0",
+        "@ngrx/effects": ">=16.0.0",
+        "@ngrx/router-store":">=16.0.0",
+        "@ngrx/store":">=16.0.0",
+        "tassign": ">=1.0.0",
+        "ol": ">=6.8.1"
+    }
+}
--- a/projects/common-aol/src/fm-aol/common-aol.module.ts
+++ b/projects/common-aol/src/fm-aol/common-aol.module.ts
@ -0,0 +1,114 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import {
+  MapComponent, ViewComponent, GraticuleComponent,
+  LayerGroupComponent, LayerTileComponent, LayerVectorComponent, LayerVectorTileComponent, LayerImageComponent,
+  SourceClusterComponent, SourceRasterComponent,
+  SourceBingmapsComponent, SourceOsmComponent, SourceVectorComponent, SourceVectorTileComponent, SourceXYZComponent, SourceTileUTFGridComponent, SourceTileWMSComponent,
+  SourceGeoJSONComponent, SourceTileWMTSComponent, SourceTileJSONComponent, SourceImageStaticComponent, SourceImageWMSComponent, FeatureComponent,
+  GeometryLinestringComponent, GeometryPointComponent, GeometryPolygonComponent,
+  CollectionCoordinatesComponent, CoordinateComponent,
+  StyleCircleComponent, StyleComponent, StyleFillComponent, StyleIconComponent, StyleStrokeComponent, StyleTextComponent,
+  ControlAttributionComponent, ControlMousePositionComponent,
+  // ControlFullScreenComponent, ControlRotateComponent, ControlZoomSliderComponent,
+  ControlOverviewMapComponent, ControlScaleLineComponent, ControlZoomComponent, 
+  ControlZoomToExtentComponent, DefaultControlComponent, ControlComponent,
+  FormatMVTComponent,
+  TileGridComponent, TileGridWMTSComponent,
+  DefaultInteractionComponent, DragRotateInteractionComponent, DragRotateAndZoomInteractionComponent,
+  DoubleClickZoomInteractionComponent, DragAndDropInteractionComponent, DragBoxInteractionComponent,
+  DragPanInteractionComponent, DragZoomInteractionComponent, MouseWheelZoomInteractionComponent,
+  PinchZoomInteractionComponent,  DrawInteractionComponent, SelectInteractionComponent, ModifyInteractionComponent, TranslateInteractionComponent,
+  OverlayComponent,
+  ContentComponent,
+  AttributionComponent,
+  AttributionsComponent
+} from './components';
+
+export * from './components';
+
+const COMPONENTS = [
+  MapComponent,
+
+  ViewComponent,
+  GraticuleComponent,
+
+  LayerGroupComponent,
+  LayerImageComponent,
+  LayerTileComponent,
+  LayerVectorComponent,
+  LayerVectorTileComponent,
+
+  SourceClusterComponent,
+  SourceRasterComponent,
+  SourceOsmComponent,
+  SourceBingmapsComponent,
+  SourceVectorComponent,
+  SourceXYZComponent,
+  SourceVectorTileComponent,
+  SourceTileUTFGridComponent,
+  SourceTileWMSComponent,
+  SourceTileWMTSComponent,
+  SourceTileJSONComponent,
+  SourceGeoJSONComponent,
+  SourceImageStaticComponent,
+  SourceImageWMSComponent,
+  FeatureComponent,
+  GeometryLinestringComponent,
+  GeometryPointComponent,
+  GeometryPolygonComponent,
+  CoordinateComponent,
+  CollectionCoordinatesComponent,
+
+  StyleComponent,
+  StyleCircleComponent,
+  StyleFillComponent,
+  StyleIconComponent,
+  StyleStrokeComponent,
+  StyleTextComponent,
+
+  DefaultControlComponent,
+  ControlComponent,
+  ControlAttributionComponent,
+  //ControlFullScreenComponent,
+  ControlMousePositionComponent,
+  ControlOverviewMapComponent,
+  //ControlRotateComponent,
+  ControlScaleLineComponent,
+  ControlZoomComponent,
+  //ControlZoomSliderComponent,
+  ControlZoomToExtentComponent,
+
+  FormatMVTComponent,
+  TileGridComponent,
+  TileGridWMTSComponent,
+
+  DefaultInteractionComponent,
+  DoubleClickZoomInteractionComponent,
+  DragAndDropInteractionComponent,
+  DragBoxInteractionComponent,
+  DragPanInteractionComponent,
+  DragRotateInteractionComponent,
+  DragRotateAndZoomInteractionComponent,
+  DragZoomInteractionComponent,
+  MouseWheelZoomInteractionComponent,
+  PinchZoomInteractionComponent,
+  DrawInteractionComponent,
+  SelectInteractionComponent,
+  ModifyInteractionComponent,
+  TranslateInteractionComponent,
+
+  OverlayComponent,
+  ContentComponent,
+  AttributionComponent,
+  AttributionsComponent
+];
+
+@NgModule({
+  declarations: COMPONENTS,
+  imports: [CommonModule],
+  exports: COMPONENTS
+})
+
+export class AppCommonAolModule {  
+}
--- a/projects/common-aol/src/fm-aol/components/attribution.component.ts
+++ b/projects/common-aol/src/fm-aol/components/attribution.component.ts
@ -0,0 +1,21 @@
+import { Component, ElementRef, OnInit } from '@angular/core';
+import { Attribution } from 'openlayers';
+
+@Component({
+  selector: 'aol-attribution',
+  template: '<ng-content></ng-content>'
+})
+export class AttributionComponent implements OnInit {
+  instance: Attribution;
+  html: string;
+
+  constructor(
+    private elementRef: ElementRef
+  ) {
+  }
+
+  ngOnInit() {
+    this.html = this.elementRef.nativeElement.innerHTML;
+    this.instance = new Attribution(this);
+  }
+}
--- a/projects/common-aol/src/fm-aol/components/attributions.component.ts
+++ b/projects/common-aol/src/fm-aol/components/attributions.component.ts
@ -0,0 +1,26 @@
+import { AfterViewInit, Component, ContentChildren, Host, QueryList } from '@angular/core';
+import { Attribution } from 'openlayers';
+import { SourceComponent } from './sources/source.component';
+import { AttributionComponent } from './attribution.component';
+
+@Component({
+  selector: 'aol-attributions',
+  template: '<ng-content></ng-content>'
+})
+export class AttributionsComponent implements AfterViewInit {
+  instance: Array<Attribution>;
+
+  @ContentChildren(AttributionComponent) attributions: QueryList<AttributionComponent>;
+
+  constructor(@Host() private source: SourceComponent) {
+  }
+
+  /* we can do this at the very end */
+  ngAfterViewInit() {
+    if (this.attributions.length) {
+      this.instance = this.attributions.map(cmp => cmp.instance);
+      // console.log('setting attributions:', this.instance);
+      this.source.instance.setAttributions(this.instance);
+    }
+  }
+}
--- a/projects/common-aol/src/fm-aol/components/content.component.ts
+++ b/projects/common-aol/src/fm-aol/components/content.component.ts
@ -0,0 +1,13 @@
+import { Component, ElementRef } from '@angular/core';
+
+@Component({
+  selector: 'aol-content',
+  template: '<ng-content></ng-content>'
+})
+export class ContentComponent {
+
+  constructor(
+    public elementRef: ElementRef
+  ) {
+  }
+}
--- a/projects/common-aol/src/fm-aol/components/controls/attribution.component.ts
+++ b/projects/common-aol/src/fm-aol/components/controls/attribution.component.ts
@ -0,0 +1,32 @@
+import { Component, ElementRef, Input, OnDestroy, OnInit } from '@angular/core';
+import { control } from 'openlayers';
+import { MapComponent } from '../map.component';
+
+@Component({
+  selector: 'aol-control-attribution',
+  template: ``
+})
+export class ControlAttributionComponent implements OnInit, OnDestroy {
+  public componentType: string = 'control';
+  instance: control.Attribution;
+  target: Element;
+  @Input() collapsible: boolean;
+
+  constructor(
+    private map: MapComponent,
+    private element: ElementRef
+  ) {
+  }
+
+  ngOnInit() {
+    this.target = this.element.nativeElement;
+    // console.log('ol.control.Attribution init: ', this);
+    this.instance = new control.Attribution(this);
+    this.map.instance.addControl(this.instance);
+  }
+
+  ngOnDestroy() {
+    // console.log('removing aol-control-attribution');
+    this.map.instance.removeControl(this.instance);
+  }
+}
--- a/projects/common-aol/src/fm-aol/components/controls/control.component.ts
+++ b/projects/common-aol/src/fm-aol/components/controls/control.component.ts
@ -0,0 +1,34 @@
+import { Component, ContentChild, OnDestroy, OnInit } from '@angular/core';
+import { control } from 'openlayers';
+import { MapComponent } from '../map.component';
+import { ContentComponent } from '../content.component';
+
+@Component({
+  selector: 'aol-control',
+  template: `<ng-content></ng-content>`
+})
+export class ControlComponent implements OnInit, OnDestroy {
+  public componentType: string = 'control';
+  instance: control.Control;
+  element: Element;
+  @ContentChild(ContentComponent) content: ContentComponent;
+
+  constructor(
+    private map: MapComponent
+  ) {
+  }
+
+  ngOnInit() {
+    if (this.content) {
+      this.element = this.content.elementRef.nativeElement;
+      this.instance = new control.Control(this);
+      this.map.instance.addControl(this.instance);
+    }
+  }
+
+  ngOnDestroy() {
+    if (this.instance) {
+      this.map.instance.removeControl(this.instance);
+    }
+  }
+}
--- a/projects/common-aol/src/fm-aol/components/controls/default.component.ts
+++ b/projects/common-aol/src/fm-aol/components/controls/default.component.ts
@ -0,0 +1,31 @@
+import { Component, OnDestroy, OnInit, Input } from '@angular/core';
+import { control, Collection } from 'openlayers';
+import { MapComponent } from '../map.component';
+
+@Component({
+  selector: 'aol-control-defaults',
+  template: ''
+})
+export class DefaultControlComponent implements OnInit, OnDestroy {
+  instance: Collection<control.Control>;
+  @Input() attribution: boolean;
+  @Input() attributionOptions: olx.control.AttributionOptions;
+  @Input() rotate: boolean;
+  @Input() rotateOptions: olx.control.RotateOptions;
+  @Input() zoom: boolean;
+  @Input() zoomOptions: olx.control.ZoomOptions;
+
+  constructor(private map: MapComponent) {
+  }
+
+  ngOnInit() {
+    // console.log('ol.control.defaults init: ', this);
+    this.instance = control.defaults(this);
+    this.instance.forEach((control) => this.map.instance.addControl(control));
+  }
+
+  ngOnDestroy() {
+    // console.log('removing aol-control-defaults');
+    this.instance.forEach((control) => this.map.instance.removeControl(control));
+  }
+}
--- a/projects/common-aol/src/fm-aol/components/controls/fullscreen.component.ts
+++ b/projects/common-aol/src/fm-aol/components/controls/fullscreen.component.ts
@ -0,0 +1,28 @@
+// Commented-out due to error TS2345: Argument of type 'this' is not assignable to parameter of type 'FullScreenOptions'.
+
+// import { Component, OnDestroy, OnInit } from '@angular/core';
+// import { control } from 'openlayers';
+// import { MapComponent } from '../map.component';
+
+// @Component({
+//   selector: 'aol-control-fullscreen',
+//   template: `<ng-content></ng-content>`
+// })
+// export class ControlFullScreenComponent implements OnInit, OnDestroy {
+//   instance: control.FullScreen;
+
+//   constructor(private map: MapComponent) {
+//     // console.log('instancing aol-control-fullscreen');
+//   }
+
+//   ngOnInit() {
+//     this.instance = new control.FullScreen(this);
+//     this.map.instance.addControl(this.instance);
+//   }
+  
+
+//   ngOnDestroy() {
+//     // console.log('removing aol-control-fullscreen');
+//     this.map.instance.removeControl(this.instance);
+//   }
+// }
--- a/projects/common-aol/src/fm-aol/components/controls/index.ts
+++ b/projects/common-aol/src/fm-aol/components/controls/index.ts
@ -0,0 +1,11 @@
+export * from './attribution.component';
+export * from './control.component';
+export * from './default.component';
+//export * from './fullscreen.component';
+export * from './mouseposition.component';
+export * from './overviewmap.component';
+//export * from './rotate.component';
+export * from './scaleline.component';
+export * from './zoom.component';
+//export * from './zoomslider.component';
+export * from './zoomtoextent.component';
--- a/projects/common-aol/src/fm-aol/components/controls/mouseposition.component.ts
+++ b/projects/common-aol/src/fm-aol/components/controls/mouseposition.component.ts
@ -0,0 +1,32 @@
+import { Component, ElementRef, Input, OnDestroy, OnInit } from '@angular/core';
+import { control, CoordinateFormatType, ProjectionLike } from 'openlayers';
+import { MapComponent } from '../map.component';
+
+@Component({
+  selector: 'aol-control-mouseposition',
+  template: ``
+})
+export class ControlMousePositionComponent implements OnInit, OnDestroy {
+  instance: control.MousePosition;
+  @Input() coordinateFormat: CoordinateFormatType;
+  @Input() projection: ProjectionLike;
+  target: Element;
+
+  constructor(
+    private map: MapComponent,
+    private element: ElementRef
+  ) {
+  }
+
+  ngOnInit() {
+    this.target = this.element.nativeElement;
+    // console.log('ol.control.MousePosition init: ', this);
+    this.instance = new control.MousePosition(this);
+    this.map.instance.addControl(this.instance);
+  }
+
+  ngOnDestroy() {
+    // console.log('removing aol-control-mouseposition');
+    this.map.instance.removeControl(this.instance);
+  }
+}
--- a/projects/common-aol/src/fm-aol/components/controls/overviewmap.component.ts
+++ b/projects/common-aol/src/fm-aol/components/controls/overviewmap.component.ts
@ -0,0 +1,33 @@
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { control, View, layer } from 'openlayers';
+import { MapComponent } from '../map.component';
+
+@Component({
+  selector: 'aol-control-overviewmap',
+  template: `<ng-content></ng-content>`
+})
+export class ControlOverviewMapComponent implements OnInit, OnDestroy {
+  instance: control.OverviewMap;
+  @Input() collapsed: boolean;
+  @Input() collapseLabel: string;
+  @Input() collapsible: boolean;
+  @Input() label: string;
+  @Input() layers: layer.Layer[];
+  @Input() target: Element;
+  @Input() tipLabel: string;
+  @Input() view: View;
+
+  constructor(private map: MapComponent) {
+    // console.log('instancing aol-control-overviewmap');
+  }
+
+  ngOnInit() {
+    this.instance = new control.OverviewMap(this);
+    this.map.instance.addControl(this.instance);
+  }
+
+  ngOnDestroy() {
+    // console.log('removing aol-control-overviewmap');
+    this.map.instance.removeControl(this.instance);
+  }
+}
--- a/projects/common-aol/src/fm-aol/components/controls/rotate.component.ts
+++ b/projects/common-aol/src/fm-aol/components/controls/rotate.component.ts
@ -0,0 +1,27 @@
+// Commented-out due to error TS2345: Argument of type 'this' is not assignable to parameter of type 'RotateOptions'.
+
+// import { Component, OnDestroy, OnInit } from '@angular/core';
+// import { control } from 'openlayers';
+// import { MapComponent } from '../map.component';
+
+// @Component({
+//   selector: 'aol-control-rotate',
+//   template: `<ng-content></ng-content>`
+// })
+// export class ControlRotateComponent implements OnInit, OnDestroy {
+//   instance: control.Rotate;
+
+//   constructor(private map: MapComponent) {
+//     // console.log('instancing aol-control-rotate');
+//   }
+
+//   ngOnInit() {
+//     this.instance = new control.Rotate(this);
+//     this.map.instance.addControl(this.instance);
+//   }
+
+//   ngOnDestroy() {
+//     // console.log('removing aol-control-rotate');
+//     this.map.instance.removeControl(this.instance);
+//   }
+// }
--- a/projects/common-aol/src/fm-aol/components/controls/scaleline.component.ts
+++ b/projects/common-aol/src/fm-aol/components/controls/scaleline.component.ts
@ -0,0 +1,26 @@
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { control } from 'openlayers';
+import { MapComponent } from '../map.component';
+
+@Component({
+  selector: 'aol-control-scaleline',
+  template: `<ng-content></ng-content>`
+})
+export class ControlScaleLineComponent implements OnInit, OnDestroy {
+  instance: control.ScaleLine;
+  @Input() units: string;
+
+  constructor(private map: MapComponent) {
+    // console.log('instancing aol-control-scaleline');
+  }
+
+  ngOnInit() {
+    this.instance = new control.ScaleLine(this);
+    this.map.instance.addControl(this.instance);
+  }
+
+  ngOnDestroy() {
+    // console.log('removing aol-control-scaleline');
+    this.map.instance.removeControl(this.instance);
+  }
+}
--- a/projects/common-aol/src/fm-aol/components/controls/zoom.component.ts
+++ b/projects/common-aol/src/fm-aol/components/controls/zoom.component.ts
@ -0,0 +1,32 @@
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { control } from 'openlayers';
+import { MapComponent } from '../map.component';
+
+@Component({
+  selector: 'aol-control-zoom',
+  template: `<ng-content></ng-content>`
+})
+export class ControlZoomComponent implements OnInit, OnDestroy {
+  instance: control.Zoom;
+
+  @Input() duration: number;
+  @Input() zoomInLabel: (string | Node);
+  @Input() zoomOutLabel: (string | Node);
+  @Input() zoomInTipLabel: string;
+  @Input() zoomOutTipLabel: string;
+  @Input() delta: number;
+
+  constructor(private map: MapComponent) {
+    // console.log('instancing aol-control-zoom');
+  }
+
+  ngOnInit() {
+    this.instance = new control.Zoom(this);
+    this.map.instance.addControl(this.instance);
+  }
+
+  ngOnDestroy() {
+    // console.log('removing aol-control-zoom');
+    this.map.instance.removeControl(this.instance);
+  }
+}
--- a/projects/common-aol/src/fm-aol/components/controls/zoomslider.component.ts
+++ b/projects/common-aol/src/fm-aol/components/controls/zoomslider.component.ts
@ -0,0 +1,27 @@
+// Commented-out due to error TS2345: Argument of type 'this' is not assignable to parameter of type 'ZoomSliderOptions'.
+
+// import { Component, OnDestroy, OnInit } from '@angular/core';
+// import { control } from 'openlayers';
+// import { MapComponent } from '../map.component';
+
+// @Component({
+//   selector: 'aol-control-zoomslider',
+//   template: `<ng-content></ng-content>`
+// })
+// export class ControlZoomSliderComponent implements OnInit, OnDestroy {
+//   instance: control.ZoomSlider;
+
+//   constructor(private map: MapComponent) {
+//     // console.log('instancing aol-control-zoomslider');
+//   }
+
+//   ngOnInit() {
+//     this.instance = new control.ZoomSlider(this);
+//     this.map.instance.addControl(this.instance);
+//   }
+
+//   ngOnDestroy() {
+//     // console.log('removing aol-control-zoomslider');
+//     this.map.instance.removeControl(this.instance);
+//   }
+// }
--- a/projects/common-aol/src/fm-aol/components/controls/zoomtoextent.component.ts
+++ b/projects/common-aol/src/fm-aol/components/controls/zoomtoextent.component.ts
@ -0,0 +1,30 @@
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { control, Extent } from 'openlayers';
+import { MapComponent } from '../map.component';
+
+@Component({
+  selector: 'aol-control-zoomtoextent',
+  template: `<ng-content></ng-content>`
+})
+export class ControlZoomToExtentComponent implements OnInit, OnDestroy {
+  instance: control.ZoomToExtent;
+
+  @Input() className: string;
+  @Input() label: (string | Node);
+  @Input() tipLabel: string;
+  @Input() extent: Extent;
+
+  constructor(private map: MapComponent) {
+    // console.log('instancing aol-control-zoomtoextent');
+  }
+
+  ngOnInit() {
+    this.instance = new control.ZoomToExtent(this);
+    this.map.instance.addControl(this.instance);
+  }
+
+  ngOnDestroy() {
+    // console.log('removing aol-control-zoomtoextent');
+    this.map.instance.removeControl(this.instance);
+  }
+}
--- a/projects/common-aol/src/fm-aol/components/coordinate.component.ts
+++ b/projects/common-aol/src/fm-aol/components/coordinate.component.ts
@ -0,0 +1,118 @@
+import { Component, Optional, OnChanges, Input, SimpleChanges } from '@angular/core';
+import { proj, Coordinate } from 'openlayers';
+import { MapComponent } from './map.component';
+import { GeometryPointComponent, GeometryLinestringComponent, GeometryPolygonComponent } from './geometry.components';
+import { ViewComponent } from './view.component';
+import { OverlayComponent } from './overlay.component';
+
+@Component({
+  selector: 'aol-coordinate',
+  template: `<div class="aol-coordinate"></div>`
+})
+export class CoordinateComponent implements OnChanges {
+  private host: any;
+
+  @Input() x: number;
+  @Input() y: number;
+  @Input() srid: string = 'EPSG:3857';
+
+  constructor(
+    private map: MapComponent,
+    @Optional() viewHost: ViewComponent,
+    @Optional() geometryPointHost: GeometryPointComponent,
+    @Optional() overlayHost: OverlayComponent
+  ) {
+    // console.log('instancing aol-coordinate');
+    if (geometryPointHost !== null) {
+      this.host = geometryPointHost;
+    } else if (viewHost !== null) {
+      this.host = viewHost;
+    } else if (overlayHost !== null) {
+      this.host = overlayHost;
+    }
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    let referenceProjection: proj.Projection;
+    let referenceProjectionCode: string;
+    let transformedCoordinates: number[];
+
+    referenceProjection = this.map.instance.getView().getProjection();
+    referenceProjectionCode = referenceProjection ? referenceProjection.getCode() : 'EPSG:3857';
+
+    if (this.srid === referenceProjectionCode) {
+      transformedCoordinates = [this.x, this.y];
+    } else {
+      transformedCoordinates = proj.transform([this.x, this.y], this.srid, referenceProjectionCode);
+    }
+
+    switch (this.host.componentType) {
+      case 'geometry-point':
+        this.host.instance.setCoordinates(transformedCoordinates);
+        break;
+      case 'view':
+        this.host.instance.setCenter(transformedCoordinates);
+        break;
+      case 'overlay':
+        this.host.instance.setPosition(transformedCoordinates);
+        break;
+    }
+  }
+}
+
+@Component({
+  selector: 'aol-collection-coordinates',
+  template: `<div class="aol-collection-coordinates"></div>`
+})
+export class CollectionCoordinatesComponent implements OnChanges {
+  private host: any;
+
+  @Input() coordinates: [number, number][];
+  @Input() srid: string = 'EPSG:3857';
+
+  constructor(
+      private map: MapComponent,
+      @Optional() geometryLinestring: GeometryLinestringComponent,
+      @Optional() geometryPolygon: GeometryPolygonComponent
+  ) {
+    // console.log('creating aol-collection-coordinates');
+    if (!!geometryLinestring) {
+      this.host = geometryLinestring;
+    } else if (!!geometryPolygon) {
+      this.host = geometryPolygon;
+    } else {
+      throw new Error('aol-collection-coordinates must be a child of a geometry component');
+    }
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    let referenceProjection: proj.Projection;
+    let referenceProjectionCode: string;
+    let transformedCoordinates: Array<Coordinate>;
+
+    // console.log('coordinates change: ', this.coordinates);
+
+    referenceProjection = this.map.instance.getView().getProjection();
+    referenceProjectionCode = referenceProjection ? referenceProjection.getCode() : 'EPSG:3857';
+
+    if (this.srid === referenceProjectionCode) {
+      transformedCoordinates = this.coordinates;
+    } else {
+      transformedCoordinates = [];
+      this.coordinates.forEach(function (coordinate: Coordinate) {
+        transformedCoordinates.push(proj.transform(coordinate, this.srid, referenceProjectionCode));
+      }.bind(this));
+    }
+    switch (this.host.componentType) {
+      case 'geometry-linestring':
+        this.host.instance.setCoordinates(transformedCoordinates);
+        break;
+      case 'geometry-polygon':
+        this.host.instance.setCoordinates([transformedCoordinates]);
+        break;
+      default:
+        throw new Error('aol-collection-coordinates\' host is of unknown type: ' + this.host.componentType);
+        // break;
+    }
+  }
+}
--- a/projects/common-aol/src/fm-aol/components/feature.component.ts
+++ b/projects/common-aol/src/fm-aol/components/feature.component.ts
@ -0,0 +1,35 @@
+import { Component, OnInit, OnDestroy, OnChanges, Input, SimpleChanges } from '@angular/core';
+import { Feature } from 'openlayers';
+import { SourceVectorComponent } from './sources';
+
+@Component({
+  selector: 'aol-feature',
+  template: `<ng-content></ng-content>`
+})
+export class FeatureComponent implements OnInit, OnDestroy, OnChanges {
+  public componentType = 'feature';
+  public instance: Feature;
+
+  @Input() id: string|number|undefined;
+
+  constructor(private host: SourceVectorComponent) {
+  }
+
+  ngOnInit() {
+    this.instance = new Feature();
+    if (this.id !== undefined) {
+      this.instance.setId(this.id);
+    }
+    this.host.instance.addFeature(this.instance);
+  }
+
+  ngOnDestroy() {
+    this.host.instance.removeFeature(this.instance);
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (this.instance) {
+      this.instance.setId(this.id);
+    }
+  }
+}
--- a/projects/common-aol/src/fm-aol/components/formats/format.component.ts
+++ b/projects/common-aol/src/fm-aol/components/formats/format.component.ts
@ -0,0 +1,6 @@
+import { format } from 'openlayers';
+
+export class FormatComponent {
+  public instance: format.Feature;
+  public componentType = 'format';
+}
--- a/projects/common-aol/src/fm-aol/components/formats/index.ts
+++ b/projects/common-aol/src/fm-aol/components/formats/index.ts
@ -0,0 +1,2 @@
+export * from './format.component';
+export * from './mvt.component';
--- a/projects/common-aol/src/fm-aol/components/formats/mvt.component.ts
+++ b/projects/common-aol/src/fm-aol/components/formats/mvt.component.ts
@ -0,0 +1,25 @@
+import { Component, forwardRef, Input } from '@angular/core';
+import { format, geom } from 'openlayers';
+import { FormatComponent } from './format.component';
+
+@Component({
+  selector: 'aol-format-mvt',
+  template: '',
+  providers: [
+    { provide: FormatComponent, useExisting: forwardRef(() => FormatMVTComponent) }
+  ]
+})
+export class FormatMVTComponent extends FormatComponent {
+  instance: format.MVT;
+
+  @Input() featureClass: (((geom: (geom.Geometry | { [k: string]: any })) => any) |
+    ((geom: geom.GeometryType, arg2: number[], arg3: (number[] | number[][]), arg4: { [k: string]: any }) => any));
+  @Input() geometryName: string;
+  @Input() layerName: string;
+  @Input() layers: string[];
+
+  constructor() {
+    super();
+    this.instance = new format.MVT(this);
+  }
+}
--- a/projects/common-aol/src/fm-aol/components/geometry.components.ts
+++ b/projects/common-aol/src/fm-aol/components/geometry.components.ts
@ -0,0 +1,69 @@
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { geom } from 'openlayers';
+import { FeatureComponent } from './feature.component';
+
+@Component({
+  selector: 'aol-geometry-linestring',
+  template: `<ng-content></ng-content>`
+})
+export class GeometryLinestringComponent implements OnInit, OnDestroy {
+  public componentType: string = 'geometry-linestring';
+  public instance: geom.LineString;
+
+  constructor(private host: FeatureComponent) {
+    // console.log('instancing aol-geometry-linestring');
+  }
+
+  ngOnInit() {
+    this.instance = new geom.LineString([]);
+    this.host.instance.setGeometry(this.instance);
+  }
+  ngOnDestroy() {
+    // this.host.setGeometry(null);
+  }
+}
+
+@Component({
+  selector: 'aol-geometry-point',
+  template: `<ng-content></ng-content>`
+})
+export class GeometryPointComponent implements OnInit, OnDestroy {
+  public componentType: string = 'geometry-point';
+  public instance: geom.Point;
+
+  constructor(private host: FeatureComponent) {
+    // console.log('creating aol-geometry-point');
+  }
+
+  ngOnInit() {
+    this.instance = new geom.Point([0, 0]); // defaulting coordinates to [0,0]. To be overridden in child component.
+    this.host.instance.setGeometry(this.instance);
+  }
+
+  ngOnDestroy() {
+    // this.host.setGeometry(null);
+  }
+}
+
+@Component({
+  selector: 'aol-geometry-polygon',
+  template: `<ng-content></ng-content>`
+})
+export class GeometryPolygonComponent implements OnInit, OnDestroy {
+  public componentType: string = 'geometry-polygon';
+  public instance: geom.Polygon;
+
+  constructor(private host: FeatureComponent) {
+    // console.log('creating aol-geometry-polygon');
+  }
+
+  ngOnInit() {
+    // defaulting coordinates to [0,0]. To be overridden in child component.
+    this.instance = new geom.Polygon([ [ [0, 0], [1, 0], [1, 1] ] ]);
+    this.host.instance.setGeometry(this.instance);
+  }
+
+  ngOnDestroy() {
+    // this.host.setGeometry(null);
+  }
+}
--- a/projects/common-aol/src/fm-aol/components/graticule.component.ts
+++ b/projects/common-aol/src/fm-aol/components/graticule.component.ts
@ -0,0 +1,49 @@
+import { Component, Input, AfterContentInit, OnChanges, SimpleChanges } from '@angular/core';
+import { Graticule, style } from 'openlayers';
+import { MapComponent } from './map.component';
+
+@Component({
+  selector: 'aol-graticule',
+  template: '<ng-content></ng-content>'
+})
+export class GraticuleComponent implements AfterContentInit, OnChanges {
+  instance: any;
+  public componentType: string = 'graticule';
+
+  @Input() strokeStyle: style.Stroke;
+  @Input() showLabels: boolean;
+  @Input() lonLabelPosition: number;
+  @Input() latLabelPosition: number;
+
+  constructor(private map: MapComponent) {
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    let properties: {[index: string]: any} = {};
+
+    if (!this.instance) {
+      return;
+    }
+
+    for (let key in changes) {
+      if (changes.hasOwnProperty(key)) {
+        properties[key] = changes[key].currentValue;
+      }
+    }
+
+    if (properties) {
+      this.instance = new Graticule(properties);
+    }
+    this.instance.setMap(this.map.instance);
+  }
+
+  ngAfterContentInit(): void {
+    this.instance = new Graticule({
+      strokeStyle: this.strokeStyle,
+      showLabels: this.showLabels,
+      lonLabelPosition: this.lonLabelPosition,
+      latLabelPosition: this.latLabelPosition
+    });
+    this.instance.setMap(this.map.instance);
+  }
+}
--- a/projects/common-aol/src/fm-aol/components/index.ts
+++ b/projects/common-aol/src/fm-aol/components/index.ts
@ -0,0 +1,19 @@
+export * from './controls';
+export * from './formats';
+export * from './interactions';
+export * from './layers';
+export * from './sources';
+export * from './styles';
+
+export * from './attribution.component';
+export * from './attributions.component';
+export * from './content.component';
+export * from './coordinate.component';
+export * from './feature.component';
+export * from './geometry.components';
+export * from './graticule.component';
+export * from './map.component';
+export * from './overlay.component';
+export * from './tilegrid.component';
+export * from './tilegridwmts.component';
+export * from './view.component';
--- a/projects/common-aol/src/fm-aol/components/interactions/default.component.ts
+++ b/projects/common-aol/src/fm-aol/components/interactions/default.component.ts
@ -0,0 +1,23 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { interaction, Collection } from 'openlayers';
+import { MapComponent } from '../map.component';
+
+@Component({
+  selector: 'aol-interaction-default',
+  template: ''
+})
+export class DefaultInteractionComponent implements OnInit, OnDestroy {
+  instance: Collection<interaction.Interaction>;
+
+  constructor(private map: MapComponent) {
+  }
+
+  ngOnInit() {
+    this.instance = interaction.defaults();
+    this.instance.forEach((interaction) => this.map.instance.addInteraction(interaction));
+  }
+
+  ngOnDestroy() {
+    this.instance.forEach((interaction) => this.map.instance.removeInteraction(interaction));
+  }
+}
--- a/projects/common-aol/src/fm-aol/components/interactions/doubleclickzoom.component.ts
+++ b/projects/common-aol/src/fm-aol/components/interactions/doubleclickzoom.component.ts
@ -0,0 +1,26 @@
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { interaction } from 'openlayers';
+import { MapComponent } from '../map.component';
+
+@Component({
+  selector: 'aol-interaction-doubleclickzoom',
+  template: ''
+})
+export class DoubleClickZoomInteractionComponent implements OnInit, OnDestroy {
+  instance: interaction.DoubleClickZoom;
+
+  @Input() duration: number;
+  @Input() delta: number;
+
+  constructor(private map: MapComponent) {
+  }
+
+  ngOnInit() {
+    this.instance = new interaction.DoubleClickZoom(this);
+    this.map.instance.addInteraction(this.instance);
+  }
+
+  ngOnDestroy() {
+    this.map.instance.removeInteraction(this.instance);
+  }
+}
--- a/projects/common-aol/src/fm-aol/components/interactions/draganddrop.component.ts
+++ b/projects/common-aol/src/fm-aol/components/interactions/draganddrop.component.ts
@ -0,0 +1,27 @@
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { interaction, format, ProjectionLike } from 'openlayers';
+import { MapComponent } from '../map.component';
+
+@Component({
+  selector: 'aol-interaction-draganddrop',
+  template: ''
+})
+export class DragAndDropInteractionComponent implements OnInit, OnDestroy {
+  instance: interaction.DragAndDrop;
+
+  @Input() formatConstructors: ((n: format.Feature) => any)[];
+  @Input() projection: ProjectionLike;
+  @Input() target: Element;
+
+  constructor(private map: MapComponent) {
+  }
+
+  ngOnInit() {
+    this.instance = new interaction.DragAndDrop(this);
+    this.map.instance.addInteraction(this.instance);
+  }
+
+  ngOnDestroy() {
+    this.map.instance.removeInteraction(this.instance);
+  }
+}
--- a/projects/common-aol/src/fm-aol/components/interactions/dragbox.component.ts
+++ b/projects/common-aol/src/fm-aol/components/interactions/dragbox.component.ts
@ -0,0 +1,27 @@
+import { Component, OnDestroy, OnInit, Input } from '@angular/core';
+import { interaction, EventsConditionType, DragBoxEndConditionType } from 'openlayers';
+import { MapComponent } from '../map.component';
+
+@Component({
+  selector: 'aol-interaction-dragbox',
+  template: ''
+})
+export class DragBoxInteractionComponent implements OnInit, OnDestroy {
+  instance: interaction.DragBox;
+
+  @Input() className: string;
+  @Input() condition: EventsConditionType;
+  @Input() boxEndCondition: DragBoxEndConditionType;
+
+  constructor(private map: MapComponent) {
+  }
+
+  ngOnInit() {
+    this.instance = new interaction.DragBox(this);
+    this.map.instance.addInteraction(this.instance);
+  }
+
+  ngOnDestroy() {
+    this.map.instance.removeInteraction(this.instance);
+  }
+}
--- a/projects/common-aol/src/fm-aol/components/interactions/dragpan.component.ts
+++ b/projects/common-aol/src/fm-aol/components/interactions/dragpan.component.ts
@ -0,0 +1,26 @@
+import { Component, OnDestroy, OnInit, Input } from '@angular/core';
+import { interaction, EventsConditionType, Kinetic } from 'openlayers';
+import { MapComponent } from '../map.component';
+
+@Component({
+  selector: 'aol-interaction-dragpan',
+  template: ''
+})
+export class DragPanInteractionComponent implements OnInit, OnDestroy {
+  instance: interaction.DragPan;
+
+  @Input() condition: EventsConditionType;
+  @Input() kinetic: Kinetic;
+
+  constructor(private map: MapComponent) {
+  }
+
+  ngOnInit() {
+    this.instance = new interaction.DragPan(this);
+    this.map.instance.addInteraction(this.instance);
+  }
+
+  ngOnDestroy() {
+    this.map.instance.removeInteraction(this.instance);
+  }
+}
--- a/projects/common-aol/src/fm-aol/components/interactions/dragrotate.component.ts
+++ b/projects/common-aol/src/fm-aol/components/interactions/dragrotate.component.ts
@ -0,0 +1,26 @@
+import { Component, OnDestroy, OnInit, Input } from '@angular/core';
+import { interaction, EventsConditionType } from 'openlayers';
+import { MapComponent } from '../map.component';
+
+@Component({
+  selector: 'aol-interaction-dragrotate',
+  template: ''
+})
+export class DragRotateInteractionComponent implements OnInit, OnDestroy {
+  instance: interaction.DragRotate;
+
+  @Input() condition: EventsConditionType;
+  @Input() duration: number;
+
+  constructor(private map: MapComponent) {
+  }
+
+  ngOnInit() {
+    this.instance = new interaction.DragRotate(this);
+    this.map.instance.addInteraction(this.instance);
+  }
+
+  ngOnDestroy() {
+    this.map.instance.removeInteraction(this.instance);
+  }
+}
--- a/projects/common-aol/src/fm-aol/components/interactions/dragrotateandzoom.component.ts
+++ b/projects/common-aol/src/fm-aol/components/interactions/dragrotateandzoom.component.ts
@ -0,0 +1,26 @@
+import { Component, OnDestroy, OnInit, Input } from '@angular/core';
+import { interaction, EventsConditionType } from 'openlayers';
+import { MapComponent } from '../map.component';
+
+@Component({
+  selector: 'aol-interaction-dragrotateandzoom',
+  template: ''
+})
+export class DragRotateAndZoomInteractionComponent implements OnInit, OnDestroy {
+  instance: interaction.DragRotate;
+
+  @Input() condition: EventsConditionType;
+  @Input() duration: number;
+
+  constructor(private map: MapComponent) {
+  }
+
+  ngOnInit() {
+    this.instance = new interaction.DragRotateAndZoom(this);
+    this.map.instance.addInteraction(this.instance);
+  }
+
+  ngOnDestroy() {
+    this.map.instance.removeInteraction(this.instance);
+  }
+}
--- a/projects/common-aol/src/fm-aol/components/interactions/dragzoom.component.ts
+++ b/projects/common-aol/src/fm-aol/components/interactions/dragzoom.component.ts
@ -0,0 +1,28 @@
+import { Component, OnDestroy, OnInit, Input } from '@angular/core';
+import { interaction, EventsConditionType } from 'openlayers';
+import { MapComponent } from '../map.component';
+
+@Component({
+  selector: 'aol-interaction-dragzoom',
+  template: ''
+})
+export class DragZoomInteractionComponent implements OnInit, OnDestroy {
+  instance: interaction.DragZoom;
+
+  @Input() className: string;
+  @Input() condition: EventsConditionType;
+  @Input() duration: number;
+  @Input() out: boolean;
+
+  constructor(private map: MapComponent) {
+  }
+
+  ngOnInit() {
+    this.instance = new interaction.DragZoom(this);
+    this.map.instance.addInteraction(this.instance);
+  }
+
+  ngOnDestroy() {
+    this.map.instance.removeInteraction(this.instance);
+  }
+}
--- a/projects/common-aol/src/fm-aol/components/interactions/draw.component.ts
+++ b/projects/common-aol/src/fm-aol/components/interactions/draw.component.ts
@ -0,0 +1,50 @@
+import { Component, Input, OnDestroy, OnInit, EventEmitter, Output } from '@angular/core';
+import { interaction } from 'openlayers';
+import { MapComponent } from '../map.component';
+
+@Component({
+  selector: 'aol-interaction-draw',
+  template: ''
+})
+export class DrawInteractionComponent implements OnInit, OnDestroy {
+  instance: interaction.Draw;
+
+  @Input() clickTolerance?: number;
+  @Input() features?: ol.Collection<ol.Feature>;
+  @Input() source?: ol.source.Vector;
+  @Input() snapTolerance?: number;
+  @Input() type: ol.geom.GeometryType;
+  @Input() maxPoints?: number;
+  @Input() minPoints?: number;
+  @Input() finishCondition?: ol.EventsConditionType;
+  @Input() style?: (ol.style.Style | ol.style.Style[] | ol.StyleFunction);
+  @Input() geometryFunction?: ol.DrawGeometryFunctionType;
+  @Input() geometryName?: string;
+  @Input() condition?: ol.EventsConditionType;
+  @Input() freehandCondition?: ol.EventsConditionType;
+  @Input() freehand?: boolean;
+  @Input() wrapX?: boolean;
+
+  @Output() onChange = new EventEmitter<ol.interaction.Draw.Event>();
+  @Output() onChangeActive = new EventEmitter<ol.interaction.Draw.Event>();
+  @Output() onDrawEnd = new EventEmitter<ol.interaction.Draw.Event>();
+  @Output() onDrawStart = new EventEmitter<ol.interaction.Draw.Event>();
+  @Output() onPropertyChange = new EventEmitter<ol.interaction.Draw.Event>();
+
+  constructor(private map: MapComponent) {
+  }
+
+  ngOnInit() {
+    this.instance = new interaction.Draw(this);
+    this.instance.on('change', (event: ol.interaction.Draw.Event) => this.onChange.emit(event));
+    this.instance.on('change:active', (event: ol.interaction.Draw.Event) => this.onChangeActive.emit(event));
+    this.instance.on('drawend', (event: ol.interaction.Draw.Event) => this.onDrawEnd.emit(event));
+    this.instance.on('drawstart', (event: ol.interaction.Draw.Event) => this.onDrawStart.emit(event));
+    this.instance.on('propertychange', (event: ol.interaction.Draw.Event) => this.onPropertyChange.emit(event));
+    this.map.instance.addInteraction(this.instance);
+  }
+
+  ngOnDestroy() {
+    this.map.instance.removeInteraction(this.instance);
+  }
+}
--- a/projects/common-aol/src/fm-aol/components/interactions/index.ts
+++ b/projects/common-aol/src/fm-aol/components/interactions/index.ts
@ -0,0 +1,14 @@
+export * from './default.component';
+export * from './doubleclickzoom.component';
+export * from './draganddrop.component';
+export * from './dragbox.component';
+export * from './dragpan.component';
+export * from './dragrotate.component';
+export * from './dragrotateandzoom.component';
+export * from './dragzoom.component';
+export * from './mousewheelzoom.component';
+export * from './pinchzoom.component';
+export * from './draw.component';
+export * from './select.component';
+export * from './translate.component';
+export * from './modify.component';
--- a/projects/common-aol/src/fm-aol/components/interactions/modify.component.ts
+++ b/projects/common-aol/src/fm-aol/components/interactions/modify.component.ts
@ -0,0 +1,42 @@
+import { Component, OnDestroy, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { interaction, EventsConditionType, style, StyleFunction, Collection, Feature, source } from 'openlayers';
+import { MapComponent } from '../map.component';
+
+@Component({
+    selector: 'aol-interaction-modify',
+    template: ''
+})
+export class ModifyInteractionComponent implements OnInit, OnDestroy {
+    instance: interaction.Modify;
+
+    @Input() condition?: EventsConditionType;
+    @Input() deleteCondition?: EventsConditionType;
+    @Input() pixelTolerance?: number;
+    @Input() style?: (style.Style | style.Style[] | StyleFunction);
+    @Input() features: Collection<Feature>;
+    @Input() wrapX?: boolean;
+    @Input() source?: source.Vector;
+
+    @Output() onModifyEnd = new EventEmitter<interaction.Modify.Event>();
+    @Output() onModifyStart = new EventEmitter<interaction.Modify.Event>();
+    @Output() onChange = new EventEmitter<interaction.Modify.Event>();
+    @Output() onChangeActive = new EventEmitter<interaction.Modify.Event>();
+    @Output() onPropertyChange = new EventEmitter<interaction.Modify.Event>();
+
+    constructor(private map: MapComponent) {
+    }
+
+    ngOnInit() {
+        this.instance = new interaction.Modify(this);
+        this.instance.on('change', (event: interaction.Modify.Event) => this.onChange.emit(event));
+        this.instance.on('change:active', (event: interaction.Modify.Event) => this.onChangeActive.emit(event));
+        this.instance.on('propertychange', (event: interaction.Modify.Event) => this.onPropertyChange.emit(event));
+        this.instance.on('modifyend', (event: interaction.Modify.Event) => this.onModifyEnd.emit(event));
+        this.instance.on('modifystart', (event: interaction.Modify.Event) => this.onModifyStart.emit(event));
+        this.map.instance.addInteraction(this.instance);
+    }
+
+    ngOnDestroy() {
+        this.map.instance.removeInteraction(this.instance);
+    }
+}
--- a/projects/common-aol/src/fm-aol/components/interactions/mousewheelzoom.component.ts
+++ b/projects/common-aol/src/fm-aol/components/interactions/mousewheelzoom.component.ts
@ -0,0 +1,26 @@
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { interaction } from 'openlayers';
+import { MapComponent } from '../map.component';
+
+@Component({
+  selector: 'aol-interaction-mousewheelzoom',
+  template: ''
+})
+export class MouseWheelZoomInteractionComponent implements OnInit, OnDestroy {
+  instance: interaction.MouseWheelZoom;
+  @Input() duration: number;
+  @Input() timeout: number;
+  @Input() useAnchor: boolean;
+
+  constructor(private map: MapComponent) {
+  }
+
+  ngOnInit() {
+    this.instance = new interaction.MouseWheelZoom(this);
+    this.map.instance.addInteraction(this.instance);
+  }
+
+  ngOnDestroy() {
+    this.map.instance.removeInteraction(this.instance);
+  }
+}
--- a/projects/common-aol/src/fm-aol/components/interactions/pinchzoom.component.js
+++ b/projects/common-aol/src/fm-aol/components/interactions/pinchzoom.component.js
@ -0,0 +1,36 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var core_1 = require("@angular/core");
+var openlayers_1 = require("openlayers");
+var PinchZoomInteractionComponent = (function () {
+    function PinchZoomInteractionComponent(map) {
+        this.map = map;
+    }
+    PinchZoomInteractionComponent.prototype.ngOnInit = function () {
+        this.instance = new openlayers_1.interaction.PinchZoom(this);
+        this.map.instance.addInteraction(this.instance);
+    };
+    PinchZoomInteractionComponent.prototype.ngOnDestroy = function () {
+        this.map.instance.removeInteraction(this.instance);
+    };
+    return PinchZoomInteractionComponent;
+}());
+__decorate([
+    core_1.Input()
+], PinchZoomInteractionComponent.prototype, "duration", void 0);
+__decorate([
+    core_1.Input()
+], PinchZoomInteractionComponent.prototype, "constrainResolution", void 0);
+PinchZoomInteractionComponent = __decorate([
+    core_1.Component({
+        selector: 'aol-interaction-pinchzoom',
+        template: ''
+    })
+], PinchZoomInteractionComponent);
+exports.PinchZoomInteractionComponent = PinchZoomInteractionComponent;
--- a/projects/common-aol/src/fm-aol/components/interactions/pinchzoom.component.ts
+++ b/projects/common-aol/src/fm-aol/components/interactions/pinchzoom.component.ts
@ -0,0 +1,26 @@
+import { Component, OnDestroy, OnInit, Input } from '@angular/core';
+import { interaction } from 'openlayers';
+import { MapComponent } from '../map.component';
+
+@Component({
+  selector: 'aol-interaction-pinchzoom',
+  template: ''
+})
+export class PinchZoomInteractionComponent implements OnInit, OnDestroy {
+  instance: interaction.PinchZoom;
+
+  @Input() duration: number;
+  @Input() constrainResolution: boolean;
+
+  constructor(private map: MapComponent) {
+  }
+
+  ngOnInit() {
+    this.instance = new interaction.PinchZoom(this);
+    this.map.instance.addInteraction(this.instance);
+  }
+
+  ngOnDestroy() {
+    this.map.instance.removeInteraction(this.instance);
+  }
+}
--- a/projects/common-aol/src/fm-aol/components/interactions/select.component.ts
+++ b/projects/common-aol/src/fm-aol/components/interactions/select.component.ts
@ -0,0 +1,44 @@
+import { Component, OnDestroy, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { interaction, EventsConditionType, layer, style, Collection, SelectFilterFunction, StyleFunction, Feature } from 'openlayers';
+import { MapComponent } from '../map.component';
+
+@Component({
+    selector: 'aol-interaction-select',
+    template: ''
+})
+export class SelectInteractionComponent implements OnInit, OnDestroy {
+    instance: interaction.Select;
+
+
+    @Input() addCondition?: EventsConditionType;
+    @Input() condition?: EventsConditionType;
+    @Input() layers?: (layer.Layer[] | ((layer: layer.Layer) => boolean));
+    @Input() style?: (style.Style | style.Style[] | StyleFunction);
+    @Input() removeCondition?: EventsConditionType;
+    @Input() toggleCondition?: EventsConditionType;
+    @Input() multi?: boolean;
+    @Input() features?: Collection<Feature>;
+    @Input() filter?: SelectFilterFunction;
+    @Input() wrapX?: boolean;
+
+    @Output() onChange = new EventEmitter<interaction.Select.Event>();
+    @Output() onSelect = new EventEmitter<interaction.Select.Event>();
+    @Output() onPropertyChange = new EventEmitter<interaction.Select.Event>();
+
+    constructor(private map: MapComponent) {
+    }
+
+    ngOnInit() {
+        this.instance = new interaction.Select(this);
+
+        this.instance.on('change', (event: interaction.Select.Event) => this.onChange.emit(event));
+        this.instance.on('select', (event: interaction.Select.Event) => this.onSelect.emit(event));
+        this.instance.on('propertychange', (event: interaction.Select.Event) => this.onPropertyChange.emit(event));
+
+        this.map.instance.addInteraction(this.instance);
+    }
+
+    ngOnDestroy() {
+        this.map.instance.removeInteraction(this.instance);
+    }
+}
--- a/projects/common-aol/src/fm-aol/components/interactions/translate.component.ts
+++ b/projects/common-aol/src/fm-aol/components/interactions/translate.component.ts
@ -0,0 +1,45 @@
+import { Component, OnDestroy, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { interaction, layer, Collection, Feature } from 'openlayers';
+import { MapComponent } from '../map.component';
+
+@Component({
+  selector: 'aol-interaction-translate',
+  template: ''
+})
+export class TranslateInteractionComponent implements OnInit, OnDestroy {
+  instance: interaction.Translate;
+
+  @Input() features?: Collection<Feature>;
+  @Input() layers?: (layer.Layer[] | ((layer: layer.Layer) => boolean));
+  @Input() hitTolerance?: number;
+
+  @Output() onChange: EventEmitter<interaction.Translate.Event>;
+  @Output() onPropertyChange: EventEmitter<interaction.Translate.Event>;
+  @Output() onTranslateEnd: EventEmitter<interaction.Translate.Event>;
+  @Output() onTranslateStart: EventEmitter<interaction.Translate.Event>;
+  @Output() onTranslating: EventEmitter<interaction.Translate.Event>;
+
+  constructor(private map: MapComponent) {
+    this.onChange = new EventEmitter<interaction.Translate.Event>();
+    this.onPropertyChange = new EventEmitter<interaction.Translate.Event>();
+    this.onTranslateEnd = new EventEmitter<interaction.Translate.Event>();
+    this.onTranslateStart = new EventEmitter<interaction.Translate.Event>();
+    this.onTranslating = new EventEmitter<interaction.Translate.Event>();
+  }
+
+  ngOnInit() {
+    this.instance = new interaction.Translate(this);
+
+    this.instance.on('change', (event: interaction.Translate.Event) => this.onChange.emit(event));
+    this.instance.on('propertychange', (event: interaction.Translate.Event) => this.onPropertyChange.emit(event));
+    this.instance.on('translateend', (event: interaction.Translate.Event) => this.onTranslateEnd.emit(event));
+    this.instance.on('translatestart', (event: interaction.Translate.Event) => this.onTranslateStart.emit(event));
+    this.instance.on('translating', (event: interaction.Translate.Event) => this.onTranslating.emit(event));
+
+    this.map.instance.addInteraction(this.instance);
+  }
+
+  ngOnDestroy() {
+    this.map.instance.removeInteraction(this.instance);
+  }
+}
--- a/projects/common-aol/src/fm-aol/components/layers/index.ts
+++ b/projects/common-aol/src/fm-aol/components/layers/index.ts
@ -0,0 +1,6 @@
+export * from './layer.component';
+export * from './layergroup.component';
+export * from './layerimage.component';
+export * from './layertile.component';
+export * from './layervector.component';
+export * from './layervectortile.component';
--- a/projects/common-aol/src/fm-aol/components/layers/layer.component.ts
+++ b/projects/common-aol/src/fm-aol/components/layers/layer.component.ts
@ -0,0 +1,59 @@
+import { OnDestroy, OnInit, OnChanges, Input, SimpleChanges, Component, Injectable } from '@angular/core';
+import { layer, Extent } from 'openlayers';
+import { MapComponent } from '../map.component';
+import { LayerGroupComponent } from './layergroup.component';
+
+@Injectable()
+export abstract class LayerComponent implements OnInit, OnChanges, OnDestroy {
+  public instance: any;
+  public componentType: string = 'layer';
+
+  @Input() opacity: number;
+  @Input() visible: boolean;
+  @Input() extent:	Extent;
+  @Input() zIndex:	number;
+  @Input() minResolution: number;
+  @Input() maxResolution: number;
+
+  @Input() precompose: (evt: ol.events.Event) => void;
+  @Input() postcompose: (evt: ol.events.Event) => void;
+
+  constructor(protected host: LayerGroupComponent | MapComponent) {
+  }
+
+  ngOnInit() {
+    if (this.precompose !== null && this.precompose !== undefined) {
+      this.instance.on('precompose', this.precompose);
+    }
+    if (this.postcompose !== null && this.postcompose !== undefined) {
+      this.instance.on('postcompose', this.postcompose);
+    }
+    this.host.instance.getLayers().push(this.instance);
+  }
+
+  ngOnDestroy() {
+    this.host.instance.getLayers().remove(this.instance);
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    let properties: { [index: string]: any } = {};
+    if (!this.instance) {
+      return;
+    }
+    for (let key in changes) {
+      if (changes.hasOwnProperty(key)) {
+        properties[key] = changes[key].currentValue;
+        if (key === 'precompose') {
+          this.instance.un('precompose', changes[key].previousValue)
+          this.instance.on('precompose', changes[key].currentValue);
+        }
+        if (key === 'postcompose') {
+          this.instance.un('postcompose', changes[key].previousValue)
+          this.instance.on('postcompose', changes[key].currentValue);
+        }
+      }
+    }
+    // console.log('changes detected in aol-layer, setting new properties: ', properties);
+    this.instance.setProperties(properties, false);
+  }
+}
--- a/projects/common-aol/src/fm-aol/components/layers/layergroup.component.ts
+++ b/projects/common-aol/src/fm-aol/components/layers/layergroup.component.ts
@ -0,0 +1,23 @@
+import { Component, OnDestroy, OnInit, SkipSelf, Inject, Optional } from '@angular/core';
+import { layer } from 'openlayers';
+import { LayerComponent } from './layer.component';
+import { MapComponent } from '../map.component';
+
+@Component({
+  selector: 'aol-layer-group',
+  template: `<ng-content></ng-content>`
+})
+export class LayerGroupComponent extends LayerComponent implements OnInit, OnDestroy {
+  public instance: ol.layer.Group;
+
+  constructor(map: MapComponent,
+              @SkipSelf() @Optional() group?: LayerGroupComponent) {
+    super(group || map);
+  }
+
+  ngOnInit() {
+    // console.log(`creating ol.layer.Group instance with:`, this);
+    this.instance = new layer.Group(this);
+    super.ngOnInit();
+  }
+}
--- a/projects/common-aol/src/fm-aol/components/layers/layerimage.component.ts
+++ b/projects/common-aol/src/fm-aol/components/layers/layerimage.component.ts
@ -0,0 +1,37 @@
+import {
+  Component, EventEmitter, Input, OnChanges, OnInit, Optional,
+  SimpleChanges
+} from '@angular/core';
+import { Extent, layer, source } from 'openlayers';
+import { MapComponent } from '../map.component';
+import { LayerComponent } from './layer.component';
+import { LayerGroupComponent } from './layergroup.component';
+
+@Component({
+  selector: 'aol-layer-image',
+  template: `<ng-content></ng-content>`
+})
+export class LayerImageComponent extends LayerComponent implements OnInit, OnChanges {
+  public source: source.Image;
+
+  @Input() opacity: number;
+  @Input() visible: boolean;
+  @Input() extent: Extent;
+  @Input() minResolution: number;
+  @Input() maxResolution: number;
+  @Input() zIndex: number;
+
+  constructor(map: MapComponent,
+              @Optional() group?: LayerGroupComponent) {
+    super(group || map);
+  }
+
+  ngOnInit() {
+    this.instance = new layer.Image(this);
+    super.ngOnInit();
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    super.ngOnChanges(changes);
+  }
+}
--- a/projects/common-aol/src/fm-aol/components/layers/layertile.component.ts
+++ b/projects/common-aol/src/fm-aol/components/layers/layertile.component.ts
@ -0,0 +1,34 @@
+import {
+  Component, OnDestroy, OnInit, Input, Optional, OnChanges,
+  SimpleChanges
+} from '@angular/core';
+import { layer, source } from 'openlayers';
+import { MapComponent } from '../map.component';
+import { LayerComponent } from './layer.component';
+import { LayerGroupComponent } from './layergroup.component';
+
+@Component({
+  selector: 'aol-layer-tile',
+  template: `<ng-content></ng-content>`
+})
+export class LayerTileComponent extends LayerComponent implements OnInit, OnDestroy, OnChanges {
+  public source: source.Tile;
+
+  @Input() preload: number;
+  @Input() useInterimTilesOnError: boolean;
+
+  constructor(map: MapComponent,
+              @Optional() group?: LayerGroupComponent) {
+    super(group || map);
+  }
+
+  ngOnInit() {
+    // console.log('creating ol.layer.Tile instance with:', this);
+    this.instance = new layer.Tile(this);
+    super.ngOnInit();
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    super.ngOnChanges(changes);
+  }
+}
--- a/projects/common-aol/src/fm-aol/components/layers/layervector.component.ts
+++ b/projects/common-aol/src/fm-aol/components/layers/layervector.component.ts
@ -0,0 +1,33 @@
+import {
+  Component, OnDestroy, OnInit, Input, Optional, OnChanges,
+  SimpleChanges
+} from '@angular/core';
+import { layer, source } from 'openlayers';
+import { MapComponent } from '../map.component';
+import { LayerComponent } from './layer.component';
+import { LayerGroupComponent } from './layergroup.component';
+
+@Component({
+  selector: 'aol-layer-vector',
+  template: `<ng-content></ng-content>`
+})
+export class LayerVectorComponent extends LayerComponent implements OnInit, OnDestroy, OnChanges {
+  public source: source.Vector;
+
+  @Input() renderBuffer: number;
+
+  constructor(map: MapComponent,
+              @Optional() group?: LayerGroupComponent) {
+    super(group || map);
+  }
+
+  ngOnInit() {
+    // console.log('creating ol.layer.Vector instance with:', this);
+    this.instance = new layer.Vector(this);
+    super.ngOnInit();
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    super.ngOnChanges(changes);
+  }
+}
--- a/projects/common-aol/src/fm-aol/components/layers/layervectortile.component.ts
+++ b/projects/common-aol/src/fm-aol/components/layers/layervectortile.component.ts
@ -0,0 +1,36 @@
+import { Component, OnInit, Input, Optional, SimpleChanges, OnChanges } from '@angular/core';
+import { layer, style, StyleFunction } from 'openlayers';
+import { MapComponent } from '../map.component';
+import { LayerComponent } from './layer.component';
+import { LayerGroupComponent } from './layergroup.component';
+
+@Component({
+  selector: 'aol-layer-vectortile',
+  template: `<ng-content></ng-content>`
+})
+export class LayerVectorTileComponent extends LayerComponent implements OnInit, OnChanges {
+
+  @Input() renderBuffer: number;
+  @Input() renderMode: layer.VectorTileRenderType|string;
+  /* not marked as optional in the typings */
+  @Input() renderOrder: (feature1: ol.Feature, feature2: ol.Feature) => number;
+  @Input() style: (style.Style | style.Style[] | StyleFunction);
+  @Input() updateWhileAnimating: boolean;
+  @Input() updateWhileInteracting: boolean;
+  @Input() visible: boolean;
+
+  constructor(map: MapComponent,
+              @Optional() group?: LayerGroupComponent) {
+    super(group || map);
+  }
+
+  ngOnInit() {
+    // console.log('creating ol.layer.VectorTile instance with:', this);
+    this.instance = new layer.VectorTile(this);
+    super.ngOnInit();
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    super.ngOnChanges(changes);
+  }
+}
--- a/projects/common-aol/src/fm-aol/components/map.component.ts
+++ b/projects/common-aol/src/fm-aol/components/map.component.ts
@ -0,0 +1,90 @@
+import {
+  Component, OnInit, ElementRef, Input, Output, EventEmitter, AfterViewInit,
+  SimpleChanges, OnChanges
+} from '@angular/core';
+import {
+  Map, MapBrowserEvent, MapEvent, render, ObjectEvent, control,
+  interaction
+} from 'openlayers';
+
+@Component({
+  selector: 'aol-map',
+  template: `<div [style.width]="width" [style.height]="height"></div><ng-content></ng-content>`
+})
+
+export class MapComponent implements OnInit, AfterViewInit, OnChanges {
+  public instance: Map;
+  public componentType: string = 'map';
+
+  @Input() width: string = '100%';
+  @Input() height: string = '100%';
+  @Input() pixelRatio: number;
+  @Input() keyboardEventTarget: Element|string;
+  @Input() loadTilesWhileAnimating: boolean;
+  @Input() loadTilesWhileInteracting: boolean;
+  @Input() logo: string|boolean;
+  @Input() renderer: 'canvas'|'webgl';
+
+
+  @Output() onClick: EventEmitter<MapBrowserEvent>;
+  @Output() onDblClick: EventEmitter<MapBrowserEvent>;
+  @Output() onMoveEnd: EventEmitter<MapEvent>;
+  @Output() onPointerDrag: EventEmitter<MapBrowserEvent>;
+  @Output() onPointerMove: EventEmitter<MapBrowserEvent>;
+  @Output() onPostCompose: EventEmitter<render.Event>;
+  @Output() onPostRender: EventEmitter<MapEvent>;
+  @Output() onPreCompose: EventEmitter<render.Event>;
+  @Output() onPropertyChange: EventEmitter<ObjectEvent>;
+  @Output() onSingleClick: EventEmitter<MapBrowserEvent>;
+
+  // we pass empty arrays to not get default controls/interactions because we have our own directives
+  controls: control.Control[] = [];
+  interactions: interaction.Interaction[] = [];
+
+  constructor(private host: ElementRef) {
+    this.onClick = new EventEmitter<MapBrowserEvent>();
+    this.onDblClick = new EventEmitter<MapBrowserEvent>();
+    this.onMoveEnd = new EventEmitter<MapEvent>();
+    this.onPointerDrag = new EventEmitter<MapBrowserEvent>();
+    this.onPointerMove = new EventEmitter<MapBrowserEvent>();
+    this.onPostCompose = new EventEmitter<render.Event>();
+    this.onPostRender = new EventEmitter<MapEvent>();
+    this.onPreCompose = new EventEmitter<render.Event>();
+    this.onPropertyChange = new EventEmitter<ObjectEvent>();
+    this.onSingleClick = new EventEmitter<MapBrowserEvent>();
+  }
+
+  ngOnInit() {
+    // console.log('creating ol.Map instance with:', this);
+    this.instance = new Map(this);
+    this.instance.setTarget(this.host.nativeElement.firstElementChild);
+    this.instance.on('click', (event: MapBrowserEvent) => this.onClick.emit(event));
+    this.instance.on('dblclick', (event: MapBrowserEvent) => this.onDblClick.emit(event));
+    this.instance.on('moveend', (event: MapEvent) => this.onMoveEnd.emit(event));
+    this.instance.on('pointerdrag', (event: MapBrowserEvent) => this.onPointerDrag.emit(event));
+    this.instance.on('pointermove', (event: MapBrowserEvent) => this.onPointerMove.emit(event));
+    this.instance.on('postcompose', (event: render.Event) => this.onPostCompose.emit(event));
+    this.instance.on('postrender', (event: MapEvent) => this.onPostRender.emit(event));
+    this.instance.on('precompose', (event: render.Event) => this.onPreCompose.emit(event));
+    this.instance.on('propertychange', (event: ObjectEvent) => this.onPropertyChange.emit(event));
+    this.instance.on('singleclick', (event: MapBrowserEvent) => this.onSingleClick.emit(event));
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    let properties: { [index: string]: any } = {};
+    if (!this.instance) {
+      return;
+    }
+    for (let key in changes) {
+      if (changes.hasOwnProperty(key)) {
+        properties[key] = changes[key].currentValue;
+      }
+    }
+    // console.log('changes detected in aol-map, setting new properties: ', properties);
+    this.instance.setProperties(properties, false);
+  }
+
+  ngAfterViewInit() {
+    this.instance.updateSize();
+  }
+}
--- a/projects/common-aol/src/fm-aol/components/overlay.component.ts
+++ b/projects/common-aol/src/fm-aol/components/overlay.component.ts
@ -0,0 +1,43 @@
+import { Component, ContentChild, Input, OnDestroy, OnInit } from '@angular/core';
+import { MapComponent } from './map.component';
+import { Overlay, OverlayPositioning } from 'openlayers';
+import { ContentComponent } from './content.component';
+
+@Component({
+  selector: 'aol-overlay',
+  template: '<ng-content></ng-content>'
+})
+export class OverlayComponent implements OnInit, OnDestroy {
+  componentType = 'overlay';
+  instance: Overlay;
+  element: Element;
+  @ContentChild(ContentComponent) content: ContentComponent;
+
+  @Input() id: number|string;
+  @Input() offset: number[];
+  @Input() positioning: OverlayPositioning|string;
+  @Input() stopEvent: boolean;
+  @Input() insertFirst: boolean;
+  @Input() autoPan: boolean;
+  @Input() autoPanAnimation: olx.animation.PanOptions;
+  @Input() autoPanMargin: number;
+
+  constructor(
+    private map: MapComponent
+  ) {
+  }
+
+  ngOnInit() {
+    if (this.content) {
+      this.element = this.content.elementRef.nativeElement;
+      this.instance = new Overlay(this);
+      this.map.instance.addOverlay(this.instance);
+    }
+  }
+
+  ngOnDestroy() {
+    if (this.instance) {
+      this.map.instance.removeOverlay(this.instance);
+    }
+  }
+}
--- a/projects/common-aol/src/fm-aol/components/sources/bingmaps.component.ts
+++ b/projects/common-aol/src/fm-aol/components/sources/bingmaps.component.ts
@ -0,0 +1,34 @@
+import { Component, Host, Input, OnInit, forwardRef } from '@angular/core';
+import { source, TileLoadFunctionType } from 'openlayers';
+import { LayerTileComponent } from '../layers';
+import { SourceComponent } from './source.component';
+
+@Component({
+  selector: 'aol-source-bingmaps',
+  template: `<div class="aol-source-bingmaps"></div>`,
+  providers: [
+    { provide: SourceComponent, useExisting: forwardRef(() => SourceBingmapsComponent) }
+  ]
+})
+export class SourceBingmapsComponent extends SourceComponent implements OnInit {
+  instance: source.BingMaps;
+
+  @Input() cacheSize: number;
+  @Input() hidpi: boolean;
+  @Input() culture: string;
+  @Input() key: string;
+  @Input() imagerySet: 'Road'|'Aerial'|'AerialWithLabels'|'collinsBart'|'ordnanceSurvey' = 'Aerial';
+  @Input() maxZoom: number;
+  @Input() reprojectionErrorThreshold: number;
+  @Input() tileLoadFunction: TileLoadFunctionType;
+  @Input() wrapX: boolean;
+
+  constructor(@Host() layer: LayerTileComponent) {
+    super(layer);
+  }
+
+  ngOnInit() {
+    this.instance = new source.BingMaps(this);
+    this.host.instance.setSource(this.instance);
+  }
+}
--- a/projects/common-aol/src/fm-aol/components/sources/cluster.component.ts
+++ b/projects/common-aol/src/fm-aol/components/sources/cluster.component.ts
@ -0,0 +1,34 @@
+import {Component, Host, Input, OnInit, forwardRef, ContentChild, AfterContentInit} from '@angular/core';
+import { source, Feature, geom } from 'openlayers';
+import { LayerVectorComponent } from '../layers';
+import { SourceComponent } from './source.component';
+import { SourceVectorComponent } from './vector.component';
+
+
+@Component({
+    selector: 'aol-source-cluster',
+    template: `<ng-content></ng-content>`,
+    providers: [
+        { provide: SourceComponent, useExisting: forwardRef(() => SourceClusterComponent) }
+    ]
+})
+export class SourceClusterComponent extends SourceComponent implements AfterContentInit {
+    instance: source.Cluster;
+
+    @Input() distance: number;
+    @Input() geometryFunction?: ((feature: Feature) => geom.Point);
+
+    @ContentChild(SourceVectorComponent) sourceVectorComponent: SourceVectorComponent;
+    source: source.Vector;
+
+    constructor(@Host() layer: LayerVectorComponent) {
+        super(layer);
+    }
+
+    ngAfterContentInit() {
+      this.source = this.sourceVectorComponent.instance;
+
+      this.instance = new source.Cluster(this);
+      this.host.instance.setSource(this.instance);
+    }
+}
--- a/projects/common-aol/src/fm-aol/components/sources/geojson.component.ts
+++ b/projects/common-aol/src/fm-aol/components/sources/geojson.component.ts
@ -0,0 +1,32 @@
+import { Component, Host, Input, OnInit, forwardRef } from '@angular/core';
+import { source, ProjectionLike, format } from 'openlayers';
+import { LayerVectorComponent } from '../layers';
+import { FormatComponent } from '../formats';
+import { SourceComponent } from './source.component';
+
+
+@Component({
+    selector: 'aol-source-geojson',
+    template: `<ng-content></ng-content>`,
+    providers: [
+        { provide: SourceComponent, useExisting: forwardRef(() => SourceGeoJSONComponent) }
+    ]
+})
+export class SourceGeoJSONComponent extends SourceComponent implements OnInit {
+    instance: source.Vector;
+    format: format.Feature;
+    @Input() defaultDataProjection: ProjectionLike;
+    @Input() featureProjection: ProjectionLike;
+    @Input() geometryName: string;
+    @Input() url: string;
+
+    constructor( @Host() layer: LayerVectorComponent) {
+        super(layer);
+    }
+
+    ngOnInit() {
+        this.format = new format.GeoJSON(this);
+        this.instance = new source.Vector(this);
+        this.host.instance.setSource(this.instance);
+    }
+}
--- a/projects/common-aol/src/fm-aol/components/sources/imagestatic.component.ts
+++ b/projects/common-aol/src/fm-aol/components/sources/imagestatic.component.ts
@ -0,0 +1,31 @@
+import { Component, Host, Input, OnInit, forwardRef } from '@angular/core';
+import { ProjectionLike, source, Extent, AttributionLike, ImageLoadFunctionType, Size } from 'openlayers';
+import { SourceComponent } from './source.component';
+import { LayerImageComponent } from '../layers/layerimage.component';
+
+@Component({
+  selector: 'aol-source-imagestatic',
+  template: `<ng-content></ng-content>`,
+  providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceImageStaticComponent) }],
+})
+export class SourceImageStaticComponent extends SourceComponent implements OnInit {
+  instance: source.ImageStatic;
+
+  @Input() projection: (ProjectionLike | string);
+  @Input() imageExtent: Extent;
+  @Input() url: string;
+  @Input() attributions: AttributionLike;
+  @Input() crossOrigin?: string;
+  @Input() imageLoadFunction?: ImageLoadFunctionType;
+  @Input() logo?: (string | olx.LogoOptions);
+  @Input() imageSize?: Size;
+
+  constructor(@Host() layer: LayerImageComponent) {
+    super(layer);
+  }
+
+  ngOnInit() {
+    this.instance = new source.ImageStatic(this);
+    this.host.instance.setSource(this.instance);
+  }
+}
--- a/projects/common-aol/src/fm-aol/components/sources/imagewms.component.ts
+++ b/projects/common-aol/src/fm-aol/components/sources/imagewms.component.ts
@ -0,0 +1,36 @@
+import { Component, Host, Input, OnInit, forwardRef } from '@angular/core';
+import { AttributionLike, ImageLoadFunctionType, ProjectionLike, source } from 'openlayers';
+import { LayerImageComponent } from '../layers';
+import { SourceComponent } from './source.component';
+
+@Component({
+  selector: 'aol-source-imagewms',
+  template: `<ng-content></ng-content>`,
+  providers: [
+    { provide: SourceComponent, useExisting: forwardRef(() => SourceImageWMSComponent) }
+  ]
+})
+export class SourceImageWMSComponent extends SourceComponent implements OnInit {
+  instance: source.ImageWMS;
+
+  @Input() attributions: AttributionLike;
+  @Input() crossOrigin: string;
+  @Input() hidpi: boolean;
+  @Input() serverType: string;
+  @Input() imageLoadFunction?: ImageLoadFunctionType;
+  @Input() logo: (string | olx.LogoOptions);
+  @Input() params: Object;
+  @Input() projection: (ProjectionLike | string);
+  @Input() ratio: number;
+  @Input() resolutions: Array<number>;
+  @Input() url: string;
+
+  constructor(@Host() layer: LayerImageComponent) {
+    super(layer);
+  }
+
+  ngOnInit() {
+    this.instance = new source.ImageWMS(this);
+    this.host.instance.setSource(this.instance);
+  }
+}
--- a/projects/common-aol/src/fm-aol/components/sources/index.ts
+++ b/projects/common-aol/src/fm-aol/components/sources/index.ts
@ -0,0 +1,15 @@
+export * from './bingmaps.component';
+export * from './osm.component';
+export * from './source.component';
+export * from './vector.component';
+export * from './vectortile.component';
+export * from './xyz.component';
+export * from './tilewms.component';
+export * from './geojson.component';
+export * from './tilejson.component';
+export * from './tileutfgrid.component';
+export * from './tilewmts.component';
+export * from './imagewms.component';
+export * from './imagestatic.component';
+export * from './cluster.component';
+export * from './raster.component';
--- a/projects/common-aol/src/fm-aol/components/sources/osm.component.ts
+++ b/projects/common-aol/src/fm-aol/components/sources/osm.component.ts
@ -0,0 +1,40 @@
+import {Component, Host, forwardRef, Input, AfterContentInit, Optional, OnInit} from '@angular/core';
+import { source, AttributionLike, TileLoadFunctionType } from 'openlayers';
+import { LayerTileComponent } from '../layers';
+import { SourceComponent } from './source.component';
+import { SourceXYZComponent } from './xyz.component';
+import {SourceRasterComponent} from './raster.component';
+
+@Component({
+  selector: 'aol-source-osm',
+  template: `<div class="aol-source-osm"></div>`,
+  providers: [
+    { provide: SourceComponent, useExisting: forwardRef(() => SourceOsmComponent) }
+  ]
+})
+export class SourceOsmComponent extends SourceXYZComponent implements AfterContentInit {
+  instance: source.OSM;
+
+  @Input() attributions: AttributionLike;
+  @Input() cacheSize: number;
+  @Input() crossOrigin: string;
+  @Input() maxZoom: number;
+  @Input() opaque: boolean;
+  @Input() reprojectionErrorThreshold: number;
+  @Input() tileLoadFunction: TileLoadFunctionType;
+  @Input() url: string;
+  @Input() wrapX: boolean;
+
+  constructor(@Host() @Optional() layer: LayerTileComponent,
+              @Host() @Optional() raster?: SourceRasterComponent) {
+    super(layer, raster);
+  }
+
+  ngAfterContentInit() {
+    if (this.tileGridXYZ) {
+      this.tileGrid = this.tileGridXYZ.instance;
+    }
+    this.instance = new source.OSM(this);
+    this._register(this.instance);
+  }
+}
--- a/projects/common-aol/src/fm-aol/components/sources/raster.component.ts
+++ b/projects/common-aol/src/fm-aol/components/sources/raster.component.ts
@ -0,0 +1,42 @@
+import { AfterContentInit, Component, EventEmitter, forwardRef, Host, Input, Output } from '@angular/core';
+import { RasterOperation, RasterOperationType, source } from 'openlayers';
+
+import { LayerImageComponent } from '../layers/layerimage.component';
+import { SourceComponent } from './source.component';
+
+@Component({
+  selector: 'aol-source-raster',
+  template: `<ng-content></ng-content>`,
+  providers: [
+    {
+      provide: SourceComponent,
+      useExisting: forwardRef(() => SourceRasterComponent)
+    }
+  ]
+})
+export class SourceRasterComponent extends SourceComponent implements AfterContentInit {
+  instance: source.Raster;
+
+  @Input() operation?: RasterOperation;
+  @Input() threads?: number;
+  @Input() lib?: Object;
+  @Input() operationType?: RasterOperationType;
+
+  @Output() beforeOperations: EventEmitter<source.RasterEvent> = new EventEmitter<source.RasterEvent>();
+  @Output() afterOperations: EventEmitter<source.RasterEvent> = new EventEmitter<source.RasterEvent>();
+
+  sources: source.Source[] = [];
+
+  constructor(@Host() layer: LayerImageComponent) {
+    super(layer);
+  }
+
+  ngAfterContentInit() {
+    this.instance = new source.Raster(this);
+
+    this.instance.on('beforeoperations', (event: source.RasterEvent) => this.beforeOperations.emit(event));
+    this.instance.on('afteroperations', (event: source.RasterEvent) => this.afterOperations.emit(event));
+
+    this._register(this.instance);
+  }
+}
--- a/projects/common-aol/src/fm-aol/components/sources/source.component.ts
+++ b/projects/common-aol/src/fm-aol/components/sources/source.component.ts
@ -0,0 +1,39 @@
+import {AfterContentInit, Component, Host, Input, OnDestroy, OnInit, Optional} from '@angular/core';
+import { source } from 'openlayers';
+import { LayerComponent } from '../layers';
+import AttributionLike = ol.AttributionLike;
+import { SourceRasterComponent } from './raster.component';
+
+@Component({
+  selector: 'required-for-ivy-2',
+  template: `<ng-content></ng-content>`
+})
+export class SourceComponent implements OnDestroy {
+  public instance: source.Source;
+  public componentType: string = 'source';
+
+  @Input() attributions: AttributionLike;
+
+  constructor(protected host: LayerComponent, protected raster?: SourceRasterComponent) {
+  }
+
+  ngOnDestroy() {
+    if (this.host) {
+      this.host.instance.setSource(null);
+    }
+
+    if (this.raster) {
+      this.raster.sources = [];
+    }
+  }
+
+  protected _register(source: source.Source) {
+    if (this.host) {
+      this.host.instance.setSource(source);
+    }
+
+    if (this.raster) {
+      this.raster.sources = [source];
+    }
+  }
+}
--- a/projects/common-aol/src/fm-aol/components/sources/tilejson.component.ts
+++ b/projects/common-aol/src/fm-aol/components/sources/tilejson.component.ts
@ -0,0 +1,26 @@
+import { Component, Host, Input, OnInit, forwardRef } from '@angular/core';
+import { AttributionLike, source, TileLoadFunctionType, tilegrid } from 'openlayers';
+import { LayerTileComponent } from '../layers';
+import { SourceComponent } from './source.component';
+
+@Component({
+  selector: 'aol-source-tilejson',
+  template: `<ng-content></ng-content>`,
+  providers: [
+    { provide: SourceComponent, useExisting: forwardRef(() => SourceTileJSONComponent) }
+  ]
+})
+export class SourceTileJSONComponent extends SourceComponent implements OnInit {
+  instance: source.TileJSON;
+
+  @Input() url: string;
+
+  constructor(@Host() layer: LayerTileComponent) {
+    super(layer);
+  }
+
+  ngOnInit() {
+    this.instance = new source.TileJSON(this);
+    this.host.instance.setSource(this.instance);
+  }
+}
--- a/projects/common-aol/src/fm-aol/components/sources/tileutfgrid.component.ts
+++ b/projects/common-aol/src/fm-aol/components/sources/tileutfgrid.component.ts
@ -0,0 +1,25 @@
+import { Component, Host, Input, OnInit, forwardRef } from '@angular/core';
+import { source } from 'openlayers';
+import { LayerTileComponent } from '../layers';
+import { SourceComponent } from './source.component';
+
+@Component({
+  selector: 'aol-source-tileutfgrid',
+  template: `<ng-content></ng-content>`,
+  providers: [
+    { provide: SourceComponent, useExisting: forwardRef(() => SourceTileUTFGridComponent) }
+  ]
+})
+export class SourceTileUTFGridComponent extends SourceComponent implements OnInit {
+  instance: source.TileUTFGrid;
+  @Input() tileJSON: JSON;
+
+  constructor(@Host() layer: LayerTileComponent) {
+    super(layer);
+  }
+
+  ngOnInit() {
+    this.instance = new source.TileUTFGrid(this);
+    this.host.instance.setSource(this.instance);
+  }
+}
--- a/projects/common-aol/src/fm-aol/components/sources/tilewms.component.ts
+++ b/projects/common-aol/src/fm-aol/components/sources/tilewms.component.ts
@ -0,0 +1,37 @@
+import { Component, Host, Input, OnInit, forwardRef } from '@angular/core';
+import { source, TileLoadFunctionType, tilegrid } from 'openlayers';
+import { LayerTileComponent } from '../layers';
+import { SourceComponent } from './source.component';
+
+@Component({
+  selector: 'aol-source-tilewms',
+  template: `<ng-content></ng-content>`,
+  providers: [
+    { provide: SourceComponent, useExisting: forwardRef(() => SourceTileWMSComponent) }
+  ]
+})
+export class SourceTileWMSComponent extends SourceComponent implements OnInit {
+  instance: source.TileWMS;
+  @Input() cacheSize: number;
+  @Input() crossOrigin: string;
+  @Input() gutter: number;
+  @Input() hidpi: boolean;
+  @Input() params: Object;
+  @Input() projection: string;
+  @Input() reprojectionErrorThreshold: number;
+  @Input() serverType: string;
+  @Input() tileGrid: tilegrid.TileGrid;
+  @Input() tileLoadFunction: TileLoadFunctionType;
+  @Input() url: string;
+  @Input() urls: string[];
+  @Input() wrapX: boolean;
+
+  constructor(@Host() layer: LayerTileComponent) {
+    super(layer);
+  }
+
+  ngOnInit() {
+    this.instance = new source.TileWMS(this);
+    this.host.instance.setSource(this.instance);
+  }
+}
--- a/projects/common-aol/src/fm-aol/components/sources/tilewmts.component.ts
+++ b/projects/common-aol/src/fm-aol/components/sources/tilewmts.component.ts
@ -0,0 +1,84 @@
+import {Component, Host, Input, forwardRef, AfterContentInit, ContentChild, SimpleChanges} from '@angular/core';
+import {
+  TileLoadFunctionType,
+  tilegrid,
+  ProjectionLike,
+  source,
+  ImageTile,
+  TileCoord,
+  Tile
+} from 'openlayers';
+import {LayerTileComponent} from '../layers';
+import {SourceComponent} from './source.component';
+import {TileGridWMTSComponent} from '../tilegridwmts.component';
+
+@Component({
+  selector: 'aol-source-tilewmts',
+  template: `<ng-content></ng-content>`,
+  providers: [
+    {provide: SourceComponent, useExisting: forwardRef(() => SourceTileWMTSComponent)}
+  ]
+})
+export class SourceTileWMTSComponent extends SourceComponent implements AfterContentInit {
+
+  instance: source.WMTS;
+  @Input() cacheSize?: number;
+  @Input() crossOrigin?: (string);
+  @Input() logo?: (string | olx.LogoOptions);
+  @Input() tileGrid: tilegrid.WMTS;
+  @Input() projection: ProjectionLike;
+  @Input() reprojectionErrorThreshold?: number;
+  @Input() requestEncoding?: (source.WMTSRequestEncoding | string);
+  @Input() layer: string;
+  @Input() style: string;
+  @Input() tileClass?: ((n: ImageTile, coords: TileCoord, state: Tile.State, s1: string, s2: string, type: TileLoadFunctionType) => any);
+  @Input() tilePixelRatio?: number;
+  @Input() version?: string;
+  @Input() format?: string;
+  @Input() matrixSet: string;
+  @Input() dimensions?: GlobalObject;
+  @Input() url?: string;
+  @Input() tileLoadFunction?: TileLoadFunctionType;
+  @Input() urls?: string[];
+  @Input() wrapX?: boolean;
+
+  @ContentChild(TileGridWMTSComponent) tileGridWMTS: TileGridWMTSComponent;
+
+  constructor(@Host() layer: LayerTileComponent) {
+    super(layer);
+  }
+
+
+  ngOnChanges(changes: SimpleChanges) {
+    let properties: {[index: string]: any} = {};
+    if (!this.instance) {
+      return;
+    }
+    for (let key in changes) {
+      if (changes.hasOwnProperty(key)) {
+        switch (key) {
+          case 'url':
+            this.url = changes[key].currentValue;
+            this.setLayerSource();
+            break;
+          default:
+            break;
+        }
+        properties[key] = changes[key].currentValue;
+      }
+    }
+    this.instance.setProperties(properties, false);
+  }
+
+  setLayerSource(): void {
+    this.instance = new source.WMTS(this);
+    this.host.instance.setSource(this.instance);
+  }
+
+  ngAfterContentInit(): void {
+    if (this.tileGridWMTS) {
+      this.tileGrid = this.tileGridWMTS.instance;
+      this.setLayerSource();
+    }
+  }
+}
--- a/projects/common-aol/src/fm-aol/components/sources/vector.component.ts
+++ b/projects/common-aol/src/fm-aol/components/sources/vector.component.ts
@ -0,0 +1,30 @@
+import { Component, Host, Input, OnInit, forwardRef } from '@angular/core';
+import { source } from 'openlayers';
+import { LayerVectorComponent } from '../layers';
+import { SourceComponent } from './source.component';
+
+@Component({
+  selector: 'aol-source-vector',
+  template: `<ng-content></ng-content>`,
+  providers: [
+    { provide: SourceComponent, useExisting: forwardRef(() => SourceVectorComponent) }
+  ]
+})
+export class SourceVectorComponent extends SourceComponent implements OnInit {
+  instance: source.Vector;
+  @Input() overlaps: boolean;
+  @Input() useSpatialIndex: boolean;
+  @Input() wrapX: boolean;
+  @Input() url: string;
+  @Input() format: ol.format.Feature;
+  @Input() strategy: ol.LoadingStrategy;
+
+  constructor(@Host() layer: LayerVectorComponent) {
+    super(layer);
+  }
+
+  ngOnInit() {
+    this.instance = new source.Vector(this);
+    this.host.instance.setSource(this.instance);
+  }
+}
--- a/projects/common-aol/src/fm-aol/components/sources/vectortile.component.ts
+++ b/projects/common-aol/src/fm-aol/components/sources/vectortile.component.ts
@ -0,0 +1,43 @@
+import { Component, Host, Input, forwardRef, ContentChild, AfterContentInit } from '@angular/core';
+import { source, ProjectionLike, TileUrlFunctionType, format, tilegrid } from 'openlayers';
+import { LayerVectorTileComponent } from '../layers';
+import { FormatComponent } from '../formats';
+import { TileGridComponent } from '../tilegrid.component';
+import { SourceComponent } from './source.component';
+
+@Component({
+  selector: 'aol-source-vectortile',
+  template: `<ng-content></ng-content>`,
+  providers: [
+    { provide: SourceComponent, useExisting: forwardRef(() => SourceVectorTileComponent) }
+  ]
+})
+export class SourceVectorTileComponent extends SourceComponent implements AfterContentInit {
+  public instance: source.VectorTile;
+  @Input() cacheSize: number;
+  @Input() overlaps: boolean;
+  @Input() projection: ProjectionLike;
+  @Input() tilePixelRatio: number;
+  @Input() tileUrlFunction: TileUrlFunctionType;
+  @Input() url: string;
+  @Input() urls: string[];
+  @Input() wrapX: boolean;
+
+  @ContentChild(FormatComponent) formatComponent: FormatComponent;
+  format: format.Feature;
+  @ContentChild(TileGridComponent) tileGridComponent: TileGridComponent;
+  tileGrid: tilegrid.TileGrid;
+
+  constructor(@Host() layer: LayerVectorTileComponent) {
+    super(layer);
+  }
+
+  /* need the children to construct the OL3 object */
+  ngAfterContentInit() {
+    this.format = this.formatComponent.instance;
+    this.tileGrid = this.tileGridComponent.instance;
+    // console.log('creating ol.source.VectorTile instance with:', this);
+    this.instance = new source.VectorTile(this);
+    this.host.instance.setSource(this.instance);
+  }
+}
--- a/projects/common-aol/src/fm-aol/components/sources/xyz.component.ts
+++ b/projects/common-aol/src/fm-aol/components/sources/xyz.component.ts
@ -0,0 +1,77 @@
+import {
+  Component,
+  Host,
+  Input,
+  AfterContentInit,
+  forwardRef,
+  OnChanges,
+  ContentChild,
+  SimpleChanges,
+  Optional,
+  OnInit
+} from '@angular/core';
+import { source, Size, TileUrlFunctionType, TileLoadFunctionType, tilegrid } from 'openlayers';
+import { LayerTileComponent } from '../layers';
+import { SourceComponent } from './source.component';
+import { TileGridComponent } from '../tilegrid.component';
+import { SourceRasterComponent } from './raster.component';
+
+@Component({
+  selector: 'aol-source-xyz',
+  template: `<ng-content></ng-content>`,
+  providers: [
+    { provide: SourceComponent, useExisting: forwardRef(() => SourceXYZComponent) }
+  ]
+})
+export class SourceXYZComponent extends SourceComponent implements AfterContentInit, OnChanges {
+  instance: source.XYZ;
+  @Input() cacheSize: number;
+  @Input() crossOrigin: string;
+  @Input() opaque: boolean;
+  @Input() projection: string;
+  @Input() reprojectionErrorThreshold: number;
+  @Input() minZoom: number;
+  @Input() maxZoom: number;
+  @Input() tileGrid: tilegrid.TileGrid;
+  @Input() tileLoadFunction?: TileLoadFunctionType;
+  @Input() tilePixelRatio: number;
+  @Input() tileSize: number|Size;
+  @Input() tileUrlFunction: TileUrlFunctionType;
+  @Input() url: string;
+  @Input() urls: string[];
+  @Input() wrapX: boolean;
+
+  @ContentChild(TileGridComponent) tileGridXYZ: TileGridComponent;
+
+  constructor(@Optional() @Host() layer: LayerTileComponent,
+              @Optional() @Host() raster?: SourceRasterComponent) {
+    super(layer, raster);
+  }
+
+  ngAfterContentInit() {
+    if (this.tileGridXYZ) {
+      this.tileGrid = this.tileGridXYZ.instance;
+    }
+    this.instance = new source.XYZ(this);
+    this._register(this.instance);
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    let properties: {[index: string]: any} = {};
+
+    if (!this.instance) {
+      return;
+    }
+    for (let key in changes) {
+      if (changes.hasOwnProperty(key)) {
+        properties[key] = changes[key].currentValue;
+      }
+    }
+
+    this.instance.setProperties(properties, false);
+    if (changes.hasOwnProperty('url')) {
+      this.instance = new source.XYZ(this);
+      this._register(this.instance);
+    }
+  }
+}
--- a/projects/common-aol/src/fm-aol/components/style.components_old.ts
+++ b/projects/common-aol/src/fm-aol/components/style.components_old.ts
@ -0,0 +1,90 @@
+import {
+  Component, Directive, EventEmitter, Host, OnDestroy, OnChanges, AfterContentInit,
+  Input, Output, ContentChild, SimpleChanges
+} from '@angular/core';
+import { style } from 'openlayers';
+import { FeatureComponent } from './feature.component';
+
+@Directive({
+    selector: 'aol-style-icon'
+})
+export class StyleIconDirective implements OnChanges {
+
+    // For usage info see: http://openlayers.org/en/latest/apidoc/ol.style.Icon.html
+    @Input() anchor: [number, number];
+    @Input() anchorXUnits: style.IconAnchorUnits;
+    @Input() anchorYUnits: style.IconAnchorUnits;
+    @Input() anchorOrigin: style.IconOrigin;
+    @Input() color: [number, number, number, number];
+    @Input() crossOrigin: style.IconOrigin;
+    @Input() img: string;
+    @Input() offset: [number, number];
+    @Input() offsetOrigin: style.IconOrigin;
+    @Input() opacity: number;
+    @Input() scale: number;
+    @Input() snapToPixel: boolean;
+    @Input() rotateWithView: boolean;
+    @Input() rotation: number;
+    @Input() size: [number, number];
+    @Input() imgSize: [number, number];
+    @Input() src: string;
+
+    @Output() onChanged = new EventEmitter<any>();
+
+    constructor() { }
+
+    ngOnChanges(changes: SimpleChanges) {
+        this.onChanged.emit(this.src);
+    }
+}
+
+@Component({
+    selector: 'aol-style',
+    template: `<ng-content></ng-content>`
+})
+export class StyleComponent implements OnDestroy, AfterContentInit {
+    private _host_: FeatureComponent;
+    private childSubscription$: any;
+
+    @ContentChild(StyleIconDirective) iconStyleDirective: StyleIconDirective;
+
+    constructor( @Host() feature: FeatureComponent) {
+        console.log('instancing aol-style');
+        this._host_ = feature;
+    }
+
+    ngAfterContentInit() {
+        this.update();
+        this.childSubscription$ = this.iconStyleDirective.onChanged.subscribe((): void => {
+            this.update();
+        });
+    }
+
+    update() {
+        this._host_.setStyle(new style.Style({
+            image: new style.Icon({
+                anchor: this.iconStyleDirective.anchor,
+                anchorOrigin: this.iconStyleDirective.anchorOrigin,
+                anchorXUnits: this.iconStyleDirective.anchorXUnits,
+                anchorYUnits: this.iconStyleDirective.anchorYUnits,
+                color: this.iconStyleDirective.color,
+                crossOrigin: this.iconStyleDirective.crossOrigin,
+                img: this.iconStyleDirective.img,
+                offset: this.iconStyleDirective.offset,
+                offsetOrigin: this.iconStyleDirective.offsetOrigin,
+                opacity: this.iconStyleDirective.opacity,
+                scale: this.iconStyleDirective.scale,
+                snapToPixel: this.iconStyleDirective.snapToPixel,
+                rotateWithView: this.iconStyleDirective.rotateWithView,
+                rotation: this.iconStyleDirective.rotation,
+                size: this.iconStyleDirective.size,
+                imgSize: this.iconStyleDirective.imgSize,
+                src: this.iconStyleDirective.src
+            })
+        }));
+    }
+
+    ngOnDestroy() {
+        this.childSubscription$.unsubscribe();
+    }
+}
--- a/projects/common-aol/src/fm-aol/components/styles/circle.component.ts
+++ b/projects/common-aol/src/fm-aol/components/styles/circle.component.ts
@ -0,0 +1,56 @@
+import { Component, Input, Host, AfterContentInit, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
+import { style } from 'openlayers';
+import { StyleComponent } from './style.component';
+
+@Component({
+  selector: 'aol-style-circle',
+  template: `<ng-content></ng-content>`
+})
+export class StyleCircleComponent implements AfterContentInit, OnChanges, OnDestroy {
+  public componentType: string = 'style-circle';
+  public instance: style.Circle;
+
+  @Input() fill: style.Fill;
+  @Input() radius: number;
+  @Input() snapToPixel: boolean;
+  @Input() stroke: style.Stroke;
+  @Input() atlasManager: style.AtlasManager;
+
+  constructor(@Host() private host: StyleComponent) {
+  }
+
+  /**
+   * WORK-AROUND: since the re-rendering is not triggered on style change
+   * we trigger a radius change.
+   * see openlayers #6233 and #5775
+   */
+  update() {
+    if (!!this.instance) {
+      // console.log('setting ol.style.Circle instance\'s radius');
+      this.instance.setRadius(this.radius);
+    }
+    this.host.update();
+  }
+
+  ngAfterContentInit() {
+    // console.log('creating ol.style.Circle instance with: ', this);
+    this.instance = new style.Circle(this);
+    this.host.instance.setImage(this.instance);
+    this.host.update();
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (!this.instance) {
+      return;
+    }
+    if (changes['radius']) {
+      this.instance.setRadius(changes['radius'].currentValue);
+    }
+    // console.log('changes detected in aol-style-circle, setting new radius: ', changes['radius'].currentValue);
+  }
+
+  ngOnDestroy() {
+    // console.log('removing aol-style-circle');
+    this.host.instance.setImage(null);
+  }
+}
--- a/projects/common-aol/src/fm-aol/components/styles/fill.component.ts
+++ b/projects/common-aol/src/fm-aol/components/styles/fill.component.ts
@ -0,0 +1,67 @@
+import { Component, Input, Optional, OnInit, OnChanges, SimpleChanges } from '@angular/core';
+import { style, Color, ColorLike } from 'openlayers';
+import { StyleComponent } from './style.component';
+import { StyleCircleComponent } from './circle.component';
+import { StyleTextComponent } from './text.component';
+
+@Component({
+  selector: 'aol-style-fill',
+  template: `<div class="aol-style-fill"></div>`,
+})
+export class StyleFillComponent implements OnInit, OnChanges {
+  /* the typings do not have the setters */
+  private host: /*StyleComponent|StyleCircleComponent|StyleTextComponent*/any;
+  public instance: style.Fill;
+
+  @Input() color: Color|ColorLike;
+
+  constructor(
+    @Optional() styleHost: StyleComponent,
+    @Optional() styleCircleHost: StyleCircleComponent,
+    @Optional() styleTextHost: StyleTextComponent
+  ) {
+    if (!styleHost) {
+      throw new Error('aol-style-stroke must be a descendant of aol-style');
+    }
+    if (!!styleTextHost) {
+      this.host = styleTextHost;
+    } else if (!!styleCircleHost) {
+      this.host = styleCircleHost;
+    } else {
+      this.host = styleHost;
+    }
+    // console.log('creating aol-style-fill with: ', this);
+  }
+
+  ngOnInit() {
+    // console.log('creating ol.style.Fill instance with: ', this);
+    this.instance = new style.Fill(this);
+    switch (this.host.componentType) {
+      case 'style':
+        this.host.instance.setFill(this.instance);
+        // console.log('setting ol.style instance\'s fill:', this.host);
+        break;
+      case 'style-text':
+        this.host.instance.setFill(this.instance);
+        break;
+      case 'style-circle':
+        this.host.fill = this.instance;
+        // console.log('setting ol.style.circle instance\'s fill:', this.host);
+        break;
+      default:
+        throw new Error('unknown host type: ' + this.host);
+      // break;
+    }
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (!this.instance) {
+      return;
+    }
+    if (changes['color']) {
+      this.instance.setColor(changes['color'].currentValue);
+    }
+    this.host.update();
+    // console.log('changes detected in aol-style-fill, setting new color: ', changes);
+  }
+}
--- a/projects/common-aol/src/fm-aol/components/styles/icon.component.ts
+++ b/projects/common-aol/src/fm-aol/components/styles/icon.component.ts
@ -0,0 +1,60 @@
+import { Component, Input, Host, OnInit, OnChanges, SimpleChanges } from '@angular/core';
+import { style } from 'openlayers';
+import { StyleComponent } from './style.component';
+
+@Component({
+  selector: 'aol-style-icon',
+  template: `<div class="aol-style-icon"></div>`,
+})
+export class StyleIconComponent implements OnInit, OnChanges {
+  public instance: style.Icon;
+
+  @Input() anchor: [number, number];
+  @Input() anchorXUnits: style.IconAnchorUnits;
+  @Input() anchorYUnits: style.IconAnchorUnits;
+  @Input() anchorOrigin: style.IconOrigin;
+  @Input() color: [number, number, number, number];
+  @Input() crossOrigin: style.IconOrigin;
+  @Input() img: string;
+  @Input() offset: [number, number];
+  @Input() offsetOrigin: style.IconOrigin;
+  @Input() opacity: number;
+  @Input() scale: number;
+  @Input() snapToPixel: boolean;
+  @Input() rotateWithView: boolean;
+  @Input() rotation: number;
+  @Input() size: [number, number];
+  @Input() imgSize: [number, number];
+  @Input() src: string;
+
+
+  constructor(@Host() private host: StyleComponent) {
+  }
+
+  ngOnInit() {
+    // console.log('creating ol.style.Icon instance with: ', this);
+    this.instance = new style.Icon(this);
+    this.host.instance.setImage(this.instance);
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (!this.instance) {
+      return;
+    }
+    if (changes['opacity']) {
+      this.instance.setOpacity(changes['opacity'].currentValue);
+    }
+    if (changes['rotation']) {
+      this.instance.setRotation(changes['rotation'].currentValue);
+    }
+    if (changes['scale']) {
+      this.instance.setScale(changes['scale'].currentValue);
+    }
+    if (changes['src']) {
+      this.instance = new style.Icon(this);
+      this.host.instance.setImage(this.instance);
+    }
+    this.host.update();
+    // console.log('changes detected in aol-style-icon: ', changes);
+  }
+}
--- a/projects/common-aol/src/fm-aol/components/styles/index.ts
+++ b/projects/common-aol/src/fm-aol/components/styles/index.ts
@ -0,0 +1,6 @@
+export * from './circle.component';
+export * from './fill.component';
+export * from './icon.component';
+export * from './stroke.component';
+export * from './style.component';
+export * from './text.component';
--- a/projects/common-aol/src/fm-aol/components/styles/stroke.component.ts
+++ b/projects/common-aol/src/fm-aol/components/styles/stroke.component.ts
@ -0,0 +1,87 @@
+import { Component, Input, Optional, OnInit, OnChanges, SimpleChanges } from '@angular/core';
+import { style, Color } from 'openlayers';
+import { StyleComponent } from './style.component';
+import { StyleCircleComponent } from './circle.component';
+import { StyleTextComponent } from './text.component';
+
+@Component({
+  selector: 'aol-style-stroke',
+  template: `<div class="aol-style-stroke"></div>`,
+})
+export class StyleStrokeComponent implements OnInit, OnChanges {
+  public instance: style.Stroke;
+  /* the typings do not have the setters */
+  private host: /*StyleComponent|StyleCircleComponent|StyleTextComponent*/any;
+
+  @Input() color: Color|undefined;
+  @Input() lineCap: string|undefined;
+  @Input() lineDash: number[]|undefined;
+  @Input() lineJoin: string|undefined;
+  @Input() miterLimit: number|undefined;
+  @Input() width: number|undefined;
+
+  constructor(
+    @Optional() styleHost: StyleComponent,
+    @Optional() styleCircleHost: StyleCircleComponent,
+    @Optional() styleTextHost: StyleTextComponent
+  ) {
+    if (!styleHost) {
+      throw new Error('aol-style-stroke must be a descendant of aol-style');
+    }
+    if (!!styleTextHost) {
+      this.host = styleTextHost;
+    } else if (!!styleCircleHost) {
+      this.host = styleCircleHost;
+    } else {
+      this.host = styleHost;
+    }
+    // console.log('creating aol-style-stroke with: ', this);
+  }
+
+  ngOnInit() {
+    // console.log('creating ol.style.Stroke instance with: ', this);
+    this.instance = new style.Stroke(this);
+    switch (this.host.componentType) {
+      case 'style':
+        this.host.instance.setStroke(this.instance);
+        // console.log('setting ol.style instance\'s stroke:', this.host);
+        break;
+      case 'style-text':
+        this.host.instance.setStroke(this.instance);
+        break;
+      case 'style-circle':
+        this.host.stroke = this.instance;
+        // console.log('setting ol.style.circle instance\'s stroke:', this.host);
+        break;
+      default:
+        throw new Error('unknown host type: ' + this.host);
+      // break;
+    }
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (!this.instance) {
+      return;
+    }
+    if (changes['color']) {
+      this.instance.setColor(changes['color'].currentValue);
+    }
+    if (changes['lineCap']) {
+      this.instance.setLineCap(changes['lineCap'].currentValue);
+    }
+    if (changes['lineDash']) {
+      this.instance.setLineDash(changes['lineDash'].currentValue);
+    }
+    if (changes['lineJoin']) {
+      this.instance.setLineJoin(changes['lineJoin'].currentValue);
+    }
+    if (changes['miterLimit']) {
+      this.instance.setMiterLimit(changes['miterLimit'].currentValue);
+    }
+    if (changes['width']) {
+      this.instance.setWidth(changes['width'].currentValue);
+    }
+    this.host.update();
+    // console.log('changes detected in aol-style-stroke, setting new properties: ', changes);
+  }
+}
--- a/projects/common-aol/src/fm-aol/components/styles/style.component.ts
+++ b/projects/common-aol/src/fm-aol/components/styles/style.component.ts
@ -0,0 +1,43 @@
+import { Component, Input, Optional, OnInit } from '@angular/core';
+import { style, StyleGeometryFunction, geom } from 'openlayers';
+import { FeatureComponent } from '../feature.component';
+import { LayerVectorComponent } from '../layers';
+
+@Component({
+  selector: 'aol-style',
+  template: `<ng-content></ng-content>`
+})
+export class StyleComponent implements OnInit {
+  private host: FeatureComponent|LayerVectorComponent;
+  public instance: style.Style;
+  public componentType: string = 'style';
+
+  @Input() geometry: string | geom.Geometry | StyleGeometryFunction;
+  @Input() fill: style.Fill;
+  @Input() image: style.Image;
+  @Input() stroke: style.Stroke;
+  @Input() text: style.Text;
+  @Input() zIndex: number;
+
+  constructor(
+    @Optional() featureHost: FeatureComponent,
+    @Optional() layerHost: LayerVectorComponent
+  ) {
+    // console.log('creating aol-style');
+    this.host = !!featureHost ? featureHost : layerHost;
+    if (!this.host) {
+      throw new Error('aol-style must be applied to a feature or a layer');
+    }
+  }
+
+  update() {
+    // console.log('updating style\'s host: ', this.host);
+    this.host.instance.changed();
+  }
+
+  ngOnInit() {
+    // console.log('creating aol-style instance with: ', this);
+    this.instance = new style.Style(this);
+    this.host.instance.setStyle(this.instance);
+  }
+}
--- a/projects/common-aol/src/fm-aol/components/styles/text.component.ts
+++ b/projects/common-aol/src/fm-aol/components/styles/text.component.ts
@ -0,0 +1,67 @@
+import { Component, Input, Optional, OnInit, OnChanges, SimpleChanges } from '@angular/core';
+import { style } from 'openlayers';
+import { StyleComponent } from './style.component';
+
+@Component({
+  selector: 'aol-style-text',
+  template: `<div class="aol-style-text"></div>`,
+})
+export class StyleTextComponent implements OnInit, OnChanges {
+  public instance: style.Text;
+  public componentType: string = 'style-text';
+
+  @Input() font: string|undefined;
+  @Input() offsetX: number|undefined;
+  @Input() offsetY: number|undefined;
+  @Input() scale: number|undefined;
+  @Input() rotateWithView: boolean|undefined;
+  @Input() rotation: number|undefined;
+  @Input() text: string|undefined;
+  @Input() textAlign: string|undefined;
+  @Input() textBaseLine: string|undefined;
+
+  constructor(@Optional() private host: StyleComponent) {
+    if (!host) {
+      throw new Error('aol-style-text must be a descendant of aol-style');
+    }
+    // console.log('creating aol-style-text with: ', this);
+  }
+
+  ngOnInit() {
+    // console.log('creating ol.style.Text instance with: ', this);
+    this.instance = new style.Text(this);
+    this.host.instance.setText(this.instance);
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (!this.instance) {
+      return;
+    }
+    if (changes['font']) {
+      this.instance.setFont(changes['font'].currentValue);
+    }
+    if (changes['offsetX']) {
+      this.instance.setOffsetX(changes['offsetX'].currentValue);
+    }
+    if (changes['offsetY']) {
+      this.instance.setOffsetY(changes['offsetY'].currentValue);
+    }
+    if (changes['scale']) {
+      this.instance.setScale(changes['scale'].currentValue);
+    }
+    if (changes['rotation']) {
+      this.instance.setRotation(changes['rotation'].currentValue);
+    }
+    if (changes['text']) {
+      this.instance.setText(changes['text'].currentValue);
+    }
+    if (changes['textAlign']) {
+      this.instance.setTextAlign(changes['textAlign'].currentValue);
+    }
+    if (changes['textBaseLine']) {
+      this.instance.setTextBaseline(changes['textBaseLine'].currentValue);
+    }
+    this.host.update();
+    // console.log('changes detected in aol-style-text, setting new properties: ', changes);
+  }
+}
--- a/projects/common-aol/src/fm-aol/components/tilegrid.component.ts
+++ b/projects/common-aol/src/fm-aol/components/tilegrid.component.ts
@ -0,0 +1,33 @@
+import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { tilegrid, Extent, Size , Coordinate} from 'openlayers';
+
+@Component({
+  selector: 'aol-tilegrid',
+  template: ''
+})
+export class TileGridComponent implements OnInit, OnChanges {
+  instance: tilegrid.TileGrid;
+
+  @Input() extent: Extent;
+  @Input() maxZoom: number;
+  @Input() minZoom: number;
+  @Input() tileSize: number|Size;
+  @Input() origin?: Coordinate;
+  @Input() resolutions: number[];
+
+  ngOnInit() {
+    if (!this.resolutions) {
+      this.instance = tilegrid.createXYZ(this)
+    } else {
+      this.instance = new tilegrid.TileGrid(this);
+    }
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (!this.resolutions) {
+      this.instance = tilegrid.createXYZ(this)
+    } else {
+      this.instance = new tilegrid.TileGrid(this);
+    }
+  }
+}
--- a/projects/common-aol/src/fm-aol/components/tilegridwmts.component.ts
+++ b/projects/common-aol/src/fm-aol/components/tilegridwmts.component.ts
@ -0,0 +1,23 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { tilegrid, Extent, Size, Coordinate } from 'openlayers';
+import { TileGridComponent } from './tilegrid.component';
+
+@Component({
+    selector: 'aol-tilegrid-wmts',
+    template: ''
+})
+export class TileGridWMTSComponent extends TileGridComponent implements OnInit {
+    instance: tilegrid.WMTS;
+
+    @Input() origin?: Coordinate;
+    @Input() origins?: Coordinate[];
+    @Input() resolutions: number[];
+    @Input() matrixIds: string[];
+    @Input() sizes?: Size[];
+    @Input() tileSizes?: ((number | Size)[]);
+    @Input() widths?: number[];
+
+    ngOnInit() {
+        this.instance = new tilegrid.WMTS(this);
+    }
+}
--- a/projects/common-aol/src/fm-aol/components/view.component.ts
+++ b/projects/common-aol/src/fm-aol/components/view.component.ts
@ -0,0 +1,68 @@
+import { Component, Input, OnInit, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
+import { View, Extent, Coordinate } from 'openlayers';
+import { MapComponent } from './map.component';
+
+@Component({
+  selector: 'aol-view',
+  template: `<ng-content></ng-content>`
+})
+export class ViewComponent implements OnInit, OnChanges, OnDestroy {
+  public instance: View;
+  public componentType: string = 'view';
+
+  @Input() constrainRotation: boolean|number;
+  @Input() enableRotation: boolean;
+  @Input() extent: Extent;
+  @Input() maxResolution: number;
+  @Input() minResolution: number;
+  @Input() maxZoom: number;
+  @Input() minZoom: number;
+  @Input() resolution: number;
+  @Input() resolutions: number[];
+  @Input() rotation: number;
+  @Input() zoom: number;
+  @Input() zoomFactor: number;
+  @Input() center: Coordinate;
+  @Input() projection: string;
+
+  @Input() zoomAnimation = false;
+
+  constructor(private host: MapComponent) {
+  }
+
+  ngOnInit() {
+    // console.log('creating ol.View instance with: ', this);
+    this.instance = new View(this);
+    this.host.instance.setView(this.instance);
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    let properties: { [index: string]: any } = {};
+    if (!this.instance) {
+      return;
+    }
+    for (let key in changes) {
+      if (changes.hasOwnProperty(key)) {
+        switch (key) {
+          case 'zoom':
+            /** Work-around: setting the zoom via setProperties does not work. */
+            if (this.zoomAnimation) {
+              this.instance.animate({zoom: changes[key].currentValue});
+            } else {
+              this.instance.setZoom(changes[key].currentValue);
+            }
+            break;
+          default:
+            break;
+        }
+        properties[key] = changes[key].currentValue;
+      }
+    }
+    // console.log('changes detected in aol-view, setting new properties: ', properties);
+    this.instance.setProperties(properties, false);
+  }
+
+  ngOnDestroy() {
+    // console.log('removing aol-view');
+  }
+}
--- a/projects/common-aol/src/fm-aol/module-name.ts
+++ b/projects/common-aol/src/fm-aol/module-name.ts
@ -0,0 +1 @@
+export const MODULE_NAME = "FarmMapsCommonAol";
--- a/projects/common-aol/src/public-api.ts
+++ b/projects/common-aol/src/public-api.ts
@ -0,0 +1,5 @@
+/*
+ * Public API Surface of common-aol
+ */
+
+export * from './fm-aol/common-aol.module';
--- a/projects/common-aol/tsconfig.lib.json
+++ b/projects/common-aol/tsconfig.lib.json
@ -0,0 +1,30 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "module": "es2015",
+    "moduleResolution": "node",
+    "declaration": true,
+    "sourceMap": true,
+    "inlineSources": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "types": [],
+    "lib": [
+      "dom",
+      "es2018"
+    ]
+  },
+  "angularCompilerOptions": {
+    "skipTemplateCodegen": true,
+    "strictMetadataEmit": true,
+    "fullTemplateTypeCheck": true,
+    "strictInjectionParameters": true,
+    "enableResourceInlining": true
+  },
+  "exclude": [
+    "src/test.ts",
+    "**/*.spec.ts"
+  ]
+}
--- a/projects/common-aol/tsconfig.lib.prod.json
+++ b/projects/common-aol/tsconfig.lib.prod.json
@ -0,0 +1,39 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "module": "es2015",
+    "moduleResolution": "node",
+    "declaration": true,
+    "sourceMap": true,
+    "inlineSources": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "esModuleInterop": true,
+    "types": [],
+    "lib": [
+      "dom",
+      "es2018"
+    ],
+    "paths": {
+      "@angular/*": [
+
+      "node_modules/@angular/*"
+
+      ]
+    }
+  },
+  "angularCompilerOptions": {
+    "skipTemplateCodegen": true,
+    "strictMetadataEmit": true,
+    "fullTemplateTypeCheck": true,
+    "strictInjectionParameters": true,
+    "enableResourceInlining": true,
+    "compilationMode": "partial"
+  },
+  "exclude": [
+    "src/test.ts",
+    "**/*.spec.ts"
+  ]
+}
--- a/projects/common-aol/tsconfig.spec.json
+++ b/projects/common-aol/tsconfig.spec.json
@ -0,0 +1,17 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "files": [
+    "src/test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}
--- a/projects/common-aol/tslint.json
+++ b/projects/common-aol/tslint.json
@ -0,0 +1,100 @@
+{
+  "rulesDirectory": [
+    "node_modules/codelyzer"
+  ],
+  "rules": {
+    "class-name": true,
+    "comment-format": [
+      true,
+      "check-space"
+    ],
+    "curly": true,
+    "eofline": true,
+    "forin": true,
+    "indent": [
+      true,
+      "spaces"
+    ],
+    "label-position": true,
+    "max-line-length": [
+      true,
+      140
+    ],
+    "member-access": false,
+    "member-ordering": [
+      true,
+      "static-before-instance",
+      "variables-before-functions"
+    ],
+    "no-arg": true,
+    "no-bitwise": true,
+    "no-console": [
+      true,
+      "debug",
+      "info",
+      "time",
+      "timeEnd",
+      "trace"
+    ],
+    "no-construct": true,
+    "no-debugger": true,
+    "no-duplicate-variable": true,
+    "no-empty": false,
+    "no-eval": true,
+    "no-inferrable-types": true,
+    "no-shadowed-variable": true,
+    "no-string-literal": false,
+    "no-switch-case-fall-through": true,
+    "no-trailing-whitespace": true,
+    "no-use-before-declare": true,
+    "no-var-keyword": true,
+    "object-literal-sort-keys": false,
+    "one-line": [
+      true,
+      "check-open-brace",
+      "check-catch",
+      "check-else",
+      "check-whitespace"
+    ],
+    "quotemark": [
+      true,
+      "single"
+    ],
+    "radix": true,
+    "semicolon": [
+      "always"
+    ],
+    "triple-equals": [
+      true,
+      "allow-null-check"
+    ],
+    "typedef-whitespace": [
+      true,
+      {
+        "call-signature": "nospace",
+        "index-signature": "nospace",
+        "parameter": "nospace",
+        "property-declaration": "nospace",
+        "variable-declaration": "nospace"
+      }
+    ],
+    "variable-name": false,
+    "whitespace": [
+      true,
+      "check-branch",
+      "check-decl",
+      "check-operator",
+      "check-separator",
+      "check-type"
+    ],
+    "use-input-property-decorator": true,
+    "use-output-property-decorator": true,
+    "use-host-property-decorator": true,
+    "no-input-rename": true,
+    "no-output-rename": true,
+    "use-life-cycle-interface": true,
+    "use-pipe-transform-interface": true,
+    "component-class-suffix": true,
+    "directive-class-suffix": true
+  }
+}
--- a/projects/common-map/package-lock.json
+++ b/projects/common-map/package-lock.json
@ -1,22 +1,21 @@
 {
  "name": "@farmmaps/common-map",
-  "version": "2.0.0",
+  "version": "2.1.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "@farmmaps/common-map",
-      "version": "2.0.0",
+      "version": "2.1.0",
      "dependencies": {
        "tslib": "^2.0.0"
      },
      "peerDependencies": {
-        "@angular/core": ">=14.0.0",
-        "@ngrx/effects": ">=14.0.0",
-        "@ngrx/router-store": ">=14.0.0",
-        "@ngrx/store": ">=14.0.0",
-        "ngrx-store-localstorage": ">=14.0.0",
-        "ngx-openlayers": ">=1.0.0-next.19",
+        "@angular/core": ">=16.0.0",
+        "@ngrx/effects": ">=16.0.0",
+        "@ngrx/router-store": ">=16.0.0",
+        "@ngrx/store": ">=16.0.0",
+        "ngrx-store-localstorage": ">=16.0.0",
        "ol": ">=6.8.1",
        "tassign": ">=1.0.0"
      }
--- a/projects/common-map/package.json
+++ b/projects/common-map/package.json
@ -1,6 +1,6 @@
 {
  "name": "@farmmaps/common-map",
-  "version": "2.0.0",
+  "version": "2.1.0",
  "publishConfig": {
    "registry": "https://repository.akkerweb.nl/repository/npm-hosted/"
  },
@ -8,13 +8,12 @@
    "tslib": "^2.0.0"
  },
  "peerDependencies": {
-    "@angular/core": ">=14.0.0",
-    "ngrx-store-localstorage": ">=14.0.0",
-    "@ngrx/effects": ">=14.0.0",
-    "@ngrx/router-store":">=14.0.0",
-    "@ngrx/store":">=14.0.0",
+    "@angular/core": ">=16.0.0",
+    "ngrx-store-localstorage": ">=16.0.0",
+    "@ngrx/effects": ">=16.0.0",
+    "@ngrx/router-store":">=16.0.0",
+    "@ngrx/store":">=16.0.0",
    "tassign": ">=1.0.0",
-    "ngx-openlayers": ">=1.0.0-next.19",
    "ol": ">=6.8.1"
  }
 }
--- a/projects/common-map/src/fm-map/common-map.module.ts
+++ b/projects/common-map/src/fm-map/common-map.module.ts
@ -3,7 +3,7 @@ import { CommonModule } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';

 //external modules
-import { AngularOpenlayersModule } from 'ngx-openlayers';
+import { AppCommonAolModule } from '@farmmaps/common-aol';
 import { StoreModule, ActionReducer, MetaReducer } from '@ngrx/store';
 import { EffectsModule } from '@ngrx/effects';
 import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
@ -169,119 +169,119 @@ export {
  GeometryThumbnailComponent
 }

-@NgModule({
-    imports: [
-        CommonModule,
-        AngularOpenlayersModule,
-        MapRoutingModule,
-        StoreModule.forFeature(MODULE_NAME, mapReducers.reducer, { metaReducers: metaReducers }),
-        EffectsModule.forFeature([mapEffects.MapEffects]),
-        NgbModule,
-        FormsModule,
-        ReactiveFormsModule,
-        AppCommonModule
-    ],
-    declarations: [
-        ZoomToExtentComponent,
-        ItemVectorSourceComponent,
-        ItemLayersComponent,
-        FileDropTargetComponent,
-        MapComponent,
-        MetaDataModalComponent,
-        RotationResetComponent,
-        MapSearchComponent,
-        SelectPeriodModalComponent,
-        LayerListComponent,
-        LegendComponent,
-        LayerVectorImageComponent,
-        FeatureListComponent,
-        WidgetHostDirective,
-        FeatureListContainerComponent,
-        FeatureListCroppingschemeComponent,
-        FeatureListCropfieldComponent,
-        FeatureListFeatureContainerComponent,
-        FeatureListFeatureComponent,
-        FeatureListFeatureCroppingschemeComponent,
-        FeatureListFeatureCropfieldComponent,
-        SelectedItemContainerComponent,
-        SelectedItemComponent,
-        SelectedItemCropfieldComponent,
-        SelectedItemGeotiffComponent,
-        SelectedItemTemporalComponent,
-        SelectedItemShapeComponent,
-        ItemListItemComponent,
-        ItemListItemContainerComponent,
-        ItemListComponent,
-        ItemWidgetListComponent,
-        WidgetStatusComponent,
-        GpsLocation,
-        PanToLocation,
-        LayerSwitcher,
-        HistogramDetailsComponent,
-        StatisticsDetailsComponent,
-        ifZoomToShowDirective,
-        ZoomToShowAlert,
-        LayerValuesComponent,
-        GeometryThumbnailComponent
-    ],
-    exports: [
-        ItemVectorSourceComponent,
-        ItemLayersComponent,
-        FileDropTargetComponent,
-        MetaDataModalComponent,
-        MapComponent,
-        GpsLocation,
-        PanToLocation,
-        LayerSwitcher,
-        FeatureListFeatureComponent,
-        FeatureListFeatureCropfieldComponent,
-        FeatureListFeatureCroppingschemeComponent,
-        SelectedItemContainerComponent,
-        SelectedItemComponent,
-        SelectedItemCropfieldComponent,
-        SelectedItemGeotiffComponent,
-        SelectedItemTemporalComponent,
-        SelectedItemShapeComponent,
-        ItemListItemComponent,
-        ItemListItemContainerComponent,
-        ItemListComponent,
-        ItemWidgetListComponent,
-        WidgetStatusComponent,
-        RotationResetComponent,
-        MapSearchComponent,
-        SelectPeriodModalComponent,
-        LayerListComponent,
-        LegendComponent,
-        LayerVectorImageComponent,
-        FeatureListComponent,
-        WidgetHostDirective,
-        FeatureListContainerComponent,
-        FeatureListCroppingschemeComponent,
-        FeatureListCropfieldComponent,
-        FeatureListFeatureContainerComponent,
-        ZoomToExtentComponent,
-        ifZoomToShowDirective,
-        ZoomToShowAlert,
-        GeometryThumbnailComponent
-    ],
-    providers: [
-        FeatureIconService,
-        GeolocationService,
-        DeviceOrientationService,
-        TemporalService,
-        { provide: AbstractFeatureListComponent, useClass: FeatureListCroppingschemeComponent, multi: true },
-        { provide: AbstractFeatureListComponent, useClass: FeatureListCropfieldComponent, multi: true },
-        { provide: AbstractFeatureListFeatureComponent, useClass: FeatureListFeatureComponent, multi: true },
-        { provide: AbstractFeatureListFeatureComponent, useClass: FeatureListFeatureCroppingschemeComponent, multi: true },
-        { provide: AbstractFeatureListFeatureComponent, useClass: FeatureListFeatureCropfieldComponent, multi: true },
-        { provide: AbstractSelectedItemComponent, useClass: SelectedItemComponent, multi: true },
-        { provide: AbstractSelectedItemComponent, useClass: SelectedItemCropfieldComponent, multi: true },
-        { provide: AbstractSelectedItemComponent, useClass: SelectedItemGeotiffComponent, multi: true },
-        { provide: AbstractSelectedItemComponent, useClass: SelectedItemTemporalComponent, multi: true },
-        { provide: AbstractSelectedItemComponent, useClass: SelectedItemShapeComponent, multi: true },
-        { provide: AbstractItemListItemComponent, useClass: ItemListItemComponent, multi: true },
-        { provide: AbstractItemListComponent, useClass: ItemListComponent, multi: true }
-    ]
+@NgModule({
+    imports: [
+        CommonModule,
+        AppCommonAolModule,
+        MapRoutingModule,
+        StoreModule.forFeature(MODULE_NAME, mapReducers.reducer, { metaReducers: metaReducers }),
+        EffectsModule.forFeature([mapEffects.MapEffects]),
+        NgbModule,
+        FormsModule,
+        ReactiveFormsModule,
+        AppCommonModule
+    ],
+    declarations: [
+        ZoomToExtentComponent,
+        ItemVectorSourceComponent,
+        ItemLayersComponent,
+        FileDropTargetComponent,
+        MapComponent,
+        MetaDataModalComponent,
+        RotationResetComponent,
+        MapSearchComponent,
+        SelectPeriodModalComponent,
+        LayerListComponent,
+        LegendComponent,
+        LayerVectorImageComponent,
+        FeatureListComponent,
+        WidgetHostDirective,
+        FeatureListContainerComponent,
+        FeatureListCroppingschemeComponent,
+        FeatureListCropfieldComponent,
+        FeatureListFeatureContainerComponent,
+        FeatureListFeatureComponent,
+        FeatureListFeatureCroppingschemeComponent,
+        FeatureListFeatureCropfieldComponent,
+        SelectedItemContainerComponent,
+        SelectedItemComponent,
+        SelectedItemCropfieldComponent,
+        SelectedItemGeotiffComponent,
+        SelectedItemTemporalComponent,
+        SelectedItemShapeComponent,
+        ItemListItemComponent,
+        ItemListItemContainerComponent,
+        ItemListComponent,
+        ItemWidgetListComponent,
+        WidgetStatusComponent,
+        GpsLocation,
+        PanToLocation,
+        LayerSwitcher,
+        HistogramDetailsComponent,
+        StatisticsDetailsComponent,
+        ifZoomToShowDirective,
+        ZoomToShowAlert,
+        LayerValuesComponent,
+        GeometryThumbnailComponent
+    ],
+    exports: [
+        ItemVectorSourceComponent,
+        ItemLayersComponent,
+        FileDropTargetComponent,
+        MetaDataModalComponent,
+        MapComponent,
+        GpsLocation,
+        PanToLocation,
+        LayerSwitcher,
+        FeatureListFeatureComponent,
+        FeatureListFeatureCropfieldComponent,
+        FeatureListFeatureCroppingschemeComponent,
+        SelectedItemContainerComponent,
+        SelectedItemComponent,
+        SelectedItemCropfieldComponent,
+        SelectedItemGeotiffComponent,
+        SelectedItemTemporalComponent,
+        SelectedItemShapeComponent,
+        ItemListItemComponent,
+        ItemListItemContainerComponent,
+        ItemListComponent,
+        ItemWidgetListComponent,
+        WidgetStatusComponent,
+        RotationResetComponent,
+        MapSearchComponent,
+        SelectPeriodModalComponent,
+        LayerListComponent,
+        LegendComponent,
+        LayerVectorImageComponent,
+        FeatureListComponent,
+        WidgetHostDirective,
+        FeatureListContainerComponent,
+        FeatureListCroppingschemeComponent,
+        FeatureListCropfieldComponent,
+        FeatureListFeatureContainerComponent,
+        ZoomToExtentComponent,
+        ifZoomToShowDirective,
+        ZoomToShowAlert,
+        GeometryThumbnailComponent
+    ],
+    providers: [
+        FeatureIconService,
+        GeolocationService,
+        DeviceOrientationService,
+        TemporalService,
+        { provide: AbstractFeatureListComponent, useClass: FeatureListCroppingschemeComponent, multi: true },
+        { provide: AbstractFeatureListComponent, useClass: FeatureListCropfieldComponent, multi: true },
+        { provide: AbstractFeatureListFeatureComponent, useClass: FeatureListFeatureComponent, multi: true },
+        { provide: AbstractFeatureListFeatureComponent, useClass: FeatureListFeatureCroppingschemeComponent, multi: true },
+        { provide: AbstractFeatureListFeatureComponent, useClass: FeatureListFeatureCropfieldComponent, multi: true },
+        { provide: AbstractSelectedItemComponent, useClass: SelectedItemComponent, multi: true },
+        { provide: AbstractSelectedItemComponent, useClass: SelectedItemCropfieldComponent, multi: true },
+        { provide: AbstractSelectedItemComponent, useClass: SelectedItemGeotiffComponent, multi: true },
+        { provide: AbstractSelectedItemComponent, useClass: SelectedItemTemporalComponent, multi: true },
+        { provide: AbstractSelectedItemComponent, useClass: SelectedItemShapeComponent, multi: true },
+        { provide: AbstractItemListItemComponent, useClass: ItemListItemComponent, multi: true },
+        { provide: AbstractItemListComponent, useClass: ItemListComponent, multi: true }
+    ]
 })


--- 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
@ -1,6 +1,3 @@
-@import "~bootstrap/scss/bootstrap.scss";
-
-
 .gps-location {
  display:none; 
 }
@ -14,7 +11,7 @@
 }

 .tolerance {
-  fill: $primary;
+  fill: var(--bs-primary);
  fill-opacity:0.4;
 }

@ -23,20 +20,20 @@
 }

 .border {
-  fill: $white;
+  fill: var(--bs-white);
 }

 .center {
-  fill: $primary;
+  fill: var(--bs-primary);
 }

 .stop1 {
-  stop-color: $primary;
+  stop-color: var(--bs-primary);
  stop-opacity:1;
 }

 .stop2 {
-  stop-color:$primary;
+  stop-color: var(--bs-primary);
  stop-opacity: 0;
 }

--- a/projects/common-map/src/fm-map/components/aol/pan-to-location/pan-to-location.component.scss
+++ b/projects/common-map/src/fm-map/components/aol/pan-to-location/pan-to-location.component.scss
@ -1,11 +1,8 @@
-@import "~bootstrap/scss/bootstrap.scss";
-
-
 .gps-location {
  display:block; 
  width:2.5em;
  height:2.5em;
-  background-color: $body-bg;
+  background-color: var(--bs-body-bg);
  background-size: contain;
  margin-top:0.5em;
  border-radius: 1.75em;
@ -17,15 +14,15 @@
 }

 .pan-to {
-  fill: $secondary;
+  fill: var(--bs-secondary);
 }

 div.gps-location:hover .pan-to {
-  fill: $white;
+  fill: var(--bs-white);
 }

 .pan-to-centered {
-  fill: $primary;
+  fill: var(--bs-primary);
 }

 div.gps-location:hover .pan-to-centered {
@ -33,5 +30,5 @@ div.gps-location:hover .pan-to-centered {
 }

 .pan-to.pan-to-disabled {
-  fill: $gray-300;
+  fill: var(--bs-gray-300);
 }
--- a/projects/common-map/src/fm-map/components/aol/rotation-reset/rotation-reset.component.scss
+++ b/projects/common-map/src/fm-map/components/aol/rotation-reset/rotation-reset.component.scss
@ -1,5 +1,3 @@
-@import "~bootstrap/scss/bootstrap.scss";
-
 .compass {
  width:2.5em;
  height:2.5em;
@ -13,7 +11,7 @@

 #north {
  display: none;
-  fill:$black;
+  fill: var(--bs-black);
 }

 #top-l {
@ -33,23 +31,23 @@
 }

 div.compass:hover #top-l {
-  fill:$white;
+  fill: var(--bs-white);
 }

 div.compass:hover #top-r {
-  fill:$gray-300;
+  fill: var(--bs-gray-300);
 }

 div.compass:hover #bottom-l {
-  fill:$gray-300;
+  fill: var(--bs-gray-300);
 }

 div.compass:hover #bottom-r {
-  fill:$white;
+  fill: var(--bs-white);
 }

 div.compass:hover #north {
-  fill:$white;
+  fill: var(--bs-white);
 }

 .compass-n {    
--- a/projects/common-map/src/fm-map/components/feature-list-container/feature-list-container.component.scss
+++ b/projects/common-map/src/fm-map/components/feature-list-container/feature-list-container.component.scss
@ -1,14 +1,10 @@
-@import "~bootstrap/scss/bootstrap.scss";
-
-
-
 .row {
-  border-bottom: 1px solid $gray-500;
+  border-bottom: 1px solid var(--bs-gray-500);
  user-select: none;
 }

 .row.selected {
-  background-color: $gray-100;
+  background-color: var(--bs-gray-100);
 }

@media screen and (min-width: 44rem)  {
--- a/projects/common-map/src/fm-map/components/feature-list-cropfield/feature-list-cropfield.component.scss
+++ b/projects/common-map/src/fm-map/components/feature-list-cropfield/feature-list-cropfield.component.scss
@ -1,22 +1,20 @@
-@import "~bootstrap/scss/bootstrap.scss";
-
 fm-map-feature-list-feature-container {
  width:100%;
  pointer-events:none;
 }

 .row {
-  border-bottom: 1px solid $gray-500;
+  border-bottom: 1px solid var(--bs-gray-500);
  user-select: none;
  padding-left:1.5rem;
 }

 .row.selected {
-  background-color: $gray-100;
+  background-color: var(--bs-gray-100);
 }

 .cropfields {
-  border-top: 1px solid $gray-500;
+  border-top: 1px solid var(--bs-gray-500);
  margin-left: -1.25rem;
  margin-right: -1.25rem;
 }
--- a/projects/common-map/src/fm-map/components/feature-list-croppingscheme/feature-list-croppingscheme.component.scss
+++ b/projects/common-map/src/fm-map/components/feature-list-croppingscheme/feature-list-croppingscheme.component.scss
@ -1,22 +1,20 @@
-@import "~bootstrap/scss/bootstrap.scss";
-
 fm-map-feature-list-feature-container {
  width:100%;
  pointer-events:none;
 }

 .row {
-  border-bottom: 1px solid $gray-500;
+  border-bottom: 1px solid var(--bs-gray-500);
  user-select: none;
  padding-left:1.5rem;
 }

 .row.selected {
-  background-color: $gray-100;
+  background-color: var(--bs-gray-100);
 }

 .farms {
-  border-top: 1px solid $gray-500;
+  border-top: 1px solid var(--bs-gray-500);
  margin-left: -1.25rem;
  margin-right: -1.25rem;
 }
--- a/Show More
+++ b/Show More
				`@ -0,0 +1 @@`
				`export const MODULE_NAME = "FarmMapsCommonAol";`