Merge branch 'develop'

[ci skip] Updated packages #2477
[ci skip] Updated packages #2463
2024-04-23 11:54:04 +02:00 · 2024-04-15 14:29:22 +00:00 · 2024-04-10 12:19:34 +00:00 · 2024-04-10 14:07:19 +02:00 · 2024-04-10 14:06:44 +02:00 · 2024-04-10 11:45:06 +00:00
110 changed files with 9795 additions and 16819 deletions
--- a/.gitignore
+++ b/.gitignore
@ -51,5 +51,5 @@ projects/common-map/node_modules/
 .angular/*
 projects/common-map3d/node_modules/
 projects/common-map/node_modules/
-projects/ngx-openlayers/node_modules/
+projects/ng-openlayers/node_modules/
 projects/common/node_modules/
--- a/angular.json
+++ b/angular.json
@ -253,43 +253,6 @@
          }
        }
      }
-    },
-    "ngx-openlayers": {
-      "projectType": "library",
-      "root": "projects/ngx-openlayers",
-      "sourceRoot": "projects/ngx-openlayers/src",
-      "prefix": "lib",
-      "architect": {
-        "build": {
-          "builder": "@angular-devkit/build-angular:ng-packagr",
-          "options": {
-            "tsConfig": "projects/ngx-openlayers/tsconfig.lib.json",
-            "project": "projects/ngx-openlayers/ng-package.json"
-          },
-          "configurations": {
-            "production": {
-              "tsConfig": "projects/ngx-openlayers/tsconfig.lib.prod.json"
-            }
-          }
-        },
-        "test": {
-          "builder": "@angular-devkit/build-angular:karma",
-          "options": {
-            "main": "projects/ngx-openlayers/src/test.ts",
-            "tsConfig": "projects/ngx-openlayers/tsconfig.spec.json",
-            "karmaConfig": "projects/ngx-openlayers/karma.conf.js"
-          }
-        },
-        "lint": {
-          "builder": "@angular-eslint/builder:lint",
-          "options": {
-            "lintFilePatterns": [
-              "projects/ngx-openlayers/**/*.ts",
-              "projects/ngx-openlayers/**/*.html"
-            ]
-          }
-        }
-      }
    }
  },
  "cli": {
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -1,7 +1,7 @@
 {
  "name": "farmmaps-lib-app",
-  "version": "4.4.1",
-  "scripts":   {
+  "version": "4.5.0",
+  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
@ -10,25 +10,25 @@
    "e2e": "ng e2e"
  },
  "private": true,
-  "dependencies":   {
-    "@angular/animations": "^16.2.12",
-    "@angular/common": "^16.2.12",
-    "@angular/compiler": "^16.2.12",
-    "@angular/core": "^16.2.12",
+  "dependencies": {
+    "@angular/animations": "^17.3.3",
+    "@angular/common": "^17.3.3",
+    "@angular/compiler": "^17.3.3",
+    "@angular/core": "^17.3.3",
    "@angular-eslint/eslint-plugin": "^15.2.1",
-    "@angular/forms": "^16.2.12",
-    "@angular/platform-browser": "^16.2.12",
-    "@angular/platform-browser-dynamic": "^16.2.12",
-    "@angular/router": "^16.2.12",
+    "@angular/forms": "^17.3.3",
+    "@angular/platform-browser": "^17.3.3",
+    "@angular/platform-browser-dynamic": "^17.3.3",
+    "@angular/router": "^17.3.3",
    "@farmmaps/common": "file:dist/common",
    "@farmmaps/common-map": "file:dist/common-map",
    "@farmmaps/common-map3d": "file:dist/common-map3d",
-    "ngx-openlayers": "file:dist/ngx-openlayers",
+    "ng-openlayers": "17.1.3",
    "@microsoft/signalr": "^3.1.16",
-    "@ng-bootstrap/ng-bootstrap": "^15.0.0",
-    "@ngrx/effects": "^16",
-    "@ngrx/router-store": "^16",
-    "@ngrx/store": "^16",
+    "@ng-bootstrap/ng-bootstrap": "^16.0.0",
+    "@ngrx/effects": "^17",
+    "@ngrx/router-store": "^17",
+    "@ngrx/store": "^17",
    "@popperjs/core": "^2.11.6",
    "angular-oauth2-oidc": "^13",
    "assert": "^2.0.0",
@ -39,12 +39,12 @@
    "core-js": "^2.6.12",
    "https-browserify": "^1.0.0",
    "moment": "^2.29.4",
-    "ngrx-store-localstorage": "16.0.0",
-    "ngx-avatars": "1.5.0",
-    "ngx-clipboard": "^15.1.0",
+    "ngrx-store-localstorage": "17.0.0",
+    "ngx-avatars": "1.7.0",
+    "ngx-clipboard": "16.0.0",
    "ngx-image-cropper": "^7.2.1",
-    "ngx-uploadx": "^5.2.0",
-    "ol": "~6.3.1",
+    "ngx-uploadx": "^6.2.0",
+    "ol": "^8.2.0",
    "olcs": "^2.13.1",
    "resumablejs": "^1.1.0",
    "rxjs": "^7.8.1",
@ -54,15 +54,15 @@
    "tslib": "^2.4.0",
    "url": "^0.11.0",
    "util": "^0.12.4",
-    "zone.js": "~0.13.3"
+    "zone.js": "~0.14.4"
  },
-  "devDependencies":   {
-    "@angular-builders/custom-webpack": "^16",
-    "@angular-devkit/build-angular": "^16.2.11",
-    "@angular/cli": "^16.2.11",
-    "@angular/compiler-cli": "^16.2.12",
-    "@angular/language-service": "^16.2.12",
-    "@angular/localize": "^16.2.12",
+  "devDependencies": {
+    "@angular-builders/custom-webpack": "^17",
+    "@angular-devkit/build-angular": "^17.3.3",
+    "@angular/cli": "^17.3.3",
+    "@angular/compiler-cli": "^17.3.3",
+    "@angular/language-service": "^17.3.3",
+    "@angular/localize": "^17.3.3",
    "@types/arcgis-rest-api": "^10.4.5",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "^2.0.9",
@ -81,9 +81,9 @@
    "karma-coverage-istanbul-reporter": "^3.0.3",
    "karma-jasmine": "^5.1.0",
    "karma-jasmine-html-reporter": "^2.0.0",
-    "ng-packagr": "^16.2.3",
+    "ng-packagr": "^17.3.0",
    "protractor": "~7.0.0",
    "ts-node": "^8.8.1",
-    "typescript": "~4.9.3"
+    "typescript": "~5.4.4"
  }
-}
+}
--- a/projects/common-map/package-lock.json
+++ b/projects/common-map/package-lock.json
@ -11,14 +11,14 @@
        "tslib": "^2.0.0"
      },
      "peerDependencies": {
-        "@angular/core": "^16.2.12",
-        "@ngrx/effects": "^16",
-        "@ngrx/router-store": "^16",
-        "@ngrx/store": "^16",
-        "ngrx-store-localstorage": "16.0.0",
-        "ngx-openlayers": "file:dist/ngx-openlayers",
-        "ol": ">=6.8.1",
-        "tassign": ">1.0.0"
+        "@angular/core": "^17.3.3",
+        "@ngrx/effects": "^17",
+        "@ngrx/router-store": "^17",
+        "@ngrx/store": "^17",
+        "ng-openlayers": "17.1.3",
+        "ngrx-store-localstorage": "^17",
+        "ol": "^8.2.0",
+        "tassign": "^1.0.0"
      }
    },
    "node_modules/tslib": {
--- a/projects/common-map/package.json
+++ b/projects/common-map/package.json
@ -8,13 +8,13 @@
    "tslib": "^2.0.0"
  },
  "peerDependencies": {
-    "@angular/core": "^16.2.12",
-    "ngrx-store-localstorage": "16.0.0",
-    "@ngrx/effects": "^16",
-    "@ngrx/router-store": "^16",
-    "@ngrx/store": "^16",
-    "tassign": ">1.0.0",
-    "ngx-openlayers": "file:dist/ngx-openlayers",
-    "ol": ">=6.8.1"
+    "@angular/core": "^17.3.3",
+    "ngrx-store-localstorage": "^17",
+    "@ngrx/effects": "^17",
+    "@ngrx/router-store": "^17",
+    "@ngrx/store": "^17",
+    "tassign": "^1.0.0",
+    "ng-openlayers": "17.1.3",
+    "ol": "^8.2.0"
  }
 }
--- a/projects/common-map/src/fm-map/common-map.module.ts
+++ b/projects/common-map/src/fm-map/common-map.module.ts
@ -3,7 +3,7 @@ import { CommonModule } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';

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

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


--- a/projects/common-map/src/fm-map/components/aol/file-drop-target/file-drop-target.component.ts
+++ b/projects/common-map/src/fm-map/components/aol/file-drop-target/file-drop-target.component.ts
@ -1,5 +1,5 @@
 import { Component, Input, OnDestroy, OnInit, EventEmitter, Output, Inject } from '@angular/core';
-import { MapComponent } from 'ngx-openlayers';
+import { MapComponent } from 'ng-openlayers';

 import * as proj  from 'ol/proj';
 import {Point,Geometry} from 'ol/geom';
--- a/projects/common-map/src/fm-map/components/aol/gps-location/gps-location.component.ts
+++ b/projects/common-map/src/fm-map/components/aol/gps-location/gps-location.component.ts
@ -1,5 +1,5 @@
 import { Component, OnInit, Input, ViewChild, ElementRef, OnChanges, SimpleChanges ,Host} from '@angular/core';
-import { MapComponent } from 'ngx-openlayers';
+import { MapComponent } from 'ng-openlayers';
 import  Overlay  from 'ol/Overlay';
 import { fromLonLat, toLonLat } from 'ol/proj';

--- a/projects/common-map/src/fm-map/components/aol/item-layers/item-layers.component.ts
+++ b/projects/common-map/src/fm-map/components/aol/item-layers/item-layers.component.ts
@ -1,5 +1,5 @@
 import { Component, Host, Input, Output, EventEmitter,OnDestroy, OnInit, OnChanges, SimpleChanges, forwardRef } from '@angular/core';
-import { LayerGroupComponent, MapComponent } from 'ngx-openlayers';
+import { LayerGroupComponent, MapComponent } from 'ng-openlayers';
 import { ItemService,IItem,AppConfig } from '@farmmaps/common';
 import { IItemLayer, ITemporalItemLayer} from '../../../models/item.layer';
 import { ILayerData} from '../../../models/layer.data';
@ -19,6 +19,7 @@ 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',
@ -180,9 +181,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<Geometry>;
+          const source = this as VectorSource<Feature<Geometry>>;
          __this.itemService.getItemFeatures(item.code, extent, projection.getCode(), layerIndex).subscribe(function (data) {
-            const features = format.readFeatures(data);
+            const features = format.readFeatures(data).filter(feature => feature instanceof Feature) as Feature[];
            for (const f of features) {
              if (f.get("code")) {
                f.setId(f.get("code"));
--- a/projects/common-map/src/fm-map/components/aol/item-vector-source/item-vector-source.component.ts
+++ b/projects/common-map/src/fm-map/components/aol/item-vector-source/item-vector-source.component.ts
@ -1,5 +1,5 @@
 import { Component, Host, Input, Output, EventEmitter, OnInit, OnChanges, SimpleChanges, forwardRef, Inject, InjectionToken, OnDestroy, LOCALE_ID } from '@angular/core';
-import { LayerVectorComponent, SourceVectorComponent, MapComponent } from 'ngx-openlayers';
+import { LayerVectorComponent, SourceVectorComponent, MapComponent } from 'ng-openlayers';
 import { ItemService, ItemTypeService, IItem, IItemType, FolderService } from '@farmmaps/common';

 import { Feature } from 'ol';
@ -29,7 +29,7 @@ import { formatNumber } from '@angular/common';
  ]
 })
 export class ItemVectorSourceComponent extends SourceVectorComponent implements OnInit, OnDestroy, OnChanges {
-  instance: Vector<Geometry>;
+  instance: Vector<Feature<Geometry>>;
  private _format: GeoJSON;
  private _select: Select;
  private _hoverSelect: Select;
@ -83,6 +83,7 @@ export class ItemVectorSourceComponent extends SourceVectorComponent implements
  ngOnInit() {
    this.sub = this.folderService.getFolder('my_settings').subscribe(
      userSettingsRoot => {
+        if (userSettingsRoot == undefined) return;
        this.itemService.getChildItemList(userSettingsRoot.code, 'vnd.farmmaps.itemtype.settings.general').subscribe(
          items => {
            if (items && items.length > 0 && items[0].data?.displayMapFeatureSettings) {
--- a/projects/common-map/src/fm-map/components/aol/layer-values/layer-values.component.ts
+++ b/projects/common-map/src/fm-map/components/aol/layer-values/layer-values.component.ts
@ -3,7 +3,7 @@ import { IItemLayer } from '../../../models/item.layer';
 import { Store } from '@ngrx/store';
 import * as mapReducers from '../../../reducers/map.reducer';
 import * as mapActions from '../../../actions/map.actions';
-import { MapComponent } from 'ngx-openlayers';
+import { MapComponent } from 'ng-openlayers';
 import { ILayervalue } from '../../../models/layer.value';
 import { Observable, interval, Subject } from 'rxjs';
 import { debounce, throttle } from 'rxjs/operators';
--- a/projects/common-map/src/fm-map/components/aol/layer-vector-image/layer-vector-image.component.ts
+++ b/projects/common-map/src/fm-map/components/aol/layer-vector-image/layer-vector-image.component.ts
@ -1,8 +1,9 @@
 import { Component, OnDestroy, OnInit, Input, OnChanges, SimpleChanges } from '@angular/core';
-import { LayerVectorComponent, MapComponent } from 'ngx-openlayers';
+import { LayerVectorComponent, MapComponent } from 'ng-openlayers';
 import  RenderType  from 'ol/layer/Vector';
 import { Vector as VectorSource } from 'ol/source';
 import { Geometry } from 'ol/geom';
+import Feature from 'ol/Feature';

@Component({
  selector: 'fm-map-aol-layer-vector-image',
@ -14,7 +15,7 @@ export class LayerVectorImageComponent extends LayerVectorComponent implements O
  //public source: Vector;

  @Input()
-  renderMode: RenderType<VectorSource<Geometry>> | string = "image";  
+  renderMode: RenderType<VectorSource<Feature<Geometry>>> | string = "image";  

  constructor(map: MapComponent) {
    super(map);
--- a/projects/common-map/src/fm-map/components/aol/pan-to-location/pan-to-location.component.ts
+++ b/projects/common-map/src/fm-map/components/aol/pan-to-location/pan-to-location.component.ts
@ -1,5 +1,5 @@
 import { Component, OnInit, Input, Host, OnChanges, SimpleChanges,ChangeDetectorRef } from '@angular/core';
-import { MapComponent } from 'ngx-openlayers';
+import { MapComponent } from 'ng-openlayers';
 import {IMapState} from '../../../models/map.state'
 import {View} from 'ol';
 import { fromLonLat } from 'ol/proj';
--- a/projects/common-map/src/fm-map/components/aol/rotation-reset/rotation-reset.component.ts
+++ b/projects/common-map/src/fm-map/components/aol/rotation-reset/rotation-reset.component.ts
@ -1,5 +1,5 @@
 import { Component, Host, Input, OnInit, ChangeDetectorRef  } from '@angular/core';
-import { ViewComponent, MapComponent } from 'ngx-openlayers';
+import { ViewComponent, MapComponent } from 'ng-openlayers';

 import {View} from 'ol';

--- a/projects/common-map/src/fm-map/components/aol/zoom-to-extent/zoom-to-extent.component.ts
+++ b/projects/common-map/src/fm-map/components/aol/zoom-to-extent/zoom-to-extent.component.ts
@ -1,6 +1,6 @@
 import { Component, Host, Input, OnInit, OnChanges, SimpleChanges, forwardRef } from '@angular/core';
 import { ActivatedRoute  } from '@angular/router';
-import { ViewComponent, MapComponent } from 'ngx-openlayers';
+import { ViewComponent, MapComponent } from 'ng-openlayers';

 
@Component({
--- a/projects/common-map/src/fm-map/components/if-zoom-to-show/if-zoom-to-show.directive.ts
+++ b/projects/common-map/src/fm-map/components/if-zoom-to-show/if-zoom-to-show.directive.ts
@ -1,7 +1,7 @@
 import { Directive, ViewContainerRef,TemplateRef,OnInit,Input, OnChanges } from '@angular/core';
 import { Layer } from 'ol/layer';
 import { Source } from 'ol/source';
-import { MapComponent } from 'ngx-openlayers';
+import { MapComponent } from 'ng-openlayers';

@Directive({
  selector: '[fmMapIfZoomToShow]',
--- a/projects/common-map/src/fm-map/effects/map.effects.ts
+++ b/projects/common-map/src/fm-map/effects/map.effects.ts
@ -133,7 +133,7 @@ export class MapEffects {
                f.id = f.properties["code"];
              }
            }
-            return of(new mapActions.StartSearchSuccess(this._geojsonFormat.readFeatures(features), a.queryState));
+            return of(new mapActions.StartSearchSuccess(this._geojsonFormat.readFeatures(features).filter(feature => feature instanceof Feature) as Feature[], a.queryState));
          }
          ),
          catchError(error => of(new commonActions.Fail(error))));
@ -218,7 +218,7 @@ export class MapEffects {
      if (!this.overrideSelectedItemLayer) {
        return this.itemService$.getFeature(action.item.code, "EPSG:3857").pipe(
          map((feature: any) => {
-            const f = this._geojsonFormat.readFeature(feature);
+            const f = this._geojsonFormat.readFeature(feature) as Feature;
            f.setId(action.item.code);
            return new mapActions.AddFeatureSuccess(f);
          }),
--- a/projects/common-map3d/package-lock.json
+++ b/projects/common-map3d/package-lock.json
@ -11,10 +11,10 @@
        "tslib": "^2.0.0"
      },
      "peerDependencies": {
-        "@angular/common": "^16.2.12",
-        "@angular/core": "^16.2.12",
+        "@angular/common": "^17.3.3",
+        "@angular/core": "^17.3.3",
        "cesium": ">=1.82.1",
-        "ngx-openlayers": "file:dist/ngx-openlayers",
+        "ng-openlayers": "17.1.3",
        "ol-cesium": ">=2.13.0"
      }
    },
--- a/projects/common-map3d/package.json
+++ b/projects/common-map3d/package.json
@ -5,9 +5,9 @@
    "registry": "https://repository.akkerweb.nl/repository/npm-hosted/"
  },
  "peerDependencies": {
-    "@angular/common":  "^16.2.12",
-    "@angular/core":  "^16.2.12",
-    "ngx-openlayers": "file:dist/ngx-openlayers",
+    "@angular/common":  "^17.3.3",
+    "@angular/core":  "^17.3.3",
+    "ng-openlayers": "17.1.3",
    "cesium": ">=1.82.1",
    "ol-cesium": ">=2.13.0"
  },
--- a/projects/common-map3d/src/fm-map3d/components/olcs/switch2d3d/switch2d3d.component.ts
+++ b/projects/common-map3d/src/fm-map3d/components/olcs/switch2d3d/switch2d3d.component.ts
@ -1,6 +1,6 @@
 import { Component, OnInit,Input,Host  } from '@angular/core';
 import { Interaction} from 'ol/interaction';
-import { MapComponent } from 'ngx-openlayers';
+import { MapComponent } from 'ng-openlayers';
 import OLCesium from 'olcs/OLCesium';
 import RasterSynchronizer from 'olcs/RasterSynchronizer';
 import VectorSynchronizer from 'olcs/VectorSynchronizer';
--- a/projects/common/package-lock.json
+++ b/projects/common/package-lock.json
@ -8,22 +8,22 @@
      "name": "@farmmaps/common",
      "version": "2.0.0",
      "peerDependencies": {
-        "@angular/common": "^16.2.12",
-        "@angular/core": "^16.2.12",
-        "@angular/forms": "^16.2.12",
-        "@microsoft/signalr": ">3.1.3",
-        "@ng-bootstrap/ng-bootstrap": ">=15.0.0",
-        "@ngrx/effects": "^16",
-        "@ngrx/router-store": "^16",
-        "@ngrx/store": "^16",
+        "@angular/common": "^17.3.3",
+        "@angular/core": "^17.3.3",
+        "@angular/forms": "^17.3.3",
+        "@microsoft/signalr": "^3.1.16",
+        "@ng-bootstrap/ng-bootstrap": "^16.0.0",
+        "@ngrx/effects": "^17",
+        "@ngrx/router-store": "^17",
+        "@ngrx/store": "^17",
        "angular-oauth2-oidc": "^13",
        "bootstrap": "^5.2.0",
        "moment": "^2.29.4",
-        "ngx-avatars": "1.5.0",
-        "ngx-clipboard": ">15.1.0",
-        "ngx-image-cropper": ">7.2.1",
-        "ngx-uploadx": "^5.2.0",
-        "tassign": ">1.0.0"
+        "ngx-avatars": "1.7.0",
+        "ngx-clipboard": "16.0.0",
+        "ngx-image-cropper": "^7.2.1",
+        "ngx-uploadx": "^6.2.0",
+        "tassign": "^1.0.0"
      }
    }
  }
--- a/projects/common/package.json
+++ b/projects/common/package.json
@ -5,21 +5,21 @@
    "registry": "https://repository.akkerweb.nl/repository/npm-hosted/"
  },
  "peerDependencies": {
-    "@ng-bootstrap/ng-bootstrap": ">=15.0.0",
-    "@angular/common": "^16.2.12",
-    "@angular/core": "^16.2.12",
-    "@angular/forms": "^16.2.12",
-    "@ngrx/effects": "^16",
-    "@ngrx/router-store": "^16",
-    "@ngrx/store": "^16",
-    "tassign": ">1.0.0",
+    "@ng-bootstrap/ng-bootstrap": "^16.0.0",
+    "@angular/common": "^17.3.3",
+    "@angular/core": "^17.3.3",
+    "@angular/forms": "^17.3.3",
+    "@ngrx/effects": "^17",
+    "@ngrx/router-store": "^17",
+    "@ngrx/store": "^17",
+    "tassign": "^1.0.0",
    "bootstrap": "^5.2.0",
-    "@microsoft/signalr": ">3.1.3",
-    "ngx-uploadx": "^5.2.0",
+    "@microsoft/signalr": "^3.1.16",
+    "ngx-uploadx": "^6.2.0",
    "angular-oauth2-oidc": "^13",
    "moment": "^2.29.4",
-    "ngx-avatars": "1.5.0",
-    "ngx-image-cropper": ">7.2.1",
-    "ngx-clipboard": ">15.1.0"
+    "ngx-avatars": "1.7.0",
+    "ngx-image-cropper": "^7.2.1",
+    "ngx-clipboard": "16.0.0"
  }
 }
--- a/projects/ngx-openlayers/.eslintrc.json
+++ b/projects/ngx-openlayers/.eslintrc.json
@ -1,56 +0,0 @@
-{
-  "extends": "../../.eslintrc.json",
-  "ignorePatterns": [
-    "!**/*"
-  ],
-  "overrides": [
-    {
-      "files": [
-        "*.ts"
-      ],
-      "parserOptions": {
-        "project": [
-          "projects/ngx-openlayers/tsconfig.lib.json",
-          "projects/ngx-openlayers/tsconfig.spec.json"
-        ],
-        "createDefaultProgram": true
-      },
-      "rules": {
-        "@angular-eslint/component-selector": [
-          "error",
-          {
-            "type": "element",
-            "prefix": "aol",
-            "style": "kebab-case"
-          }
-        ],
-        "@angular-eslint/directive-selector": [
-          "error",
-          {
-            "type": "attribute",
-            "prefix": "aol",
-            "style": "camelCase"
-          }
-        ],
-        "@typescript-eslint/explicit-member-accessibility": [
-          "off",
-          {
-            "accessibility": "explicit"
-          }
-        ],
-        "arrow-parens": [
-          "off",
-          "always"
-        ],
-        "import/order": "off",
-        "no-underscore-dangle": "off"
-      }
-    },
-    {
-      "files": [
-        "*.html"
-      ],
-      "rules": {}
-    }
-  ]
-}
--- a/projects/ngx-openlayers/ng-package.json
+++ b/projects/ngx-openlayers/ng-package.json
@ -1,10 +0,0 @@
-{
-  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "../../dist/ngx-openlayers",
-  "assets": [
-    "ngcc.config.js"
-  ],
-  "lib": {
-    "entryFile": "src/public-api.ts"
-  }
-}
--- a/projects/ngx-openlayers/ngcc.config.js
+++ b/projects/ngx-openlayers/ngcc.config.js
@ -1,3 +0,0 @@
-module.exports = {
-  ignorableDeepImportMatchers: [/ol\//]
-};
--- a/projects/ngx-openlayers/package-lock.json
+++ b/projects/ngx-openlayers/package-lock.json
@ -1,17 +0,0 @@
-{
-  "name": "ngx-openlayers",
-  "version": "2.0.0",
-  "lockfileVersion": 2,
-  "requires": true,
-  "packages": {
-    "": {
-      "name": "ngx-openlayers",
-      "version": "2.0.0",
-      "peerDependencies": {
-        "@angular/common": "^16.2.12",
-        "@angular/core": "^16.2.12",
-        "ol": ">=6.3.1"
-      }
-    }
-  }
-}
--- a/projects/ngx-openlayers/package.json
+++ b/projects/ngx-openlayers/package.json
@ -1,12 +0,0 @@
-{
-  "name": "ngx-openlayers",
-  "version": "2.0.0",
-  "publishConfig": {
-    "registry": "https://repository.akkerweb.nl/repository/npm-hosted/"
-  },
-  "peerDependencies": {
-    "@angular/common": "^16.2.12",
-    "@angular/core": "^16.2.12",
-    "ol": ">=6.3.1"
-  }
-}
--- a/projects/ngx-openlayers/src/lib/attribution.component.ts
+++ b/projects/ngx-openlayers/src/lib/attribution.component.ts
@ -1,18 +0,0 @@
-import { Component, ElementRef, OnInit } from '@angular/core';
-import { Attribution } from 'ol/control';
-
-@Component({
-  selector: 'aol-attribution',
-  template: '<ng-content></ng-content>',
-})
-export class AttributionComponent implements OnInit {
-  instance: Attribution;
-  html: string;
-
-  constructor(private elementRef: ElementRef) {}
-
-  ngOnInit() {
-    this.html = this.elementRef.nativeElement.innerHTML;
-    this.instance = new Attribution(this);
-  }
-}
--- a/projects/ngx-openlayers/src/lib/attributions.component.ts
+++ b/projects/ngx-openlayers/src/lib/attributions.component.ts
@ -1,26 +0,0 @@
-import { AfterViewInit, Component, ContentChildren, Host, QueryList } from '@angular/core';
-import { Attribution } from 'ol/control';
-import { AttributionComponent } from './attribution.component';
-import { SourceComponent } from './sources/source.component';
-
-@Component({
-  selector: 'aol-attributions',
-  template: '<ng-content></ng-content>',
-})
-export class AttributionsComponent implements AfterViewInit {
-  @ContentChildren(AttributionComponent)
-  attributions: QueryList<AttributionComponent>;
-
-  instance: Array<Attribution>;
-
-  constructor(@Host() private source: SourceComponent) {}
-
-  /* we can do this at the very end */
-  ngAfterViewInit() {
-    if (this.attributions.length) {
-      this.instance = this.attributions.map((cmp) => cmp.instance);
-      // console.log('setting attributions:', this.instance);
-      this.source.instance.setAttributions(this.instance);
-    }
-  }
-}
--- a/projects/ngx-openlayers/src/lib/collectioncoordinates.component.ts
+++ b/projects/ngx-openlayers/src/lib/collectioncoordinates.component.ts
@ -1,89 +0,0 @@
-import { Component, Input, OnChanges, OnInit, Optional, SimpleChanges } from '@angular/core';
-import { Coordinate } from 'ol/coordinate';
-import { transform } from 'ol/proj';
-import { GeometryLinestringComponent } from './geom/geometrylinestring.component';
-import { GeometryMultiLinestringComponent } from './geom/geometrymultilinestring.component';
-import { GeometryMultiPointComponent } from './geom/geometrymultipoint.component';
-import { GeometryMultiPolygonComponent } from './geom/geometrymultipolygon.component';
-import { GeometryPolygonComponent } from './geom/geometrypolygon.component';
-import { MapComponent } from './map.component';
-
-@Component({
-  selector: 'aol-collection-coordinates',
-  template: ` <div class="aol-collection-coordinates"></div> `,
-})
-export class CollectionCoordinatesComponent implements OnChanges, OnInit {
-  @Input()
-  coordinates: Coordinate[] | Coordinate[][] | Coordinate[][][];
-  @Input()
-  srid = 'EPSG:3857';
-
-  private host: any;
-  private mapSrid = 'EPSG:3857';
-
-  constructor(
-    private map: MapComponent,
-    @Optional() geometryLinestring: GeometryLinestringComponent,
-    @Optional() geometryPolygon: GeometryPolygonComponent,
-    @Optional() geometryMultipoint: GeometryMultiPointComponent,
-    @Optional() geometryMultilinestring: GeometryMultiLinestringComponent,
-    @Optional() geometryMultipolygon: GeometryMultiPolygonComponent
-  ) {
-    if (!!geometryLinestring) {
-      this.host = geometryLinestring;
-    } else if (!!geometryPolygon) {
-      this.host = geometryPolygon;
-    } else if (!!geometryMultipoint) {
-      this.host = geometryMultipoint;
-    } else if (!!geometryMultilinestring) {
-      this.host = geometryMultilinestring;
-    } else if (!!geometryMultipolygon) {
-      this.host = geometryMultipolygon;
-    } else {
-      throw new Error('aol-collection-coordinates must be a child of a geometry component');
-    }
-  }
-
-  ngOnInit() {
-    this.map.instance.on('change:view', (e) => this.onMapViewChanged(e));
-    this.mapSrid = this.map.instance.getView().getProjection().getCode();
-    this.transformCoordinates();
-  }
-
-  ngOnChanges(changes: SimpleChanges) {
-    this.transformCoordinates();
-  }
-
-  private onMapViewChanged(event) {
-    this.mapSrid = event.target.get(event.key).getProjection().getCode();
-    this.transformCoordinates();
-  }
-
-  private transformCoordinates() {
-    let transformedCoordinates: Coordinate[] | Coordinate[][] | Coordinate[][][];
-
-    if (this.srid === this.mapSrid) {
-      transformedCoordinates = this.coordinates;
-    } else {
-      switch (this.host.componentType) {
-        case 'geometry-linestring':
-        case 'geometry-multipoint':
-          transformedCoordinates = (this.coordinates as Coordinate[]).map((c) => transform(c, this.srid, this.mapSrid));
-          break;
-        case 'geometry-polygon':
-        case 'geometry-multilinestring':
-          transformedCoordinates = (this.coordinates as Coordinate[][]).map((cc) =>
-            cc.map((c) => transform(c, this.srid, this.mapSrid))
-          );
-          break;
-        case 'geometry-multipolygon':
-          transformedCoordinates = (this.coordinates as Coordinate[][][]).map((ccc) =>
-            ccc.map((cc) => cc.map((c) => transform(c, this.srid, this.mapSrid)))
-          );
-          break;
-      }
-    }
-
-    this.host.instance.setCoordinates(transformedCoordinates);
-  }
-}
--- a/projects/ngx-openlayers/src/lib/content.component.ts
+++ b/projects/ngx-openlayers/src/lib/content.component.ts
@ -1,9 +0,0 @@
-import { Component, ElementRef } from '@angular/core';
-
-@Component({
-  selector: 'aol-content',
-  template: '<ng-content></ng-content>',
-})
-export class ContentComponent {
-  constructor(public elementRef: ElementRef) {}
-}
--- a/projects/ngx-openlayers/src/lib/controls/attribution.component.ts
+++ b/projects/ngx-openlayers/src/lib/controls/attribution.component.ts
@ -1,30 +0,0 @@
-import { Component, ElementRef, Input, OnDestroy, OnInit } from '@angular/core';
-import { Attribution } from 'ol/control';
-import { MapComponent } from '../map.component';
-
-@Component({
-  selector: 'aol-control-attribution',
-  template: ``,
-})
-export class ControlAttributionComponent implements OnInit, OnDestroy {
-  @Input()
-  collapsible: boolean;
-
-  componentType = 'control';
-  instance: Attribution;
-  target: Element;
-
-  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.map.instance.addControl(this.instance);
-  }
-
-  ngOnDestroy() {
-    // console.log('removing aol-control-attribution');
-    this.map.instance.removeControl(this.instance);
-  }
-}
--- a/projects/ngx-openlayers/src/lib/controls/control.component.ts
+++ b/projects/ngx-openlayers/src/lib/controls/control.component.ts
@ -1,33 +0,0 @@
-import { Component, ContentChild, OnDestroy, OnInit } from '@angular/core';
-import { Control } from 'ol/control';
-import { ContentComponent } from '../content.component';
-import { MapComponent } from '../map.component';
-
-@Component({
-  selector: 'aol-control',
-  template: ` <ng-content></ng-content> `,
-})
-export class ControlComponent implements OnInit, OnDestroy {
-  @ContentChild(ContentComponent, { static: true })
-  content: ContentComponent;
-
-  componentType = 'control';
-  instance: Control;
-  element: Element;
-
-  constructor(private map: MapComponent) {}
-
-  ngOnInit() {
-    if (this.content) {
-      this.element = this.content.elementRef.nativeElement;
-      this.instance = new Control(this);
-      this.map.instance.addControl(this.instance);
-    }
-  }
-
-  ngOnDestroy() {
-    if (this.instance) {
-      this.map.instance.removeControl(this.instance);
-    }
-  }
-}
--- a/projects/ngx-openlayers/src/lib/controls/default.component.ts
+++ b/projects/ngx-openlayers/src/lib/controls/default.component.ts
@ -1,42 +0,0 @@
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { Collection } from 'ol';
-import { Control, defaults } from 'ol/control';
-import { Options as AttributionOptions } from 'ol/control/Attribution';
-import { Options as RotateOptions } from 'ol/control/Rotate';
-import { Options as ZoomOptions } from 'ol/control/Zoom';
-
-import { MapComponent } from '../map.component';
-
-@Component({
-  selector: 'aol-control-defaults',
-  template: '',
-})
-export class DefaultControlComponent implements OnInit, OnDestroy {
-  @Input()
-  attribution: boolean;
-  @Input()
-  attributionOptions: AttributionOptions;
-  @Input()
-  rotate: boolean;
-  @Input()
-  rotateOptions: RotateOptions;
-  @Input()
-  zoom: boolean;
-  @Input()
-  zoomOptions: ZoomOptions;
-
-  instance: Collection<Control>;
-
-  constructor(private map: MapComponent) {}
-
-  ngOnInit() {
-    // console.log('ol.control.defaults init: ', this);
-    this.instance = defaults(this);
-    this.instance.forEach((c) => this.map.instance.addControl(c));
-  }
-
-  ngOnDestroy() {
-    // console.log('removing aol-control-defaults');
-    this.instance.forEach((c) => this.map.instance.removeControl(c));
-  }
-}
--- a/projects/ngx-openlayers/src/lib/controls/fullscreen.component.ts
+++ b/projects/ngx-openlayers/src/lib/controls/fullscreen.component.ts
@ -1,36 +0,0 @@
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { FullScreen } from 'ol/control';
-import { MapComponent } from '../map.component';
-
-@Component({
-  selector: 'aol-control-fullscreen',
-  template: ` <ng-content></ng-content> `,
-})
-export class ControlFullScreenComponent implements OnInit, OnDestroy {
-  @Input()
-  className: string;
-  @Input()
-  label: string;
-  @Input()
-  labelActive: string;
-  @Input()
-  tipLabel: string;
-  @Input()
-  keys: boolean;
-
-  instance: FullScreen;
-
-  constructor(private map: MapComponent) {
-    // console.log('instancing aol-control-fullscreen');
-  }
-
-  ngOnInit() {
-    this.instance = new FullScreen(this);
-    this.map.instance.addControl(this.instance);
-  }
-
-  ngOnDestroy() {
-    // console.log('removing aol-control-fullscreen');
-    this.map.instance.removeControl(this.instance);
-  }
-}
--- a/projects/ngx-openlayers/src/lib/controls/mouseposition.component.ts
+++ b/projects/ngx-openlayers/src/lib/controls/mouseposition.component.ts
@ -1,33 +0,0 @@
-import { Component, ElementRef, Input, OnDestroy, OnInit } from '@angular/core';
-import MousePosition from 'ol/control/MousePosition';
-import { CoordinateFormat } from 'ol/coordinate';
-import { ProjectionLike } from 'ol/proj';
-import { MapComponent } from '../map.component';
-
-@Component({
-  selector: 'aol-control-mouseposition',
-  template: ``,
-})
-export class ControlMousePositionComponent implements OnInit, OnDestroy {
-  @Input()
-  coordinateFormat: CoordinateFormat;
-  @Input()
-  projection: ProjectionLike;
-  target: Element;
-
-  instance: MousePosition;
-
-  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.map.instance.addControl(this.instance);
-  }
-
-  ngOnDestroy() {
-    // console.log('removing aol-control-mouseposition');
-    this.map.instance.removeControl(this.instance);
-  }
-}
--- a/projects/ngx-openlayers/src/lib/controls/overviewmap.component.ts
+++ b/projects/ngx-openlayers/src/lib/controls/overviewmap.component.ts
@ -1,53 +0,0 @@
-import { Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
-import { View } from 'ol';
-import { OverviewMap } from 'ol/control';
-import { Layer } from 'ol/layer';
-import { MapComponent } from '../map.component';
-
-@Component({
-  selector: 'aol-control-overviewmap',
-  template: ` <ng-content></ng-content> `,
-})
-export class ControlOverviewMapComponent implements OnInit, OnChanges, OnDestroy {
-  @Input()
-  collapsed: boolean;
-  @Input()
-  collapseLabel: string;
-  @Input()
-  collapsible: boolean;
-  @Input()
-  label: string;
-  @Input()
-  layers: Layer[];
-  @Input()
-  target: Element;
-  @Input()
-  tipLabel: string;
-  @Input()
-  view: View;
-
-  instance: OverviewMap;
-
-  constructor(private map: MapComponent) {}
-
-  ngOnInit() {
-    this.instance = new OverviewMap(this);
-    this.map.instance.addControl(this.instance);
-  }
-
-  ngOnDestroy() {
-    this.map.instance.removeControl(this.instance);
-  }
-
-  ngOnChanges(changes: SimpleChanges) {
-    if (this.instance != null && changes.hasOwnProperty('view')) {
-      this.reloadInstance();
-    }
-  }
-
-  private reloadInstance() {
-    this.map.instance.removeControl(this.instance);
-    this.instance = new OverviewMap(this);
-    this.map.instance.addControl(this.instance);
-  }
-}
--- a/projects/ngx-openlayers/src/lib/controls/rotate.component.ts
+++ b/projects/ngx-openlayers/src/lib/controls/rotate.component.ts
@ -1,36 +0,0 @@
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { Rotate } from 'ol/control';
-import { MapComponent } from '../map.component';
-
-@Component({
-  selector: 'aol-control-rotate',
-  template: ` <ng-content></ng-content> `,
-})
-export class ControlRotateComponent implements OnInit, OnDestroy {
-  @Input()
-  className: string;
-  @Input()
-  label: string;
-  @Input()
-  tipLabel: string;
-  @Input()
-  duration: number;
-  @Input()
-  autoHide: boolean;
-
-  instance: Rotate;
-
-  constructor(private map: MapComponent) {
-    // console.log('instancing aol-control-rotate');
-  }
-
-  ngOnInit() {
-    this.instance = new Rotate(this);
-    this.map.instance.addControl(this.instance);
-  }
-
-  ngOnDestroy() {
-    // console.log('removing aol-control-rotate');
-    this.map.instance.removeControl(this.instance);
-  }
-}
--- a/projects/ngx-openlayers/src/lib/controls/scaleline.component.ts
+++ b/projects/ngx-openlayers/src/lib/controls/scaleline.component.ts
@ -1,28 +0,0 @@
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { ScaleLine } from 'ol/control';
-import { MapComponent } from '../map.component';
-
-@Component({
-  selector: 'aol-control-scaleline',
-  template: ` <ng-content></ng-content> `,
-})
-export class ControlScaleLineComponent implements OnInit, OnDestroy {
-  @Input()
-  units: string;
-
-  instance: ScaleLine;
-
-  constructor(private map: MapComponent) {
-    // console.log('instancing aol-control-scaleline');
-  }
-
-  ngOnInit() {
-    this.instance = new ScaleLine(this);
-    this.map.instance.addControl(this.instance);
-  }
-
-  ngOnDestroy() {
-    // console.log('removing aol-control-scaleline');
-    this.map.instance.removeControl(this.instance);
-  }
-}
--- a/projects/ngx-openlayers/src/lib/controls/zoom.component.ts
+++ b/projects/ngx-openlayers/src/lib/controls/zoom.component.ts
@ -1,38 +0,0 @@
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { Zoom } from 'ol/control';
-import { MapComponent } from '../map.component';
-
-@Component({
-  selector: 'aol-control-zoom',
-  template: ` <ng-content></ng-content> `,
-})
-export class ControlZoomComponent implements OnInit, OnDestroy {
-  @Input()
-  duration: number;
-  @Input()
-  zoomInLabel: string | Node;
-  @Input()
-  zoomOutLabel: string | Node;
-  @Input()
-  zoomInTipLabel: string;
-  @Input()
-  zoomOutTipLabel: string;
-  @Input()
-  delta: number;
-
-  instance: Zoom;
-
-  constructor(private map: MapComponent) {
-    // console.log('instancing aol-control-zoom');
-  }
-
-  ngOnInit() {
-    this.instance = new Zoom(this);
-    this.map.instance.addControl(this.instance);
-  }
-
-  ngOnDestroy() {
-    // console.log('removing aol-control-zoom');
-    this.map.instance.removeControl(this.instance);
-  }
-}
--- a/projects/ngx-openlayers/src/lib/controls/zoomslider.component.ts
+++ b/projects/ngx-openlayers/src/lib/controls/zoomslider.component.ts
@ -1,34 +0,0 @@
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { ZoomSlider } from 'ol/control';
-import { MapComponent } from '../map.component';
-
-@Component({
-  selector: 'aol-control-zoomslider',
-  template: ` <ng-content></ng-content> `,
-})
-export class ControlZoomSliderComponent implements OnInit, OnDestroy {
-  @Input()
-  className: string;
-  @Input()
-  duration: number;
-  @Input()
-  maxResolution: number;
-  @Input()
-  minResolution: number;
-
-  instance: ZoomSlider;
-
-  constructor(private map: MapComponent) {
-    // console.log('instancing aol-control-zoomslider');
-  }
-
-  ngOnInit() {
-    this.instance = new ZoomSlider(this);
-    this.map.instance.addControl(this.instance);
-  }
-
-  ngOnDestroy() {
-    // console.log('removing aol-control-zoomslider');
-    this.map.instance.removeControl(this.instance);
-  }
-}
--- a/projects/ngx-openlayers/src/lib/controls/zoomtoextent.component.ts
+++ b/projects/ngx-openlayers/src/lib/controls/zoomtoextent.component.ts
@ -1,35 +0,0 @@
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { ZoomToExtent } from 'ol/control';
-import { Extent } from 'ol/extent';
-import { MapComponent } from '../map.component';
-
-@Component({
-  selector: 'aol-control-zoomtoextent',
-  template: ` <ng-content></ng-content> `,
-})
-export class ControlZoomToExtentComponent implements OnInit, OnDestroy {
-  @Input()
-  className: string;
-  @Input()
-  label: string | Node;
-  @Input()
-  tipLabel: string;
-  @Input()
-  extent: Extent;
-
-  instance: ZoomToExtent;
-
-  constructor(private map: MapComponent) {
-    // console.log('instancing aol-control-zoomtoextent');
-  }
-
-  ngOnInit() {
-    this.instance = new ZoomToExtent(this);
-    this.map.instance.addControl(this.instance);
-  }
-
-  ngOnDestroy() {
-    // console.log('removing aol-control-zoomtoextent');
-    this.map.instance.removeControl(this.instance);
-  }
-}
--- a/projects/ngx-openlayers/src/lib/coordinate.component.ts
+++ b/projects/ngx-openlayers/src/lib/coordinate.component.ts
@ -1,80 +0,0 @@
-import { Component, Input, OnChanges, OnInit, Optional, SimpleChanges } from '@angular/core';
-import { transform } from 'ol/proj';
-import { GeometryCircleComponent } from './geom/geometrycircle.component';
-import { GeometryPointComponent } from './geom/geometrypoint.component';
-import { MapComponent } from './map.component';
-import { OverlayComponent } from './overlay.component';
-import { ViewComponent } from './view.component';
-
-@Component({
-  selector: 'aol-coordinate',
-  template: ` <div class="aol-coordinate"></div> `,
-})
-export class CoordinateComponent implements OnChanges, OnInit {
-  @Input()
-  x: number;
-  @Input()
-  y: number;
-  @Input()
-  srid = 'EPSG:3857';
-
-  private host: any;
-  private mapSrid = 'EPSG:3857';
-
-  constructor(
-    private map: MapComponent,
-    @Optional() viewHost: ViewComponent,
-    @Optional() geometryPointHost: GeometryPointComponent,
-    @Optional() geometryCircleHost: GeometryCircleComponent,
-    @Optional() overlayHost: OverlayComponent
-  ) {
-    // console.log('instancing aol-coordinate');
-    if (geometryPointHost !== null) {
-      this.host = geometryPointHost;
-    } else if (geometryCircleHost !== null) {
-      this.host = geometryCircleHost;
-    } else if (viewHost !== null) {
-      this.host = viewHost;
-    } else if (overlayHost !== null) {
-      this.host = overlayHost;
-    }
-  }
-
-  ngOnInit() {
-    this.map.instance.on('change:view', (e) => this.onMapViewChanged(e));
-    this.mapSrid = this.map.instance.getView().getProjection().getCode();
-    this.transformCoordinates();
-  }
-
-  ngOnChanges(changes: SimpleChanges) {
-    this.transformCoordinates();
-  }
-
-  private onMapViewChanged(event) {
-    this.mapSrid = event.target.get(event.key).getProjection().getCode();
-    this.transformCoordinates();
-  }
-
-  private transformCoordinates() {
-    let transformedCoordinates: number[];
-
-    if (this.srid === this.mapSrid) {
-      transformedCoordinates = [this.x, this.y];
-    } else {
-      transformedCoordinates = transform([this.x, this.y], this.srid, this.mapSrid);
-    }
-
-    switch (this.host.componentType) {
-      case 'geometry-point':
-        this.host.instance.setCoordinates(transformedCoordinates);
-        break;
-      case 'geometry-circle':
-      case 'view':
-        this.host.instance.setCenter(transformedCoordinates);
-        break;
-      case 'overlay':
-        this.host.instance.setPosition(transformedCoordinates);
-        break;
-    }
-  }
-}
--- a/projects/ngx-openlayers/src/lib/feature.component.ts
+++ b/projects/ngx-openlayers/src/lib/feature.component.ts
@ -1,35 +0,0 @@
-import { Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
-import { Feature } from 'ol';
-import { SourceVectorComponent } from './sources/vector.component';
-
-@Component({
-  selector: 'aol-feature',
-  template: ` <ng-content></ng-content> `,
-})
-export class FeatureComponent implements OnInit, OnDestroy, OnChanges {
-  @Input()
-  id: string | number | undefined;
-
-  componentType = 'feature';
-  instance: Feature;
-
-  constructor(private host: SourceVectorComponent) {}
-
-  ngOnInit() {
-    this.instance = new Feature();
-    if (this.id !== undefined) {
-      this.instance.setId(this.id);
-    }
-    this.host.instance.addFeature(this.instance);
-  }
-
-  ngOnDestroy() {
-    this.host.instance.removeFeature(this.instance);
-  }
-
-  ngOnChanges(changes: SimpleChanges) {
-    if (this.instance) {
-      this.instance.setId(this.id);
-    }
-  }
-}
--- a/projects/ngx-openlayers/src/lib/formats/format.component.ts
+++ b/projects/ngx-openlayers/src/lib/formats/format.component.ts
@ -1,6 +0,0 @@
-import Feature from 'ol/format/Feature';
-
-export class FormatComponent {
-  public instance: Feature;
-  public componentType = 'format';
-}
--- a/projects/ngx-openlayers/src/lib/formats/mvt.component.ts
+++ b/projects/ngx-openlayers/src/lib/formats/mvt.component.ts
@ -1,30 +0,0 @@
-import { Component, forwardRef, Input } from '@angular/core';
-import { MVT } from 'ol/format';
-import { Geometry } from 'ol/geom';
-import GeometryType from 'ol/geom/GeometryType';
-import { FormatComponent } from './format.component';
-
-@Component({
-  selector: 'aol-format-mvt',
-  template: '',
-  providers: [{ provide: FormatComponent, useExisting: forwardRef(() => FormatMVTComponent) }],
-})
-export class FormatMVTComponent extends FormatComponent {
-  @Input()
-  featureClass:
-    | ((geom: Geometry | { [k: string]: any }) => any)
-    | ((geom: GeometryType, arg2: number[], arg3: number[] | number[][], arg4: { [k: string]: any }) => any);
-  @Input()
-  geometryName: string;
-  @Input()
-  layerName: string;
-  @Input()
-  layers: string[];
-
-  instance: MVT;
-
-  constructor() {
-    super();
-    this.instance = new MVT(this);
-  }
-}
--- a/projects/ngx-openlayers/src/lib/geom/geometrycircle.component.ts
+++ b/projects/ngx-openlayers/src/lib/geom/geometrycircle.component.ts
@ -1,28 +0,0 @@
-import { Component, Input, OnInit } from '@angular/core';
-import { Circle } from 'ol/geom';
-import { FeatureComponent } from '../feature.component';
-import { MapComponent } from '../map.component';
-import { SimpleGeometryComponent } from './simplegeometry.component';
-
-@Component({
-  selector: 'aol-geometry-circle',
-  template: ` <ng-content></ng-content> `,
-})
-export class GeometryCircleComponent extends SimpleGeometryComponent implements OnInit {
-  componentType = 'geometry-circle';
-  instance: Circle;
-
-  constructor(map: MapComponent, host: FeatureComponent) {
-    super(map, host);
-    // defaulting coordinates to [0,0]. To be overridden in child component.
-    this.instance = new Circle([0, 0]);
-  }
-
-  @Input()
-  get radius(): number {
-    return this.instance.getRadius();
-  }
-  set radius(radius: number) {
-    this.instance.setRadius(radius);
-  }
-}
--- a/projects/ngx-openlayers/src/lib/geom/geometrylinestring.component.ts
+++ b/projects/ngx-openlayers/src/lib/geom/geometrylinestring.component.ts
@ -1,26 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { FeatureComponent } from '../feature.component';
-import { SimpleGeometryComponent } from './simplegeometry.component';
-import { MapComponent } from '../map.component';
-import { LineString } from 'ol/geom';
-
-@Component({
-  selector: 'aol-geometry-linestring',
-  template: ` <ng-content></ng-content> `,
-})
-export class GeometryLinestringComponent extends SimpleGeometryComponent implements OnInit {
-  public componentType = 'geometry-linestring';
-  public instance: LineString;
-
-  constructor(map: MapComponent, host: FeatureComponent) {
-    super(map, host);
-  }
-
-  ngOnInit() {
-    this.instance = new LineString([
-      [0, 0],
-      [1, 1],
-    ]);
-    super.ngOnInit();
-  }
-}
--- a/projects/ngx-openlayers/src/lib/geom/geometrymultilinestring.component.ts
+++ b/projects/ngx-openlayers/src/lib/geom/geometrymultilinestring.component.ts
@ -1,28 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { FeatureComponent } from '../feature.component';
-import { SimpleGeometryComponent } from './simplegeometry.component';
-import { MapComponent } from '../map.component';
-import { MultiLineString } from 'ol/geom';
-
-@Component({
-  selector: 'aol-geometry-multilinestring',
-  template: ` <ng-content></ng-content> `,
-})
-export class GeometryMultiLinestringComponent extends SimpleGeometryComponent implements OnInit {
-  public componentType = 'geometry-multilinestring';
-  public instance: MultiLineString;
-
-  constructor(map: MapComponent, host: FeatureComponent) {
-    super(map, host);
-  }
-
-  ngOnInit() {
-    this.instance = new MultiLineString([
-      [
-        [0, 0],
-        [1, 1],
-      ],
-    ]);
-    super.ngOnInit();
-  }
-}
--- a/projects/ngx-openlayers/src/lib/geom/geometrymultipoint.component.ts
+++ b/projects/ngx-openlayers/src/lib/geom/geometrymultipoint.component.ts
@ -1,26 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { FeatureComponent } from '../feature.component';
-import { SimpleGeometryComponent } from './simplegeometry.component';
-import { MapComponent } from '../map.component';
-import { MultiPoint } from 'ol/geom';
-
-@Component({
-  selector: 'aol-geometry-multipoint',
-  template: ` <ng-content></ng-content> `,
-})
-export class GeometryMultiPointComponent extends SimpleGeometryComponent implements OnInit {
-  public componentType = 'geometry-multipoint';
-  public instance: MultiPoint;
-
-  constructor(map: MapComponent, host: FeatureComponent) {
-    super(map, host);
-  }
-
-  ngOnInit() {
-    this.instance = new MultiPoint([
-      [0, 0],
-      [1, 1],
-    ]);
-    super.ngOnInit();
-  }
-}
--- a/projects/ngx-openlayers/src/lib/geom/geometrymultipolygon.component.ts
+++ b/projects/ngx-openlayers/src/lib/geom/geometrymultipolygon.component.ts
@ -1,31 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { FeatureComponent } from '../feature.component';
-import { SimpleGeometryComponent } from './simplegeometry.component';
-import { MapComponent } from '../map.component';
-import { MultiPolygon } from 'ol/geom';
-
-@Component({
-  selector: 'aol-geometry-multipolygon',
-  template: ` <ng-content></ng-content> `,
-})
-export class GeometryMultiPolygonComponent extends SimpleGeometryComponent implements OnInit {
-  public componentType = 'geometry-multipolygon';
-  public instance: MultiPolygon;
-
-  constructor(map: MapComponent, host: FeatureComponent) {
-    super(map, host);
-  }
-
-  ngOnInit() {
-    this.instance = new MultiPolygon([
-      [
-        [
-          [0, 0],
-          [1, 1],
-          [0, 1],
-        ],
-      ],
-    ]);
-    super.ngOnInit();
-  }
-}
--- a/projects/ngx-openlayers/src/lib/geom/geometrypoint.component.ts
+++ b/projects/ngx-openlayers/src/lib/geom/geometrypoint.component.ts
@ -1,23 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { FeatureComponent } from '../feature.component';
-import { SimpleGeometryComponent } from './simplegeometry.component';
-import { MapComponent } from '../map.component';
-import { Point } from 'ol/geom';
-
-@Component({
-  selector: 'aol-geometry-point',
-  template: ` <ng-content></ng-content> `,
-})
-export class GeometryPointComponent extends SimpleGeometryComponent implements OnInit {
-  public componentType = 'geometry-point';
-  public instance: Point;
-
-  constructor(map: MapComponent, host: FeatureComponent) {
-    super(map, host);
-  }
-
-  ngOnInit() {
-    this.instance = new Point([0, 0]);
-    super.ngOnInit();
-  }
-}
--- a/projects/ngx-openlayers/src/lib/geom/geometrypolygon.component.ts
+++ b/projects/ngx-openlayers/src/lib/geom/geometrypolygon.component.ts
@ -1,29 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { FeatureComponent } from '../feature.component';
-import { SimpleGeometryComponent } from './simplegeometry.component';
-import { MapComponent } from '../map.component';
-import { Polygon } from 'ol/geom';
-
-@Component({
-  selector: 'aol-geometry-polygon',
-  template: ` <ng-content></ng-content> `,
-})
-export class GeometryPolygonComponent extends SimpleGeometryComponent implements OnInit {
-  public componentType = 'geometry-polygon';
-  public instance: Polygon;
-
-  constructor(map: MapComponent, host: FeatureComponent) {
-    super(map, host);
-  }
-
-  ngOnInit() {
-    this.instance = new Polygon([
-      [
-        [0, 0],
-        [1, 1],
-        [0, 1],
-      ],
-    ]);
-    super.ngOnInit();
-  }
-}
--- a/projects/ngx-openlayers/src/lib/geom/simplegeometry.component.ts
+++ b/projects/ngx-openlayers/src/lib/geom/simplegeometry.component.ts
@ -1,18 +0,0 @@
-import { Directive, Input, OnInit } from '@angular/core';
-import SimpleGeometry from 'ol/geom/SimpleGeometry';
-import { FeatureComponent } from '../feature.component';
-import { MapComponent } from '../map.component';
-
-@Directive()
-export abstract class SimpleGeometryComponent implements OnInit {
-  @Input() srid: string;
-
-  instance: SimpleGeometry;
-  componentType = 'simple-geometry';
-
-  constructor(protected map: MapComponent, protected host: FeatureComponent) {}
-
-  ngOnInit() {
-    this.host.instance.setGeometry(this.instance);
-  }
-}
--- a/projects/ngx-openlayers/src/lib/graticule.component.ts
+++ b/projects/ngx-openlayers/src/lib/graticule.component.ts
@ -1,57 +0,0 @@
-import { AfterContentInit, Component, Input, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
-import { Graticule } from 'ol';
-import { Stroke } from 'ol/style';
-import { MapComponent } from './map.component';
-
-@Component({
-  selector: 'aol-graticule',
-  template: '<ng-content></ng-content>',
-})
-export class GraticuleComponent implements AfterContentInit, OnChanges, OnDestroy {
-  @Input()
-  strokeStyle: Stroke;
-  @Input()
-  showLabels: boolean;
-  @Input()
-  lonLabelPosition: number;
-  @Input()
-  latLabelPosition: number;
-
-  instance: any;
-  componentType = 'graticule';
-
-  constructor(private map: MapComponent) {}
-
-  ngOnChanges(changes: SimpleChanges) {
-    const properties: { [index: string]: any } = {};
-
-    if (!this.instance) {
-      return;
-    }
-
-    for (const key in changes) {
-      if (changes.hasOwnProperty(key)) {
-        properties[key] = changes[key].currentValue;
-      }
-    }
-
-    if (properties) {
-      this.instance = new Graticule(properties);
-    }
-    this.instance.setMap(this.map.instance);
-  }
-
-  ngAfterContentInit(): void {
-    this.instance = new Graticule({
-      strokeStyle: this.strokeStyle,
-      showLabels: this.showLabels,
-      lonLabelPosition: this.lonLabelPosition,
-      latLabelPosition: this.latLabelPosition,
-    });
-    this.instance.setMap(this.map.instance);
-  }
-
-  ngOnDestroy(): void {
-    this.instance.setMap(null);
-  }
-}
--- a/projects/ngx-openlayers/src/lib/interactions/default.component.ts
+++ b/projects/ngx-openlayers/src/lib/interactions/default.component.ts
@ -1,23 +0,0 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
-import { defaults, Interaction } from 'ol/interaction';
-import { Collection } from 'ol';
-import { MapComponent } from '../map.component';
-
-@Component({
-  selector: 'aol-interaction-default',
-  template: '',
-})
-export class DefaultInteractionComponent implements OnInit, OnDestroy {
-  instance: Collection<Interaction>;
-
-  constructor(private map: MapComponent) {}
-
-  ngOnInit() {
-    this.instance = defaults();
-    this.instance.forEach((i) => this.map.instance.addInteraction(i));
-  }
-
-  ngOnDestroy() {
-    this.instance.forEach((i) => this.map.instance.removeInteraction(i));
-  }
-}
--- a/projects/ngx-openlayers/src/lib/interactions/doubleclickzoom.component.ts
+++ b/projects/ngx-openlayers/src/lib/interactions/doubleclickzoom.component.ts
@ -1,27 +0,0 @@
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { DoubleClickZoom } from 'ol/interaction';
-import { MapComponent } from '../map.component';
-
-@Component({
-  selector: 'aol-interaction-doubleclickzoom',
-  template: '',
-})
-export class DoubleClickZoomInteractionComponent implements OnInit, OnDestroy {
-  @Input()
-  duration: number;
-  @Input()
-  delta: number;
-
-  instance: DoubleClickZoom;
-
-  constructor(private map: MapComponent) {}
-
-  ngOnInit() {
-    this.instance = new DoubleClickZoom(this);
-    this.map.instance.addInteraction(this.instance);
-  }
-
-  ngOnDestroy() {
-    this.map.instance.removeInteraction(this.instance);
-  }
-}
--- a/projects/ngx-openlayers/src/lib/interactions/draganddrop.component.ts
+++ b/projects/ngx-openlayers/src/lib/interactions/draganddrop.component.ts
@ -1,31 +0,0 @@
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import Feature from 'ol/format/Feature';
-import { DragAndDrop } from 'ol/interaction';
-import { ProjectionLike } from 'ol/proj';
-import { MapComponent } from '../map.component';
-
-@Component({
-  selector: 'aol-interaction-draganddrop',
-  template: '',
-})
-export class DragAndDropInteractionComponent implements OnInit, OnDestroy {
-  @Input()
-  formatConstructors: ((n: Feature) => any)[];
-  @Input()
-  projection: ProjectionLike;
-  @Input()
-  target: Element;
-
-  instance: DragAndDrop;
-
-  constructor(private map: MapComponent) {}
-
-  ngOnInit() {
-    this.instance = new DragAndDrop(this);
-    this.map.instance.addInteraction(this.instance);
-  }
-
-  ngOnDestroy() {
-    this.map.instance.removeInteraction(this.instance);
-  }
-}
--- a/projects/ngx-openlayers/src/lib/interactions/dragbox.component.ts
+++ b/projects/ngx-openlayers/src/lib/interactions/dragbox.component.ts
@ -1,31 +0,0 @@
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { Condition } from 'ol/events/condition';
-import { DragBox } from 'ol/interaction';
-import { EndCondition } from 'ol/interaction/DragBox';
-import { MapComponent } from '../map.component';
-
-@Component({
-  selector: 'aol-interaction-dragbox',
-  template: '',
-})
-export class DragBoxInteractionComponent implements OnInit, OnDestroy {
-  @Input()
-  className: string;
-  @Input()
-  condition: Condition;
-  @Input()
-  boxEndCondition: EndCondition;
-
-  instance: DragBox;
-
-  constructor(private map: MapComponent) {}
-
-  ngOnInit() {
-    this.instance = new DragBox(this);
-    this.map.instance.addInteraction(this.instance);
-  }
-
-  ngOnDestroy() {
-    this.map.instance.removeInteraction(this.instance);
-  }
-}
--- a/projects/ngx-openlayers/src/lib/interactions/dragpan.component.ts
+++ b/projects/ngx-openlayers/src/lib/interactions/dragpan.component.ts
@ -1,29 +0,0 @@
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import Kinetic from 'ol/Kinetic';
-import { Condition } from 'ol/events/condition';
-import { DragPan } from 'ol/interaction';
-import { MapComponent } from '../map.component';
-
-@Component({
-  selector: 'aol-interaction-dragpan',
-  template: '',
-})
-export class DragPanInteractionComponent implements OnInit, OnDestroy {
-  @Input()
-  condition: Condition;
-  @Input()
-  kinetic: Kinetic;
-
-  instance: DragPan;
-
-  constructor(private map: MapComponent) {}
-
-  ngOnInit() {
-    this.instance = new DragPan(this);
-    this.map.instance.addInteraction(this.instance);
-  }
-
-  ngOnDestroy() {
-    this.map.instance.removeInteraction(this.instance);
-  }
-}
--- a/projects/ngx-openlayers/src/lib/interactions/dragrotate.component.ts
+++ b/projects/ngx-openlayers/src/lib/interactions/dragrotate.component.ts
@ -1,28 +0,0 @@
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { Condition } from 'ol/events/condition';
-import { DragRotate } from 'ol/interaction';
-import { MapComponent } from '../map.component';
-
-@Component({
-  selector: 'aol-interaction-dragrotate',
-  template: '',
-})
-export class DragRotateInteractionComponent implements OnInit, OnDestroy {
-  @Input()
-  condition: Condition;
-  @Input()
-  duration: number;
-
-  instance: DragRotate;
-
-  constructor(private map: MapComponent) {}
-
-  ngOnInit() {
-    this.instance = new DragRotate(this);
-    this.map.instance.addInteraction(this.instance);
-  }
-
-  ngOnDestroy() {
-    this.map.instance.removeInteraction(this.instance);
-  }
-}
--- a/projects/ngx-openlayers/src/lib/interactions/dragrotateandzoom.component.ts
+++ b/projects/ngx-openlayers/src/lib/interactions/dragrotateandzoom.component.ts
@ -1,28 +0,0 @@
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { Condition } from 'ol/events/condition';
-import { DragRotateAndZoom } from 'ol/interaction';
-import { MapComponent } from '../map.component';
-
-@Component({
-  selector: 'aol-interaction-dragrotateandzoom',
-  template: '',
-})
-export class DragRotateAndZoomInteractionComponent implements OnInit, OnDestroy {
-  @Input()
-  condition: Condition;
-  @Input()
-  duration: number;
-
-  instance: DragRotateAndZoom;
-
-  constructor(private map: MapComponent) {}
-
-  ngOnInit() {
-    this.instance = new DragRotateAndZoom(this);
-    this.map.instance.addInteraction(this.instance);
-  }
-
-  ngOnDestroy() {
-    this.map.instance.removeInteraction(this.instance);
-  }
-}
--- a/projects/ngx-openlayers/src/lib/interactions/dragzoom.component.ts
+++ b/projects/ngx-openlayers/src/lib/interactions/dragzoom.component.ts
@ -1,32 +0,0 @@
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { Condition } from 'ol/events/condition';
-import { DragZoom } from 'ol/interaction';
-import { MapComponent } from '../map.component';
-
-@Component({
-  selector: 'aol-interaction-dragzoom',
-  template: '',
-})
-export class DragZoomInteractionComponent implements OnInit, OnDestroy {
-  @Input()
-  className: string;
-  @Input()
-  condition: Condition;
-  @Input()
-  duration: number;
-  @Input()
-  out: boolean;
-
-  instance: DragZoom;
-
-  constructor(private map: MapComponent) {}
-
-  ngOnInit() {
-    this.instance = new DragZoom(this);
-    this.map.instance.addInteraction(this.instance);
-  }
-
-  ngOnDestroy() {
-    this.map.instance.removeInteraction(this.instance);
-  }
-}
--- a/projects/ngx-openlayers/src/lib/interactions/draw.component.ts
+++ b/projects/ngx-openlayers/src/lib/interactions/draw.component.ts
@ -1,76 +0,0 @@
-import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
-import { Collection, Feature } from 'ol';
-import { Condition } from 'ol/events/condition';
-import GeometryType from 'ol/geom/GeometryType';
-import { Draw } from 'ol/interaction';
-import { DrawEvent, GeometryFunction } from 'ol/interaction/Draw';
-import { Vector } from 'ol/source';
-import { Style } from 'ol/style';
-import { StyleFunction } from 'ol/style/Style';
-import { MapComponent } from '../map.component';
-
-@Component({
-  selector: 'aol-interaction-draw',
-  template: '',
-})
-export class DrawInteractionComponent implements OnInit, OnDestroy {
-  @Input()
-  clickTolerance?: number;
-  @Input()
-  features?: Collection<Feature>;
-  @Input()
-  source?: Vector;
-  @Input()
-  snapTolerance?: number;
-  @Input()
-  type: GeometryType;
-  @Input()
-  maxPoints?: number;
-  @Input()
-  minPoints?: number;
-  @Input()
-  finishCondition?: Condition;
-  @Input()
-  style?: Style | Style[] | StyleFunction;
-  @Input()
-  geometryFunction?: GeometryFunction;
-  @Input()
-  geometryName?: string;
-  @Input()
-  condition?: Condition;
-  @Input()
-  freehandCondition?: Condition;
-  @Input()
-  freehand?: boolean;
-  @Input()
-  wrapX?: boolean;
-
-  @Output()
-  olChange = new EventEmitter<DrawEvent>();
-  @Output()
-  olChangeActive = new EventEmitter<DrawEvent>();
-  @Output()
-  drawEnd = new EventEmitter<DrawEvent>();
-  @Output()
-  drawStart = new EventEmitter<DrawEvent>();
-  @Output()
-  propertyChange = new EventEmitter<DrawEvent>();
-
-  instance: Draw;
-
-  constructor(private map: MapComponent) {}
-
-  ngOnInit() {
-    this.instance = new Draw(this);
-    this.instance.on('change', (event: DrawEvent) => this.olChange.emit(event));
-    this.instance.on('change:active', (event: DrawEvent) => this.olChangeActive.emit(event));
-    this.instance.on('drawend', (event: DrawEvent) => this.drawEnd.emit(event));
-    this.instance.on('drawstart', (event: DrawEvent) => this.drawStart.emit(event));
-    this.instance.on('propertychange', (event: DrawEvent) => this.propertyChange.emit(event));
-    this.map.instance.addInteraction(this.instance);
-  }
-
-  ngOnDestroy() {
-    this.map.instance.removeInteraction(this.instance);
-  }
-}
--- a/projects/ngx-openlayers/src/lib/interactions/modify.component.ts
+++ b/projects/ngx-openlayers/src/lib/interactions/modify.component.ts
@ -1,59 +0,0 @@
-import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
-import { Collection, Feature } from 'ol';
-import { Condition } from 'ol/events/condition';
-import { Modify } from 'ol/interaction';
-import { ModifyEvent } from 'ol/interaction/Modify';
-import { Vector } from 'ol/source';
-import { Style } from 'ol/style';
-import { StyleFunction } from 'ol/style/Style';
-import { MapComponent } from '../map.component';
-
-@Component({
-  selector: 'aol-interaction-modify',
-  template: '',
-})
-export class ModifyInteractionComponent implements OnInit, OnDestroy {
-  @Input()
-  condition?: Condition;
-  @Input()
-  deleteCondition?: Condition;
-  @Input()
-  pixelTolerance?: number;
-  @Input()
-  style?: Style | Style[] | StyleFunction;
-  @Input()
-  features: Collection<Feature>;
-  @Input()
-  wrapX?: boolean;
-  @Input()
-  source?: Vector;
-
-  @Output()
-  modifyEnd = new EventEmitter<ModifyEvent>();
-  @Output()
-  modifyStart = new EventEmitter<ModifyEvent>();
-  @Output()
-  olChange = new EventEmitter<ModifyEvent>();
-  @Output()
-  olChangeActive = new EventEmitter<ModifyEvent>();
-  @Output()
-  propertyChange = new EventEmitter<ModifyEvent>();
-
-  instance: Modify;
-
-  constructor(private map: MapComponent) {}
-
-  ngOnInit() {
-    this.instance = new Modify(this);
-    this.instance.on('change', (event: ModifyEvent) => this.olChange.emit(event));
-    this.instance.on('change:active', (event: ModifyEvent) => this.olChangeActive.emit(event));
-    this.instance.on('propertychange', (event: ModifyEvent) => this.propertyChange.emit(event));
-    this.instance.on('modifyend', (event: ModifyEvent) => this.modifyEnd.emit(event));
-    this.instance.on('modifystart', (event: ModifyEvent) => this.modifyStart.emit(event));
-    this.map.instance.addInteraction(this.instance);
-  }
-
-  ngOnDestroy() {
-    this.map.instance.removeInteraction(this.instance);
-  }
-}
--- a/projects/ngx-openlayers/src/lib/interactions/mousewheelzoom.component.ts
+++ b/projects/ngx-openlayers/src/lib/interactions/mousewheelzoom.component.ts
@ -1,29 +0,0 @@
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { MouseWheelZoom } from 'ol/interaction';
-import { MapComponent } from '../map.component';
-
-@Component({
-  selector: 'aol-interaction-mousewheelzoom',
-  template: '',
-})
-export class MouseWheelZoomInteractionComponent implements OnInit, OnDestroy {
-  @Input()
-  duration: number;
-  @Input()
-  timeout: number;
-  @Input()
-  useAnchor: boolean;
-
-  instance: MouseWheelZoom;
-
-  constructor(private map: MapComponent) {}
-
-  ngOnInit() {
-    this.instance = new MouseWheelZoom(this);
-    this.map.instance.addInteraction(this.instance);
-  }
-
-  ngOnDestroy() {
-    this.map.instance.removeInteraction(this.instance);
-  }
-}
--- a/projects/ngx-openlayers/src/lib/interactions/pinchzoom.component.ts
+++ b/projects/ngx-openlayers/src/lib/interactions/pinchzoom.component.ts
@ -1,27 +0,0 @@
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { PinchZoom } from 'ol/interaction';
-import { MapComponent } from '../map.component';
-
-@Component({
-  selector: 'aol-interaction-pinchzoom',
-  template: '',
-})
-export class PinchZoomInteractionComponent implements OnInit, OnDestroy {
-  @Input()
-  duration: number;
-  @Input()
-  constrainResolution: boolean;
-
-  instance: PinchZoom;
-
-  constructor(private map: MapComponent) {}
-
-  ngOnInit() {
-    this.instance = new PinchZoom(this);
-    this.map.instance.addInteraction(this.instance);
-  }
-
-  ngOnDestroy() {
-    this.map.instance.removeInteraction(this.instance);
-  }
-}
--- a/projects/ngx-openlayers/src/lib/interactions/select.component.ts
+++ b/projects/ngx-openlayers/src/lib/interactions/select.component.ts
@ -1,63 +0,0 @@
-import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
-import { Collection, Feature } from 'ol';
-import { Condition } from 'ol/events/condition';
-import { Select } from 'ol/interaction';
-import { FilterFunction, SelectEvent } from 'ol/interaction/Select';
-import { Layer } from 'ol/layer';
-import { Style } from 'ol/style';
-import { StyleFunction } from 'ol/style/Style';
-import { MapComponent } from '../map.component';
-
-@Component({
-  selector: 'aol-interaction-select',
-  template: '',
-})
-export class SelectInteractionComponent implements OnInit, OnDestroy {
-  @Input()
-  addCondition?: Condition;
-  @Input()
-  condition?: Condition;
-  @Input()
-  layers?: Layer[] | ((layer: Layer) => boolean);
-  @Input()
-  style?: Style | Style[] | StyleFunction;
-  @Input()
-  removeCondition?: Condition;
-  @Input()
-  toggleCondition?: Condition;
-  @Input()
-  multi?: boolean;
-  @Input()
-  features?: Collection<Feature>;
-  @Input()
-  filter?: FilterFunction;
-  @Input()
-  wrapX?: boolean;
-  @Input()
-  hitTolerance?: number;
-
-  @Output()
-  olChange = new EventEmitter<SelectEvent>();
-  @Output()
-  olSelect = new EventEmitter<SelectEvent>();
-  @Output()
-  propertyChange = new EventEmitter<SelectEvent>();
-
-  instance: Select;
-
-  constructor(private map: MapComponent) {}
-
-  ngOnInit() {
-    this.instance = new Select(this);
-
-    this.instance.on('change', (event: SelectEvent) => this.olChange.emit(event));
-    this.instance.on('select', (event: SelectEvent) => this.olSelect.emit(event));
-    this.instance.on('propertychange', (event: SelectEvent) => this.propertyChange.emit(event));
-
-    this.map.instance.addInteraction(this.instance);
-  }
-
-  ngOnDestroy() {
-    this.map.instance.removeInteraction(this.instance);
-  }
-}
--- a/projects/ngx-openlayers/src/lib/interactions/translate.component.ts
+++ b/projects/ngx-openlayers/src/lib/interactions/translate.component.ts
@ -1,56 +0,0 @@
-import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
-import { Collection, Feature } from 'ol';
-import { Translate } from 'ol/interaction';
-import { TranslateEvent } from 'ol/interaction/Translate';
-import { Layer } from 'ol/layer';
-import { MapComponent } from '../map.component';
-
-@Component({
-  selector: 'aol-interaction-translate',
-  template: '',
-})
-export class TranslateInteractionComponent implements OnInit, OnDestroy {
-  @Input()
-  features?: Collection<Feature>;
-  @Input()
-  layers?: Layer[] | ((layer: Layer) => boolean);
-  @Input()
-  hitTolerance?: number;
-
-  @Output()
-  olChange: EventEmitter<TranslateEvent>;
-  @Output()
-  propertyChange: EventEmitter<TranslateEvent>;
-  @Output()
-  translateEnd: EventEmitter<TranslateEvent>;
-  @Output()
-  translateStart: EventEmitter<TranslateEvent>;
-  @Output()
-  translating: EventEmitter<TranslateEvent>;
-
-  instance: Translate;
-
-  constructor(private map: MapComponent) {
-    this.olChange = new EventEmitter<TranslateEvent>();
-    this.propertyChange = new EventEmitter<TranslateEvent>();
-    this.translateEnd = new EventEmitter<TranslateEvent>();
-    this.translateStart = new EventEmitter<TranslateEvent>();
-    this.translating = new EventEmitter<TranslateEvent>();
-  }
-
-  ngOnInit() {
-    this.instance = new Translate(this);
-
-    this.instance.on('change', (event: TranslateEvent) => this.olChange.emit(event));
-    this.instance.on('propertychange', (event: TranslateEvent) => this.propertyChange.emit(event));
-    this.instance.on('translateend', (event: TranslateEvent) => this.translateEnd.emit(event));
-    this.instance.on('translatestart', (event: TranslateEvent) => this.translateStart.emit(event));
-    this.instance.on('translating', (event: TranslateEvent) => this.translating.emit(event));
-
-    this.map.instance.addInteraction(this.instance);
-  }
-
-  ngOnDestroy() {
-    this.map.instance.removeInteraction(this.instance);
-  }
-}
--- a/projects/ngx-openlayers/src/lib/layers/layer.component.ts
+++ b/projects/ngx-openlayers/src/lib/layers/layer.component.ts
@ -1,67 +0,0 @@
-import { Directive, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
-import { Event } from 'ol/events';
-import { Extent } from 'ol/extent';
-import { MapComponent } from '../map.component';
-import { LayerGroupComponent } from './layergroup.component';
-
-@Directive()
-export abstract class LayerComponent implements OnInit, OnChanges, OnDestroy {
-  @Input()
-  opacity: number;
-  @Input()
-  visible: boolean;
-  @Input()
-  extent: Extent;
-  @Input()
-  zIndex: number;
-  @Input()
-  minResolution: number;
-  @Input()
-  maxResolution: number;
-
-  @Input()
-  prerender: (evt: Event) => void;
-  @Input()
-  postrender: (evt: Event) => void;
-
-  instance: any;
-  componentType = 'layer';
-
-  constructor(protected host: MapComponent | LayerGroupComponent) {}
-
-  ngOnInit() {
-    if (this.prerender !== null && this.prerender !== undefined) {
-      this.instance.on('prerender', this.prerender);
-    }
-    if (this.postrender !== null && this.postrender !== undefined) {
-      this.instance.on('postrender', this.postrender);
-    }
-    this.host.instance.getLayers().push(this.instance);
-  }
-
-  ngOnDestroy() {
-    this.host.instance.getLayers().remove(this.instance);
-  }
-
-  ngOnChanges(changes: SimpleChanges) {
-    const properties: { [index: string]: any } = {};
-    if (!this.instance) {
-      return;
-    }
-    for (const key in changes) {
-      if (changes.hasOwnProperty(key)) {
-        properties[key] = changes[key].currentValue;
-        if (key === 'prerender') {
-          this.instance.un('prerender', changes[key].previousValue);
-          this.instance.on('prerender', changes[key].currentValue);
-        }
-        if (key === 'postrender') {
-          this.instance.un('postrender', changes[key].previousValue);
-          this.instance.on('postrender', changes[key].currentValue);
-        }
-      }
-    }
-    // console.log('changes detected in aol-layer, setting new properties: ', properties);
-    this.instance.setProperties(properties, false);
-  }
-}
--- a/projects/ngx-openlayers/src/lib/layers/layergroup.component.ts
+++ b/projects/ngx-openlayers/src/lib/layers/layergroup.component.ts
@ -1,27 +0,0 @@
-import { Component, OnDestroy, OnInit, SkipSelf, Optional } from '@angular/core';
-import { Group } from 'ol/layer';
-import { LayerComponent } from './layer.component';
-import { MapComponent } from '../map.component';
-
-@Component({
-  selector: 'aol-layer-group',
-  template: ` <ng-content></ng-content> `,
-})
-export class LayerGroupComponent extends LayerComponent implements OnInit, OnDestroy {
-  public instance: Group;
-
-  constructor(
-    map: MapComponent,
-    @SkipSelf()
-    @Optional()
-    group?: LayerGroupComponent
-  ) {
-    super(group || map);
-  }
-
-  ngOnInit() {
-    // console.log(`creating ol.layer.Group instance with:`, this);
-    this.instance = new Group(this);
-    super.ngOnInit();
-  }
-}
--- a/projects/ngx-openlayers/src/lib/layers/layerimage.component.ts
+++ b/projects/ngx-openlayers/src/lib/layers/layerimage.component.ts
@ -1,40 +0,0 @@
-import { Component, Input, OnChanges, OnInit, Optional, SimpleChanges } from '@angular/core';
-import { Extent } from 'ol/extent';
-import { Image } from 'ol/layer';
-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 {
-  @Input()
-  opacity: number;
-  @Input()
-  visible: boolean;
-  @Input()
-  extent: Extent;
-  @Input()
-  minResolution: number;
-  @Input()
-  maxResolution: number;
-  @Input()
-  zIndex: number;
-
-  source: Image;
-
-  constructor(map: MapComponent, @Optional() group?: LayerGroupComponent) {
-    super(group || map);
-  }
-
-  ngOnInit() {
-    this.instance = new Image(this);
-    super.ngOnInit();
-  }
-
-  ngOnChanges(changes: SimpleChanges) {
-    super.ngOnChanges(changes);
-  }
-}
--- a/projects/ngx-openlayers/src/lib/layers/layertile.component.ts
+++ b/projects/ngx-openlayers/src/lib/layers/layertile.component.ts
@ -1,32 +0,0 @@
-import { Component, Input, OnChanges, OnDestroy, OnInit, Optional, SimpleChanges } from '@angular/core';
-import { Tile } from 'ol/layer';
-import { MapComponent } from '../map.component';
-import { LayerComponent } from './layer.component';
-import { LayerGroupComponent } from './layergroup.component';
-
-@Component({
-  selector: 'aol-layer-tile',
-  template: ` <ng-content></ng-content> `,
-})
-export class LayerTileComponent extends LayerComponent implements OnInit, OnDestroy, OnChanges {
-  @Input()
-  preload: number;
-  @Input()
-  useInterimTilesOnError: boolean;
-
-  source: Tile;
-
-  constructor(map: MapComponent, @Optional() group?: LayerGroupComponent) {
-    super(group || map);
-  }
-
-  ngOnInit() {
-    // console.log('creating ol.layer.Tile instance with:', this);
-    this.instance = new Tile(this);
-    super.ngOnInit();
-  }
-
-  ngOnChanges(changes: SimpleChanges) {
-    super.ngOnChanges(changes);
-  }
-}
--- a/projects/ngx-openlayers/src/lib/layers/layervector.component.ts
+++ b/projects/ngx-openlayers/src/lib/layers/layervector.component.ts
@ -1,41 +0,0 @@
-import { Component, Input, OnChanges, OnDestroy, OnInit, Optional, SimpleChanges } from '@angular/core';
-import { Vector } from 'ol/layer';
-import { Style } from 'ol/style';
-import { StyleFunction } from 'ol/style/Style';
-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 {
-  @Input()
-  renderBuffer: number;
-
-  @Input()
-  style: Style | Style[] | StyleFunction;
-
-  @Input()
-  updateWhileAnimating: boolean;
-
-  @Input()
-  updateWhileInteracting: boolean;
-
-  source: Vector;
-
-  constructor(map: MapComponent, @Optional() group?: LayerGroupComponent) {
-    super(group || map);
-  }
-
-  ngOnInit() {
-    // console.log('creating ol.layer.Vector instance with:', this);
-    this.instance = new Vector(this);
-    super.ngOnInit();
-  }
-
-  ngOnChanges(changes: SimpleChanges) {
-    super.ngOnChanges(changes);
-  }
-}
--- a/projects/ngx-openlayers/src/lib/layers/layervectortile.component.ts
+++ b/projects/ngx-openlayers/src/lib/layers/layervectortile.component.ts
@ -1,45 +0,0 @@
-import { Component, OnInit, Input, Optional, SimpleChanges, OnChanges } from '@angular/core';
-import { VectorTile } from 'ol/layer';
-import { RenderType } from 'ol/layer/VectorTile';
-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> `,
-})
-export class LayerVectorTileComponent extends LayerComponent implements OnInit, OnChanges {
-  @Input()
-  renderBuffer: number;
-  @Input()
-  renderMode: RenderType | 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) {
-    super(group || map);
-  }
-
-  ngOnInit() {
-    // console.log('creating ol.layer.VectorTile instance with:', this);
-    this.instance = new VectorTile(this);
-    super.ngOnInit();
-  }
-
-  ngOnChanges(changes: SimpleChanges) {
-    super.ngOnChanges(changes);
-  }
-}
--- a/projects/ngx-openlayers/src/lib/map.component.ts
+++ b/projects/ngx-openlayers/src/lib/map.component.ts
@ -1,122 +0,0 @@
-import {
-  AfterViewInit,
-  Component,
-  ElementRef,
-  EventEmitter,
-  Input,
-  OnChanges,
-  OnInit,
-  Output,
-  SimpleChanges,
-} from '@angular/core';
-import Map from 'ol/Map';
-import MapBrowserEvent from 'ol/MapBrowserEvent';
-import MapEvent from 'ol/MapEvent';
-import ObjectEvent from 'ol/Object';
-import { Control } from 'ol/control';
-import { Interaction } from 'ol/interaction';
-import RenderEvent from 'ol/render/Event';
-
-@Component({
-  selector: 'aol-map',
-  template: `
-    <div [style.width]="width" [style.height]="height"></div>
-    <ng-content></ng-content>
-  `,
-})
-export class MapComponent implements OnInit, AfterViewInit, OnChanges {
-  @Input()
-  width = '100%';
-  @Input()
-  height = '100%';
-  @Input()
-  pixelRatio: number;
-  @Input()
-  keyboardEventTarget: Element | string;
-  @Input()
-  loadTilesWhileAnimating: boolean;
-  @Input()
-  loadTilesWhileInteracting: boolean;
-  @Input()
-  logo: string | boolean;
-  @Input()
-  renderer: 'canvas' | 'webgl';
-
-  @Output()
-  olClick: EventEmitter<MapBrowserEvent>;
-  @Output()
-  dblClick: EventEmitter<MapBrowserEvent>;
-  @Output()
-  moveStart: EventEmitter<MapEvent>;
-  @Output()
-  moveEnd: EventEmitter<MapEvent>;
-  @Output()
-  pointerDrag: EventEmitter<MapBrowserEvent>;
-  @Output()
-  pointerMove: EventEmitter<MapBrowserEvent>;
-  @Output()
-  onpostrender: EventEmitter<RenderEvent>;
-  @Output()
-  postRender: EventEmitter<MapEvent>;
-  @Output()
-  onprerender: EventEmitter<RenderEvent>;
-  @Output()
-  propertyChange: EventEmitter<ObjectEvent>;
-  @Output()
-  singleClick: EventEmitter<MapBrowserEvent>;
-
-  instance: Map;
-  componentType = 'map';
-  // we pass empty arrays to not get default controls/interactions because we have our own directives
-  controls: Control[] = [];
-  interactions: Interaction[] = [];
-
-  constructor(private host: ElementRef) {
-    this.olClick = new EventEmitter<MapBrowserEvent>();
-    this.dblClick = new EventEmitter<MapBrowserEvent>();
-    this.moveStart = new EventEmitter<MapEvent>();
-    this.moveEnd = new EventEmitter<MapEvent>();
-    this.pointerDrag = new EventEmitter<MapBrowserEvent>();
-    this.pointerMove = new EventEmitter<MapBrowserEvent>();
-    this.onpostrender = new EventEmitter<RenderEvent>();
-    this.postRender = new EventEmitter<MapEvent>();
-    this.onprerender = new EventEmitter<RenderEvent>();
-    this.propertyChange = new EventEmitter<ObjectEvent>();
-    this.singleClick = 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.olClick.emit(event));
-    this.instance.on('dblclick', (event: MapBrowserEvent) => this.dblClick.emit(event));
-    this.instance.on('movestart', (event: MapEvent) => this.moveStart.emit(event));
-    this.instance.on('moveend', (event: MapEvent) => this.moveEnd.emit(event));
-    this.instance.on('pointerdrag', (event: MapBrowserEvent) => this.pointerDrag.emit(event));
-    this.instance.on('pointermove', (event: MapBrowserEvent) => this.pointerMove.emit(event));
-    this.instance.on('postrender', (event: RenderEvent) => this.onpostrender.emit(event));
-    this.instance.on('postrender', (event: MapEvent) => this.postRender.emit(event));
-    this.instance.on('prerender', (event: RenderEvent) => this.onprerender.emit(event));
-    this.instance.on('propertychange', (event: ObjectEvent) => this.propertyChange.emit(event));
-    this.instance.on('singleclick', (event: MapBrowserEvent) => this.singleClick.emit(event));
-  }
-
-  ngOnChanges(changes: SimpleChanges) {
-    const properties: { [index: string]: any } = {};
-    if (!this.instance) {
-      return;
-    }
-    for (const key in changes) {
-      if (changes.hasOwnProperty(key)) {
-        properties[key] = changes[key].currentValue;
-      }
-    }
-    // console.log('changes detected in aol-map, setting new properties: ', properties);
-    this.instance.setProperties(properties, false);
-  }
-
-  ngAfterViewInit() {
-    this.instance.updateSize();
-  }
-}
--- a/projects/ngx-openlayers/src/lib/overlay.component.ts
+++ b/projects/ngx-openlayers/src/lib/overlay.component.ts
@ -1,51 +0,0 @@
-import { Component, ContentChild, Input, OnDestroy, OnInit } from '@angular/core';
-import { Overlay, PanOptions } from 'ol';
-import OverlayPositioning from 'ol/OverlayPositioning';
-import { ContentComponent } from './content.component';
-import { MapComponent } from './map.component';
-
-@Component({
-  selector: 'aol-overlay',
-  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: OverlayPositioning | string;
-  @Input()
-  stopEvent: boolean;
-  @Input()
-  insertFirst: boolean;
-  @Input()
-  autoPan: boolean;
-  @Input()
-  autoPanAnimation: PanOptions;
-  @Input()
-  autoPanMargin: number;
-
-  componentType = 'overlay';
-  instance: Overlay;
-  element: Element;
-
-  constructor(private map: MapComponent) {}
-
-  ngOnInit() {
-    if (this.content) {
-      this.element = this.content.elementRef.nativeElement;
-      this.instance = new Overlay(this);
-      this.map.instance.addOverlay(this.instance);
-    }
-  }
-
-  ngOnDestroy() {
-    if (this.instance) {
-      this.map.instance.removeOverlay(this.instance);
-    }
-  }
-}
--- a/projects/ngx-openlayers/src/lib/sources/bingmaps.component.ts
+++ b/projects/ngx-openlayers/src/lib/sources/bingmaps.component.ts
@ -1,42 +0,0 @@
-import { Component, Host, Input, OnInit, forwardRef } from '@angular/core';
-import { LoadFunction } from 'ol/Tile';
-import { BingMaps } from 'ol/source';
-import { LayerTileComponent } from '../layers/layertile.component';
-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 {
-  @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: LoadFunction;
-  @Input()
-  wrapX: boolean;
-
-  instance: BingMaps;
-
-  constructor(@Host() layer: LayerTileComponent) {
-    super(layer);
-  }
-
-  ngOnInit() {
-    this.instance = new BingMaps(this);
-    this.host.instance.setSource(this.instance);
-  }
-}
--- a/projects/ngx-openlayers/src/lib/sources/cluster.component.ts
+++ b/projects/ngx-openlayers/src/lib/sources/cluster.component.ts
@ -1,53 +0,0 @@
-import {
-  AfterContentInit,
-  Component,
-  ContentChild,
-  forwardRef,
-  Host,
-  Input,
-  OnChanges,
-  SimpleChanges,
-} from '@angular/core';
-import { Feature } from 'ol';
-import { Point } from 'ol/geom';
-import { Cluster, Vector } from 'ol/source';
-
-import { LayerVectorComponent } from '../layers/layervector.component';
-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, OnChanges {
-  @Input()
-  distance: number;
-  @Input()
-  geometryFunction?: (feature: Feature) => Point;
-  @Input()
-  wrapX?: boolean;
-
-  @ContentChild(SourceVectorComponent)
-  sourceVectorComponent: SourceVectorComponent;
-  source: Vector;
-  instance: Cluster;
-
-  constructor(@Host() layer: LayerVectorComponent) {
-    super(layer);
-  }
-
-  ngAfterContentInit() {
-    this.source = this.sourceVectorComponent.instance;
-
-    this.instance = new Cluster(this);
-    this.host.instance.setSource(this.instance);
-  }
-
-  ngOnChanges(changes: SimpleChanges) {
-    if (this.instance && changes.hasOwnProperty('distance')) {
-      this.instance.setDistance(this.distance);
-    }
-  }
-}
--- a/projects/ngx-openlayers/src/lib/sources/geojson.component.ts
+++ b/projects/ngx-openlayers/src/lib/sources/geojson.component.ts
@ -1,36 +0,0 @@
-import { Component, Host, Input, OnInit, forwardRef } from '@angular/core';
-import { Feature } from 'ol';
-import { GeoJSON } from 'ol/format';
-import { ProjectionLike } from 'ol/proj';
-import { Vector } from 'ol/source';
-import { LayerVectorComponent } from '../layers/layervector.component';
-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 {
-  @Input()
-  defaultDataProjection: ProjectionLike;
-  @Input()
-  featureProjection: ProjectionLike;
-  @Input()
-  geometryName: string;
-  @Input()
-  url: string;
-
-  instance: Vector;
-  format: Feature;
-
-  constructor(@Host() layer: LayerVectorComponent) {
-    super(layer);
-  }
-
-  ngOnInit() {
-    this.format = new GeoJSON(this);
-    this.instance = new Vector(this);
-    this.host.instance.setSource(this.instance);
-  }
-}
--- a/projects/ngx-openlayers/src/lib/sources/imagearcgisrest.component.ts
+++ b/projects/ngx-openlayers/src/lib/sources/imagearcgisrest.component.ts
@ -1,62 +0,0 @@
-import {
-  Component,
-  EventEmitter,
-  forwardRef,
-  Host,
-  Input,
-  OnChanges,
-  OnInit,
-  Output,
-  SimpleChanges,
-} from '@angular/core';
-import { LoadFunction } from 'ol/Image';
-import { ProjectionLike } from 'ol/proj';
-import { ImageArcGISRest } from 'ol/source';
-import { ImageSourceEvent } from 'ol/source/Image';
-import { AttributionLike } from 'ol/source/Source';
-import { LayerImageComponent } from '../layers/layerimage.component';
-import { SourceComponent } from './source.component';
-
-@Component({
-  selector: 'aol-source-imagearcgisrest',
-  template: ` <ng-content></ng-content> `,
-  providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceImageArcGISRestComponent) }],
-})
-export class SourceImageArcGISRestComponent extends SourceComponent implements OnInit, OnChanges {
-  @Input() projection: ProjectionLike | string;
-  @Input() url: string;
-  @Input() attributions: AttributionLike[];
-  @Input() crossOrigin?: string;
-  @Input() imageLoadFunction?: LoadFunction;
-  @Input() params?: { [k: string]: any };
-  @Input() ratio = 1.5;
-  @Input() resolutions?: number[];
-  @Input() wrapX?: boolean;
-
-  @Output()
-  imageLoadStart = new EventEmitter<ImageSourceEvent>();
-  @Output()
-  imageLoadEnd = new EventEmitter<ImageSourceEvent>();
-  @Output()
-  imageLoadError = new EventEmitter<ImageSourceEvent>();
-
-  instance: ImageArcGISRest;
-
-  constructor(@Host() layer: LayerImageComponent) {
-    super(layer);
-  }
-
-  ngOnInit() {
-    this.instance = new ImageArcGISRest(this);
-    this.host.instance.setSource(this.instance);
-    this.instance.on('imageloadstart', (event: ImageSourceEvent) => this.imageLoadStart.emit(event));
-    this.instance.on('imageloadend', (event: ImageSourceEvent) => this.imageLoadEnd.emit(event));
-    this.instance.on('imageloaderror', (event: ImageSourceEvent) => this.imageLoadError.emit(event));
-  }
-
-  ngOnChanges(changes: SimpleChanges) {
-    if (this.instance && changes.hasOwnProperty('params')) {
-      this.instance.updateParams(this.params);
-    }
-  }
-}
--- a/projects/ngx-openlayers/src/lib/sources/imagestatic.component.ts
+++ b/projects/ngx-openlayers/src/lib/sources/imagestatic.component.ts
@ -1,88 +0,0 @@
-import {
-  Component,
-  EventEmitter,
-  Host,
-  Input,
-  OnChanges,
-  OnInit,
-  Output,
-  SimpleChanges,
-  forwardRef,
-} from '@angular/core';
-import { LoadFunction } from 'ol/Image';
-import { Extent } from 'ol/extent';
-import { ProjectionLike } from 'ol/proj';
-import { Size } from 'ol/size';
-import { ImageStatic } from 'ol/source';
-import { ImageSourceEvent } from 'ol/source/Image';
-import { AttributionLike } from 'ol/source/Source';
-import { LayerImageComponent } from '../layers/layerimage.component';
-import { SourceComponent } from './source.component';
-
-@Component({
-  selector: 'aol-source-imagestatic',
-  template: ` <ng-content></ng-content> `,
-  providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceImageStaticComponent) }],
-})
-export class SourceImageStaticComponent extends SourceComponent implements OnInit, OnChanges {
-  @Input()
-  projection: ProjectionLike | string;
-  @Input()
-  imageExtent: Extent;
-  @Input()
-  url: string;
-  @Input()
-  attributions: AttributionLike;
-  @Input()
-  crossOrigin?: string;
-  @Input()
-  imageLoadFunction?: LoadFunction;
-  @Input()
-  imageSize?: Size;
-
-  @Output()
-  imageLoadStart = new EventEmitter<ImageSourceEvent>();
-  @Output()
-  imageLoadEnd = new EventEmitter<ImageSourceEvent>();
-  @Output()
-  imageLoadError = new EventEmitter<ImageSourceEvent>();
-
-  instance: ImageStatic;
-
-  constructor(@Host() layer: LayerImageComponent) {
-    super(layer);
-  }
-
-  setLayerSource(): void {
-    this.instance = new ImageStatic(this);
-    this.host.instance.setSource(this.instance);
-    this.instance.on('imageloadstart', (event: ImageSourceEvent) => this.imageLoadStart.emit(event));
-    this.instance.on('imageloadend', (event: ImageSourceEvent) => this.imageLoadEnd.emit(event));
-    this.instance.on('imageloaderror', (event: ImageSourceEvent) => this.imageLoadError.emit(event));
-  }
-
-  ngOnInit() {
-    this.setLayerSource();
-  }
-
-  ngOnChanges(changes: SimpleChanges) {
-    const properties: { [index: string]: any } = {};
-    if (!this.instance) {
-      return;
-    }
-    for (const 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);
-  }
-}
--- a/projects/ngx-openlayers/src/lib/sources/imagewms.component.ts
+++ b/projects/ngx-openlayers/src/lib/sources/imagewms.component.ts
@ -1,73 +0,0 @@
-import {
-  Component,
-  Host,
-  Input,
-  OnChanges,
-  OnInit,
-  forwardRef,
-  SimpleChanges,
-  Output,
-  EventEmitter,
-} from '@angular/core';
-import { ImageWMS } from 'ol/source';
-import { LayerImageComponent } from '../layers/layerimage.component';
-import { SourceComponent } from './source.component';
-import { ProjectionLike } from 'ol/proj';
-import { AttributionLike } from 'ol/source/Source';
-import { LoadFunction } from 'ol/Image';
-import { ImageSourceEvent } from 'ol/source/Image';
-
-@Component({
-  selector: 'aol-source-imagewms',
-  template: ` <ng-content></ng-content> `,
-  providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceImageWMSComponent) }],
-})
-export class SourceImageWMSComponent extends SourceComponent implements OnChanges, OnInit {
-  @Input()
-  attributions: AttributionLike;
-  @Input()
-  crossOrigin: string;
-  @Input()
-  hidpi: boolean;
-  @Input()
-  serverType: string;
-  @Input()
-  imageLoadFunction?: LoadFunction;
-  @Input()
-  params: { [key: string]: any };
-  @Input()
-  projection: ProjectionLike | string;
-  @Input()
-  ratio: number;
-  @Input()
-  resolutions: Array<number>;
-  @Input()
-  url: string;
-
-  @Output()
-  imageLoadStart = new EventEmitter<ImageSourceEvent>();
-  @Output()
-  imageLoadEnd = new EventEmitter<ImageSourceEvent>();
-  @Output()
-  imageLoadError = new EventEmitter<ImageSourceEvent>();
-
-  instance: ImageWMS;
-
-  constructor(@Host() layer: LayerImageComponent) {
-    super(layer);
-  }
-
-  ngOnInit() {
-    this.instance = new ImageWMS(this);
-    this.host.instance.setSource(this.instance);
-    this.instance.on('imageloadstart', (event: ImageSourceEvent) => this.imageLoadStart.emit(event));
-    this.instance.on('imageloadend', (event: ImageSourceEvent) => this.imageLoadEnd.emit(event));
-    this.instance.on('imageloaderror', (event: ImageSourceEvent) => this.imageLoadError.emit(event));
-  }
-
-  ngOnChanges(changes: SimpleChanges) {
-    if (this.instance && changes.hasOwnProperty('params')) {
-      this.instance.updateParams(this.params);
-    }
-  }
-}
--- a/projects/ngx-openlayers/src/lib/sources/osm.component.ts
+++ b/projects/ngx-openlayers/src/lib/sources/osm.component.ts
@ -1,64 +0,0 @@
-import { AfterContentInit, Component, EventEmitter, forwardRef, Host, Input, Optional, Output } from '@angular/core';
-import { OSM } from 'ol/source';
-import { AttributionLike } from 'ol/source/Source';
-import { TileSourceEvent } from 'ol/source/Tile';
-import { LoadFunction } from 'ol/Tile';
-import { LayerTileComponent } from '../layers/layertile.component';
-import { SourceComponent } from './source.component';
-import { SourceXYZComponent } from './xyz.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 {
-  @Input()
-  attributions: AttributionLike;
-  @Input()
-  cacheSize: number;
-  @Input()
-  crossOrigin: string;
-  @Input()
-  maxZoom: number;
-  @Input()
-  opaque: boolean;
-  @Input()
-  reprojectionErrorThreshold: number;
-  @Input()
-  tileLoadFunction: LoadFunction;
-  @Input()
-  url: string;
-  @Input()
-  wrapX: boolean;
-
-  @Output()
-  tileLoadStart: EventEmitter<TileSourceEvent> = new EventEmitter<TileSourceEvent>();
-  @Output()
-  tileLoadEnd: EventEmitter<TileSourceEvent> = new EventEmitter<TileSourceEvent>();
-  @Output()
-  tileLoadError: EventEmitter<TileSourceEvent> = new EventEmitter<TileSourceEvent>();
-
-  instance: OSM;
-
-  constructor(
-    @Optional()
-    @Host()
-    protected layer?: LayerTileComponent
-  ) {
-    super(layer);
-  }
-
-  ngAfterContentInit() {
-    if (this.tileGridXYZ) {
-      this.tileGrid = this.tileGridXYZ.instance;
-    }
-
-    this.instance = new OSM(this);
-
-    this.instance.on('tileloadstart', (event: TileSourceEvent) => this.tileLoadStart.emit(event));
-    this.instance.on('tileloadend', (event: TileSourceEvent) => this.tileLoadEnd.emit(event));
-    this.instance.on('tileloaderror', (event: TileSourceEvent) => this.tileLoadError.emit(event));
-    this._register(this.instance);
-  }
-}
--- a/projects/ngx-openlayers/src/lib/sources/raster.component.ts
+++ b/projects/ngx-openlayers/src/lib/sources/raster.component.ts
@ -1,68 +0,0 @@
-import {
-  AfterContentInit,
-  Component,
-  ContentChild,
-  EventEmitter,
-  forwardRef,
-  Host,
-  Input,
-  Output,
-} from '@angular/core';
-import { Raster, Source } from 'ol/source';
-import { Operation, RasterOperationType, RasterSourceEvent } from 'ol/source/Raster';
-
-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 {
-  @Input()
-  operation?: Operation;
-  @Input()
-  threads?: number;
-  @Input()
-  lib?: any;
-  @Input()
-  operationType?: RasterOperationType;
-
-  @Output()
-  beforeOperations: EventEmitter<RasterSourceEvent> = new EventEmitter<RasterSourceEvent>();
-  @Output()
-  afterOperations: EventEmitter<RasterSourceEvent> = new EventEmitter<RasterSourceEvent>();
-
-  instance: Raster;
-  sources: Source[] = [];
-
-  constructor(@Host() layer: LayerImageComponent) {
-    super(layer);
-  }
-
-  @ContentChild(SourceComponent)
-  set source(sourceComponent: SourceComponent) {
-    this.sources = [sourceComponent.instance];
-    if (this.instance) {
-      // Openlayer doesn't handle sources update. Just recreate Raster instance.
-      this.init();
-    }
-  }
-
-  ngAfterContentInit() {
-    this.init();
-  }
-
-  init() {
-    this.instance = new Raster(this);
-    this.instance.on('beforeoperations', (event: RasterSourceEvent) => this.beforeOperations.emit(event));
-    this.instance.on('afteroperations', (event: RasterSourceEvent) => this.afterOperations.emit(event));
-    this._register(this.instance);
-  }
-}
--- a/projects/ngx-openlayers/src/lib/sources/source.component.ts
+++ b/projects/ngx-openlayers/src/lib/sources/source.component.ts
@ -1,27 +0,0 @@
-import { Directive, Input, OnDestroy } from '@angular/core';
-import { Source } from 'ol';
-
-import { LayerComponent } from '../layers/layer.component';
-
-@Directive()
-export abstract class SourceComponent implements OnDestroy {
-  @Input()
-  attributions: any;
-
-  public instance: Source;
-  public componentType = 'source';
-
-  constructor(protected host: LayerComponent) {}
-
-  ngOnDestroy() {
-    if (this.host && this.host.instance) {
-      this.host.instance.setSource(null);
-    }
-  }
-
-  protected _register(s: Source) {
-    if (this.host) {
-      this.host.instance.setSource(s);
-    }
-  }
-}
--- a/projects/ngx-openlayers/src/lib/sources/tilejson.component.ts
+++ b/projects/ngx-openlayers/src/lib/sources/tilejson.component.ts
@ -1,25 +0,0 @@
-import { Component, Host, Input, OnInit, forwardRef } from '@angular/core';
-import { TileJSON } from 'ol/source';
-import { LayerTileComponent } from '../layers/layertile.component';
-import { SourceComponent } from './source.component';
-
-@Component({
-  selector: 'aol-source-tilejson',
-  template: ` <ng-content></ng-content> `,
-  providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceTileJSONComponent) }],
-})
-export class SourceTileJSONComponent extends SourceComponent implements OnInit {
-  @Input()
-  url: string;
-
-  instance: TileJSON;
-
-  constructor(@Host() layer: LayerTileComponent) {
-    super(layer);
-  }
-
-  ngOnInit() {
-    this.instance = new TileJSON(this);
-    this.host.instance.setSource(this.instance);
-  }
-}
--- a/projects/ngx-openlayers/src/lib/sources/tilewms.component.ts
+++ b/projects/ngx-openlayers/src/lib/sources/tilewms.component.ts
@ -1,57 +0,0 @@
-import { Component, Host, Input, OnChanges, OnInit, forwardRef, SimpleChanges } from '@angular/core';
-import { LayerTileComponent } from '../layers/layertile.component';
-import { SourceComponent } from './source.component';
-import { TileWMS } from 'ol/source';
-import { TileGrid } from 'ol/tilegrid';
-import { LoadFunction } from 'ol/Tile';
-
-@Component({
-  selector: 'aol-source-tilewms',
-  template: ` <ng-content></ng-content> `,
-  providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceTileWMSComponent) }],
-})
-export class SourceTileWMSComponent extends SourceComponent implements OnChanges, OnInit {
-  @Input()
-  cacheSize: number;
-  @Input()
-  crossOrigin: string;
-  @Input()
-  gutter: number;
-  @Input()
-  hidpi: boolean;
-  @Input()
-  params: { [key: string]: any };
-  @Input()
-  projection: string;
-  @Input()
-  reprojectionErrorThreshold: number;
-  @Input()
-  serverType: string;
-  @Input()
-  tileGrid: TileGrid;
-  @Input()
-  tileLoadFunction: LoadFunction;
-  @Input()
-  url: string;
-  @Input()
-  urls: string[];
-  @Input()
-  wrapX: boolean;
-
-  instance: TileWMS;
-
-  constructor(@Host() layer: LayerTileComponent) {
-    super(layer);
-  }
-
-  ngOnInit() {
-    this.instance = new TileWMS(this);
-    this.host.instance.setSource(this.instance);
-  }
-
-  ngOnChanges(changes: SimpleChanges) {
-    if (this.instance && changes.hasOwnProperty('params')) {
-      this.instance.updateParams(this.params);
-    }
-  }
-}
--- a/projects/ngx-openlayers/src/lib/sources/tilewmts.component.ts
+++ b/projects/ngx-openlayers/src/lib/sources/tilewmts.component.ts
@ -1,117 +0,0 @@
-import {
-  Component,
-  Host,
-  Input,
-  forwardRef,
-  AfterContentInit,
-  ContentChild,
-  SimpleChanges,
-  OnChanges,
-  Output,
-  EventEmitter,
-} from '@angular/core';
-import { LayerTileComponent } from '../layers/layertile.component';
-import { SourceComponent } from './source.component';
-import { TileGridWMTSComponent } from '../tilegridwmts.component';
-import { WMTS } from 'ol/source';
-import { WMTS as TileGridWMTS } from 'ol/tilegrid';
-import { WMTSRequestEncoding } from 'ol/source';
-import { ProjectionLike } from 'ol/proj';
-import { LoadFunction } from 'ol/Tile';
-import { TileSourceEvent } from 'ol/source/Tile';
-
-@Component({
-  selector: 'aol-source-tilewmts',
-  template: ` <ng-content></ng-content> `,
-  providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceTileWMTSComponent) }],
-})
-export class SourceTileWMTSComponent extends SourceComponent implements AfterContentInit, OnChanges {
-  @Input()
-  cacheSize?: number;
-  @Input()
-  crossOrigin?: string;
-  @Input()
-  tileGrid: TileGridWMTS;
-  @Input()
-  projection: ProjectionLike;
-  @Input()
-  reprojectionErrorThreshold?: number;
-  @Input()
-  requestEncoding?: WMTSRequestEncoding | string;
-  @Input()
-  layer: string;
-  @Input()
-  style: string;
-  @Input()
-  tileClass?: any;
-  @Input()
-  tilePixelRatio?: number;
-  @Input()
-  version?: string;
-  @Input()
-  format?: string;
-  @Input()
-  matrixSet: string;
-  @Input()
-  dimensions?: any;
-  @Input()
-  url?: string;
-  @Input()
-  tileLoadFunction?: LoadFunction;
-  @Input()
-  urls?: string[];
-  @Input()
-  wrapX?: boolean;
-
-  @Output()
-  tileLoadStart: EventEmitter<TileSourceEvent> = new EventEmitter<TileSourceEvent>();
-  @Output()
-  tileLoadEnd: EventEmitter<TileSourceEvent> = new EventEmitter<TileSourceEvent>();
-  @Output()
-  tileLoadError: EventEmitter<TileSourceEvent> = new EventEmitter<TileSourceEvent>();
-
-  @ContentChild(TileGridWMTSComponent)
-  tileGridWMTS: TileGridWMTSComponent;
-
-  instance: WMTS;
-
-  constructor(@Host() layer: LayerTileComponent) {
-    super(layer);
-  }
-
-  ngOnChanges(changes: SimpleChanges) {
-    const properties: { [index: string]: any } = {};
-    if (!this.instance) {
-      return;
-    }
-    for (const 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 WMTS(this);
-    this.instance.on('tileloadstart', (event: TileSourceEvent) => this.tileLoadStart.emit(event));
-    this.instance.on('tileloadend', (event: TileSourceEvent) => this.tileLoadEnd.emit(event));
-    this.instance.on('tileloaderror', (event: TileSourceEvent) => this.tileLoadError.emit(event));
-    this.host.instance.setSource(this.instance);
-  }
-
-  ngAfterContentInit(): void {
-    if (this.tileGridWMTS) {
-      this.tileGrid = this.tileGridWMTS.instance;
-      this.setLayerSource();
-    }
-  }
-}
--- a/projects/ngx-openlayers/src/lib/sources/utfgrid.component.ts
+++ b/projects/ngx-openlayers/src/lib/sources/utfgrid.component.ts
@ -1,25 +0,0 @@
-import { Component, Host, Input, OnInit, forwardRef } from '@angular/core';
-import { SourceComponent } from './source.component';
-import { LayerTileComponent } from '../layers/layertile.component';
-import { UTFGrid } from 'ol/source';
-
-@Component({
-  selector: 'aol-source-utfgrid',
-  template: ` <ng-content></ng-content> `,
-  providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceUTFGridComponent) }],
-})
-export class SourceUTFGridComponent extends SourceComponent implements OnInit {
-  @Input() tileJSON: JSON;
-  @Input() url: string;
-
-  instance: UTFGrid;
-
-  constructor(@Host() layer: LayerTileComponent) {
-    super(layer);
-  }
-
-  ngOnInit() {
-    this.instance = new UTFGrid(this);
-    this.host.instance.setSource(this.instance);
-  }
-}
--- a/projects/ngx-openlayers/src/lib/sources/vector.component.ts
+++ b/projects/ngx-openlayers/src/lib/sources/vector.component.ts
@ -1,37 +0,0 @@
-import { Component, Host, Input, OnInit, forwardRef } from '@angular/core';
-import { Vector } from 'ol/source';
-import Feature from 'ol/format/Feature';
-import { LayerVectorComponent } from '../layers/layervector.component';
-import { SourceComponent } from './source.component';
-import { LoadingStrategy } from 'ol/source/Vector';
-
-@Component({
-  selector: 'aol-source-vector',
-  template: ` <ng-content></ng-content> `,
-  providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceVectorComponent) }],
-})
-export class SourceVectorComponent extends SourceComponent implements OnInit {
-  @Input()
-  overlaps: boolean;
-  @Input()
-  useSpatialIndex: boolean;
-  @Input()
-  wrapX: boolean;
-  @Input()
-  url: string;
-  @Input()
-  format: Feature;
-  @Input()
-  strategy: LoadingStrategy;
-
-  instance: Vector;
-
-  constructor(@Host() layer: LayerVectorComponent) {
-    super(layer);
-  }
-
-  ngOnInit() {
-    this.instance = new Vector(this);
-    this.host.instance.setSource(this.instance);
-  }
-}
--- a/projects/ngx-openlayers/src/lib/sources/vectortile.component.ts
+++ b/projects/ngx-openlayers/src/lib/sources/vectortile.component.ts
@ -1,57 +0,0 @@
-import { Component, Host, Input, forwardRef, ContentChild, AfterContentInit } from '@angular/core';
-import { VectorTile } from 'ol';
-import Feature from 'ol/format/Feature';
-import TileGrid from 'ol/tilegrid/TileGrid';
-import { LayerVectorTileComponent } from '../layers/layervectortile.component';
-import { FormatComponent } from '../formats/format.component';
-import { TileGridComponent } from '../tilegrid.component';
-import { SourceComponent } from './source.component';
-import { ProjectionLike } from 'ol/proj';
-import { UrlFunction } from 'ol/Tile';
-
-@Component({
-  selector: 'aol-source-vectortile',
-  template: ` <ng-content></ng-content> `,
-  providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceVectorTileComponent) }],
-})
-export class SourceVectorTileComponent extends SourceComponent implements AfterContentInit {
-  @Input()
-  cacheSize: number;
-  @Input()
-  overlaps: boolean;
-  @Input()
-  projection: ProjectionLike;
-  @Input()
-  tilePixelRatio: number;
-  @Input()
-  tileUrlFunction: UrlFunction;
-  @Input()
-  url: string;
-  @Input()
-  urls: string[];
-  @Input()
-  wrapX: boolean;
-
-  @ContentChild(FormatComponent)
-  formatComponent: FormatComponent;
-  @ContentChild(TileGridComponent)
-  tileGridComponent: TileGridComponent;
-
-  format: Feature;
-  tileGrid: TileGrid;
-
-  instance: VectorTile;
-
-  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 VectorTile(this);
-    this.host.instance.setSource(this.instance);
-  }
-}
--- a/projects/ngx-openlayers/src/lib/sources/xyz.component.ts
+++ b/projects/ngx-openlayers/src/lib/sources/xyz.component.ts
@ -1,115 +0,0 @@
-import {
-  AfterContentInit,
-  Component,
-  ContentChild,
-  EventEmitter,
-  forwardRef,
-  Host,
-  Input,
-  OnChanges,
-  Optional,
-  Output,
-  SimpleChanges,
-} from '@angular/core';
-import { Size } from 'ol/size';
-import { XYZ } from 'ol/source';
-import { TileSourceEvent } from 'ol/source/Tile';
-import { LoadFunction, UrlFunction } from 'ol/Tile';
-import TileGrid from 'ol/tilegrid/TileGrid';
-
-import { LayerTileComponent } from '../layers/layertile.component';
-import { TileGridComponent } from '../tilegrid.component';
-import { SourceComponent } from './source.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 {
-  @Input()
-  cacheSize: number;
-  @Input()
-  crossOrigin: string;
-  @Input()
-  opaque: boolean;
-  @Input()
-  projection: string;
-  @Input()
-  reprojectionErrorThreshold: number;
-  @Input()
-  minZoom: number;
-  @Input()
-  maxZoom: number;
-  @Input()
-  tileGrid: TileGrid;
-  @Input()
-  tileLoadFunction?: LoadFunction;
-  @Input()
-  tilePixelRatio: number;
-  @Input()
-  tileSize: number | Size;
-  @Input()
-  tileUrlFunction?: UrlFunction;
-  @Input()
-  url: string;
-  @Input()
-  urls: string[];
-  @Input()
-  wrapX: boolean;
-
-  @ContentChild(TileGridComponent)
-  tileGridXYZ: TileGridComponent;
-
-  @Output()
-  tileLoadStart: EventEmitter<TileSourceEvent> = new EventEmitter<TileSourceEvent>();
-  @Output()
-  tileLoadEnd: EventEmitter<TileSourceEvent> = new EventEmitter<TileSourceEvent>();
-  @Output()
-  tileLoadError: EventEmitter<TileSourceEvent> = new EventEmitter<TileSourceEvent>();
-
-  instance: XYZ;
-
-  constructor(
-    @Optional()
-    @Host()
-    protected layer?: LayerTileComponent
-  ) {
-    super(layer);
-  }
-
-  ngAfterContentInit() {
-    if (this.tileGridXYZ) {
-      this.tileGrid = this.tileGridXYZ.instance;
-    }
-    this.init();
-  }
-
-  ngOnChanges(changes: SimpleChanges) {
-    const properties: { [index: string]: any } = {};
-
-    if (!this.instance) {
-      return;
-    }
-    for (const key in changes) {
-      if (changes.hasOwnProperty(key)) {
-        properties[key] = changes[key].currentValue;
-      }
-    }
-
-    this.instance.setProperties(properties, false);
-    if (changes.hasOwnProperty('url')) {
-      this.init();
-    }
-  }
-
-  init() {
-    this.instance = new XYZ(this);
-
-    this.instance.on('tileloadstart', (event: TileSourceEvent) => this.tileLoadStart.emit(event));
-    this.instance.on('tileloadend', (event: TileSourceEvent) => this.tileLoadEnd.emit(event));
-    this.instance.on('tileloaderror', (event: TileSourceEvent) => this.tileLoadError.emit(event));
-
-    this._register(this.instance);
-  }
-}
--- a/projects/ngx-openlayers/src/lib/styles/circle.component.ts
+++ b/projects/ngx-openlayers/src/lib/styles/circle.component.ts
@ -1,60 +0,0 @@
-import { Component, Input, Host, AfterContentInit, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
-import { AtlasManager, Circle, Fill, Stroke } from 'ol/style';
-import { StyleComponent } from './style.component';
-
-@Component({
-  selector: 'aol-style-circle',
-  template: ` <ng-content></ng-content> `,
-})
-export class StyleCircleComponent implements AfterContentInit, OnChanges, OnDestroy {
-  @Input()
-  fill: Fill;
-  @Input()
-  radius: number;
-  @Input()
-  snapToPixel: boolean;
-  @Input()
-  stroke: Stroke;
-  @Input()
-  atlasManager: AtlasManager;
-
-  componentType = 'style-circle';
-  instance: Circle;
-
-  constructor(@Host() private host: StyleComponent) {}
-
-  /**
-   * WORK-AROUND: since the re-rendering is not triggered on style change
-   * we trigger a radius change.
-   * see openlayers #6233 and #5775
-   */
-  update() {
-    if (!!this.instance) {
-      // console.log('setting ol.style.Circle instance\'s radius');
-      this.instance.setRadius(this.radius);
-    }
-    this.host.update();
-  }
-
-  ngAfterContentInit() {
-    // console.log('creating ol.style.Circle instance with: ', this);
-    this.instance = new Circle(this);
-    this.host.instance.setImage(this.instance);
-    this.host.update();
-  }
-
-  ngOnChanges(changes: SimpleChanges) {
-    if (!this.instance) {
-      return;
-    }
-    if (changes.radius) {
-      this.instance.setRadius(changes.radius.currentValue);
-    }
-    // console.log('changes detected in aol-style-circle, setting new radius: ', changes['radius'].currentValue);
-  }
-
-  ngOnDestroy() {
-    // console.log('removing aol-style-circle');
-    this.host.instance.setImage(null);
-  }
-}
--- a/projects/ngx-openlayers/src/lib/styles/fill.component.ts
+++ b/projects/ngx-openlayers/src/lib/styles/fill.component.ts
@ -1,70 +0,0 @@
-import { Component, Input, Optional, OnInit, OnChanges, SimpleChanges } from '@angular/core';
-import { Fill } from 'ol/style';
-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> `,
-})
-export class StyleFillComponent implements OnInit, OnChanges {
-  @Input()
-  color: Color | ColorLike;
-
-  instance: Fill;
-  /* the typings do not have the setters */
-  private host: /*StyleComponent|StyleCircleComponent|StyleTextComponent*/ any;
-
-  constructor(
-    @Optional() styleHost: StyleComponent,
-    @Optional() styleCircleHost: StyleCircleComponent,
-    @Optional() styleTextHost: StyleTextComponent
-  ) {
-    if (!styleHost) {
-      throw new Error('aol-style-stroke must be a descendant of aol-style');
-    }
-    if (!!styleTextHost) {
-      this.host = styleTextHost;
-    } else if (!!styleCircleHost) {
-      this.host = styleCircleHost;
-    } else {
-      this.host = styleHost;
-    }
-    // console.log('creating aol-style-fill with: ', this);
-  }
-
-  ngOnInit() {
-    // console.log('creating ol.style.Fill instance with: ', this);
-    this.instance = new Fill(this);
-    switch (this.host.componentType) {
-      case 'style':
-        this.host.instance.setFill(this.instance);
-        // console.log('setting ol.style instance\'s fill:', this.host);
-        break;
-      case 'style-text':
-        this.host.instance.setFill(this.instance);
-        break;
-      case 'style-circle':
-        this.host.fill = this.instance;
-        // console.log('setting ol.style.circle instance\'s fill:', this.host);
-        break;
-      default:
-        throw new Error('unknown host type: ' + this.host);
-      // break;
-    }
-  }
-
-  ngOnChanges(changes: SimpleChanges) {
-    if (!this.instance) {
-      return;
-    }
-    if (changes.color) {
-      this.instance.setColor(changes.color.currentValue);
-    }
-    this.host.update();
-    // console.log('changes detected in aol-style-fill, setting new color: ', changes);
-  }
-}
--- a/projects/ngx-openlayers/src/lib/styles/icon.component.ts
+++ b/projects/ngx-openlayers/src/lib/styles/icon.component.ts
@ -1,77 +0,0 @@
-import { Component, Input, Host, OnInit, OnChanges, SimpleChanges } from '@angular/core';
-import { Icon } from 'ol/style';
-import IconAnchorUnits from 'ol/style/IconAnchorUnits';
-import IconOrigin from 'ol/style/IconOrigin';
-import { StyleComponent } from './style.component';
-
-@Component({
-  selector: 'aol-style-icon',
-  template: ` <div class="aol-style-icon"></div> `,
-})
-export class StyleIconComponent implements OnInit, OnChanges {
-  @Input()
-  anchor: [number, number];
-  @Input()
-  anchorXUnits: IconAnchorUnits;
-  @Input()
-  anchorYUnits: IconAnchorUnits;
-  @Input()
-  anchorOrigin: IconOrigin;
-  @Input()
-  color: [number, number, number, number];
-  @Input()
-  crossOrigin: IconOrigin;
-  @Input()
-  img: string;
-  @Input()
-  offset: [number, number];
-  @Input()
-  offsetOrigin: 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;
-
-  instance: Icon;
-
-  constructor(@Host() private host: StyleComponent) {}
-
-  ngOnInit() {
-    // console.log('creating ol.style.Icon instance with: ', this);
-    this.instance = new 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 Icon(this);
-      this.host.instance.setImage(this.instance);
-    }
-    this.host.update();
-    // console.log('changes detected in aol-style-icon: ', changes);
-  }
-}
--- a/projects/ngx-openlayers/src/lib/styles/stroke.component.ts
+++ b/projects/ngx-openlayers/src/lib/styles/stroke.component.ts
@ -1,95 +0,0 @@
-import { Component, Input, Optional, OnInit, OnChanges, SimpleChanges } from '@angular/core';
-import { Stroke } from 'ol/style';
-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> `,
-})
-export class StyleStrokeComponent implements OnInit, OnChanges {
-  @Input()
-  color: Color | ColorLike;
-  @Input()
-  lineCap: string;
-  @Input()
-  lineDash: number[];
-  @Input()
-  lineJoin: string;
-  @Input()
-  miterLimit: number;
-  @Input()
-  width: number;
-
-  instance: Stroke;
-  /* the typings do not have the setters */
-  host: /*StyleComponent|StyleCircleComponent|StyleTextComponent*/ any;
-
-  constructor(
-    @Optional() styleHost: StyleComponent,
-    @Optional() styleCircleHost: StyleCircleComponent,
-    @Optional() styleTextHost: StyleTextComponent
-  ) {
-    if (!styleHost) {
-      throw new Error('aol-style-stroke must be a descendant of aol-style');
-    }
-    if (!!styleTextHost) {
-      this.host = styleTextHost;
-    } else if (!!styleCircleHost) {
-      this.host = styleCircleHost;
-    } else {
-      this.host = styleHost;
-    }
-    // console.log('creating aol-style-stroke with: ', this);
-  }
-
-  ngOnInit() {
-    // console.log('creating ol.style.Stroke instance with: ', this);
-    this.instance = new Stroke(this);
-    switch (this.host.componentType) {
-      case 'style':
-        this.host.instance.setStroke(this.instance);
-        // console.log('setting ol.style instance\'s stroke:', this.host);
-        break;
-      case 'style-text':
-        this.host.instance.setStroke(this.instance);
-        break;
-      case 'style-circle':
-        this.host.stroke = this.instance;
-        // console.log('setting ol.style.circle instance\'s stroke:', this.host);
-        break;
-      default:
-        throw new Error('unknown host type: ' + this.host);
-      // break;
-    }
-  }
-
-  ngOnChanges(changes: SimpleChanges) {
-    if (!this.instance) {
-      return;
-    }
-    if (changes.color) {
-      this.instance.setColor(changes.color.currentValue);
-    }
-    if (changes.lineCap) {
-      this.instance.setLineCap(changes.lineCap.currentValue);
-    }
-    if (changes.lineDash) {
-      this.instance.setLineDash(changes.lineDash.currentValue);
-    }
-    if (changes.lineJoin) {
-      this.instance.setLineJoin(changes.lineJoin.currentValue);
-    }
-    if (changes.miterLimit) {
-      this.instance.setMiterLimit(changes.miterLimit.currentValue);
-    }
-    if (changes.width) {
-      this.instance.setWidth(changes.width.currentValue);
-    }
-    this.host.update();
-    // console.log('changes detected in aol-style-stroke, setting new properties: ', changes);
-  }
-}
--- a/projects/ngx-openlayers/src/lib/styles/style.component.ts
+++ b/projects/ngx-openlayers/src/lib/styles/style.component.ts
@ -1,48 +0,0 @@
-import { Component, Input, Optional, OnInit } from '@angular/core';
-import { Fill, Image, Stroke, Style, Text } from 'ol/style';
-import { Geometry } from 'ol/geom';
-import { FeatureComponent } from '../feature.component';
-import { LayerVectorComponent } from '../layers/layervector.component';
-import { GeometryFunction } from 'ol/style/Style';
-
-@Component({
-  selector: 'aol-style',
-  template: ` <ng-content></ng-content> `,
-})
-export class StyleComponent implements OnInit {
-  @Input()
-  geometry: string | Geometry | GeometryFunction;
-  @Input()
-  fill: Fill;
-  @Input()
-  image: Image;
-  @Input()
-  stroke: Stroke;
-  @Input()
-  text: Text;
-  @Input()
-  zIndex: number;
-
-  instance: Style;
-  componentType = 'style';
-  private host: FeatureComponent | LayerVectorComponent;
-
-  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(this);
-    this.host.instance.setStyle(this.instance);
-  }
-}
--- a/projects/ngx-openlayers/src/lib/styles/text.component.ts
+++ b/projects/ngx-openlayers/src/lib/styles/text.component.ts
@ -1,76 +0,0 @@
-import { Component, Input, Optional, OnInit, OnChanges, SimpleChanges } from '@angular/core';
-import { Text } from 'ol/style';
-import { StyleComponent } from './style.component';
-
-@Component({
-  selector: 'aol-style-text',
-  template: ` <div class="aol-style-text"></div> `,
-})
-export class StyleTextComponent implements OnInit, OnChanges {
-  @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;
-
-  instance: Text;
-  componentType = 'style-text';
-
-  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 Text(this);
-    this.host.instance.setText(this.instance);
-  }
-
-  ngOnChanges(changes: SimpleChanges) {
-    if (!this.instance) {
-      return;
-    }
-    if (changes.font) {
-      this.instance.setFont(changes.font.currentValue);
-    }
-    if (changes.offsetX) {
-      this.instance.setOffsetX(changes.offsetX.currentValue);
-    }
-    if (changes.offsetY) {
-      this.instance.setOffsetY(changes.offsetY.currentValue);
-    }
-    if (changes.scale) {
-      this.instance.setScale(changes.scale.currentValue);
-    }
-    if (changes.rotation) {
-      this.instance.setRotation(changes.rotation.currentValue);
-    }
-    if (changes.text) {
-      this.instance.setText(changes.text.currentValue);
-    }
-    if (changes.textAlign) {
-      this.instance.setTextAlign(changes.textAlign.currentValue);
-    }
-    if (changes.textBaseLine) {
-      this.instance.setTextBaseline(changes.textBaseLine.currentValue);
-    }
-    this.host.update();
-    // console.log('changes detected in aol-style-text, setting new properties: ', changes);
-  }
-}
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Mark van der Wal	35ccb4f4c5	Merge branch 'develop' FarmMaps/FarmMapsLib/pipeline/head This commit looks good Details	2024-04-23 11:54:04 +02:00
jenkins	d6587bd63b	[ci skip] Updated packages #2477 FarmMaps.Develop/FarmMapsLib/pipeline/head Something is wrong with the build of this commit Details	2024-04-15 14:29:22 +00:00
jenkins	ede75f63f5	[ci skip] Updated packages #2463 FarmMaps.Develop/FarmMapsLib/pipeline/head This commit looks good Details	2024-04-10 12:19:34 +00:00
Peter Bastiani	274f33e709	Merge branch 'develop' of https://git.akkerweb.nl/FarmMaps/FarmMapsLib into develop FarmMaps.Develop/FarmMapsLib/pipeline/head This commit looks good Details # Conflicts: # package-lock.json	2024-04-10 14:07:19 +02:00
Peter Bastiani	4384b12944	AW-6046 ng-openlayers	2024-04-10 14:06:44 +02:00
jenkins	10ebdf276a	[ci skip] Updated packages #2460 FarmMaps.Develop/FarmMapsLib/pipeline/head Something is wrong with the build of this commit Details	2024-04-10 11:45:06 +00:00
Peter Bastiani	9c270bfe75	Merge branch 'develop' of https://git.akkerweb.nl/FarmMaps/FarmMapsLib into develop FarmMaps.Develop/FarmMapsLib/pipeline/head This commit looks good Details	2024-04-10 13:41:54 +02:00
Peter Bastiani	9031d3e171	Update ngx-clipboard	2024-04-10 13:41:46 +02:00
jenkins	c3158c1064	[ci skip] Updated packages #2459 FarmMaps.Develop/FarmMapsLib/pipeline/head Something is wrong with the build of this commit Details	2024-04-10 11:29:13 +00:00
Peter Bastiani	315b64a561	Fixes FarmMaps.Develop/FarmMapsLib/pipeline/head This commit looks good Details	2024-04-10 13:27:25 +02:00
jenkins	030dbcec5d	[ci skip] Updated packages #2458 FarmMaps.Develop/FarmMapsLib/pipeline/head Something is wrong with the build of this commit Details	2024-04-10 06:25:47 +00:00
Peter Bastiani	876020828e	AW-6046 Angular 17 FarmMaps.Develop/FarmMapsLib/pipeline/head This commit looks good Details	2024-04-10 08:24:07 +02:00
Peter Bastiani	393b881e3b	Merge branch 'develop' of https://git.akkerweb.nl/FarmMaps/FarmMapsLib into develop	2024-04-10 08:18:36 +02:00
Peter Bastiani	8594a94d62	AW-6046 Angular 17	2024-04-10 08:18:25 +02:00
jenkins	c543ac7c94	[ci skip] Updated packages #2457 FarmMaps.Develop/FarmMapsLib/pipeline/head Something is wrong with the build of this commit Details	2024-04-09 13:51:44 +00:00
Peter Bastiani	97d6d569a0	AW-6046 Fix open layers 8 issues FarmMaps.Develop/FarmMapsLib/pipeline/head This commit looks good Details	2024-04-09 15:50:03 +02:00
Peter Bastiani	023048a5bb	error TS2307: Cannot find module 'ol/source/WMSServerType' or its corresponding type declarations. FarmMaps.Develop/FarmMapsLib/pipeline/head There was a failure building this commit Details	2024-04-09 15:05:26 +02:00
Peter Bastiani	4a685d675d	AW-6046 Open layers 8 FarmMaps.Develop/FarmMapsLib/pipeline/head There was a failure building this commit Details	2024-04-09 12:36:39 +02:00
jenkins	1125f4586e	[ci skip] Updated packages #2454 FarmMaps.Develop/FarmMapsLib/pipeline/head Something is wrong with the build of this commit Details	2024-04-09 10:13:34 +00:00
Peter Bastiani	3bdba527ec	npm ERR! code ENEEDAUTH FarmMaps.Develop/FarmMapsLib/pipeline/head This commit looks good Details	2024-04-09 12:10:38 +02:00
Peter Bastiani	fb03cfce44	npm ERR! code ENEEDAUTH FarmMaps.Develop/FarmMapsLib/pipeline/head There was a failure building this commit Details	2024-04-09 12:06:14 +02:00
Peter Bastiani	6f93cf254c	AW-6046 Angular 17 FarmMaps.Develop/FarmMapsLib/pipeline/head There was a failure building this commit Details	2024-04-09 11:23:39 +02:00
Peter Bastiani	b5a3a62cee	AW-6046 Fix jenkins FarmMaps.Develop/FarmMapsLib/pipeline/head There was a failure building this commit Details	2024-04-09 11:04:37 +02:00
Peter Bastiani	d306d5c4c1	AW-6046 Angular 17 FarmMaps.Develop/FarmMapsLib/pipeline/head There was a failure building this commit Details	2024-04-09 10:58:42 +02:00
Peter Bastiani	e79ae2f623	AW-6046 Angular 17	2024-04-09 10:16:21 +02:00
Peter Bastiani	bdf4e03b49	AW-6046 Angular 17	2024-04-09 09:50:06 +02:00
Peter Bastiani	7d5c10d902	AW-6046 Angular 17	2024-04-09 09:46:52 +02:00
Peter Bastiani	fb192c6e4d	AW-6046 Angular 17	2024-04-09 09:45:29 +02:00
jenkins	6356f149a6	[ci skip] Updated packages #2447 FarmMaps.Develop/FarmMapsLib/pipeline/head Something is wrong with the build of this commit Details	2024-04-04 12:57:13 +00:00
Peter Bastiani	5c5914327c	AW-6033 /api/v1/items/undefined/children?... 401 (Unauthorized) FarmMaps.Develop/FarmMapsLib/pipeline/head This commit looks good Details	2024-04-04 14:55:39 +02:00
jenkins	e306bf601f	[ci skip] Updated packages #2446 FarmMaps.Develop/FarmMapsLib/pipeline/head Something is wrong with the build of this commit Details	2024-04-04 11:20:05 +00:00
Peter Bastiani	f8459aaca4	AW-6033 main.js:555726 ERROR TypeError: Cannot read properties of null (reading 'code') FarmMaps.Develop/FarmMapsLib/pipeline/head This commit looks good Details	2024-04-04 13:18:28 +02:00