Merge branch 'feature/AW5739Angular_v16' into develop

.gitignore

@@ -51,5 +51,5 @@ projects/common-map/node_modules/
 .angular/*
 projects/common-map3d/node_modules/
 projects/common-map/node_modules/
-projects/ng-openlayers/node_modules/
+projects/common-aol/node_modules/
 projects/common/node_modules/

README.md

@@ -1,64 +1,65 @@
-# Farmmaps viewer
+# Farmmaps viewer
-
+
-This is a sample FarmMaps client in Angular 7.x.
+This is a sample FarmMaps client in Angular 7.x.
-
+
-## Quick start
+
-
+## Quick start
-Use one of the two options below to get started.
+
-
+Use one of the two options below to get started.
-## Option 1, Using docker
+
-
+## Option 1, Using docker
-*Dependencies*  
+
-
+*Dependencies*  
-* docker desktop
+
-
+* docker desktop
-*Setup*
+
-
+*Setup*
-```
+
-docker pull node:12.13.1
+```
-docker run -t -i --entrypoint /bin/bash -p 4200:4200 node:12.13.1
+docker pull node:12.13.1
-```
+docker run -t -i --entrypoint /bin/bash -p 4200:4200 node:12.13.1
-
+```
-Inside the running container 
+
-```
+Inside the running container 
-git clone https://git.akkerweb.nl/FarmMaps/FarmMapsLib.git
+```
-cd FarmMapsLib
+git clone https://git.akkerweb.nl/FarmMaps/FarmMapsLib.git
-npm config set @farmmaps:registry https://repository.akkerweb.nl/repository/npm-group/
+cd FarmMapsLib
-npm install -g @angular/cli
+npm config set @farmmaps:registry https://repository.akkerweb.nl/repository/npm-group/
-npm install
+npm install -g @angular/cli
-ng serve --host 0.0.0.0
+npm install
-```
+ng serve --host 0.0.0.0
-*Go*
+```
-
+*Go*
-Point your browser to http://localhost:4200
+
-
+Point your browser to http://localhost:4200
-## Option 2, Using local machine
+
-
+## Option 2, Using local machine
-*Dependencies*
+
-
+*Dependencies*
-* npm 6.9.0
+
-* nodejs 10.16.0
+* npm 6.9.0
-* git
+* nodejs 10.16.0
-
+* git
-*Setup*
+
-
+*Setup*
-```
+
-git clone https://git.akkerweb.nl/FarmMaps/FarmMapsLib.git
+```
-cd FarmMapsLib
+git clone https://git.akkerweb.nl/FarmMaps/FarmMapsLib.git
-npm config set @farmmaps:registry https://repository.akkerweb.nl/repository/npm-group/
+cd FarmMapsLib
-npm install -g @angular/cli
+npm config set @farmmaps:registry https://repository.akkerweb.nl/repository/npm-group/
-npm install
+npm install -g @angular/cli
-ng serve
+npm install
-```
+ng serve
-*Go*`
+```
-
+*Go*
-Point your browser to http://localhost:4200
+
-
+Point your browser to http://localhost:4200
-*ESLint*
+
-
+*ESLint*
-```
+
-npm run lint src
+```
-npm run lint projects/common/src
+npm run lint src
-npm run lint projects/common-map/src
+npm run lint projects/common/src
-npm run lint projects/common-map3d/src
+npm run lint projects/common-map/src
+npm run lint projects/common-map3d/src
 ```

angular.json

@@ -209,13 +209,13 @@
           "options": {
             "tsConfig": "projects/common-map/tsconfig.lib.json",
             "project": "projects/common-map/ng-package.json"
-          },
-          "configurations": {
-              "production": {
-                "tsConfig": "projects/common-map/tsconfig.lib.prod.json"
-              }
           }
-        },
+        ,          "configurations": {
+            "production": {
+              "tsConfig": "projects/common-map/tsconfig.lib.prod.json"
+            }
+          }
+},
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
@@ -254,39 +254,30 @@
         }
       }
     },
-    "ng-openlayers": {
+    "common-aol": {
       "projectType": "library",
-      "root": "projects/ng-openlayers",
+      "root": "projects/common-aol",
-      "sourceRoot": "projects/ng-openlayers/src",
+      "sourceRoot": "projects/common-aol/src",
-      "prefix": "ng-openlayers",
+      "prefix": "fm-aol",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:ng-packagr",
+          "builder": "@angular-devkit/build-angular:ng-packagr:build",
           "options": {
-            "tsConfig": "projects/ng-openlayers/tsconfig.lib.json",
+            "tsConfig": "projects/common-aol/tsconfig.lib.json",
-            "project": "projects/ng-openlayers/ng-package.json"
+            "project": "projects/common-aol/ng-package.json"
           },
           "configurations": {
             "production": {
-              "tsConfig": "projects/ng-openlayers/tsconfig.lib.prod.json"
+              "tsConfig": "projects/common-aol/tsconfig.lib.prod.json"
             }
           }
         },
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
-            "main": "projects/ng-openlayers/src/test.ts",
+            "main": "projects/common-aol/src/test.ts",
-            "tsConfig": "projects/ng-openlayers/tsconfig.spec.json",
+            "tsConfig": "projects/common-aol/tsconfig.spec.json",
-            "karmaConfig": "projects/ng-openlayers/karma.conf.js"
+            "karmaConfig": "projects/common-aol/karma.conf.js"
-          }
-        },
-        "lint": {
-          "builder": "@angular-eslint/builder:lint",
-          "options": {
-            "lintFilePatterns": [
-              "projects/ng-openlayers/**/*.ts",
-              "projects/ng-openlayers/**/*.html"
-            ]
           }
         }
       }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "farmmaps-lib-app",
-  "version": "4.18.0",
+  "version": "4.2.0",
-  "scripts":   {
+  "scripts": {
     "ng": "ng",
     "start": "ng serve",
     "build": "ng build",
@@ -10,41 +10,41 @@
     "e2e": "ng e2e"
   },
   "private": true,
-  "dependencies":   {
+  "dependencies": {
-    "@angular-eslint/eslint-plugin": "^18.2.0",
+    "@angular-eslint/eslint-plugin": "^15.2.1",
-    "@angular/animations": "18.2.3",
+    "@angular/animations": "^16.2.12",
-    "@angular/common": "18.2.3",
+    "@angular/common": "^16.2.12",
-    "@angular/compiler": "18.2.3",
+    "@angular/compiler": "^16.2.12",
-    "@angular/core": "18.2.3",
+    "@angular/core": "^16.2.12",
-    "@angular/forms": "18.2.3",
+    "@angular/forms": "^16.2.12",
-    "@angular/platform-browser": "18.2.3",
+    "@angular/platform-browser": "^16.2.12",
-    "@angular/platform-browser-dynamic": "18.2.3",
+    "@angular/platform-browser-dynamic": "^16.2.12",
-    "@angular/router": "18.2.3",
+    "@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",
-    "@farmmaps/ng-openlayers": "file:dist/ng-openlayers",
+    "@microsoft/signalr": "^8.0.0",
-    "@microsoft/signalr": "^3.1.16",
+    "@ng-bootstrap/ng-bootstrap": "^15.0.0",
-    "@ng-bootstrap/ng-bootstrap": "^17.0.1",
+    "@ngrx/effects": "^15",
-    "@ngrx/effects": "^18.0.2",
+    "@ngrx/router-store": "^15",
-    "@ngrx/router-store": "^18.0.2",
+    "@ngrx/store": "^14",
-    "@ngrx/store": "^18.0.2",
+    "@popperjs/core": "^2.11.6",
-    "@popperjs/core": "^2.11.8",
+    "angular-oauth2-oidc": "^13",
-    "angular-oauth2-oidc": "^17.0.2",
     "assert": "^2.0.0",
-    "bootstrap": "^5.3.3",
+    "bootstrap": "^5.2.0",
     "browserify-zlib": "^0.2.0",
     "buffer": "^6.0.3",
     "cesium": "^1.97.0",
     "core-js": "^2.6.12",
     "https-browserify": "^1.0.0",
     "moment": "^2.29.4",
-    "ngrx-store-localstorage": "^18.0.0",
+    "ngrx-store-localstorage": "^14",
-    "ngx-avatars": "^1.8.0",
+    "ngx-avatars": "^1.7.0",
-    "ngx-clipboard": "^16.0.0",
+    "ngx-clipboard": "^15.1.0",
-    "ngx-image-cropper": "^7.0.0",
+    "ngx-image-cropper": "^6.0.2",
-    "ngx-uploadx": "^6.2.0",
+    "ngx-uploadx": "^5.2.0",
-    "ol": "^8.2.0",
+    "ol": "6.14.1",
     "olcs": "^2.13.1",
     "resumablejs": "^1.1.0",
     "rxjs": "^7.8.1",
@@ -54,27 +54,22 @@
     "tslib": "^2.4.0",
     "url": "^0.11.0",
     "util": "^0.12.4",
-    "zone.js": "~0.14.10"
+    "zone.js": "~0.13.3"
   },
-  "optionalDependencies":   {
+  "devDependencies": {
-    "@lmdb/lmdb-linux-x64": "^3.1.0",
+    "@angular-builders/custom-webpack": "^16.0.1",
-    "@rollup/rollup-linux-x64-gnu": "^4.21.2"
+    "@angular-devkit/build-angular": "^16.2.11",
-  },
+    "@angular/cli": "^16.2.11",
-  "devDependencies":   {
+    "@angular/compiler-cli": "^16.2.12",
-    "@angular-builders/custom-webpack": "^18.0.0",
+    "@angular/language-service": "^16.2.12",
-    "@angular-devkit/build-angular": "18.2.3",
+    "@angular/localize": "^16.2.12",
-    "@angular/cli": "18.2.3",
-    "@angular/compiler-cli": "18.2.3",
-    "@angular/language-service": "18.2.3",
-    "@angular/localize": "18.2.3",
     "@types/arcgis-rest-api": "^10.4.5",
     "@types/jasmine": "~2.8.8",
     "@types/jasminewd2": "^2.0.9",
-    "@types/node": "^22.5.4",
+    "@types/node": "^12.20.15",
-    "@typescript-eslint/eslint-plugin": "^6.18.0",
+    "@typescript-eslint/eslint-plugin": "^5.54.0",
-    "@typescript-eslint/eslint-plugin-tslint": "^6.18.0",
+    "@typescript-eslint/eslint-plugin-tslint": "^5.54.0",
-    "@typescript-eslint/parser": "^6.18.0",
+    "@typescript-eslint/parser": "^5.54.0",
-    "codelyzer": "^6.0.2",
     "eslint": "^8.35.0",
     "eslint-config-prettier": "^8.6.0",
     "eslint-plugin-import": "^2.27.5",
@@ -85,9 +80,9 @@
     "karma-coverage-istanbul-reporter": "^3.0.3",
     "karma-jasmine": "^5.1.0",
     "karma-jasmine-html-reporter": "^2.0.0",
-    "ng-packagr": "^18.2.1",
+    "ng-packagr": "^16.2.3",
-    "protractor": "~7.0.0",
+    "protractor": "^7.0.0",
     "ts-node": "^8.8.1",
-    "typescript": "~5.4.4"
+    "typescript": "~5.1.6"
   }
-}
+}

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": {
+    }
+}

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).

projects/common-aol/ng-package.json

@@ -1,10 +1,10 @@
 {
   "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "../../dist/ng-openlayers",
+  "dest": "../../dist/common-aol",
-  "assets": [
-    "ngcc.config.js"
-  ],
   "lib": {
     "entryFile": "src/public-api.ts"
-  }
+  },
-}
+  "allowedNonPeerDependencies": [
+    "."
+  ]
+}

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"
+    }
+}

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 {  
+}

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);
+  }
+}

projects/common-aol/src/fm-aol/components/attributions.component.ts

@@ -1,23 +1,24 @@
 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>',
+  template: '<ng-content></ng-content>'
 })
 export class AttributionsComponent implements AfterViewInit {
-  @ContentChildren(AttributionComponent)
+  instance: Array<Attribution>;
-  attributions: QueryList<AttributionComponent>;
 
-  instance: Array<string>;
+  @ContentChildren(AttributionComponent) attributions: QueryList<AttributionComponent>;
 
-  constructor(@Host() private source: SourceComponent) {}
+  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.label);
+      this.instance = this.attributions.map(cmp => cmp.instance);
       // console.log('setting attributions:', this.instance);
       this.source.instance.setAttributions(this.instance);
     }

projects/common-aol/src/fm-aol/components/content.component.ts

@@ -2,8 +2,12 @@ import { Component, ElementRef } from '@angular/core';
 
 @Component({
   selector: 'aol-content',
-  template: '<ng-content></ng-content>',
+  template: '<ng-content></ng-content>'
 })
 export class ContentComponent {
-  constructor(public elementRef: ElementRef) {}
+
+  constructor(
+    public elementRef: ElementRef
+  ) {
+  }
 }

projects/common-aol/src/fm-aol/components/controls/attribution.component.ts

@@ -1,28 +1,27 @@
 import { Component, ElementRef, Input, OnDestroy, OnInit } from '@angular/core';
-import { Attribution } from 'ol/control';
+import { control } from 'openlayers';
 import { MapComponent } from '../map.component';
 
 @Component({
   selector: 'aol-control-attribution',
-  template: ``,
+  template: ``
 })
 export class ControlAttributionComponent implements OnInit, OnDestroy {
-  @Input()
+  public componentType: string = 'control';
-  collapsible: boolean;
+  instance: control.Attribution;
-
+  target: Element;
-  public componentType = 'control';
+  @Input() collapsible: boolean;
-  instance: Attribution;
-  target: HTMLElement;
 
   constructor(
     private map: MapComponent,
     private element: ElementRef
-  ) {}
+  ) {
+  }
 
   ngOnInit() {
     this.target = this.element.nativeElement;
     // console.log('ol.control.Attribution init: ', this);
-    this.instance = new Attribution(this);
+    this.instance = new control.Attribution(this);
     this.map.instance.addControl(this.instance);
   }
 

projects/common-aol/src/fm-aol/components/controls/control.component.ts

@@ -1,26 +1,27 @@
 import { Component, ContentChild, OnDestroy, OnInit } from '@angular/core';
-import { Control } from 'ol/control';
+import { control } from 'openlayers';
 import { MapComponent } from '../map.component';
 import { ContentComponent } from '../content.component';
 
 @Component({
   selector: 'aol-control',
-  template: ` <ng-content></ng-content> `,
+  template: `<ng-content></ng-content>`
 })
 export class ControlComponent implements OnInit, OnDestroy {
-  @ContentChild(ContentComponent, { static: true })
+  public componentType: string = 'control';
-  content: ContentComponent;
+  instance: control.Control;
+  element: Element;
+  @ContentChild(ContentComponent) content: ContentComponent;
 
-  public componentType = 'control';
+  constructor(
-  instance: Control;
+    private map: MapComponent
-  element: HTMLElement;
+  ) {
-
+  }
-  constructor(private map: MapComponent) {}
 
   ngOnInit() {
     if (this.content) {
       this.element = this.content.elementRef.nativeElement;
-      this.instance = new Control(this);
+      this.instance = new control.Control(this);
       this.map.instance.addControl(this.instance);
     }
   }

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));
+  }
+}

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);
+//   }
+// }

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';

projects/common-aol/src/fm-aol/components/controls/mouseposition.component.ts

@@ -1,31 +1,27 @@
 import { Component, ElementRef, Input, OnDestroy, OnInit } from '@angular/core';
-import MousePosition from 'ol/control/MousePosition';
+import { control, CoordinateFormatType, ProjectionLike } from 'openlayers';
 import { MapComponent } from '../map.component';
-import { CoordinateFormat } from 'ol/coordinate';
-import { ProjectionLike } from 'ol/proj';
 
 @Component({
   selector: 'aol-control-mouseposition',
-  template: ``,
+  template: ``
 })
 export class ControlMousePositionComponent implements OnInit, OnDestroy {
-  @Input()
+  instance: control.MousePosition;
-  coordinateFormat: CoordinateFormat;
+  @Input() coordinateFormat: CoordinateFormatType;
-  @Input()
+  @Input() projection: ProjectionLike;
-  projection: ProjectionLike;
+  target: Element;
-
-  instance: MousePosition;
-  target: HTMLElement;
 
   constructor(
     private map: MapComponent,
     private element: ElementRef
-  ) {}
+  ) {
+  }
 
   ngOnInit() {
     this.target = this.element.nativeElement;
     // console.log('ol.control.MousePosition init: ', this);
-    this.instance = new MousePosition(this);
+    this.instance = new control.MousePosition(this);
     this.map.instance.addControl(this.instance);
   }
 

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);
+  }
+}

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);
+//   }
+// }

projects/common-aol/src/fm-aol/components/controls/scaleline.component.ts

@@ -1,26 +1,26 @@
 import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { ScaleLine } from 'ol/control';
+import { control } from 'openlayers';
 import { MapComponent } from '../map.component';
-import { Units } from 'ol/control/ScaleLine';
 
 @Component({
   selector: 'aol-control-scaleline',
-  template: ` <ng-content></ng-content> `,
+  template: `<ng-content></ng-content>`
 })
 export class ControlScaleLineComponent implements OnInit, OnDestroy {
-  @Input()
+  instance: control.ScaleLine;
-  units: Units;
+  @Input() units: string;
 
-  instance: ScaleLine;
+  constructor(private map: MapComponent) {
-
+    // console.log('instancing aol-control-scaleline');
-  constructor(private map: MapComponent) {}
+  }
 
   ngOnInit() {
-    this.instance = new ScaleLine(this);
+    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);
   }
 }

projects/common-aol/src/fm-aol/components/controls/zoom.component.ts

@@ -1,33 +1,27 @@
 import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { Zoom } from 'ol/control';
+import { control } from 'openlayers';
 import { MapComponent } from '../map.component';
 
 @Component({
   selector: 'aol-control-zoom',
-  template: ` <ng-content></ng-content> `,
+  template: `<ng-content></ng-content>`
 })
 export class ControlZoomComponent implements OnInit, OnDestroy {
-  @Input()
+  instance: control.Zoom;
-  duration: number;
-  @Input()
-  zoomInLabel: string | HTMLElement;
-  @Input()
-  zoomOutLabel: string | HTMLElement;
-  @Input()
-  zoomInTipLabel: string;
-  @Input()
-  zoomOutTipLabel: string;
-  @Input()
-  delta: number;
 
-  instance: 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 Zoom(this);
+    this.instance = new control.Zoom(this);
     this.map.instance.addControl(this.instance);
   }
 

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);
+//   }
+// }

projects/common-aol/src/fm-aol/components/controls/zoomtoextent.component.ts

@@ -1,30 +1,25 @@
 import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { ZoomToExtent } from 'ol/control';
+import { control, Extent } from 'openlayers';
 import { MapComponent } from '../map.component';
-import { Extent } from 'ol/extent';
 
 @Component({
   selector: 'aol-control-zoomtoextent',
-  template: ` <ng-content></ng-content> `,
+  template: `<ng-content></ng-content>`
 })
 export class ControlZoomToExtentComponent implements OnInit, OnDestroy {
-  @Input()
+  instance: control.ZoomToExtent;
-  className: string;
-  @Input()
-  label: string | HTMLElement;
-  @Input()
-  tipLabel: string;
-  @Input()
-  extent: Extent;
 
-  instance: 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 ZoomToExtent(this);
+    this.instance = new control.ZoomToExtent(this);
     this.map.instance.addControl(this.instance);
   }
 

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;
+    }
+  }
+}

projects/common-aol/src/fm-aol/components/feature.component.ts

@@ -1,19 +1,19 @@
 import { Component, OnInit, OnDestroy, OnChanges, Input, SimpleChanges } from '@angular/core';
-import { Feature } from 'ol';
+import { Feature } from 'openlayers';
-import { SourceVectorComponent } from './sources/vector.component';
+import { SourceVectorComponent } from './sources';
 
 @Component({
   selector: 'aol-feature',
-  template: ` <ng-content></ng-content> `,
+  template: `<ng-content></ng-content>`
 })
 export class FeatureComponent implements OnInit, OnDestroy, OnChanges {
-  @Input()
-  id: string | number | undefined;
-
   public componentType = 'feature';
   public instance: Feature;
 
-  constructor(private host: SourceVectorComponent) {}
+  @Input() id: string|number|undefined;
+
+  constructor(private host: SourceVectorComponent) {
+  }
 
   ngOnInit() {
     this.instance = new Feature();

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';
+}

projects/common-aol/src/fm-aol/components/formats/index.ts

@@ -0,0 +1,2 @@
+export * from './format.component';
+export * from './mvt.component';

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);
+  }
+}

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);
+  }
+}

projects/common-aol/src/fm-aol/components/graticule.component.ts

@@ -1,35 +1,31 @@
-import { Component, Input, AfterContentInit, OnChanges, SimpleChanges, OnDestroy } from '@angular/core';
+import { Component, Input, AfterContentInit, OnChanges, SimpleChanges } from '@angular/core';
-import { Graticule } from 'ol';
+import { Graticule, style } from 'openlayers';
-import { Stroke } from 'ol/style';
 import { MapComponent } from './map.component';
 
 @Component({
   selector: 'aol-graticule',
-  template: '<ng-content></ng-content>',
+  template: '<ng-content></ng-content>'
 })
-export class GraticuleComponent implements AfterContentInit, OnChanges, OnDestroy {
+export class GraticuleComponent implements AfterContentInit, OnChanges {
-  @Input()
-  strokeStyle: Stroke;
-  @Input()
-  showLabels: boolean;
-  @Input()
-  lonLabelPosition: number;
-  @Input()
-  latLabelPosition: number;
-
   instance: any;
-  public componentType = 'graticule';
+  public componentType: string = 'graticule';
 
-  constructor(private map: MapComponent) {}
+  @Input() strokeStyle: style.Stroke;
+  @Input() showLabels: boolean;
+  @Input() lonLabelPosition: number;
+  @Input() latLabelPosition: number;
+
+  constructor(private map: MapComponent) {
+  }
 
   ngOnChanges(changes: SimpleChanges) {
-    const properties: { [index: string]: any } = {};
+    let properties: {[index: string]: any} = {};
 
     if (!this.instance) {
       return;
     }
 
-    for (const key in changes) {
+    for (let key in changes) {
       if (changes.hasOwnProperty(key)) {
         properties[key] = changes[key].currentValue;
       }
@@ -46,12 +42,8 @@ export class GraticuleComponent implements AfterContentInit, OnChanges, OnDestro
       strokeStyle: this.strokeStyle,
       showLabels: this.showLabels,
       lonLabelPosition: this.lonLabelPosition,
-      latLabelPosition: this.latLabelPosition,
+      latLabelPosition: this.latLabelPosition
     });
     this.instance.setMap(this.map.instance);
   }
-
-  ngOnDestroy(): void {
-    this.instance.setMap(null);
-  }
 }

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';

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));
+  }
+}

projects/common-aol/src/fm-aol/components/interactions/doubleclickzoom.component.ts

@@ -1,23 +1,22 @@
 import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { DoubleClickZoom } from 'ol/interaction';
+import { interaction } from 'openlayers';
 import { MapComponent } from '../map.component';
 
 @Component({
   selector: 'aol-interaction-doubleclickzoom',
-  template: '',
+  template: ''
 })
 export class DoubleClickZoomInteractionComponent implements OnInit, OnDestroy {
-  @Input()
+  instance: interaction.DoubleClickZoom;
-  duration: number;
-  @Input()
-  delta: number;
 
-  instance: DoubleClickZoom;
+  @Input() duration: number;
+  @Input() delta: number;
 
-  constructor(private map: MapComponent) {}
+  constructor(private map: MapComponent) {
+  }
 
   ngOnInit() {
-    this.instance = new DoubleClickZoom(this);
+    this.instance = new interaction.DoubleClickZoom(this);
     this.map.instance.addInteraction(this.instance);
   }
 

projects/common-aol/src/fm-aol/components/interactions/draganddrop.component.ts

@@ -1,27 +1,23 @@
 import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { DragAndDrop } from 'ol/interaction';
+import { interaction, format, ProjectionLike } from 'openlayers';
-import FeatureFormat from 'ol/format/Feature';
 import { MapComponent } from '../map.component';
-import { ProjectionLike } from 'ol/proj';
 
 @Component({
   selector: 'aol-interaction-draganddrop',
-  template: '',
+  template: ''
 })
 export class DragAndDropInteractionComponent implements OnInit, OnDestroy {
-  @Input()
+  instance: interaction.DragAndDrop;
-  formatConstructors: FeatureFormat[];
-  @Input()
-  projection: ProjectionLike;
-  @Input()
-  target: HTMLElement;
 
-  instance: DragAndDrop;
+  @Input() formatConstructors: ((n: format.Feature) => any)[];
+  @Input() projection: ProjectionLike;
+  @Input() target: Element;
 
-  constructor(private map: MapComponent) {}
+  constructor(private map: MapComponent) {
+  }
 
   ngOnInit() {
-    this.instance = new DragAndDrop(this);
+    this.instance = new interaction.DragAndDrop(this);
     this.map.instance.addInteraction(this.instance);
   }
 

projects/common-aol/src/fm-aol/components/interactions/dragbox.component.ts

@@ -1,27 +1,23 @@
 import { Component, OnDestroy, OnInit, Input } from '@angular/core';
-import { DragBox } from 'ol/interaction';
+import { interaction, EventsConditionType, DragBoxEndConditionType } from 'openlayers';
 import { MapComponent } from '../map.component';
-import { Condition } from 'ol/events/condition';
-import { EndCondition } from 'ol/interaction/DragBox';
 
 @Component({
   selector: 'aol-interaction-dragbox',
-  template: '',
+  template: ''
 })
 export class DragBoxInteractionComponent implements OnInit, OnDestroy {
-  @Input()
+  instance: interaction.DragBox;
-  className: string;
-  @Input()
-  condition: Condition;
-  @Input()
-  boxEndCondition: EndCondition;
 
-  instance: DragBox;
+  @Input() className: string;
+  @Input() condition: EventsConditionType;
+  @Input() boxEndCondition: DragBoxEndConditionType;
 
-  constructor(private map: MapComponent) {}
+  constructor(private map: MapComponent) {
+  }
 
   ngOnInit() {
-    this.instance = new DragBox(this);
+    this.instance = new interaction.DragBox(this);
     this.map.instance.addInteraction(this.instance);
   }
 

projects/common-aol/src/fm-aol/components/interactions/dragpan.component.ts

@@ -1,25 +1,22 @@
 import { Component, OnDestroy, OnInit, Input } from '@angular/core';
-import { DragPan } from 'ol/interaction';
+import { interaction, EventsConditionType, Kinetic } from 'openlayers';
-import Kinetic from 'ol/Kinetic';
 import { MapComponent } from '../map.component';
-import { Condition } from 'ol/events/condition';
 
 @Component({
   selector: 'aol-interaction-dragpan',
-  template: '',
+  template: ''
 })
 export class DragPanInteractionComponent implements OnInit, OnDestroy {
-  @Input()
+  instance: interaction.DragPan;
-  condition: Condition;
-  @Input()
-  kinetic: Kinetic;
 
-  instance: DragPan;
+  @Input() condition: EventsConditionType;
+  @Input() kinetic: Kinetic;
 
-  constructor(private map: MapComponent) {}
+  constructor(private map: MapComponent) {
+  }
 
   ngOnInit() {
-    this.instance = new DragPan(this);
+    this.instance = new interaction.DragPan(this);
     this.map.instance.addInteraction(this.instance);
   }
 

projects/common-aol/src/fm-aol/components/interactions/dragrotate.component.ts

@@ -1,24 +1,22 @@
 import { Component, OnDestroy, OnInit, Input } from '@angular/core';
-import { DragRotate } from 'ol/interaction';
+import { interaction, EventsConditionType } from 'openlayers';
 import { MapComponent } from '../map.component';
-import { Condition } from 'ol/events/condition';
 
 @Component({
   selector: 'aol-interaction-dragrotate',
-  template: '',
+  template: ''
 })
 export class DragRotateInteractionComponent implements OnInit, OnDestroy {
-  @Input()
+  instance: interaction.DragRotate;
-  condition: Condition;
-  @Input()
-  duration: number;
 
-  instance: DragRotate;
+  @Input() condition: EventsConditionType;
+  @Input() duration: number;
 
-  constructor(private map: MapComponent) {}
+  constructor(private map: MapComponent) {
+  }
 
   ngOnInit() {
-    this.instance = new DragRotate(this);
+    this.instance = new interaction.DragRotate(this);
     this.map.instance.addInteraction(this.instance);
   }
 

projects/common-aol/src/fm-aol/components/interactions/dragrotateandzoom.component.ts

@@ -1,24 +1,22 @@
 import { Component, OnDestroy, OnInit, Input } from '@angular/core';
-import { DragRotateAndZoom } from 'ol/interaction';
+import { interaction, EventsConditionType } from 'openlayers';
 import { MapComponent } from '../map.component';
-import { Condition } from 'ol/events/condition';
 
 @Component({
   selector: 'aol-interaction-dragrotateandzoom',
-  template: '',
+  template: ''
 })
 export class DragRotateAndZoomInteractionComponent implements OnInit, OnDestroy {
-  @Input()
+  instance: interaction.DragRotate;
-  condition: Condition;
-  @Input()
-  duration: number;
 
-  instance: DragRotateAndZoom;
+  @Input() condition: EventsConditionType;
+  @Input() duration: number;
 
-  constructor(private map: MapComponent) {}
+  constructor(private map: MapComponent) {
+  }
 
   ngOnInit() {
-    this.instance = new DragRotateAndZoom(this);
+    this.instance = new interaction.DragRotateAndZoom(this);
     this.map.instance.addInteraction(this.instance);
   }
 

projects/common-aol/src/fm-aol/components/interactions/dragzoom.component.ts

@@ -1,28 +1,24 @@
 import { Component, OnDestroy, OnInit, Input } from '@angular/core';
-import { DragZoom } from 'ol/interaction';
+import { interaction, EventsConditionType } from 'openlayers';
 import { MapComponent } from '../map.component';
-import { Condition } from 'ol/events/condition';
 
 @Component({
   selector: 'aol-interaction-dragzoom',
-  template: '',
+  template: ''
 })
 export class DragZoomInteractionComponent implements OnInit, OnDestroy {
-  @Input()
+  instance: interaction.DragZoom;
-  className: string;
-  @Input()
-  condition: Condition;
-  @Input()
-  duration: number;
-  @Input()
-  out: boolean;
 
-  instance: DragZoom;
+  @Input() className: string;
+  @Input() condition: EventsConditionType;
+  @Input() duration: number;
+  @Input() out: boolean;
 
-  constructor(private map: MapComponent) {}
+  constructor(private map: MapComponent) {
+  }
 
   ngOnInit() {
-    this.instance = new DragZoom(this);
+    this.instance = new interaction.DragZoom(this);
     this.map.instance.addInteraction(this.instance);
   }
 

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);
+  }
+}

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';

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);
+    }
+}

projects/common-aol/src/fm-aol/components/interactions/mousewheelzoom.component.ts

@@ -1,25 +1,22 @@
 import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { MouseWheelZoom } from 'ol/interaction';
+import { interaction } from 'openlayers';
 import { MapComponent } from '../map.component';
 
 @Component({
   selector: 'aol-interaction-mousewheelzoom',
-  template: '',
+  template: ''
 })
 export class MouseWheelZoomInteractionComponent implements OnInit, OnDestroy {
-  @Input()
+  instance: interaction.MouseWheelZoom;
-  duration: number;
+  @Input() duration: number;
-  @Input()
+  @Input() timeout: number;
-  timeout: number;
+  @Input() useAnchor: boolean;
-  @Input()
-  useAnchor: boolean;
 
-  instance: MouseWheelZoom;
+  constructor(private map: MapComponent) {
-
+  }
-  constructor(private map: MapComponent) {}
 
   ngOnInit() {
-    this.instance = new MouseWheelZoom(this);
+    this.instance = new interaction.MouseWheelZoom(this);
     this.map.instance.addInteraction(this.instance);
   }
 

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;

projects/common-aol/src/fm-aol/components/interactions/pinchzoom.component.ts

@@ -1,23 +1,22 @@
 import { Component, OnDestroy, OnInit, Input } from '@angular/core';
-import { PinchZoom } from 'ol/interaction';
+import { interaction } from 'openlayers';
 import { MapComponent } from '../map.component';
 
 @Component({
   selector: 'aol-interaction-pinchzoom',
-  template: '',
+  template: ''
 })
 export class PinchZoomInteractionComponent implements OnInit, OnDestroy {
-  @Input()
+  instance: interaction.PinchZoom;
-  duration: number;
-  @Input()
-  constrainResolution: boolean;
 
-  instance: PinchZoom;
+  @Input() duration: number;
+  @Input() constrainResolution: boolean;
 
-  constructor(private map: MapComponent) {}
+  constructor(private map: MapComponent) {
+  }
 
   ngOnInit() {
-    this.instance = new PinchZoom(this);
+    this.instance = new interaction.PinchZoom(this);
     this.map.instance.addInteraction(this.instance);
   }
 

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);
+    }
+}

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);
+  }
+}

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';

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);
+  }
+}

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

@@ -1,27 +1,23 @@
-import { Component, OnDestroy, OnInit, SkipSelf, Optional } from '@angular/core';
+import { Component, OnDestroy, OnInit, SkipSelf, Inject, Optional } from '@angular/core';
-import { Group } from 'ol/layer';
+import { layer } from 'openlayers';
 import { LayerComponent } from './layer.component';
 import { MapComponent } from '../map.component';
 
 @Component({
   selector: 'aol-layer-group',
-  template: ` <ng-content></ng-content> `,
+  template: `<ng-content></ng-content>`
 })
 export class LayerGroupComponent extends LayerComponent implements OnInit, OnDestroy {
-  public instance: Group;
+  public instance: ol.layer.Group;
 
-  constructor(
+  constructor(map: MapComponent,
-    map: MapComponent,
+              @SkipSelf() @Optional() group?: LayerGroupComponent) {
-    @SkipSelf()
-    @Optional()
-    group?: LayerGroupComponent
-  ) {
     super(group || map);
   }
 
   ngOnInit() {
     // console.log(`creating ol.layer.Group instance with:`, this);
-    this.instance = new Group(this);
+    this.instance = new layer.Group(this);
     super.ngOnInit();
   }
 }

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);
+  }
+}

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

@@ -1,26 +1,30 @@
-import { Component, OnDestroy, OnInit, Input, Optional, OnChanges, SimpleChanges } from '@angular/core';
+import {
-import { Tile } from 'ol/layer';
+  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> `,
+  template: `<ng-content></ng-content>`
 })
 export class LayerTileComponent extends LayerComponent implements OnInit, OnDestroy, OnChanges {
-  @Input()
+  public source: source.Tile;
-  preload: number;
-  @Input()
-  useInterimTilesOnError: boolean;
 
-  constructor(map: MapComponent, @Optional() group?: LayerGroupComponent) {
+  @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 Tile(this);
+    this.instance = new layer.Tile(this);
     super.ngOnInit();
   }
 

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);
+  }
+}

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

@@ -1,40 +1,32 @@
 import { Component, OnInit, Input, Optional, SimpleChanges, OnChanges } from '@angular/core';
-import { VectorTile } from 'ol/layer';
+import { layer, style, StyleFunction } from 'openlayers';
-import { Feature } from 'ol';
-import { Style } from 'ol/style';
 import { MapComponent } from '../map.component';
 import { LayerComponent } from './layer.component';
 import { LayerGroupComponent } from './layergroup.component';
-import { StyleFunction } from 'ol/style/Style';
 
 @Component({
   selector: 'aol-layer-vectortile',
-  template: ` <ng-content></ng-content> `,
+  template: `<ng-content></ng-content>`
 })
 export class LayerVectorTileComponent extends LayerComponent implements OnInit, OnChanges {
-  @Input()
-  renderBuffer: number;
-  @Input()
-  renderMode: any | string;
-  /* not marked as optional in the typings */
-  @Input()
-  renderOrder: (feature1: Feature, feature2: Feature) => number;
-  @Input()
-  style: Style | Style[] | StyleFunction;
-  @Input()
-  updateWhileAnimating: boolean;
-  @Input()
-  updateWhileInteracting: boolean;
-  @Input()
-  visible: boolean;
 
-  constructor(map: MapComponent, @Optional() group?: LayerGroupComponent) {
+  @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 VectorTile(this);
+    this.instance = new layer.VectorTile(this);
     super.ngOnInit();
   }
 

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();
+  }
+}

projects/common-aol/src/fm-aol/components/overlay.component.ts

@@ -1,38 +1,31 @@
 import { Component, ContentChild, Input, OnDestroy, OnInit } from '@angular/core';
 import { MapComponent } from './map.component';
-import Overlay, { PanOptions, Positioning } from 'ol/Overlay';
+import { Overlay, OverlayPositioning } from 'openlayers';
 import { ContentComponent } from './content.component';
 
 @Component({
   selector: 'aol-overlay',
-  template: '<ng-content></ng-content>',
+  template: '<ng-content></ng-content>'
 })
 export class OverlayComponent implements OnInit, OnDestroy {
-  @ContentChild(ContentComponent, { static: true })
-  content: ContentComponent;
-
-  @Input()
-  id: number | string;
-  @Input()
-  offset: number[];
-  @Input()
-  positioning: Positioning;
-  @Input()
-  stopEvent: boolean;
-  @Input()
-  insertFirst: boolean;
-  @Input()
-  autoPan: boolean;
-  @Input()
-  autoPanAnimation: PanOptions;
-  @Input()
-  autoPanMargin: number;
-
   componentType = 'overlay';
   instance: Overlay;
-  element: HTMLElement;
+  element: Element;
+  @ContentChild(ContentComponent) content: ContentComponent;
 
-  constructor(private map: MapComponent) {}
+  @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) {

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);
+  }
+}

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);
+    }
+}

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);
+    }
+}

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);
+  }
+}

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);
+  }
+}

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';

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);
+  }
+}

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);
+  }
+}

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];
+    }
+  }
+}

projects/common-aol/src/fm-aol/components/sources/tilejson.component.ts

@@ -1,25 +1,26 @@
 import { Component, Host, Input, OnInit, forwardRef } from '@angular/core';
-import { TileJSON } from 'ol/source';
+import { AttributionLike, source, TileLoadFunctionType, tilegrid } from 'openlayers';
-import { LayerTileComponent } from '../layers/layertile.component';
+import { LayerTileComponent } from '../layers';
 import { SourceComponent } from './source.component';
 
 @Component({
   selector: 'aol-source-tilejson',
-  template: ` <ng-content></ng-content> `,
+  template: `<ng-content></ng-content>`,
-  providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceTileJSONComponent) }],
+  providers: [
+    { provide: SourceComponent, useExisting: forwardRef(() => SourceTileJSONComponent) }
+  ]
 })
 export class SourceTileJSONComponent extends SourceComponent implements OnInit {
-  @Input()
+  instance: source.TileJSON;
-  url: string;
 
-  instance: TileJSON;
+  @Input() url: string;
 
   constructor(@Host() layer: LayerTileComponent) {
     super(layer);
   }
 
   ngOnInit() {
-    this.instance = new TileJSON(this);
+    this.instance = new source.TileJSON(this);
     this.host.instance.setSource(this.instance);
   }
 }

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);
+  }
+}

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);
+  }
+}

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();
+    }
+  }
+}

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);
+  }
+}

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);
+  }
+}

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);
+    }
+  }
+}

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();
+    }
+}

projects/common-aol/src/fm-aol/components/styles/circle.component.ts

@@ -1,25 +1,23 @@
 import { Component, Input, Host, AfterContentInit, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
-import { Circle, Fill, Stroke } from 'ol/style';
+import { style } from 'openlayers';
 import { StyleComponent } from './style.component';
 
 @Component({
   selector: 'aol-style-circle',
-  template: ` <ng-content></ng-content> `,
+  template: `<ng-content></ng-content>`
 })
 export class StyleCircleComponent implements AfterContentInit, OnChanges, OnDestroy {
-  @Input()
+  public componentType: string = 'style-circle';
-  fill: Fill;
+  public instance: style.Circle;
-  @Input()
-  radius: number;
-  @Input()
-  snapToPixel: boolean;
-  @Input()
-  stroke: Stroke;
 
-  public componentType = 'style-circle';
+  @Input() fill: style.Fill;
-  public instance: Circle;
+  @Input() radius: number;
+  @Input() snapToPixel: boolean;
+  @Input() stroke: style.Stroke;
+  @Input() atlasManager: style.AtlasManager;
 
-  constructor(@Host() private host: StyleComponent) {}
+  constructor(@Host() private host: StyleComponent) {
+  }
 
   /**
    * WORK-AROUND: since the re-rendering is not triggered on style change
@@ -36,7 +34,7 @@ export class StyleCircleComponent implements AfterContentInit, OnChanges, OnDest
 
   ngAfterContentInit() {
     // console.log('creating ol.style.Circle instance with: ', this);
-    this.instance = new Circle(this);
+    this.instance = new style.Circle(this);
     this.host.instance.setImage(this.instance);
     this.host.update();
   }
@@ -45,8 +43,8 @@ export class StyleCircleComponent implements AfterContentInit, OnChanges, OnDest
     if (!this.instance) {
       return;
     }
-    if (changes.radius) {
+    if (changes['radius']) {
-      this.instance.setRadius(changes.radius.currentValue);
+      this.instance.setRadius(changes['radius'].currentValue);
     }
     // console.log('changes detected in aol-style-circle, setting new radius: ', changes['radius'].currentValue);
   }

projects/common-aol/src/fm-aol/components/styles/fill.component.ts

@@ -1,21 +1,19 @@
 import { Component, Input, Optional, OnInit, OnChanges, SimpleChanges } from '@angular/core';
-import { Fill } from 'ol/style';
+import { style, Color, ColorLike } from 'openlayers';
 import { StyleComponent } from './style.component';
 import { StyleCircleComponent } from './circle.component';
 import { StyleTextComponent } from './text.component';
-import { Color } from 'ol/color';
-import { ColorLike } from 'ol/colorlike';
 
 @Component({
   selector: 'aol-style-fill',
-  template: ` <div class="aol-style-fill"></div> `,
+  template: `<div class="aol-style-fill"></div>`,
 })
 export class StyleFillComponent implements OnInit, OnChanges {
-  @Input()
+  /* the typings do not have the setters */
-  color: Color | ColorLike;
+  private host: /*StyleComponent|StyleCircleComponent|StyleTextComponent*/any;
+  public instance: style.Fill;
 
-  public instance: Fill;
+  @Input() color: Color|ColorLike;
-  private readonly host: StyleComponent | StyleCircleComponent | StyleTextComponent;
 
   constructor(
     @Optional() styleHost: StyleComponent,
@@ -37,7 +35,7 @@ export class StyleFillComponent implements OnInit, OnChanges {
 
   ngOnInit() {
     // console.log('creating ol.style.Fill instance with: ', this);
-    this.instance = new Fill(this);
+    this.instance = new style.Fill(this);
     switch (this.host.componentType) {
       case 'style':
         this.host.instance.setFill(this.instance);
@@ -47,11 +45,12 @@ export class StyleFillComponent implements OnInit, OnChanges {
         this.host.instance.setFill(this.instance);
         break;
       case 'style-circle':
-        (this.host as StyleCircleComponent).fill = this.instance;
+        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;
     }
   }
 
@@ -59,8 +58,8 @@ export class StyleFillComponent implements OnInit, OnChanges {
     if (!this.instance) {
       return;
     }
-    if (changes.color) {
+    if (changes['color']) {
-      this.instance.setColor(changes.color.currentValue);
+      this.instance.setColor(changes['color'].currentValue);
     }
     this.host.update();
     // console.log('changes detected in aol-style-fill, setting new color: ', changes);

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);
+  }
+}

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';

projects/common-aol/src/fm-aol/components/styles/stroke.component.ts

@@ -1,32 +1,24 @@
 import { Component, Input, Optional, OnInit, OnChanges, SimpleChanges } from '@angular/core';
-import { Stroke } from 'ol/style';
+import { style, Color } from 'openlayers';
 import { StyleComponent } from './style.component';
 import { StyleCircleComponent } from './circle.component';
 import { StyleTextComponent } from './text.component';
-import { Color } from 'ol/color';
-import { ColorLike } from 'ol/colorlike';
 
 @Component({
   selector: 'aol-style-stroke',
-  template: ` <div class="aol-style-stroke"></div> `,
+  template: `<div class="aol-style-stroke"></div>`,
 })
 export class StyleStrokeComponent implements OnInit, OnChanges {
-  @Input()
+  public instance: style.Stroke;
-  color: Color | ColorLike;
-  @Input()
-  lineCap: CanvasLineCap | undefined;
-  @Input()
-  lineDash: number[];
-  @Input()
-  lineJoin: CanvasLineJoin | undefined;
-  @Input()
-  miterLimit: number;
-  @Input()
-  width: number;
-
-  public instance: Stroke;
   /* the typings do not have the setters */
-  private readonly host: StyleComponent | StyleCircleComponent | StyleTextComponent;
+  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,
@@ -48,7 +40,7 @@ export class StyleStrokeComponent implements OnInit, OnChanges {
 
   ngOnInit() {
     // console.log('creating ol.style.Stroke instance with: ', this);
-    this.instance = new Stroke(this);
+    this.instance = new style.Stroke(this);
     switch (this.host.componentType) {
       case 'style':
         this.host.instance.setStroke(this.instance);
@@ -58,7 +50,7 @@ export class StyleStrokeComponent implements OnInit, OnChanges {
         this.host.instance.setStroke(this.instance);
         break;
       case 'style-circle':
-        (this.host as StyleCircleComponent).stroke = this.instance;
+        this.host.stroke = this.instance;
         // console.log('setting ol.style.circle instance\'s stroke:', this.host);
         break;
       default:
@@ -71,23 +63,23 @@ export class StyleStrokeComponent implements OnInit, OnChanges {
     if (!this.instance) {
       return;
     }
-    if (changes.color) {
+    if (changes['color']) {
-      this.instance.setColor(changes.color.currentValue);
+      this.instance.setColor(changes['color'].currentValue);
     }
-    if (changes.lineCap) {
+    if (changes['lineCap']) {
-      this.instance.setLineCap(changes.lineCap.currentValue);
+      this.instance.setLineCap(changes['lineCap'].currentValue);
     }
-    if (changes.lineDash) {
+    if (changes['lineDash']) {
-      this.instance.setLineDash(changes.lineDash.currentValue);
+      this.instance.setLineDash(changes['lineDash'].currentValue);
     }
-    if (changes.lineJoin) {
+    if (changes['lineJoin']) {
-      this.instance.setLineJoin(changes.lineJoin.currentValue);
+      this.instance.setLineJoin(changes['lineJoin'].currentValue);
     }
-    if (changes.miterLimit) {
+    if (changes['miterLimit']) {
-      this.instance.setMiterLimit(changes.miterLimit.currentValue);
+      this.instance.setMiterLimit(changes['miterLimit'].currentValue);
     }
-    if (changes.width) {
+    if (changes['width']) {
-      this.instance.setWidth(changes.width.currentValue);
+      this.instance.setWidth(changes['width'].currentValue);
     }
     this.host.update();
     // console.log('changes detected in aol-style-stroke, setting new properties: ', changes);

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);
+  }
+}

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);
+  }
+}

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);
+    }
+  }
+}

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);
+    }
+}

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');
+  }
+}

projects/common-aol/src/fm-aol/module-name.ts

@@ -0,0 +1 @@
+export const MODULE_NAME = "FarmMapsCommonAol";

projects/common-aol/src/public-api.ts

@@ -0,0 +1,5 @@
+/*
+ * Public API Surface of common-aol
+ */
+
+export * from './fm-aol/common-aol.module';

projects/common-aol/tsconfig.lib.json

@@ -10,25 +10,18 @@
     "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,
+    "enableResourceInlining": true
-    "compilationMode": "partial"
   },
   "exclude": [
     "src/test.ts",

projects/common-aol/tsconfig.spec.json

@@ -1,7 +1,7 @@
 {
-  "extends": "../../tsconfig.base.json",
+  "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "outDir": "../../dist/out-tsc",
+    "outDir": "../../out-tsc/spec",
     "types": [
       "jasmine",
       "node"

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
+  }
+}

projects/common-map/package-lock.json

@@ -1,217 +1,29 @@
 {
   "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": "^18.2.3",
+        "@angular/core": ">=16.0.0",
-        "@ngrx/effects": "^18.0.2",
+        "@ngrx/effects": ">=16.0.0",
-        "@ngrx/router-store": "^18.0.2",
+        "@ngrx/router-store": ">=16.0.0",
-        "@ngrx/store": "^18.0.2",
+        "@ngrx/store": ">=16.0.0",
-        "ngrx-store-localstorage": "^18",
+        "ngrx-store-localstorage": ">=16.0.0",
-        "tassign": "^1.0.0"
+        "ol": ">=6.8.1",
+        "tassign": ">=1.0.0"
       }
     },
-    "../../dist/libs/ng-openlayers": {
-      "version": "18.0.0",
-      "extraneous": true,
-      "license": "MPL-2.0",
-      "dependencies": {
-        "tslib": "^2.3.0"
-      },
-      "peerDependencies": {
-        "@angular/common": "^18.2.3",
-        "@angular/core": "^18.2.3",
-        "ol": "^8.2.0"
-      }
-    },
-    "dist/ng-openlayers": {
-      "extraneous": true
-    },
-    "node_modules/@angular/common": {
-      "version": "18.2.3",
-      "resolved": "https://registry.npmjs.org/@angular/common/-/common-18.2.3.tgz",
-      "integrity": "sha512-NFL4yXXImSCH7i1xnHykUjHa9vl9827fGiwSV2mnf7LjSUsyDzFD8/54dNuYN9OY8AUD+PnK0YdNro6cczVyIA==",
-      "peer": true,
-      "dependencies": {
-        "tslib": "^2.3.0"
-      },
-      "engines": {
-        "node": "^18.19.1 || ^20.11.1 || >=22.0.0"
-      },
-      "peerDependencies": {
-        "@angular/core": "18.2.3",
-        "rxjs": "^6.5.3 || ^7.4.0"
-      }
-    },
-    "node_modules/@angular/core": {
-      "version": "18.2.3",
-      "resolved": "https://registry.npmjs.org/@angular/core/-/core-18.2.3.tgz",
-      "integrity": "sha512-VGhMJxj7d0rYpqVfQrcGRB7EE/BCziotft/I/YPl6bOMPSAvMukG7DXQuJdYpNrr62ks78mlzHlZX/cdmB9Prw==",
-      "peer": true,
-      "dependencies": {
-        "tslib": "^2.3.0"
-      },
-      "engines": {
-        "node": "^18.19.1 || ^20.11.1 || >=22.0.0"
-      },
-      "peerDependencies": {
-        "rxjs": "^6.5.3 || ^7.4.0",
-        "zone.js": "~0.14.10"
-      }
-    },
-    "node_modules/@angular/platform-browser": {
-      "version": "18.2.3",
-      "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-18.2.3.tgz",
-      "integrity": "sha512-M2ob4zN7tAcL2mx7U6KnZNqNFPFl9MlPBE0FrjQjIzAjU0wSYPIJXmaPu9aMUp9niyo+He5iX98I+URi2Yc99g==",
-      "peer": true,
-      "dependencies": {
-        "tslib": "^2.3.0"
-      },
-      "engines": {
-        "node": "^18.19.1 || ^20.11.1 || >=22.0.0"
-      },
-      "peerDependencies": {
-        "@angular/animations": "18.2.3",
-        "@angular/common": "18.2.3",
-        "@angular/core": "18.2.3"
-      },
-      "peerDependenciesMeta": {
-        "@angular/animations": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@angular/router": {
-      "version": "18.2.3",
-      "resolved": "https://registry.npmjs.org/@angular/router/-/router-18.2.3.tgz",
-      "integrity": "sha512-fvD9eSDIiIbeYoUokoWkXzu7/ZaxlzKPUHFqX1JuKuH5ciQDeT/d7lp4mj31Bxammhohzi3+z12THJYsCkj/iQ==",
-      "peer": true,
-      "dependencies": {
-        "tslib": "^2.3.0"
-      },
-      "engines": {
-        "node": "^18.19.1 || ^20.11.1 || >=22.0.0"
-      },
-      "peerDependencies": {
-        "@angular/common": "18.2.3",
-        "@angular/core": "18.2.3",
-        "@angular/platform-browser": "18.2.3",
-        "rxjs": "^6.5.3 || ^7.4.0"
-      }
-    },
-    "node_modules/@ngrx/effects": {
-      "version": "18.0.2",
-      "resolved": "https://registry.npmjs.org/@ngrx/effects/-/effects-18.0.2.tgz",
-      "integrity": "sha512-YojXcOD9Lsq4kl2HCjENccyUM/mOlgBdtddsg9j/ojzSUgu3ZuBVKLN3atrL2TJYkbMX1MN0RzafSkL3TPGFIA==",
-      "peer": true,
-      "dependencies": {
-        "@ngrx/operators": "18.0.1",
-        "tslib": "^2.0.0"
-      },
-      "peerDependencies": {
-        "@angular/core": "^18.0.0",
-        "@ngrx/store": "18.0.2",
-        "rxjs": "^6.5.3 || ^7.5.0"
-      }
-    },
-    "node_modules/@ngrx/operators": {
-      "version": "18.0.1",
-      "resolved": "https://registry.npmjs.org/@ngrx/operators/-/operators-18.0.1.tgz",
-      "integrity": "sha512-M+QMrHNKgcuiLaRGZxJ4aQi5/OCRfKC4+T/63dsHyLFZ53/FFpF6a/ytSO1Q+tzOplZ5o99S+i8FVaZqNQ3LmQ==",
-      "peer": true,
-      "dependencies": {
-        "tslib": "^2.3.0"
-      },
-      "peerDependencies": {
-        "rxjs": "^6.5.3 || ^7.4.0"
-      }
-    },
-    "node_modules/@ngrx/router-store": {
-      "version": "18.0.2",
-      "resolved": "https://registry.npmjs.org/@ngrx/router-store/-/router-store-18.0.2.tgz",
-      "integrity": "sha512-jUrQ/uJJ53x8O1XbN2YxH2GpRREZlwS5gRxlCoc4fWL4Us/uS1/K6+QfRmKBPtpTKBIixqsOb+dIUV5iwBrivA==",
-      "peer": true,
-      "dependencies": {
-        "tslib": "^2.0.0"
-      },
-      "peerDependencies": {
-        "@angular/common": "^18.0.0",
-        "@angular/core": "^18.0.0",
-        "@angular/router": "^18.0.0",
-        "@ngrx/store": "18.0.2",
-        "rxjs": "^6.5.3 || ^7.5.0"
-      }
-    },
-    "node_modules/@ngrx/store": {
-      "version": "18.0.2",
-      "resolved": "https://registry.npmjs.org/@ngrx/store/-/store-18.0.2.tgz",
-      "integrity": "sha512-ajwv0+njsO4vzArp9esnFvs1wyUb1U1W8E8LSCKrcW2hWWo9o1Pezj+JRsdQwatxHfrrPFuTDyajsl6GQM/JSA==",
-      "peer": true,
-      "dependencies": {
-        "tslib": "^2.0.0"
-      },
-      "peerDependencies": {
-        "@angular/core": "^18.0.0",
-        "rxjs": "^6.5.3 || ^7.5.0"
-      }
-    },
-    "node_modules/deepmerge": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
-      "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
-      "peer": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/ngrx-store-localstorage": {
-      "version": "18.0.0",
-      "resolved": "https://registry.npmjs.org/ngrx-store-localstorage/-/ngrx-store-localstorage-18.0.0.tgz",
-      "integrity": "sha512-WoDePvMWiWF9LQHe+dTqbpm8lxoKCPoIvA0/1enIPTmdLQsOpdDKhMSD5YgwuqDusNfEik3QslProTFGyXZwtw==",
-      "peer": true,
-      "dependencies": {
-        "deepmerge": "^4.2.2",
-        "tslib": "^2.3.0"
-      },
-      "peerDependencies": {
-        "@angular/common": "^18.0.1",
-        "@angular/core": "^18.0.1",
-        "@ngrx/store": "^18.0.0"
-      }
-    },
-    "node_modules/rxjs": {
-      "version": "7.8.1",
-      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
-      "integrity": "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==",
-      "peer": true,
-      "dependencies": {
-        "tslib": "^2.1.0"
-      }
-    },
-    "node_modules/tassign": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/tassign/-/tassign-1.0.0.tgz",
-      "integrity": "sha512-k0Ti9f+A1R0BRdArEbiUHldd+A40kZ5qsiNSNk4czx61wkAoSZYjqkaQs0jC63AfgPdCXVPstDq2ZW5ZLRTCgw==",
-      "peer": true
-    },
     "node_modules/tslib": {
-      "version": "2.7.0",
+      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.7.0.tgz",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.1.tgz",
-      "integrity": "sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA=="
+      "integrity": "sha512-SgIkNheinmEBgx1IUNirK0TUD4X9yjjBRTqqjggWCU3pUEqIk3/Uwl3yRixYKT6WjQuGiwDv4NomL3wqRCj+CQ=="
-    },
-    "node_modules/zone.js": {
-      "version": "0.14.10",
-      "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.14.10.tgz",
-      "integrity": "sha512-YGAhaO7J5ywOXW6InXNlLmfU194F8lVgu7bRntUF3TiG8Y3nBK0x1UJJuHUP/e8IyihkjCYqhCScpSwnlaSRkQ==",
-      "peer": true
     }
   }
 }

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,11 +8,12 @@
     "tslib": "^2.0.0"
   },
   "peerDependencies": {
-    "@angular/core": "18.2.3",
+    "@angular/core": ">=16.0.0",
-    "ngrx-store-localstorage": "^18.0.0",
+    "ngrx-store-localstorage": ">=16.0.0",
-    "@ngrx/effects": "^18.0.2",
+    "@ngrx/effects": ">=16.0.0",
-    "@ngrx/router-store": "^18.0.2",
+    "@ngrx/router-store":">=16.0.0",
-    "@ngrx/store": "^18.0.2",
+    "@ngrx/store":">=16.0.0",
-    "tassign": "^1.0.0"
+    "tassign": ">=1.0.0",
+    "ol": ">=6.8.1"
   }
 }

projects/common-map/src/fm-map/actions/map.actions.ts

@@ -58,7 +58,7 @@ export const GETLAYERVALUESUCCESS = '[Map] GetLayerValueSuccess'
 export const TOGGLESHOWDATALAYERSLIDE = '[Map] ToggleShowDataLayerSlide'
 export const SETVIEWSTATE = '[Map] SetViewState'
 export const CLEARFEATURES = '[Map] ClearFeatures';
-export const SETPANELEXTRAWIDE = '[Map] SetPanelExtraWide';
+
 
 export class Clear implements Action {
   readonly type = CLEAR;
@@ -342,11 +342,6 @@ export class ClearFeatures implements Action {
   constructor() {}
 }
 
-export class SetPanelExtraWide implements Action {
-  readonly type = SETPANELEXTRAWIDE;
-  constructor(public panelExtraWide:boolean) {}
-}
-
 export type Actions = SetMapState
   | Init
   | Clear
@@ -394,6 +389,5 @@ export type Actions = SetMapState
   | SetPeriod
   | ToggleShowDataLayerSlide
   | SetViewState
-  | ClearFeatures
+  | ClearFeatures;
-  | SetPanelExtraWide;
 

projects/common-map/src/fm-map/common-map.module.ts

@@ -1,80 +1,78 @@
+import { NgModule ,ModuleWithProviders} from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 //external modules
-import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
+import { AppCommonAolModule } from '@farmmaps/common-aol';
+import { StoreModule, ActionReducer, MetaReducer } from '@ngrx/store';
 import { EffectsModule } from '@ngrx/effects';
-import { ActionReducer, MetaReducer, StoreModule } from '@ngrx/store';
+import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
-import { AngularOpenlayersModule } from '@farmmaps/ng-openlayers';
 
 //common modules
 import { AppCommonModule } from '@farmmaps/common';
 
-import * as mapActions from './actions/map.actions';
-import * as mapEffects from './effects/map.effects';
 import { MODULE_NAME } from './module-name';
 import * as mapReducers from './reducers/map.reducer';
+import * as mapActions from './actions/map.actions';
+import * as mapEffects from './effects/map.effects';
 
-import { IClickedFeature } from './models/clicked.feature';
+import { IMapState} from './models/map.state';
-import { IItemLayer, ItemLayer, ITemporalItemLayer, TemporalItemLayer } from './models/item.layer';
-import { IMapState } from './models/map.state';
-import { IPeriodState } from './models/period.state';
 import { ISelectedFeatures } from './models/selected.features';
+import { IItemLayer,ItemLayer,ITemporalItemLayer,TemporalItemLayer } from './models/item.layer';
+import { IClickedFeature } from './models/clicked.feature';
+import { IPeriodState } from './models/period.state';
 
 // components
-import { MapRoutingModule } from './common-map-routing.module';
+import { GpsLocation} from './components/aol/gps-location/gps-location.component';
-import { FileDropTargetComponent } from './components/aol/file-drop-target/file-drop-target.component';
+import {FeatureListFeatureCropfieldComponent } from './components/feature-list-feature-cropfield/feature-list-feature-cropfield.component';
-import { GpsLocation } from './components/aol/gps-location/gps-location.component';
+import { FeatureListFeatureCroppingschemeComponent} from './components/feature-list-feature-croppingscheme/feature-list-feature-croppingscheme.component';
-import { ItemLayersComponent } from './components/aol/item-layers/item-layers.component';
+import { ItemWidgetListComponent} from './components/item-widget-list/item-widget-list.component';
-import { ItemVectorSourceComponent } from './components/aol/item-vector-source/item-vector-source.component';
+import { AbstractItemListItemComponent, ItemListItemComponent, AbstractItemWidgetComponent } from './components/item-list-item/item-list-item.component';
-import { LayerListComponent } from './components/aol/layer-list/layer-list.component';
-import { LayerValuesComponent } from './components/aol/layer-values/layer-values.component';
-import { LayerVectorImageComponent } from './components/aol/layer-vector-image/layer-vector-image.component';
-import { PanToLocation } from './components/aol/pan-to-location/pan-to-location.component';
-import { RotationResetComponent } from './components/aol/rotation-reset/rotation-reset.component';
-import { ZoomToExtentComponent } from './components/aol/zoom-to-extent/zoom-to-extent.component';
-import { FeatureListContainerComponent } from './components/feature-list-container/feature-list-container.component';
-import { FeatureListCropfieldComponent } from './components/feature-list-cropfield/feature-list-cropfield.component';
-import { FeatureListObservationComponent } from './components/feature-list-observation/feature-list-observation.component';
-import { FeatureListCroppingschemeComponent } from './components/feature-list-croppingscheme/feature-list-croppingscheme.component';
-import { FeatureListFeatureContainerComponent } from './components/feature-list-feature-container/feature-list-feature-container.component';
-import { FeatureListFeatureCropfieldComponent } from './components/feature-list-feature-cropfield/feature-list-feature-cropfield.component';
-import { FeatureListFeatureCroppingschemeComponent } from './components/feature-list-feature-croppingscheme/feature-list-feature-croppingscheme.component';
-import { FeatureListFeatureObservationComponent } from './components/feature-list-feature-observation/feature-list-feature-observation.component';
-import { AbstractFeatureListFeatureComponent, FeatureListFeatureComponent } from './components/feature-list-feature/feature-list-feature.component';
-import { AbstractFeatureListComponent, FeatureListComponent } from './components/feature-list/feature-list.component';
-import { GeometryThumbnailComponent } from './components/feature-thumbnail/feature-thumbnail.component';
-import { ForChild } from './components/for-item/for-child.decorator';
-import { ForItemType } from './components/for-item/for-itemtype.decorator';
-import { ForPackage } from './components/for-item/for-package.decorator';
-import { ForSourceTask } from './components/for-item/for-sourcetask.decorator';
-import { ifZoomToShowDirective } from './components/if-zoom-to-show/if-zoom-to-show.directive';
 import { ItemListItemContainerComponent } from './components/item-list-item-container/item-list-item-container.component';
-import { AbstractItemListItemComponent, AbstractItemWidgetComponent, ItemListItemComponent } from './components/item-list-item/item-list-item.component';
+import { AbstractItemListComponent,ItemListComponent} from './components/item-list/item-list.component';
-import { AbstractItemListComponent, ItemListComponent } from './components/item-list/item-list.component';
+import { AbstractSelectedItemComponent, SelectedItemComponent } from './components/selected-item/selected-item.component';
-import { ItemWidgetListComponent } from './components/item-widget-list/item-widget-list.component';
-import { LayerSwitcher } from './components/layer-switcher/layer-switcher.component';
-import { HistogramDetailsComponent } from './components/legend/histogram-details/histogram-details.component';
-import { LegendComponent } from './components/legend/legend.component';
-import { StatisticsDetailsComponent } from './components/legend/statistics-details/statistics-details.component';
-import { MapSearchComponent } from './components/map-search/map-search.component';
-import { MapComponent } from './components/map/map.component';
-import { MetaDataModalComponent } from './components/meta-data-modal/meta-data-modal.component';
-import { SelectPeriodModalComponent } from './components/select-period-modal/select-period-modal.component';
-import { SelectedItemContainerComponent } from './components/selected-item-container/selected-item-container.component';
 import { SelectedItemCropfieldComponent } from './components/selected-item-cropfield/selected-item-cropfield.component';
 import { SelectedItemGeotiffComponent } from './components/selected-item-geotiff/selected-item-geotiff.component';
-import { SelectedItemShapeComponent } from './components/selected-item-shape/selected-item-shape.component';
+import { SelectedItemTemporalComponent} from './components/selected-item-temporal/selected-item-temporal.component';
-import { SelectedItemTemporalComponent } from './components/selected-item-temporal/selected-item-temporal.component';
+import {SelectedItemShapeComponent } from './components/selected-item-shape/selected-item-shape.component';
-import { AbstractSelectedItemComponent, SelectedItemComponent } from './components/selected-item/selected-item.component';
+import { SelectedItemContainerComponent } from './components/selected-item-container/selected-item-container.component';
-import { WidgetHostDirective } from './components/widget-host/widget-host.directive';
+import { AbstractFeatureListFeatureComponent, FeatureListFeatureComponent } from './components/feature-list-feature/feature-list-feature.component';
-import { WidgetStatusComponent } from './components/widget-status/widget-status.component';
+import {FeatureListFeatureContainerComponent } from './components/feature-list-feature-container/feature-list-feature-container.component';
-import { ZoomToShowAlert } from './components/zoom-to-show-alert/zoom-to-show-alert.component';
+import { FeatureListCroppingschemeComponent } from './components/feature-list-croppingscheme/feature-list-croppingscheme.component';
-import { DeviceOrientationService } from './services/device-orientation.service';
+import {FeatureListCropfieldComponent  } from './components/feature-list-cropfield/feature-list-cropfield.component';
-import { FeatureIconService } from './services/feature-icon.service';
+import {FeatureListContainerComponent } from './components/feature-list-container/feature-list-container.component';
+import { WidgetHostDirective} from './components/widget-host/widget-host.directive';
+import { FeatureListComponent,AbstractFeatureListComponent} from './components/feature-list/feature-list.component';
+import { FileDropTargetComponent } from './components/aol/file-drop-target/file-drop-target.component';
+import { ItemVectorSourceComponent } from './components/aol/item-vector-source/item-vector-source.component';
+import { ItemLayersComponent } from './components/aol/item-layers/item-layers.component';
+import { ZoomToExtentComponent } from './components/aol/zoom-to-extent/zoom-to-extent.component';
+import { RotationResetComponent } from './components/aol/rotation-reset/rotation-reset.component';
+import { LayerListComponent } from './components/aol/layer-list/layer-list.component';
+import { MetaDataModalComponent } from './components/meta-data-modal/meta-data-modal.component';
+import { SelectPeriodModalComponent } from './components/select-period-modal/select-period-modal.component';
+import { MapComponent } from './components/map/map.component';
+import { MapSearchComponent } from './components/map-search/map-search.component';
+import { MapRoutingModule } from './common-map-routing.module';
+import { LegendComponent } from './components/legend/legend.component';
+import { LayerVectorImageComponent } from './components/aol/layer-vector-image/layer-vector-image.component';
+import {FeatureIconService} from './services/feature-icon.service';
 import { GeolocationService } from './services/geolocation.service';
-import { TemporalService } from './services/temporal.service';
+import {DeviceOrientationService} from './services/device-orientation.service';
+import { TemporalService} from './services/temporal.service';
+import { WidgetStatusComponent } from './components/widget-status/widget-status.component';
+import { ForChild} from './components/for-item/for-child.decorator';
+import {ForItemType } from './components/for-item/for-itemtype.decorator';
+import { ForSourceTask} from './components/for-item/for-sourcetask.decorator';
+import { ForPackage } from './components/for-item/for-package.decorator';
+import { PanToLocation} from './components/aol/pan-to-location/pan-to-location.component';
+import {LayerSwitcher} from './components/layer-switcher/layer-switcher.component';
+import {HistogramDetailsComponent} from './components/legend/histogram-details/histogram-details.component';
+import {StatisticsDetailsComponent} from './components/legend/statistics-details/statistics-details.component';
+import { ifZoomToShowDirective} from './components/if-zoom-to-show/if-zoom-to-show.directive';
+import { ZoomToShowAlert} from './components/zoom-to-show-alert/zoom-to-show-alert.component';
+import { LayerValuesComponent } from './components/aol/layer-values/layer-values.component';
+import { GeometryThumbnailComponent } from './components/feature-thumbnail/feature-thumbnail.component';
 
 export function LocalStorageSync(reducer: ActionReducer<any>): ActionReducer<any> {
   const r = function(state, action) {
@@ -106,18 +104,75 @@ export function LocalStorageSync(reducer: ActionReducer<any>): ActionReducer<any
 const metaReducers: Array<MetaReducer<any, any>> = [LocalStorageSync];
 
 export {
+  mapEffects,
+  mapReducers,
+  mapActions,
+  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,
   AbstractFeatureListComponent,
-  AbstractFeatureListFeatureComponent, AbstractItemListComponent, AbstractItemListItemComponent, AbstractItemWidgetComponent, AbstractSelectedItemComponent, DeviceOrientationService, FeatureIconService, FeatureListComponent, FeatureListContainerComponent, FeatureListCropfieldComponent, FeatureListObservationComponent, FeatureListCroppingschemeComponent, FeatureListFeatureComponent, FeatureListFeatureContainerComponent, FeatureListFeatureCropfieldComponent, FeatureListFeatureObservationComponent, FeatureListFeatureCroppingschemeComponent, FileDropTargetComponent, ForChild,
+  AbstractFeatureListFeatureComponent,
-  ForItemType, ForPackage, ForSourceTask, GeolocationService, GeometryThumbnailComponent, GpsLocation, IClickedFeature, ifZoomToShowDirective, IItemLayer, IMapState, IPeriodState, ISelectedFeatures, ItemLayer, ItemLayersComponent, ItemListComponent, ItemListItemComponent,
+  AbstractSelectedItemComponent,
-  ItemListItemContainerComponent, ITemporalItemLayer, ItemVectorSourceComponent, ItemWidgetListComponent, LayerListComponent, LayerSwitcher, LayerVectorImageComponent, LegendComponent, mapActions, MapComponent, mapEffects,
+  AbstractItemWidgetComponent,
-  mapReducers, MapSearchComponent, MetaDataModalComponent, PanToLocation, RotationResetComponent, SelectedItemComponent, SelectedItemContainerComponent, SelectedItemCropfieldComponent,
+  AbstractItemListItemComponent,
-  SelectedItemGeotiffComponent, SelectedItemShapeComponent, SelectedItemTemporalComponent, SelectPeriodModalComponent, TemporalItemLayer, TemporalService, WidgetHostDirective, WidgetStatusComponent, ZoomToExtentComponent, ZoomToShowAlert
+  AbstractItemListComponent,
-};
+  FeatureIconService,
+  GeolocationService,
+  DeviceOrientationService,
+  TemporalService,
+  IMapState,
+  ISelectedFeatures,
+  IItemLayer,
+  ItemLayer,
+  IPeriodState,
+  ForChild,
+  ForItemType,
+  ForSourceTask,
+  ForPackage ,
+  ITemporalItemLayer,
+  TemporalItemLayer,
+  ifZoomToShowDirective,
+  ZoomToShowAlert,
+  IClickedFeature,
+  GeometryThumbnailComponent
+}
 
 @NgModule({
     imports: [
         CommonModule,
-        AngularOpenlayersModule,
+        AppCommonAolModule,
         MapRoutingModule,
         StoreModule.forFeature(MODULE_NAME, mapReducers.reducer, { metaReducers: metaReducers }),
         EffectsModule.forFeature([mapEffects.MapEffects]),
@@ -144,12 +199,10 @@ export {
         FeatureListContainerComponent,
         FeatureListCroppingschemeComponent,
         FeatureListCropfieldComponent,
-        FeatureListObservationComponent,
         FeatureListFeatureContainerComponent,
         FeatureListFeatureComponent,
         FeatureListFeatureCroppingschemeComponent,
         FeatureListFeatureCropfieldComponent,
-        FeatureListFeatureObservationComponent,
         SelectedItemContainerComponent,
         SelectedItemComponent,
         SelectedItemCropfieldComponent,
@@ -182,7 +235,6 @@ export {
         LayerSwitcher,
         FeatureListFeatureComponent,
         FeatureListFeatureCropfieldComponent,
-        FeatureListFeatureObservationComponent,
         FeatureListFeatureCroppingschemeComponent,
         SelectedItemContainerComponent,
         SelectedItemComponent,
@@ -206,7 +258,6 @@ export {
         FeatureListContainerComponent,
         FeatureListCroppingschemeComponent,
         FeatureListCropfieldComponent,
-        FeatureListObservationComponent,
         FeatureListFeatureContainerComponent,
         ZoomToExtentComponent,
         ifZoomToShowDirective,
@@ -220,11 +271,9 @@ export {
         TemporalService,
         { provide: AbstractFeatureListComponent, useClass: FeatureListCroppingschemeComponent, multi: true },
         { provide: AbstractFeatureListComponent, useClass: FeatureListCropfieldComponent, multi: true },
-        { provide: AbstractFeatureListComponent, useClass: FeatureListObservationComponent, multi: true },        
         { provide: AbstractFeatureListFeatureComponent, useClass: FeatureListFeatureComponent, multi: true },
         { provide: AbstractFeatureListFeatureComponent, useClass: FeatureListFeatureCroppingschemeComponent, multi: true },
         { provide: AbstractFeatureListFeatureComponent, useClass: FeatureListFeatureCropfieldComponent, multi: true },
-        { provide: AbstractFeatureListFeatureComponent, useClass: FeatureListFeatureObservationComponent, multi: true },        
         { provide: AbstractSelectedItemComponent, useClass: SelectedItemComponent, multi: true },
         { provide: AbstractSelectedItemComponent, useClass: SelectedItemCropfieldComponent, multi: true },
         { provide: AbstractSelectedItemComponent, useClass: SelectedItemGeotiffComponent, multi: true },

projects/common-map/src/fm-map/components/aol/file-drop-target/file-drop-target.component.ts

@@ -1,5 +1,5 @@
 import { Component, Input, OnDestroy, OnInit, EventEmitter, Output, Inject } from '@angular/core';
-import { MapComponent } from '@farmmaps/ng-openlayers';
+import { MapComponent } from 'ngx-openlayers';
 
 import * as proj  from 'ol/proj';
 import {Point,Geometry} from 'ol/geom';

projects/common-map/src/fm-map/components/aol/gps-location/gps-location.component.scss

@@ -33,7 +33,7 @@
 }
 
 .stop2 {
-  stop-color:var(--bs-primary);
+  stop-color: var(--bs-primary);
   stop-opacity: 0;
 }
 

projects/common-map/src/fm-map/components/aol/gps-location/gps-location.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, Input, ViewChild, ElementRef, OnChanges, SimpleChanges ,Host} from '@angular/core';
-import { MapComponent } from '@farmmaps/ng-openlayers';
+import { MapComponent } from 'ngx-openlayers';
 import  Overlay  from 'ol/Overlay';
 import { fromLonLat, toLonLat } from 'ol/proj';
 

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

@@ -1,5 +1,5 @@
 import { Component, Host, Input, Output, EventEmitter,OnDestroy, OnInit, OnChanges, SimpleChanges, forwardRef } from '@angular/core';
-import { LayerGroupComponent, MapComponent } from '@farmmaps/ng-openlayers';
+import { LayerGroupComponent, MapComponent } from 'ngx-openlayers';
 import { ItemService,IItem,AppConfig } from '@farmmaps/common';
 import { IItemLayer, ITemporalItemLayer} from '../../../models/item.layer';
 import { ILayerData} from '../../../models/layer.data';
@@ -19,7 +19,6 @@ import VectorTileLayer from 'ol/layer/VectorTile';
 import {GeoJSON,MVT} from 'ol/format';
 import { Geometry } from 'ol/geom';
 import BaseLayer from 'ol/layer/Base';
-import Feature from 'ol/Feature';
 
 @Component({
   selector: 'fm-map-item-layers',
@@ -181,9 +180,9 @@ export class ItemLayersComponent extends LayerGroupComponent implements OnChange
       const source = new VectorSource({
         strategy: loadingstrategy.bbox,
         loader: function (extent: Extent, resolution: number, projection: Projection) {
-          const source = this as VectorSource<Feature<Geometry>>;
+          const source = this as VectorSource<Geometry>;
           __this.itemService.getItemFeatures(item.code, extent, projection.getCode(), layerIndex).subscribe(function (data) {
-            const features = format.readFeatures(data).filter(feature => feature instanceof Feature) as Feature[];
+            const features = format.readFeatures(data);
             for (const f of features) {
               if (f.get("code")) {
                 f.setId(f.get("code"));