.gitignore

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

Jenkinsfile.develop

@@ -21,4 +21,4 @@ pipeline {
       postAlways();
     }
   }
-}c
+}

angular.json

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

package.json

@@ -1,7 +1,7 @@
 {
   "name": "farmmaps-lib-app",
   "version": "4.5.0",
-  "scripts": {
+  "scripts":   {
     "ng": "ng",
     "start": "ng serve",
     "build": "ng build",
@@ -10,20 +10,20 @@
     "e2e": "ng e2e"
   },
   "private": true,
-  "dependencies": {
+  "dependencies":   {
-    "@angular/animations": "^17.3.3",
+    "@angular/animations": "^16.2.12",
-    "@angular/common": "^17.3.3",
+    "@angular/common": "^16.2.12",
-    "@angular/compiler": "^17.3.3",
+    "@angular/compiler": "^16.2.12",
-    "@angular/core": "^17.3.3",
+    "@angular/core": "^16.2.12",
     "@angular-eslint/eslint-plugin": "^15.2.1",
-    "@angular/forms": "^17.3.3",
+    "@angular/forms": "^16.2.12",
-    "@angular/platform-browser": "^17.3.3",
+    "@angular/platform-browser": "^16.2.12",
-    "@angular/platform-browser-dynamic": "^17.3.3",
+    "@angular/platform-browser-dynamic": "^16.2.12",
-    "@angular/router": "^17.3.3",
+    "@angular/router": "^16.2.12",
     "@farmmaps/common": "file:dist/common",
     "@farmmaps/common-map": "file:dist/common-map",
     "@farmmaps/common-map3d": "file:dist/common-map3d",
-    "ng-openlayers": "file:dist/ng-openlayers",
+    "ngx-openlayers": "file:dist/ngx-openlayers",
     "@microsoft/signalr": "^3.1.16",
     "@ng-bootstrap/ng-bootstrap": "^15.0.0",
     "@ngrx/effects": "^16",
@@ -40,10 +40,10 @@
     "https-browserify": "^1.0.0",
     "moment": "^2.29.4",
     "ngrx-store-localstorage": "16.0.0",
-    "ngx-avatars": "1.7.0",
+    "ngx-avatars": "1.5.0",
     "ngx-clipboard": "^15.1.0",
     "ngx-image-cropper": "^7.2.1",
-    "ngx-uploadx": "^6.2.0",
+    "ngx-uploadx": "^5.2.0",
     "ol": "~6.3.1",
     "olcs": "^2.13.1",
     "resumablejs": "^1.1.0",
@@ -54,15 +54,15 @@
     "tslib": "^2.4.0",
     "url": "^0.11.0",
     "util": "^0.12.4",
-    "zone.js": "~0.14.4"
+    "zone.js": "~0.13.3"
   },
-  "devDependencies": {
+  "devDependencies":   {
     "@angular-builders/custom-webpack": "^16",
-    "@angular-devkit/build-angular": "^17.3.3",
+    "@angular-devkit/build-angular": "^16.2.11",
-    "@angular/cli": "^17.3.3",
+    "@angular/cli": "^16.2.11",
-    "@angular/compiler-cli": "^17.3.3",
+    "@angular/compiler-cli": "^16.2.12",
-    "@angular/language-service": "^17.3.3",
+    "@angular/language-service": "^16.2.12",
-    "@angular/localize": "^17.3.3",
+    "@angular/localize": "^16.2.12",
     "@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": "^17.3.0",
+    "ng-packagr": "^16.2.3",
     "protractor": "~7.0.0",
     "ts-node": "^8.8.1",
-    "typescript": "~5.4.4"
+    "typescript": "~4.9.3"
   }
 }

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 'ng-openlayers';
+import { AngularOpenlayersModule } from 'ngx-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 'ng-openlayers';
+import { MapComponent } from 'ngx-openlayers';
 
 import * as proj  from 'ol/proj';
 import {Point,Geometry} from 'ol/geom';

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

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

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

@@ -1,5 +1,5 @@
 import { Component, Host, Input, Output, EventEmitter,OnDestroy, OnInit, OnChanges, SimpleChanges, forwardRef } from '@angular/core';
-import { LayerGroupComponent, MapComponent } from 'ng-openlayers';
+import { LayerGroupComponent, MapComponent } from 'ngx-openlayers';
 import { ItemService,IItem,AppConfig } from '@farmmaps/common';
 import { IItemLayer, ITemporalItemLayer} from '../../../models/item.layer';
 import { ILayerData} from '../../../models/layer.data';

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 'ng-openlayers';
+import { LayerVectorComponent, SourceVectorComponent, MapComponent } from 'ngx-openlayers';
 import { ItemService, ItemTypeService, IItem, IItemType, FolderService } from '@farmmaps/common';
 
 import { Feature } from 'ol';

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 'ng-openlayers';
+import { MapComponent } from 'ngx-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,5 +1,5 @@
 import { Component, OnDestroy, OnInit, Input, OnChanges, SimpleChanges } from '@angular/core';
-import { LayerVectorComponent, MapComponent } from 'ng-openlayers';
+import { LayerVectorComponent, MapComponent } from 'ngx-openlayers';
 import  RenderType  from 'ol/layer/Vector';
 import { Vector as VectorSource } from 'ol/source';
 import { Geometry } from 'ol/geom';

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 'ng-openlayers';
+import { MapComponent } from 'ngx-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 'ng-openlayers';
+import { ViewComponent, MapComponent } from 'ngx-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 'ng-openlayers';
+import { ViewComponent, MapComponent } from 'ngx-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 'ng-openlayers';
+import { MapComponent } from 'ngx-openlayers';
 
 @Directive({
   selector: '[fmMapIfZoomToShow]',

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 'ng-openlayers';
+import { MapComponent } from 'ngx-openlayers';
 import OLCesium from 'olcs/OLCesium';
 import RasterSynchronizer from 'olcs/RasterSynchronizer';
 import VectorSynchronizer from 'olcs/VectorSynchronizer';

projects/ng-openlayers/.gitignore

@@ -1,2 +0,0 @@
-/node_modules
-

projects/ng-openlayers/karma.conf.js

@@ -1,32 +0,0 @@
-// Karma configuration file, see link for more information
-// https://karma-runner.github.io/1.0/config/configuration-file.html
-
-module.exports = function (config) {
-  config.set({
-    basePath: '',
-    frameworks: ['jasmine', '@angular-devkit/build-angular'],
-    plugins: [
-      require('karma-jasmine'),
-      require('karma-chrome-launcher'),
-      require('karma-jasmine-html-reporter'),
-      require('karma-coverage-istanbul-reporter'),
-      require('@angular-devkit/build-angular/plugins/karma'),
-    ],
-    client: {
-      clearContext: false, // leave Jasmine Spec Runner output visible in browser
-    },
-    coverageIstanbulReporter: {
-      dir: require('path').join(__dirname, '../../coverage/ng-openlayers'),
-      reports: ['html', 'lcovonly', 'text-summary'],
-      fixWebpackSourcePaths: true,
-    },
-    reporters: ['progress', 'kjhtml'],
-    port: 9876,
-    colors: true,
-    logLevel: config.LOG_INFO,
-    autoWatch: true,
-    browsers: ['Chrome'],
-    singleRun: false,
-    restartOnFileChange: true,
-  });
-};

projects/ng-openlayers/ngcc.config.js

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

projects/ng-openlayers/package-lock.json

@@ -1,33 +0,0 @@
-{
-  "name": "ng-openlayers",
-  "version": "17.1.3",
-  "lockfileVersion": 2,
-  "requires": true,
-  "packages": {
-    "": {
-      "name": "ng-openlayers",
-      "version": "17.1.3",
-      "license": "MPL-2.0",
-      "dependencies": {
-        "tslib": "^2.3.0"
-      },
-      "peerDependencies": {
-        "@angular/common": ">=17.0.0",
-        "@angular/core": ">=17.0.0",
-        "ol": "^8.2.0"
-      }
-    },
-    "node_modules/tslib": {
-      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
-      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
-    }
-  },
-  "dependencies": {
-    "tslib": {
-      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
-      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
-    }
-  }
-}

projects/ng-openlayers/package.json

@@ -1,39 +0,0 @@
-{
-  "name": "ng-openlayers",
-  "version": "17.1.3",
-  "description": "OpenLayers library for Angular",
-  "author": "Kamil Furtak (kamil.furtak@gmail.com)",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/kamilfurtak/ng-openlayers.git"
-  },
-  "bugs": {
-    "url": "https://github.com/kamilfurtak/ng-openlayers/issues"
-  },
-  "homepage": "https://github.com/kamilfurtak/ng-openlayers",
-  "keywords": [
-    "ngx-openlayers",
-    "angular",
-    "angular17",
-    "openlayers",
-    "openlayers8",
-    "ol8"
-  ],
-  "license": "MPL-2.0",
-  "private": false,
-  "scripts": {
-    "release": "standard-version -m \"chore(release): version %s\" -t \"\"",
-    "prepublishOnly": "cp projects/ng-openlayers/README.md dist/ng-openlayers/README.md"
-  },
-  "standard-version": {
-    "postchangelog": "cp projects/ng-openlayers/CHANGELOG.md dist/ng-openlayers/CHANGELOG.md"
-  },
-  "dependencies": {
-    "tslib": "^2.3.0"
-  },
-  "peerDependencies": {
-    "@angular/common": ">=17.0.0",
-    "@angular/core": ">=17.0.0",
-    "ol": "^8.2.0"
-  }
-}

projects/ng-openlayers/project.json

@@ -1,38 +0,0 @@
-{
-  "name": "ng-openlayers",
-  "$schema": "../../node_modules/nx/schemas/project-schema.json",
-  "projectType": "library",
-  "sourceRoot": "libs/ng-openlayers/src",
-  "prefix": "lib",
-  "targets": {
-    "build": {
-      "executor": "@nx/angular:package",
-      "options": {
-        "tsConfig": "libs/ng-openlayers/tsconfig.lib.json",
-        "project": "libs/ng-openlayers/ng-package.json"
-      },
-      "configurations": {
-        "production": {
-          "tsConfig": "libs/ng-openlayers/tsconfig.lib.prod.json"
-        }
-      }
-    },
-    "test": {
-      "executor": "@angular-devkit/build-angular:karma",
-      "options": {
-        "main": "libs/ng-openlayers/src/test.ts",
-        "tsConfig": "libs/ng-openlayers/tsconfig.spec.json",
-        "karmaConfig": "libs/ng-openlayers/karma.conf.js"
-      }
-    },
-    "lint": {
-      "executor": "@nx/eslint:lint",
-      "options": {
-        "lintFilePatterns": [
-          "libs/ng-openlayers/**/*.ts",
-          "libs/ng-openlayers/**/*.html"
-        ]
-      }
-    }
-  }
-}

projects/ng-openlayers/src/lib/interactions/keyboardpan.component.ts

@@ -1,27 +0,0 @@
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { KeyboardPan } from 'ol/interaction';
-import { MapComponent } from '../map.component';
-
-@Component({
-  selector: 'aol-interaction-keyboardpan',
-  template: '',
-})
-export class KeyboardPanInteractionComponent implements OnInit, OnDestroy {
-  @Input()
-  duration: number;
-  @Input()
-  pixelDelta: number;
-
-  instance: KeyboardPan;
-
-  constructor(private map: MapComponent) {}
-
-  ngOnInit() {
-    this.instance = new KeyboardPan(this);
-    this.map.instance.addInteraction(this.instance);
-  }
-
-  ngOnDestroy() {
-    this.map.instance.removeInteraction(this.instance);
-  }
-}

projects/ng-openlayers/src/lib/interactions/keyboardzoom.component.ts

@@ -1,27 +0,0 @@
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { KeyboardZoom } from 'ol/interaction';
-import { MapComponent } from '../map.component';
-
-@Component({
-  selector: 'aol-interaction-keyboardpan',
-  template: '',
-})
-export class KeyboardZoomInteractionComponent implements OnInit, OnDestroy {
-  @Input()
-  duration: number;
-  @Input()
-  delta: number;
-
-  instance: KeyboardZoom;
-
-  constructor(private map: MapComponent) {}
-
-  ngOnInit() {
-    this.instance = new KeyboardZoom(this);
-    this.map.instance.addInteraction(this.instance);
-  }
-
-  ngOnDestroy() {
-    this.map.instance.removeInteraction(this.instance);
-  }
-}

projects/ng-openlayers/src/lib/map.component.ts

@@ -1,142 +0,0 @@
-import {
-  Component,
-  OnInit,
-  ElementRef,
-  Input,
-  Output,
-  EventEmitter,
-  AfterViewInit,
-  SimpleChanges,
-  OnChanges,
-} from '@angular/core';
-import { Map } from 'ol';
-import MapBrowserEvent from 'ol/MapBrowserEvent';
-import MapEvent from 'ol/MapEvent';
-import { ObjectEvent } from 'ol/Object';
-import RenderEvent from 'ol/render/Event';
-import { Control } from 'ol/control';
-import { Interaction } from 'ol/interaction';
-import { DrawEvent } from 'ol/interaction/Draw';
-import BaseEvent from 'ol/events/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: HTMLElement | string;
-  @Input()
-  loadTilesWhileAnimating: boolean;
-  @Input()
-  loadTilesWhileInteracting: boolean;
-  @Input()
-  logo: string | boolean;
-  @Input()
-  renderer: 'canvas' | 'webgl';
-
-  @Output()
-  olChange = new EventEmitter<DrawEvent>();
-  @Output()
-  olChangeLayerGroup = new EventEmitter<ObjectEvent>();
-  @Output()
-  olChangeSize = new EventEmitter<ObjectEvent>();
-  @Output()
-  olChangeTarget = new EventEmitter<ObjectEvent>();
-  @Output()
-  olChangeView = new EventEmitter<ObjectEvent>();
-  @Output()
-  olClick = new EventEmitter<MapBrowserEvent<MouseEvent>>();
-  @Output()
-  dblClick = new EventEmitter<MapBrowserEvent<MouseEvent>>();
-  @Output()
-  olError = new EventEmitter<BaseEvent>();
-  @Output()
-  loadEnd = new EventEmitter<MapEvent>();
-  @Output()
-  loadStart = new EventEmitter<MapEvent>();
-  @Output()
-  moveEnd = new EventEmitter<MapEvent>();
-  @Output()
-  moveStart = new EventEmitter<MapEvent>();
-  @Output()
-  pointerDrag = new EventEmitter<MapBrowserEvent<MouseEvent>>();
-  @Output()
-  pointerMove = new EventEmitter<MapBrowserEvent<MouseEvent>>();
-  @Output()
-  olPostCompose = new EventEmitter<RenderEvent>();
-  @Output()
-  olPostRender = new EventEmitter<RenderEvent>();
-  @Output()
-  olPreCompose = new EventEmitter<RenderEvent>();
-  @Output()
-  olPropertyChange = new EventEmitter<ObjectEvent>();
-  @Output()
-  postRender = new EventEmitter<MapEvent>();
-  @Output()
-  propertyChange = new EventEmitter<ObjectEvent>();
-  @Output()
-  singleClick = new EventEmitter<MapBrowserEvent<MouseEvent>>();
-
-  public instance: Map;
-  public 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) {}
-
-  ngOnInit() {
-    // console.log('creating ol.Map instance with:', this);
-    this.instance = new Map(this);
-    this.instance.setTarget(this.host.nativeElement.firstElementChild);
-    this.instance.on('change', (event: DrawEvent) => this.olChange.emit(event));
-    this.instance.on('change:layergroup', (event: ObjectEvent) => this.olChangeLayerGroup.emit(event));
-    this.instance.on('change:size', (event: ObjectEvent) => this.olChangeSize.emit(event));
-    this.instance.on('change:target', (event: ObjectEvent) => this.olChangeTarget.emit(event));
-    this.instance.on('change:view', (event: ObjectEvent) => this.olChangeView.emit(event));
-    this.instance.on('click', (event: MapBrowserEvent<MouseEvent>) => this.olClick.emit(event));
-    this.instance.on('dblclick', (event: MapBrowserEvent<MouseEvent>) => this.dblClick.emit(event));
-    this.instance.on('error', (event: BaseEvent) => this.olError.emit(event));
-    this.instance.on('loadend', (event: MapEvent) => this.loadEnd.emit(event));
-    this.instance.on('loadstart', (event: MapEvent) => this.loadStart.emit(event));
-    this.instance.on('moveend', (event: MapEvent) => this.moveEnd.emit(event));
-    this.instance.on('movestart', (event: MapEvent) => this.moveStart.emit(event));
-    this.instance.on('pointerdrag', (event: MapBrowserEvent<MouseEvent>) => this.pointerDrag.emit(event));
-    this.instance.on('pointermove', (event: MapBrowserEvent<MouseEvent>) => this.pointerMove.emit(event));
-    this.instance.on('postcompose', (event: RenderEvent) => this.olPostCompose.emit(event));
-    this.instance.on('postrender', (event: RenderEvent) => this.olPostRender.emit(event));
-    this.instance.on('postrender', (event: MapEvent) => this.postRender.emit(event));
-    this.instance.on('precompose', (event: RenderEvent) => this.olPreCompose.emit(event));
-    this.instance.on('propertychange', (event: ObjectEvent) => this.olPropertyChange.emit(event));
-    this.instance.on('singleclick', (event: MapBrowserEvent<MouseEvent>) => 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/ng-openlayers/tsconfig.lib.json

@@ -1,27 +0,0 @@
-{
-  "extends": "../../tsconfig.base.json",
-  "compilerOptions": {
-    "outDir": "../../dist/out-tsc",
-    "declaration": true,
-    "declarationMap": true,
-    "inlineSources": true,
-    "types": [],
-    "lib": [
-      "dom",
-      "es2018"
-    ]
-  },
-  "angularCompilerOptions": {
-    "skipLibCheck": true,
-    "skipTemplateCodegen": true,
-    "strictMetadataEmit": true,
-    "enableResourceInlining": true
-  },
-  "exclude": [
-    "src/test.ts",
-    "**/*.spec.ts"
-  ],
-  "include": [
-    "**/*.ts"
-  ]
-}

projects/ng-openlayers/tsconfig.lib.prod.json

@@ -1,9 +0,0 @@
-{
-  "extends": "./tsconfig.lib.json",
-  "compilerOptions": {
-    "declarationMap": false
-  },
-  "angularCompilerOptions": {
-    "compilationMode": "partial"
-  }
-}

projects/ng-openlayers/tslint-prettier.json

@@ -1,7 +0,0 @@
-{
-  "extends": [
-    "./tslint.json",
-    "tslint-config-prettier",
-    "tslint-plugin-prettier"
-  ]
-}

projects/ngx-openlayers/.eslintrc.json

@@ -10,7 +10,8 @@
       ],
       "parserOptions": {
         "project": [
-          "libs/ng-openlayers/tsconfig.*?.json"
+          "projects/ngx-openlayers/tsconfig.lib.json",
+          "projects/ngx-openlayers/tsconfig.spec.json"
         ],
         "createDefaultProgram": true
       },
@@ -41,7 +42,8 @@
           "off",
           "always"
         ],
-        "import/order": "off"
+        "import/order": "off",
+        "no-underscore-dangle": "off"
       }
     },
     {

projects/ngx-openlayers/ng-package.json

@@ -1,6 +1,6 @@
 {
   "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "../../dist/libs/ng-openlayers",
+  "dest": "../../dist/ngx-openlayers",
   "assets": [
     "ngcc.config.js"
   ],

projects/ngx-openlayers/ngcc.config.js

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

projects/ngx-openlayers/package-lock.json

@@ -0,0 +1,17 @@
+{
+  "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

@@ -0,0 +1,12 @@
+{
+  "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,15 +1,18 @@
 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 {
-  label: string;
+  instance: Attribution;
+  html: string;
 
   constructor(private elementRef: ElementRef) {}
 
   ngOnInit() {
-    this.label = this.elementRef.nativeElement.innerHTML;
+    this.html = this.elementRef.nativeElement.innerHTML;
+    this.instance = new Attribution(this);
   }
 }

projects/ngx-openlayers/src/lib/attributions.component.ts

@@ -1,6 +1,7 @@
 import { AfterViewInit, Component, ContentChildren, Host, QueryList } from '@angular/core';
-import { SourceComponent } from './sources/source.component';
+import { Attribution } from 'ol/control';
 import { AttributionComponent } from './attribution.component';
+import { SourceComponent } from './sources/source.component';
 
 @Component({
   selector: 'aol-attributions',
@@ -10,14 +11,14 @@ export class AttributionsComponent implements AfterViewInit {
   @ContentChildren(AttributionComponent)
   attributions: QueryList<AttributionComponent>;
 
-  instance: Array<string>;
+  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.label);
+      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,12 +1,12 @@
 import { Component, Input, OnChanges, OnInit, Optional, SimpleChanges } from '@angular/core';
-import { MapComponent } from './map.component';
-import { GeometryLinestringComponent } from './geom/geometrylinestring.component';
-import { GeometryPolygonComponent } from './geom/geometrypolygon.component';
-import { GeometryMultiPointComponent } from './geom/geometrymultipoint.component';
-import { GeometryMultiLinestringComponent } from './geom/geometrymultilinestring.component';
-import { GeometryMultiPolygonComponent } from './geom/geometrymultipolygon.component';
 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',

projects/ngx-openlayers/src/lib/controls/attribution.component.ts

@@ -10,14 +10,11 @@ export class ControlAttributionComponent implements OnInit, OnDestroy {
   @Input()
   collapsible: boolean;
 
-  public componentType = 'control';
+  componentType = 'control';
   instance: Attribution;
-  target: HTMLElement;
+  target: Element;
 
-  constructor(
+  constructor(private map: MapComponent, private element: ElementRef) {}
-    private map: MapComponent,
-    private element: ElementRef
-  ) {}
 
   ngOnInit() {
     this.target = this.element.nativeElement;

projects/ngx-openlayers/src/lib/controls/control.component.ts

@@ -1,7 +1,7 @@
 import { Component, ContentChild, OnDestroy, OnInit } from '@angular/core';
 import { Control } from 'ol/control';
-import { MapComponent } from '../map.component';
 import { ContentComponent } from '../content.component';
+import { MapComponent } from '../map.component';
 
 @Component({
   selector: 'aol-control',
@@ -11,9 +11,9 @@ export class ControlComponent implements OnInit, OnDestroy {
   @ContentChild(ContentComponent, { static: true })
   content: ContentComponent;
 
-  public componentType = 'control';
+  componentType = 'control';
   instance: Control;
-  element: HTMLElement;
+  element: Element;
 
   constructor(private map: MapComponent) {}
 

projects/ngx-openlayers/src/lib/controls/default.component.ts

@@ -1,6 +1,6 @@
-import { Component, OnDestroy, OnInit, Input } from '@angular/core';
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { Control, defaults } from 'ol/control';
 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';

projects/ngx-openlayers/src/lib/controls/mouseposition.component.ts

@@ -1,8 +1,8 @@
 import { Component, ElementRef, Input, OnDestroy, OnInit } from '@angular/core';
 import MousePosition from 'ol/control/MousePosition';
-import { MapComponent } from '../map.component';
 import { CoordinateFormat } from 'ol/coordinate';
 import { ProjectionLike } from 'ol/proj';
+import { MapComponent } from '../map.component';
 
 @Component({
   selector: 'aol-control-mouseposition',
@@ -13,14 +13,11 @@ export class ControlMousePositionComponent implements OnInit, OnDestroy {
   coordinateFormat: CoordinateFormat;
   @Input()
   projection: ProjectionLike;
+  target: Element;
 
   instance: MousePosition;
-  target: HTMLElement;
 
-  constructor(
+  constructor(private map: MapComponent, private element: ElementRef) {}
-    private map: MapComponent,
-    private element: ElementRef
-  ) {}
 
   ngOnInit() {
     this.target = this.element.nativeElement;

projects/ngx-openlayers/src/lib/controls/overviewmap.component.ts

@@ -1,7 +1,7 @@
-import { Component, Input, OnDestroy, OnInit, OnChanges, SimpleChanges } from '@angular/core';
+import { Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
-import { Layer } from 'ol/layer';
 import { View } from 'ol';
 import { OverviewMap } from 'ol/control';
+import { Layer } from 'ol/layer';
 import { MapComponent } from '../map.component';
 
 @Component({
@@ -20,7 +20,7 @@ export class ControlOverviewMapComponent implements OnInit, OnChanges, OnDestroy
   @Input()
   layers: Layer[];
   @Input()
-  target: HTMLElement;
+  target: Element;
   @Input()
   tipLabel: string;
   @Input()

projects/ngx-openlayers/src/lib/controls/scaleline.component.ts

@@ -1,7 +1,6 @@
 import { Component, Input, OnDestroy, OnInit } from '@angular/core';
 import { ScaleLine } from 'ol/control';
 import { MapComponent } from '../map.component';
-import { Units } from 'ol/control/ScaleLine';
 
 @Component({
   selector: 'aol-control-scaleline',
@@ -9,11 +8,13 @@ import { Units } from 'ol/control/ScaleLine';
 })
 export class ControlScaleLineComponent implements OnInit, OnDestroy {
   @Input()
-  units: Units;
+  units: string;
 
   instance: ScaleLine;
 
-  constructor(private map: MapComponent) {}
+  constructor(private map: MapComponent) {
+    // console.log('instancing aol-control-scaleline');
+  }
 
   ngOnInit() {
     this.instance = new ScaleLine(this);
@@ -21,6 +22,7 @@ export class ControlScaleLineComponent implements OnInit, OnDestroy {
   }
 
   ngOnDestroy() {
+    // console.log('removing aol-control-scaleline');
     this.map.instance.removeControl(this.instance);
   }
 }

projects/ngx-openlayers/src/lib/controls/zoom.component.ts

@@ -10,9 +10,9 @@ export class ControlZoomComponent implements OnInit, OnDestroy {
   @Input()
   duration: number;
   @Input()
-  zoomInLabel: string | HTMLElement;
+  zoomInLabel: string | Node;
   @Input()
-  zoomOutLabel: string | HTMLElement;
+  zoomOutLabel: string | Node;
   @Input()
   zoomInTipLabel: string;
   @Input()

projects/ngx-openlayers/src/lib/controls/zoomtoextent.component.ts

@@ -1,7 +1,7 @@
 import { Component, Input, OnDestroy, OnInit } from '@angular/core';
 import { ZoomToExtent } from 'ol/control';
-import { MapComponent } from '../map.component';
 import { Extent } from 'ol/extent';
+import { MapComponent } from '../map.component';
 
 @Component({
   selector: 'aol-control-zoomtoextent',
@@ -11,7 +11,7 @@ export class ControlZoomToExtentComponent implements OnInit, OnDestroy {
   @Input()
   className: string;
   @Input()
-  label: string | HTMLElement;
+  label: string | Node;
   @Input()
   tipLabel: string;
   @Input()

projects/ngx-openlayers/src/lib/coordinate.component.ts

@@ -1,10 +1,10 @@
-import { Component, Optional, OnChanges, Input, SimpleChanges, OnInit } from '@angular/core';
+import { Component, Input, OnChanges, OnInit, Optional, SimpleChanges } from '@angular/core';
 import { transform } from 'ol/proj';
-import { MapComponent } from './map.component';
-import { GeometryPointComponent } from './geom/geometrypoint.component';
 import { GeometryCircleComponent } from './geom/geometrycircle.component';
-import { ViewComponent } from './view.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',

projects/ngx-openlayers/src/lib/feature.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy, OnChanges, Input, SimpleChanges } from '@angular/core';
+import { Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
 import { Feature } from 'ol';
 import { SourceVectorComponent } from './sources/vector.component';
 
@@ -10,8 +10,8 @@ export class FeatureComponent implements OnInit, OnDestroy, OnChanges {
   @Input()
   id: string | number | undefined;
 
-  public componentType = 'feature';
+  componentType = 'feature';
-  public instance: Feature;
+  instance: Feature;
 
   constructor(private host: SourceVectorComponent) {}
 

projects/ngx-openlayers/src/lib/formats/mvt.component.ts

@@ -1,7 +1,8 @@
 import { Component, forwardRef, Input } from '@angular/core';
-import { FormatComponent } from './format.component';
 import { MVT } from 'ol/format';
-import { FeatureClass } from 'ol/Feature';
+import { Geometry } from 'ol/geom';
+import GeometryType from 'ol/geom/GeometryType';
+import { FormatComponent } from './format.component';
 
 @Component({
   selector: 'aol-format-mvt',
@@ -10,7 +11,9 @@ import { FeatureClass } from 'ol/Feature';
 })
 export class FormatMVTComponent extends FormatComponent {
   @Input()
-  featureClass: FeatureClass;
+  featureClass:
+    | ((geom: Geometry | { [k: string]: any }) => any)
+    | ((geom: GeometryType, arg2: number[], arg3: number[] | number[][], arg4: { [k: string]: any }) => any);
   @Input()
   geometryName: string;
   @Input()

projects/ngx-openlayers/src/lib/geom/geometrycircle.component.ts

@@ -1,14 +1,23 @@
 import { Component, Input, OnInit } from '@angular/core';
-import { FeatureComponent } from '../feature.component';
 import { Circle } from 'ol/geom';
-import { SimpleGeometryComponent } from './simplegeometry.component';
+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();
@@ -16,13 +25,4 @@ export class GeometryCircleComponent extends SimpleGeometryComponent implements
   set radius(radius: number) {
     this.instance.setRadius(radius);
   }
-
-  public componentType = 'geometry-circle';
-  public 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]);
-  }
 }

projects/ngx-openlayers/src/lib/geom/simplegeometry.component.ts

@@ -1,20 +1,16 @@
-import { Input, OnInit, Directive } from '@angular/core';
+import { Directive, Input, OnInit } from '@angular/core';
+import SimpleGeometry from 'ol/geom/SimpleGeometry';
 import { FeatureComponent } from '../feature.component';
 import { MapComponent } from '../map.component';
-import SimpleGeometry from 'ol/geom/SimpleGeometry';
 
 @Directive()
-// eslint-disable-next-line @angular-eslint/directive-class-suffix
 export abstract class SimpleGeometryComponent implements OnInit {
   @Input() srid: string;
 
-  public instance: SimpleGeometry;
+  instance: SimpleGeometry;
-  public componentType = 'simple-geometry';
+  componentType = 'simple-geometry';
 
-  protected constructor(
+  constructor(protected map: MapComponent, protected host: FeatureComponent) {}
-    protected map: MapComponent,
-    protected host: FeatureComponent
-  ) {}
 
   ngOnInit() {
     this.host.instance.setGeometry(this.instance);

projects/ngx-openlayers/src/lib/graticule.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, AfterContentInit, OnChanges, SimpleChanges, OnDestroy } from '@angular/core';
+import { AfterContentInit, Component, Input, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
 import { Graticule } from 'ol';
 import { Stroke } from 'ol/style';
 import { MapComponent } from './map.component';
@@ -18,7 +18,7 @@ export class GraticuleComponent implements AfterContentInit, OnChanges, OnDestro
   latLabelPosition: number;
 
   instance: any;
-  public componentType = 'graticule';
+  componentType = 'graticule';
 
   constructor(private map: MapComponent) {}
 

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

@@ -1,4 +1,4 @@
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 import { defaults, Interaction } from 'ol/interaction';
 import { Collection } from 'ol';
 import { MapComponent } from '../map.component';
@@ -8,35 +8,12 @@ import { MapComponent } from '../map.component';
   template: '',
 })
 export class DefaultInteractionComponent implements OnInit, OnDestroy {
-  @Input()
-  altShiftDragRotate: boolean;
-  @Input()
-  onFocusOnly: boolean;
-  @Input()
-  doubleClickZoom: boolean;
-  @Input()
-  keyboard: boolean;
-  @Input()
-  mouseWheelZoom: boolean;
-  @Input()
-  shiftDragZoom: boolean;
-  @Input()
-  dragPan: boolean;
-  @Input()
-  pinchRotate: boolean;
-  @Input()
-  pinchZoom: boolean;
-  @Input()
-  zoomDelta: number;
-  @Input()
-  zoomDuration: number;
-
   instance: Collection<Interaction>;
 
   constructor(private map: MapComponent) {}
 
   ngOnInit() {
-    this.instance = defaults(this);
+    this.instance = defaults();
     this.instance.forEach((i) => this.map.instance.addInteraction(i));
   }
 

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

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

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

@@ -1,8 +1,8 @@
-import { Component, OnDestroy, OnInit, Input } from '@angular/core';
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { DragBox } from 'ol/interaction';
-import { MapComponent } from '../map.component';
 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',

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

@@ -1,8 +1,8 @@
-import { Component, OnDestroy, OnInit, Input } from '@angular/core';
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { DragPan } from 'ol/interaction';
 import Kinetic from 'ol/Kinetic';
-import { MapComponent } from '../map.component';
 import { Condition } from 'ol/events/condition';
+import { DragPan } from 'ol/interaction';
+import { MapComponent } from '../map.component';
 
 @Component({
   selector: 'aol-interaction-dragpan',

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

@@ -1,7 +1,7 @@
-import { Component, OnDestroy, OnInit, Input } from '@angular/core';
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { Condition } from 'ol/events/condition';
 import { DragRotate } from 'ol/interaction';
 import { MapComponent } from '../map.component';
-import { Condition } from 'ol/events/condition';
 
 @Component({
   selector: 'aol-interaction-dragrotate',

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

@@ -1,7 +1,7 @@
-import { Component, OnDestroy, OnInit, Input } from '@angular/core';
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { Condition } from 'ol/events/condition';
 import { DragRotateAndZoom } from 'ol/interaction';
 import { MapComponent } from '../map.component';
-import { Condition } from 'ol/events/condition';
 
 @Component({
   selector: 'aol-interaction-dragrotateandzoom',

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

@@ -1,7 +1,7 @@
-import { Component, OnDestroy, OnInit, Input } from '@angular/core';
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { Condition } from 'ol/events/condition';
 import { DragZoom } from 'ol/interaction';
 import { MapComponent } from '../map.component';
-import { Condition } from 'ol/events/condition';
 
 @Component({
   selector: 'aol-interaction-dragzoom',

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

@@ -1,15 +1,13 @@
-import { Component, Input, OnDestroy, OnInit, EventEmitter, Output } from '@angular/core';
+import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
-import { MapComponent } from '../map.component';
-import { Draw } from 'ol/interaction';
 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 { DrawEvent, GeometryFunction } from 'ol/interaction/Draw';
 import { StyleFunction } from 'ol/style/Style';
-import { Condition } from 'ol/events/condition';
+import { MapComponent } from '../map.component';
-import { Type } from 'ol/geom/Geometry';
-import { ObjectEvent } from 'ol/Object';
-import BaseEvent from 'ol/events/Event';
 
 @Component({
   selector: 'aol-interaction-draw',
@@ -25,7 +23,7 @@ export class DrawInteractionComponent implements OnInit, OnDestroy {
   @Input()
   snapTolerance?: number;
   @Input()
-  type: Type;
+  type: GeometryType;
   @Input()
   maxPoints?: number;
   @Input()
@@ -50,17 +48,13 @@ export class DrawInteractionComponent implements OnInit, OnDestroy {
   @Output()
   olChange = new EventEmitter<DrawEvent>();
   @Output()
-  olChangeActive = new EventEmitter<ObjectEvent>();
+  olChangeActive = new EventEmitter<DrawEvent>();
-  @Output()
-  olDrawAbort = new EventEmitter<DrawEvent>();
   @Output()
   drawEnd = new EventEmitter<DrawEvent>();
   @Output()
   drawStart = new EventEmitter<DrawEvent>();
   @Output()
-  olError = new EventEmitter<BaseEvent>();
+  propertyChange = new EventEmitter<DrawEvent>();
-  @Output()
-  propertyChange = new EventEmitter<ObjectEvent>();
 
   instance: Draw;
 
@@ -69,12 +63,10 @@ export class DrawInteractionComponent implements OnInit, OnDestroy {
   ngOnInit() {
     this.instance = new Draw(this);
     this.instance.on('change', (event: DrawEvent) => this.olChange.emit(event));
-    this.instance.on('change:active', (event: ObjectEvent) => this.olChangeActive.emit(event));
+    this.instance.on('change:active', (event: DrawEvent) => this.olChangeActive.emit(event));
-    this.instance.on('drawabort', (event: DrawEvent) => this.olDrawAbort.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('error', (event: BaseEvent) => this.olError.emit(event));
+    this.instance.on('propertychange', (event: DrawEvent) => this.propertyChange.emit(event));
-    this.instance.on('propertychange', (event: ObjectEvent) => this.propertyChange.emit(event));
     this.map.instance.addInteraction(this.instance);
   }
 

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

@@ -1,15 +1,12 @@
-import { Component, OnDestroy, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
-import { MapComponent } from '../map.component';
-import { Modify } from 'ol/interaction';
 import { Collection, Feature } from 'ol';
-import { Style } from 'ol/style';
-import { Vector } from 'ol/source';
-import { ModifyEvent } from 'ol/interaction/Modify';
-import { StyleFunction } from 'ol/style/Style';
 import { Condition } from 'ol/events/condition';
-import { ObjectEvent } from 'ol/Object';
+import { Modify } from 'ol/interaction';
-import { DrawEvent } from 'ol/interaction/Draw';
+import { ModifyEvent } from 'ol/interaction/Modify';
-import BaseEvent from 'ol/events/Event';
+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',
@@ -32,17 +29,15 @@ export class ModifyInteractionComponent implements OnInit, OnDestroy {
   source?: Vector;
 
   @Output()
-  olChange = new EventEmitter<DrawEvent>();
+  modifyEnd = new EventEmitter<ModifyEvent>();
   @Output()
-  olChangeActive = new EventEmitter<ObjectEvent>();
+  modifyStart = new EventEmitter<ModifyEvent>();
   @Output()
-  olError = new EventEmitter<BaseEvent>();
+  olChange = new EventEmitter<ModifyEvent>();
   @Output()
-  olModifyEnd = new EventEmitter<ModifyEvent>();
+  olChangeActive = new EventEmitter<ModifyEvent>();
   @Output()
-  olModifyStart = new EventEmitter<ModifyEvent>();
+  propertyChange = new EventEmitter<ModifyEvent>();
-  @Output()
-  propertyChange = new EventEmitter<ObjectEvent>();
 
   instance: Modify;
 
@@ -50,12 +45,11 @@ export class ModifyInteractionComponent implements OnInit, OnDestroy {
 
   ngOnInit() {
     this.instance = new Modify(this);
-    this.instance.on('change', (event: DrawEvent) => this.olChange.emit(event));
+    this.instance.on('change', (event: ModifyEvent) => this.olChange.emit(event));
-    this.instance.on('change:active', (event: ObjectEvent) => this.olChangeActive.emit(event));
+    this.instance.on('change:active', (event: ModifyEvent) => this.olChangeActive.emit(event));
-    this.instance.on('error', (event: BaseEvent) => this.olError.emit(event));
+    this.instance.on('propertychange', (event: ModifyEvent) => this.propertyChange.emit(event));
-    this.instance.on('modifyend', (event: ModifyEvent) => this.olModifyEnd.emit(event));
+    this.instance.on('modifyend', (event: ModifyEvent) => this.modifyEnd.emit(event));
-    this.instance.on('modifystart', (event: ModifyEvent) => this.olModifyStart.emit(event));
+    this.instance.on('modifystart', (event: ModifyEvent) => this.modifyStart.emit(event));
-    this.instance.on('propertychange', (event: ObjectEvent) => this.propertyChange.emit(event));
     this.map.instance.addInteraction(this.instance);
   }
 

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

@@ -1,4 +1,4 @@
-import { Component, OnDestroy, OnInit, Input } from '@angular/core';
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
 import { PinchZoom } from 'ol/interaction';
 import { MapComponent } from '../map.component';
 

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

@@ -1,14 +1,12 @@
-import { Component, OnDestroy, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
-import { MapComponent } from '../map.component';
+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 { Collection, Feature } from 'ol';
-import { SelectEvent, FilterFunction } from 'ol/interaction/Select';
 import { StyleFunction } from 'ol/style/Style';
-import { Condition } from 'ol/events/condition';
+import { MapComponent } from '../map.component';
-import { ObjectEvent } from 'ol/Object';
-import BaseEvent from 'ol/events/Event';
 
 @Component({
   selector: 'aol-interaction-select',
@@ -35,17 +33,15 @@ export class SelectInteractionComponent implements OnInit, OnDestroy {
   filter?: FilterFunction;
   @Input()
   wrapX?: boolean;
+  @Input()
+  hitTolerance?: number;
 
   @Output()
   olChange = new EventEmitter<SelectEvent>();
   @Output()
-  olChangeActive = new EventEmitter<ObjectEvent>();
-  @Output()
-  olError = new EventEmitter<BaseEvent>();
-  @Output()
-  propertyChange = new EventEmitter<ObjectEvent>();
-  @Output()
   olSelect = new EventEmitter<SelectEvent>();
+  @Output()
+  propertyChange = new EventEmitter<SelectEvent>();
 
   instance: Select;
 
@@ -55,10 +51,9 @@ export class SelectInteractionComponent implements OnInit, OnDestroy {
     this.instance = new Select(this);
 
     this.instance.on('change', (event: SelectEvent) => this.olChange.emit(event));
-    this.instance.on('change:active', (event: ObjectEvent) => this.olChangeActive.emit(event));
-    this.instance.on('error', (event: BaseEvent) => this.olError.emit(event));
-    this.instance.on('propertychange', (event: ObjectEvent) => this.propertyChange.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);
   }
 

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

@@ -1,11 +1,9 @@
-import { Component, OnDestroy, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
-import { Translate } from 'ol/interaction';
 import { Collection, Feature } from 'ol';
-import { Layer } from 'ol/layer';
+import { Translate } from 'ol/interaction';
 import { TranslateEvent } from 'ol/interaction/Translate';
+import { Layer } from 'ol/layer';
 import { MapComponent } from '../map.component';
-import BaseEvent from 'ol/events/Event';
-import { ObjectEvent } from 'ol/Object';
 
 @Component({
   selector: 'aol-interaction-translate',
@@ -20,31 +18,31 @@ export class TranslateInteractionComponent implements OnInit, OnDestroy {
   hitTolerance?: number;
 
   @Output()
-  olChange = new EventEmitter<BaseEvent>();
+  olChange: EventEmitter<TranslateEvent>;
   @Output()
-  olChangeActive = new EventEmitter<ObjectEvent>();
+  propertyChange: EventEmitter<TranslateEvent>;
   @Output()
-  olError = new EventEmitter<BaseEvent>();
+  translateEnd: EventEmitter<TranslateEvent>;
   @Output()
-  propertyChange = new EventEmitter<ObjectEvent>();
+  translateStart: EventEmitter<TranslateEvent>;
   @Output()
-  translateEnd = new EventEmitter<TranslateEvent>();
+  translating: EventEmitter<TranslateEvent>;
-  @Output()
-  translateStart = new EventEmitter<TranslateEvent>();
-  @Output()
-  translating = new EventEmitter<TranslateEvent>();
 
   instance: Translate;
 
-  constructor(private map: MapComponent) {}
+  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: BaseEvent) => this.olChange.emit(event));
+    this.instance.on('change', (event: TranslateEvent) => this.olChange.emit(event));
-    this.instance.on('change:active', (event: ObjectEvent) => this.olChangeActive.emit(event));
+    this.instance.on('propertychange', (event: TranslateEvent) => this.propertyChange.emit(event));
-    this.instance.on('error', (event: BaseEvent) => this.olError.emit(event));
-    this.instance.on('propertychange', (event: ObjectEvent) => 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));

projects/ngx-openlayers/src/lib/layers/layer.component.ts

@@ -1,11 +1,10 @@
-import { OnDestroy, OnInit, OnChanges, Input, SimpleChanges, Directive } from '@angular/core';
+import { Directive, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
-import Event from 'ol/events/Event';
+import { Event } from 'ol/events';
+import { Extent } from 'ol/extent';
 import { MapComponent } from '../map.component';
 import { LayerGroupComponent } from './layergroup.component';
-import { Extent } from 'ol/extent';
 
 @Directive()
-// eslint-disable-next-line @angular-eslint/directive-class-suffix
 export abstract class LayerComponent implements OnInit, OnChanges, OnDestroy {
   @Input()
   opacity: number;
@@ -25,10 +24,10 @@ export abstract class LayerComponent implements OnInit, OnChanges, OnDestroy {
   @Input()
   postrender: (evt: Event) => void;
 
-  public instance: any;
+  instance: any;
-  public componentType = 'layer';
+  componentType = 'layer';
 
-  protected constructor(protected host: MapComponent | LayerGroupComponent) {}
+  constructor(protected host: MapComponent | LayerGroupComponent) {}
 
   ngOnInit() {
     if (this.prerender !== null && this.prerender !== undefined) {

projects/ngx-openlayers/src/lib/layers/layerimage.component.ts

@@ -1,9 +1,9 @@
 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';
-import { Extent } from 'ol/extent';
 
 @Component({
   selector: 'aol-layer-image',
@@ -23,6 +23,8 @@ export class LayerImageComponent extends LayerComponent implements OnInit, OnCha
   @Input()
   zIndex: number;
 
+  source: Image;
+
   constructor(map: MapComponent, @Optional() group?: LayerGroupComponent) {
     super(group || map);
   }

projects/ngx-openlayers/src/lib/layers/layertile.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnDestroy, OnInit, Input, Optional, OnChanges, SimpleChanges } from '@angular/core';
+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';
@@ -14,6 +14,8 @@ export class LayerTileComponent extends LayerComponent implements OnInit, OnDest
   @Input()
   useInterimTilesOnError: boolean;
 
+  source: Tile;
+
   constructor(map: MapComponent, @Optional() group?: LayerGroupComponent) {
     super(group || map);
   }

projects/ngx-openlayers/src/lib/layers/layervector.component.ts

@@ -1,8 +1,8 @@
-import { Component, OnDestroy, OnInit, Input, Optional, OnChanges, SimpleChanges } from '@angular/core';
+import { Component, Input, OnChanges, OnDestroy, OnInit, Optional, SimpleChanges } from '@angular/core';
-import { MapComponent } from '../map.component';
 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';
 
@@ -23,6 +23,8 @@ export class LayerVectorComponent extends LayerComponent implements OnInit, OnDe
   @Input()
   updateWhileInteracting: boolean;
 
+  source: Vector;
+
   constructor(map: MapComponent, @Optional() group?: LayerGroupComponent) {
     super(group || map);
   }

projects/ngx-openlayers/src/lib/layers/layervectortile.component.ts

@@ -1,5 +1,6 @@
 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';
@@ -15,7 +16,7 @@ export class LayerVectorTileComponent extends LayerComponent implements OnInit,
   @Input()
   renderBuffer: number;
   @Input()
-  renderMode: any | string;
+  renderMode: RenderType | string;
   /* not marked as optional in the typings */
   @Input()
   renderOrder: (feature1: Feature, feature2: Feature) => number;

projects/ngx-openlayers/src/lib/map.component.ts

@@ -0,0 +1,122 @@
+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,7 +1,8 @@
 import { Component, ContentChild, Input, OnDestroy, OnInit } from '@angular/core';
-import { MapComponent } from './map.component';
+import { Overlay, PanOptions } from 'ol';
-import Overlay, { PanOptions, Positioning } from 'ol/Overlay';
+import OverlayPositioning from 'ol/OverlayPositioning';
 import { ContentComponent } from './content.component';
+import { MapComponent } from './map.component';
 
 @Component({
   selector: 'aol-overlay',
@@ -16,7 +17,7 @@ export class OverlayComponent implements OnInit, OnDestroy {
   @Input()
   offset: number[];
   @Input()
-  positioning: Positioning;
+  positioning: OverlayPositioning | string;
   @Input()
   stopEvent: boolean;
   @Input()
@@ -30,7 +31,7 @@ export class OverlayComponent implements OnInit, OnDestroy {
 
   componentType = 'overlay';
   instance: Overlay;
-  element: HTMLElement;
+  element: Element;
 
   constructor(private map: MapComponent) {}
 

projects/ngx-openlayers/src/lib/sources/bingmaps.component.ts

@@ -1,8 +1,8 @@
 import { Component, Host, Input, OnInit, forwardRef } from '@angular/core';
-import { BingMaps } from 'ol/source';
-import { SourceComponent } from './source.component';
-import { LayerTileComponent } from '../layers/layertile.component';
 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',

projects/ngx-openlayers/src/lib/sources/cluster.component.ts

@@ -29,11 +29,10 @@ export class SourceClusterComponent extends SourceComponent implements AfterCont
   @Input()
   wrapX?: boolean;
 
-  @ContentChild(SourceVectorComponent, { static: false })
+  @ContentChild(SourceVectorComponent)
   sourceVectorComponent: SourceVectorComponent;
-
-  instance: Cluster;
   source: Vector;
+  instance: Cluster;
 
   constructor(@Host() layer: LayerVectorComponent) {
     super(layer);

projects/ngx-openlayers/src/lib/sources/geojson.component.ts

@@ -1,10 +1,10 @@
 import { Component, Host, Input, OnInit, forwardRef } from '@angular/core';
-import { LayerVectorComponent } from '../layers/layervector.component';
+import { Feature } from 'ol';
-import { SourceComponent } from './source.component';
-import FeatureFormat from 'ol/format/Feature';
-import { Vector } from 'ol/source';
 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',
@@ -22,7 +22,7 @@ export class SourceGeoJSONComponent extends SourceComponent implements OnInit {
   url: string;
 
   instance: Vector;
-  format: FeatureFormat;
+  format: Feature;
 
   constructor(@Host() layer: LayerVectorComponent) {
     super(layer);

projects/ngx-openlayers/src/lib/sources/imagearcgisrest.component.ts

@@ -9,13 +9,13 @@ import {
   Output,
   SimpleChanges,
 } from '@angular/core';
-import ImageArcGISRest from 'ol/source/ImageArcGISRest';
+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';
-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-imagearcgisrest',
@@ -25,7 +25,7 @@ import { ImageSourceEvent } from 'ol/source/Image';
 export class SourceImageArcGISRestComponent extends SourceComponent implements OnInit, OnChanges {
   @Input() projection: ProjectionLike | string;
   @Input() url: string;
-  @Input() attributions: AttributionLike;
+  @Input() attributions: AttributionLike[];
   @Input() crossOrigin?: string;
   @Input() imageLoadFunction?: LoadFunction;
   @Input() params?: { [k: string]: any };

projects/ngx-openlayers/src/lib/sources/imagestatic.component.ts

@@ -1,23 +1,23 @@
 import {
   Component,
+  EventEmitter,
   Host,
   Input,
-  forwardRef,
-  Output,
-  EventEmitter,
   OnChanges,
-  SimpleChanges,
   OnInit,
+  Output,
+  SimpleChanges,
+  forwardRef,
 } from '@angular/core';
-import { ImageStatic } from 'ol/source';
-import { SourceComponent } from './source.component';
-import { LayerImageComponent } from '../layers/layerimage.component';
-import { ProjectionLike } from 'ol/proj';
-import { Extent } from 'ol/extent';
-import { AttributionLike } from 'ol/source/Source';
 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',

projects/ngx-openlayers/src/lib/sources/imagewms.component.ts

@@ -16,7 +16,6 @@ import { ProjectionLike } from 'ol/proj';
 import { AttributionLike } from 'ol/source/Source';
 import { LoadFunction } from 'ol/Image';
 import { ImageSourceEvent } from 'ol/source/Image';
-import { ServerType } from 'ol/source/WMSServerType';
 
 @Component({
   selector: 'aol-source-imagewms',
@@ -31,7 +30,7 @@ export class SourceImageWMSComponent extends SourceComponent implements OnChange
   @Input()
   hidpi: boolean;
   @Input()
-  serverType: ServerType;
+  serverType: string;
   @Input()
   imageLoadFunction?: LoadFunction;
   @Input()

projects/ngx-openlayers/src/lib/sources/osm.component.ts

@@ -33,11 +33,11 @@ export class SourceOsmComponent extends SourceXYZComponent implements AfterConte
   wrapX: boolean;
 
   @Output()
-  tileLoadStart = new EventEmitter<TileSourceEvent>();
+  tileLoadStart: EventEmitter<TileSourceEvent> = new EventEmitter<TileSourceEvent>();
   @Output()
-  tileLoadEnd = new EventEmitter<TileSourceEvent>();
+  tileLoadEnd: EventEmitter<TileSourceEvent> = new EventEmitter<TileSourceEvent>();
   @Output()
-  tileLoadError = new EventEmitter<TileSourceEvent>();
+  tileLoadError: EventEmitter<TileSourceEvent> = new EventEmitter<TileSourceEvent>();
 
   instance: OSM;
 
@@ -53,10 +53,12 @@ export class SourceOsmComponent extends SourceXYZComponent implements AfterConte
     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);
+    this._register(this.instance);
   }
 }

projects/ngx-openlayers/src/lib/sources/raster.component.ts

@@ -9,7 +9,7 @@ import {
   Output,
 } from '@angular/core';
 import { Raster, Source } from 'ol/source';
-import { Operation, RasterSourceEvent } from 'ol/source/Raster';
+import { Operation, RasterOperationType, RasterSourceEvent } from 'ol/source/Raster';
 
 import { LayerImageComponent } from '../layers/layerimage.component';
 import { SourceComponent } from './source.component';
@@ -32,17 +32,21 @@ export class SourceRasterComponent extends SourceComponent implements AfterConte
   @Input()
   lib?: any;
   @Input()
-  operationType?: 'pixel' | 'image';
+  operationType?: RasterOperationType;
 
   @Output()
-  beforeOperations = new EventEmitter<RasterSourceEvent>();
+  beforeOperations: EventEmitter<RasterSourceEvent> = new EventEmitter<RasterSourceEvent>();
   @Output()
-  afterOperations = new EventEmitter<RasterSourceEvent>();
+  afterOperations: EventEmitter<RasterSourceEvent> = new EventEmitter<RasterSourceEvent>();
 
   instance: Raster;
   sources: Source[] = [];
 
-  @ContentChild(SourceComponent, { static: false })
+  constructor(@Host() layer: LayerImageComponent) {
+    super(layer);
+  }
+
+  @ContentChild(SourceComponent)
   set source(sourceComponent: SourceComponent) {
     this.sources = [sourceComponent.instance];
     if (this.instance) {
@@ -51,10 +55,6 @@ export class SourceRasterComponent extends SourceComponent implements AfterConte
     }
   }
 
-  constructor(@Host() layer: LayerImageComponent) {
-    super(layer);
-  }
-
   ngAfterContentInit() {
     this.init();
   }
@@ -63,6 +63,6 @@ export class SourceRasterComponent extends SourceComponent implements AfterConte
     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);
+    this._register(this.instance);
   }
 }

projects/ngx-openlayers/src/lib/sources/source.component.ts

@@ -1,10 +1,9 @@
-import { Input, OnDestroy, Directive } from '@angular/core';
+import { Directive, Input, OnDestroy } from '@angular/core';
-import Source from 'ol/source/Source';
+import { Source } from 'ol';
 
 import { LayerComponent } from '../layers/layer.component';
 
 @Directive()
-// eslint-disable-next-line @angular-eslint/directive-class-suffix
 export abstract class SourceComponent implements OnDestroy {
   @Input()
   attributions: any;
@@ -12,7 +11,7 @@ export abstract class SourceComponent implements OnDestroy {
   public instance: Source;
   public componentType = 'source';
 
-  protected constructor(protected host: LayerComponent) {}
+  constructor(protected host: LayerComponent) {}
 
   ngOnDestroy() {
     if (this.host && this.host.instance) {
@@ -20,7 +19,7 @@ export abstract class SourceComponent implements OnDestroy {
     }
   }
 
-  protected register(s: Source) {
+  protected _register(s: Source) {
     if (this.host) {
       this.host.instance.setSource(s);
     }

projects/ngx-openlayers/src/lib/sources/tilewms.component.ts

@@ -2,9 +2,8 @@ import { Component, Host, Input, OnChanges, OnInit, forwardRef, SimpleChanges }
 import { LayerTileComponent } from '../layers/layertile.component';
 import { SourceComponent } from './source.component';
 import { TileWMS } from 'ol/source';
-import TileGrid from 'ol/tilegrid/TileGrid';
+import { TileGrid } from 'ol/tilegrid';
 import { LoadFunction } from 'ol/Tile';
-import { ServerType } from 'ol/source/WMSServerType';
 
 @Component({
   selector: 'aol-source-tilewms',
@@ -27,7 +26,7 @@ export class SourceTileWMSComponent extends SourceComponent implements OnChanges
   @Input()
   reprojectionErrorThreshold: number;
   @Input()
-  serverType: ServerType;
+  serverType: string;
   @Input()
   tileGrid: TileGrid;
   @Input()

projects/ngx-openlayers/src/lib/sources/tilewmts.component.ts

@@ -13,12 +13,12 @@ import {
 import { LayerTileComponent } from '../layers/layertile.component';
 import { SourceComponent } from './source.component';
 import { TileGridWMTSComponent } from '../tilegridwmts.component';
-import { WMTS as SourceWMTS } from 'ol/source';
+import { WMTS } from 'ol/source';
-import WMTS from 'ol/tilegrid/WMTS';
+import { WMTS as TileGridWMTS } from 'ol/tilegrid';
+import { WMTSRequestEncoding } from 'ol/source';
 import { ProjectionLike } from 'ol/proj';
 import { LoadFunction } from 'ol/Tile';
 import { TileSourceEvent } from 'ol/source/Tile';
-import { RequestEncoding } from 'ol/source/WMTS';
 
 @Component({
   selector: 'aol-source-tilewmts',
@@ -31,13 +31,13 @@ export class SourceTileWMTSComponent extends SourceComponent implements AfterCon
   @Input()
   crossOrigin?: string;
   @Input()
-  tileGrid: WMTS;
+  tileGrid: TileGridWMTS;
   @Input()
   projection: ProjectionLike;
   @Input()
   reprojectionErrorThreshold?: number;
   @Input()
-  requestEncoding?: RequestEncoding | undefined;
+  requestEncoding?: WMTSRequestEncoding | string;
   @Input()
   layer: string;
   @Input()
@@ -64,16 +64,16 @@ export class SourceTileWMTSComponent extends SourceComponent implements AfterCon
   wrapX?: boolean;
 
   @Output()
-  tileLoadStart = new EventEmitter<TileSourceEvent>();
+  tileLoadStart: EventEmitter<TileSourceEvent> = new EventEmitter<TileSourceEvent>();
   @Output()
-  tileLoadEnd = new EventEmitter<TileSourceEvent>();
+  tileLoadEnd: EventEmitter<TileSourceEvent> = new EventEmitter<TileSourceEvent>();
   @Output()
-  tileLoadError = new EventEmitter<TileSourceEvent>();
+  tileLoadError: EventEmitter<TileSourceEvent> = new EventEmitter<TileSourceEvent>();
 
-  @ContentChild(TileGridWMTSComponent, { static: false })
+  @ContentChild(TileGridWMTSComponent)
   tileGridWMTS: TileGridWMTSComponent;
 
-  instance: SourceWMTS;
+  instance: WMTS;
 
   constructor(@Host() layer: LayerTileComponent) {
     super(layer);
@@ -101,7 +101,7 @@ export class SourceTileWMTSComponent extends SourceComponent implements AfterCon
   }
 
   setLayerSource(): void {
-    this.instance = new SourceWMTS(this);
+    this.instance = new WMTS(this);
     this.instance.on('tileloadstart', (event: TileSourceEvent) => this.tileLoadStart.emit(event));
     this.instance.on('tileloadend', (event: TileSourceEvent) => this.tileLoadEnd.emit(event));
     this.instance.on('tileloaderror', (event: TileSourceEvent) => this.tileLoadError.emit(event));

projects/ngx-openlayers/src/lib/sources/utfgrid.component.ts

@@ -2,7 +2,6 @@ import { Component, Host, Input, OnInit, forwardRef } from '@angular/core';
 import { SourceComponent } from './source.component';
 import { LayerTileComponent } from '../layers/layertile.component';
 import { UTFGrid } from 'ol/source';
-import { Config } from 'ol/source/TileJSON';
 
 @Component({
   selector: 'aol-source-utfgrid',
@@ -10,7 +9,7 @@ import { Config } from 'ol/source/TileJSON';
   providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceUTFGridComponent) }],
 })
 export class SourceUTFGridComponent extends SourceComponent implements OnInit {
-  @Input() tileJSON: Config;
+  @Input() tileJSON: JSON;
   @Input() url: string;
 
   instance: UTFGrid;

projects/ngx-openlayers/src/lib/sources/vectortile.component.ts

@@ -1,5 +1,5 @@
 import { Component, Host, Input, forwardRef, ContentChild, AfterContentInit } from '@angular/core';
-import { VectorTile } from 'ol/source';
+import { VectorTile } from 'ol';
 import Feature from 'ol/format/Feature';
 import TileGrid from 'ol/tilegrid/TileGrid';
 import { LayerVectorTileComponent } from '../layers/layervectortile.component';
@@ -32,15 +32,16 @@ export class SourceVectorTileComponent extends SourceComponent implements AfterC
   @Input()
   wrapX: boolean;
 
-  @ContentChild(FormatComponent, { static: false })
+  @ContentChild(FormatComponent)
   formatComponent: FormatComponent;
-  @ContentChild(TileGridComponent, { static: false })
+  @ContentChild(TileGridComponent)
   tileGridComponent: TileGridComponent;
 
-  public instance: VectorTile;
   format: Feature;
   tileGrid: TileGrid;
 
+  instance: VectorTile;
+
   constructor(@Host() layer: LayerVectorTileComponent) {
     super(layer);
   }

projects/ngx-openlayers/src/lib/sources/xyz.component.ts

@@ -58,15 +58,15 @@ export class SourceXYZComponent extends SourceComponent implements AfterContentI
   @Input()
   wrapX: boolean;
 
-  @ContentChild(TileGridComponent, { static: false })
+  @ContentChild(TileGridComponent)
   tileGridXYZ: TileGridComponent;
 
   @Output()
-  tileLoadStart = new EventEmitter<TileSourceEvent>();
+  tileLoadStart: EventEmitter<TileSourceEvent> = new EventEmitter<TileSourceEvent>();
   @Output()
-  tileLoadEnd = new EventEmitter<TileSourceEvent>();
+  tileLoadEnd: EventEmitter<TileSourceEvent> = new EventEmitter<TileSourceEvent>();
   @Output()
-  tileLoadError = new EventEmitter<TileSourceEvent>();
+  tileLoadError: EventEmitter<TileSourceEvent> = new EventEmitter<TileSourceEvent>();
 
   instance: XYZ;
 
@@ -110,6 +110,6 @@ export class SourceXYZComponent extends SourceComponent implements AfterContentI
     this.instance.on('tileloadend', (event: TileSourceEvent) => this.tileLoadEnd.emit(event));
     this.instance.on('tileloaderror', (event: TileSourceEvent) => this.tileLoadError.emit(event));
 
-    this.register(this.instance);
+    this._register(this.instance);
   }
 }