Merge branch 'develop'

# Conflicts:
#	package-lock.json

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

README.md

@@ -53,7 +53,7 @@ ng serve
 ```
 *Go*`
 
-Point your browser to http://localhost:4200
+Point your browser to http://localhost:4200 
 
 *ESLint*
 

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

package.json

@@ -1,7 +1,7 @@
 {
   "name": "farmmaps-lib-app",
-  "version": "4.3.0",
+  "version": "4.5.0",
-  "scripts":   {
+  "scripts": {
     "ng": "ng",
     "start": "ng serve",
     "build": "ng build",
@@ -10,25 +10,25 @@
     "e2e": "ng e2e"
   },
   "private": true,
-  "dependencies":   {
+  "dependencies": {
-    "@angular/animations": "^16.2.12",
+    "@angular/animations": "^17.3.3",
-    "@angular/common": "^16.2.12",
+    "@angular/common": "^17.3.3",
-    "@angular/compiler": "^16.2.12",
+    "@angular/compiler": "^17.3.3",
-    "@angular/core": "^16.2.12",
+    "@angular/core": "^17.3.3",
     "@angular-eslint/eslint-plugin": "^15.2.1",
-    "@angular/forms": "^16.2.12",
+    "@angular/forms": "^17.3.3",
-    "@angular/platform-browser": "^16.2.12",
+    "@angular/platform-browser": "^17.3.3",
-    "@angular/platform-browser-dynamic": "^16.2.12",
+    "@angular/platform-browser-dynamic": "^17.3.3",
-    "@angular/router": "^16.2.12",
+    "@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",
+    "@ng-bootstrap/ng-bootstrap": "^16.0.0",
-    "@ngrx/effects": "^16",
+    "@ngrx/effects": "^17",
-    "@ngrx/router-store": "^16",
+    "@ngrx/router-store": "^17",
-    "@ngrx/store": "^16",
+    "@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",
+    "ngrx-store-localstorage": "17.0.0",
-    "ngx-avatars": "1.5.0",
+    "ngx-avatars": "1.7.0",
-    "ngx-clipboard": "^15.1.0",
+    "ngx-clipboard": "16.0.0",
     "ngx-image-cropper": "^7.2.1",
-    "ngx-uploadx": "^5.2.0",
+    "ngx-uploadx": "^6.2.0",
-    "ol": "~6.3.1",
+    "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":   {
+  "devDependencies": {
-    "@angular-builders/custom-webpack": "^15",
+    "@angular-builders/custom-webpack": "^17",
-    "@angular-devkit/build-angular": "^16.2.11",
+    "@angular-devkit/build-angular": "^17.3.3",
-    "@angular/cli": "^16.2.11",
+    "@angular/cli": "^17.3.3",
-    "@angular/compiler-cli": "^16.2.12",
+    "@angular/compiler-cli": "^17.3.3",
-    "@angular/language-service": "^16.2.12",
+    "@angular/language-service": "^17.3.3",
-    "@angular/localize": "^16.2.12",
+    "@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"
   }
-}
+}

projects/common-map/package-lock.json

@@ -11,14 +11,14 @@
         "tslib": "^2.0.0"
       },
       "peerDependencies": {
-        "@angular/core": "^16.2.12",
+        "@angular/core": "^17.3.3",
-        "@ngrx/effects": "^16",
+        "@ngrx/effects": "^17",
-        "@ngrx/router-store": "^16",
+        "@ngrx/router-store": "^17",
-        "@ngrx/store": "^16",
+        "@ngrx/store": "^17",
-        "ngrx-store-localstorage": "16.0.0",
+        "ng-openlayers": "17.1.3",
-        "ngx-openlayers": "file:dist/ngx-openlayers",
+        "ngrx-store-localstorage": "^17",
-        "ol": ">=6.8.1",
+        "ol": "^8.2.0",
-        "tassign": ">1.0.0"
+        "tassign": "^1.0.0"
       }
     },
     "node_modules/tslib": {

projects/common-map/package.json

@@ -8,13 +8,13 @@
     "tslib": "^2.0.0"
   },
   "peerDependencies": {
-    "@angular/core": "^16.2.12",
+    "@angular/core": "^17.3.3",
-    "ngrx-store-localstorage": "16.0.0",
+    "ngrx-store-localstorage": "^17",
-    "@ngrx/effects": "^16",
+    "@ngrx/effects": "^17",
-    "@ngrx/router-store": "^16",
+    "@ngrx/router-store": "^17",
-    "@ngrx/store": "^16",
+    "@ngrx/store": "^17",
-    "tassign": ">1.0.0",
+    "tassign": "^1.0.0",
-    "ngx-openlayers": "file:dist/ngx-openlayers",
+    "ng-openlayers": "17.1.3",
-    "ol": ">=6.8.1"
+    "ol": "^8.2.0"
   }
 }

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

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

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

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

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

projects/common-map/src/fm-map/components/aol/gps-location/gps-location.component.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';
 

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"));

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

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

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

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

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

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({

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]',

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

@@ -10,6 +10,7 @@
   panelVisible:panelVisible$|async,
   openedModalName:openedModalName$|async,
   panelCollapsed:panelCollapsed$|async,
+  panelExtraWide:panelExtraWide$|async,
   searchMinified:searchMinified$|async,
   selectedItem:selectedItem$|async,
   parentItem:parentItem$|async,
@@ -64,7 +65,7 @@
     </div>
     <div class="side-panel-container">
       
-      <fm-side-panel [resizeable]="true" (onResize)="handlePanelResize($event)" [visible]="state.panelVisible && noContent" [collapsed]="state.panelCollapsed" [collapsable]="false">
+      <fm-side-panel [resizeable]="true" (onResize)="handlePanelResize($event)" [visible]="state.panelVisible && noContent" [collapsed]="state.panelCollapsed" [collapsable]="false" [extrawide]="state.panelExtraWide">
         <div class="panel-wrapper" *ngIf="noContent">
           <div class="panel-top bg-secondary" *ngIf="!(state.searchMinified)">
           </div>
@@ -84,7 +85,7 @@
           </div>
         </div>  
       </fm-side-panel>
-      <fm-side-panel [resizeable]="true" [visible]="!noContent">
+      <fm-side-panel [resizeable]="true" [visible]="!noContent" [extrawide]="state.panelExtraWide">
         <router-outlet (activate)="handleSidepaneloutletActivate($event)" (deactivate)="handleSidepaneloutletDeactivate($event)"></router-outlet>
       </fm-side-panel>
     </div>   

projects/common-map/src/fm-map/components/map/map.component.ts

@@ -66,6 +66,7 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
   public parentCode$: Observable<string> =this.store.select(mapReducers.selectGetParentCode);
   public panelVisible$: Observable<boolean> = this.store.select(mapReducers.selectGetPanelVisible);
   public panelCollapsed$: Observable<boolean> = this.store.select(mapReducers.selectGetPanelCollapsed);
+  public panelExtraWide$: Observable<boolean> = this.store.select(mapReducers.selectGetPanelExtraWide);
   public selectedFeature$: Observable<Feature<Geometry>> = this.store.select(mapReducers.selectGetSelectedFeature);
   public clickedFeature: Subject<Feature<Geometry>> = new Subject<Feature<Geometry>>();
   public selectedItem$: Observable<IItem> = this.store.select(mapReducers.selectGetSelectedItem);
@@ -208,12 +209,18 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
    if(component && component.hasOwnProperty('clickedFeature')) {
      (component as IClickedFeature).clickedFeature = this.clickedFeature;
    }
+   if(component && component.hasOwnProperty('extrawide')) {
+    this.store.dispatch(new mapActions.SetPanelExtraWide(true));
   }
+ }
 
   handleSidepaneloutletDeactivate(component:any) {
     if(component && component.hasOwnProperty('clickedFeature')) {
       (component as IClickedFeature).clickedFeature = null;
     }
+    if(component && component.hasOwnProperty('extrawide')) {
+      this.store.dispatch(new mapActions.SetPanelExtraWide(false));
+    }
   }
 
   handlePrerender(event:any) {

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

projects/common-map/src/fm-map/reducers/map.reducer.ts

@@ -49,6 +49,7 @@ export interface State {
   features: Array<Feature<Geometry>>,
   panelVisible: boolean,
   panelCollapsed: boolean,
+  panelExtraWide: boolean,
   selectedFeature: Feature<Geometry>,
   selectedItem:IItem,
   parentItem:IItem,
@@ -94,6 +95,7 @@ export const initialState: State = {
   features: [],
   panelVisible: false,
   panelCollapsed: false,
+  panelExtraWide: false,
   selectedFeature: null,
   selectedItem: null,
   parentItem: null,
@@ -572,6 +574,10 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
       }
       return state;
     }
+    case mapActions.SETPANELEXTRAWIDE:{
+      const a= action as mapActions.SetPanelExtraWide;
+      return tassign(state,{panelExtraWide:a.panelExtraWide});
+    }
     default: {
       return state;
     }
@@ -583,6 +589,7 @@ export const getParentCode = (state: State) => state.parentCode;
 export const getFeatures = (state: State) => state.features;
 export const getPanelVisible = (state: State) => state.panelVisible;
 export const getPanelCollapsed = (state: State) => state.panelCollapsed;
+export const getPanelExtraWide = (state: State) => state.panelExtraWide;
 export const getSelectedFeature = (state: State) => state.selectedFeature;
 export const getSelectedItem = (state: State) => state.selectedItem;
 export const getParentItem = (state: State) => state.parentItem;
@@ -618,6 +625,7 @@ export const selectGetParentCode = createSelector(selectMapState, getParentCode)
 export const selectGetFeatures = createSelector(selectMapState, getFeatures);
 export const selectGetPanelVisible = createSelector(selectMapState, getPanelVisible);
 export const selectGetPanelCollapsed = createSelector(selectMapState, getPanelCollapsed);
+export const selectGetPanelExtraWide = createSelector(selectMapState, getPanelExtraWide);
 export const selectGetSelectedFeature = createSelector(selectMapState, getSelectedFeature);
 export const selectGetSelectedItem = createSelector(selectMapState, getSelectedItem);
 export const selectGetParentItem = createSelector(selectMapState, getParentItem);

projects/common-map3d/package-lock.json

@@ -11,10 +11,10 @@
         "tslib": "^2.0.0"
       },
       "peerDependencies": {
-        "@angular/common": "^16.2.12",
+        "@angular/common": "^17.3.3",
-        "@angular/core": "^16.2.12",
+        "@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"
       }
     },

projects/common-map3d/package.json

@@ -5,9 +5,9 @@
     "registry": "https://repository.akkerweb.nl/repository/npm-hosted/"
   },
   "peerDependencies": {
-    "@angular/common":  "^16.2.12",
+    "@angular/common":  "^17.3.3",
-    "@angular/core":  "^16.2.12",
+    "@angular/core":  "^17.3.3",
-    "ngx-openlayers": "file:dist/ngx-openlayers",
+    "ng-openlayers": "17.1.3",
     "cesium": ">=1.82.1",
     "ol-cesium": ">=2.13.0"
   },

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

projects/common/package-lock.json

@@ -8,22 +8,22 @@
       "name": "@farmmaps/common",
       "version": "2.0.0",
       "peerDependencies": {
-        "@angular/common": "^16.2.12",
+        "@angular/common": "^17.3.3",
-        "@angular/core": "^16.2.12",
+        "@angular/core": "^17.3.3",
-        "@angular/forms": "^16.2.12",
+        "@angular/forms": "^17.3.3",
-        "@microsoft/signalr": ">3.1.3",
+        "@microsoft/signalr": "^3.1.16",
-        "@ng-bootstrap/ng-bootstrap": ">=15.0.0",
+        "@ng-bootstrap/ng-bootstrap": "^16.0.0",
-        "@ngrx/effects": "^16",
+        "@ngrx/effects": "^17",
-        "@ngrx/router-store": "^16",
+        "@ngrx/router-store": "^17",
-        "@ngrx/store": "^16",
+        "@ngrx/store": "^17",
         "angular-oauth2-oidc": "^13",
         "bootstrap": "^5.2.0",
         "moment": "^2.29.4",
-        "ngx-avatars": "1.5.0",
+        "ngx-avatars": "1.7.0",
-        "ngx-clipboard": ">15.1.0",
+        "ngx-clipboard": "16.0.0",
-        "ngx-image-cropper": ">7.2.1",
+        "ngx-image-cropper": "^7.2.1",
-        "ngx-uploadx": "^5.2.0",
+        "ngx-uploadx": "^6.2.0",
-        "tassign": ">1.0.0"
+        "tassign": "^1.0.0"
       }
     }
   }

projects/common/package.json

@@ -5,21 +5,21 @@
     "registry": "https://repository.akkerweb.nl/repository/npm-hosted/"
   },
   "peerDependencies": {
-    "@ng-bootstrap/ng-bootstrap": ">=15.0.0",
+    "@ng-bootstrap/ng-bootstrap": "^16.0.0",
-    "@angular/common": "^16.2.12",
+    "@angular/common": "^17.3.3",
-    "@angular/core": "^16.2.12",
+    "@angular/core": "^17.3.3",
-    "@angular/forms": "^16.2.12",
+    "@angular/forms": "^17.3.3",
-    "@ngrx/effects": "^16",
+    "@ngrx/effects": "^17",
-    "@ngrx/router-store": "^16",
+    "@ngrx/router-store": "^17",
-    "@ngrx/store": "^16",
+    "@ngrx/store": "^17",
-    "tassign": ">1.0.0",
+    "tassign": "^1.0.0",
     "bootstrap": "^5.2.0",
-    "@microsoft/signalr": ">3.1.3",
+    "@microsoft/signalr": "^3.1.16",
-    "ngx-uploadx": "^5.2.0",
+    "ngx-uploadx": "^6.2.0",
     "angular-oauth2-oidc": "^13",
     "moment": "^2.29.4",
-    "ngx-avatars": "1.5.0",
+    "ngx-avatars": "1.7.0",
-    "ngx-image-cropper": ">7.2.1",
+    "ngx-image-cropper": "^7.2.1",
-    "ngx-clipboard": ">15.1.0"
+    "ngx-clipboard": "16.0.0"
   }
 }

projects/common/src/fm/components/side-panel/side-panel.component.html

@@ -1,4 +1,4 @@
-<div class="side-panel hidden" [ngClass]="{'hidden':!visible,'collapsed':collapsed,'resizeable':(resizeable && mobile),'resizing':resizing,'left':left}" [ngStyle]="{'top':top}">
+<div class="side-panel hidden" [ngClass]="{'hidden':!visible,'collapsed':collapsed,'resizeable':(resizeable && mobile),'resizing':resizing,'left':left,'extrawide':extrawide}" [ngStyle]="{'top':top}">
   <div *ngIf="collapsable" class="arrow rounded-end p-2" (click)="handleToggleClick($event)">
     <i class="fal fa-chevron-left" aria-hidden="true"></i>
   </div>

projects/common/src/fm/components/side-panel/side-panel.component.scss

@@ -15,7 +15,7 @@
 }
 
 .side-panel.collapsed {
-  left:-22rem;
+  left:-44rem;
 }
 
 .arrow {
@@ -75,8 +75,7 @@ div.resizegrip > span {
 }
 
 .resizeable .resizegrip {
-  display:block;
+  display:block;  
-  
 }
 
 .resizeable .content {
@@ -94,9 +93,16 @@ div.resizegrip > span {
 
   .side-panel.hidden {
     width: 22rem;
-    left:-24rem;
+    left:-22rem;
     height:100%;
     top: 0px;
+  }
+  
+  .side-panel.extrawide {
+    top:0px;
+    width: 44rem;
+    height:100%;
+    left:0px;
   }  
 }
 

projects/common/src/fm/components/side-panel/side-panel.component.ts

@@ -3,8 +3,7 @@ import { Component, Input,Output,ViewChild,EventEmitter, ElementRef,OnChanges,Si
 @Component({
   selector: 'fm-side-panel',
   templateUrl: 'side-panel.component.html',
-  styleUrls: ['side-panel.component.scss'],
+  styleUrls: ['side-panel.component.scss']
-  encapsulation: ViewEncapsulation.None
 })
 
 
@@ -13,7 +12,8 @@ export class SidePanelComponent  implements OnChanges {
   @Input() public collapsed: boolean;
   @Input() public collapsable: boolean;
   @Input() public resizeable = false;
-  @Input() public left = false;  
+  @Input() public left = false;
+  @Input() public extrawide: boolean;
   @Output() onResize: EventEmitter<number> = new EventEmitter<number>();
   @ViewChild("resizeGrip") elementView: ElementRef;
   public mobile = true;
@@ -42,7 +42,7 @@ export class SidePanelComponent  implements OnChanges {
   }
 
   ngAfterViewInit() {
-    this.parentHeight = this.element.nativeElement.offsetParent.clientHeight;
+    this.parentHeight = this.element.nativeElement.offsetParent?.clientHeight;
     this.setTop();
   }
 

projects/common/src/fm/components/user-menu/user-menu.component.html

@@ -5,6 +5,9 @@
                 <div  class="card" *ngIf="user">           
                     <div class="card-body">
                         <div class="username">{{user.name}}</div>
+                        <div *ngIf="getProvider(); let provider">
+                            <small><span i18n>Provider</span><span> {{provider}}</span></small>
+                        </div>
                         <div><a href="#" (click)="logout($event)" i18n>logout</a></div>
                     </div>
                 </div>                

projects/common/src/fm/components/user-menu/user-menu.component.ts

@@ -20,11 +20,14 @@ export class UserMenuComponent implements OnInit {
   ngOnInit(): void {
   }
 
-  getLetter():string {
+  getProvider():string | null {
-    if (this.user && this.user.firstName && this.user.lastName)
+    const ownedClaims = this.oauthService.getIdentityClaims();
-      return this.user.firstName.substr(0,1).toUpperCase() + 
+    if(ownedClaims) {
-             this.user.lastName.substr(0,1).toUpperCase();
+      if (ownedClaims["idp"] != "local") {
-    return this.user && this.user.name ? this.user.name.substr(0,1).toUpperCase():"";
+        return ownedClaims["idp"];
+      }
+    }
+    return null;
   }
 
   logout(event:MouseEvent) {

projects/common/src/fm/reducers/app-common.reducer.ts

@@ -64,6 +64,8 @@ export function reducer(state = initialState, action: appCommonActions.Actions )
         code:a.user.code,
         email:claims["email"]!== undefined ? claims["email"] : a.user.name,
         name:claims["name"]!== undefined?claims["name"] : a.user.email,
+        lastName:a.user.lastName,
+        firstName:a.user.firstName,
         claims:claims,
         searchable: false
       };

projects/common/src/fm/services/item.service.ts

@@ -154,7 +154,7 @@ export class ItemService {
 
   putItemFile(item: IItem, jsonObject: any): Observable<IItem> {
     const formData = new FormData();
-    const file = new File([JSON.stringify(jsonObject)], 'data.dat', {type: 'application/json'});
+    const file = new File([JSON.stringify(jsonObject, undefined, '\t')], 'data.dat', {type: 'application/json'});
     formData.append('file', file);
     return this.httpClient.put<any>(`${this.ApiEndpoint()}/api/v1/items/${item.code}/data`, formData);
   }

projects/common/src/fm/services/itemtype.service.ts

@@ -27,7 +27,7 @@ export class ItemTypeService {
 
      getExtraAttributes(itemType: string) {
       let extraAttributes = null;
-      if (this.itemTypes[itemType]) extraAttributes = this.itemTypes[itemType].extraAttributes;
+      if (this.itemTypes[itemType] && this.itemTypes[itemType].extraAttributes) extraAttributes = this.itemTypes[itemType].extraAttributes;
       return extraAttributes;
     }
 

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

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

projects/ngx-openlayers/ngcc.config.js

@@ -1,3 +0,0 @@
-module.exports = {
-  ignorableDeepImportMatchers: [/ol\//]
-};

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

projects/ngx-openlayers/src/lib/interactions/select.component.ts

@@ -1,61 +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;
-
-  @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);
-  }
-}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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