Add OpenLayers typings and use to fix type mismatches

package.json

@@ -23,6 +23,7 @@
     "@angular/platform-browser": "~9.1.0",
     "@angular/platform-browser-dynamic": "~9.1.0",
     "@angular/router": "~9.1.0",
+    "@types/ol": "^6.3.1",
     "hammerjs": "^2.0.8",
     "ol": "~6.3.1",
     "rxjs": "~6.5.4",

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

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

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

@@ -8,7 +8,7 @@ import { AttributionComponent } from './attribution.component';
   template: '<ng-content></ng-content>',
 })
 export class AttributionsComponent implements AfterViewInit {
-  instance: Array<Attribution>;
+  instance: Array<string>;
 
   @ContentChildren(AttributionComponent)
   attributions: QueryList<AttributionComponent>;
@@ -18,7 +18,7 @@ export class AttributionsComponent implements AfterViewInit {
   /* we can do this at the very end */
   ngAfterViewInit() {
     if (this.attributions.length) {
-      this.instance = this.attributions.map((cmp) => cmp.instance);
+      this.instance = this.attributions.map((cmp) => cmp.label);
       // console.log('setting attributions:', this.instance);
       this.source.instance.setAttributions(this.instance);
     }

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

@@ -9,7 +9,7 @@ import { MapComponent } from '../map.component';
 export class ControlAttributionComponent implements OnInit, OnDestroy {
   public componentType = 'control';
   instance: Attribution;
-  target: Element;
+  target: HTMLElement;
   @Input()
   collapsible: boolean;
 

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

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

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

@@ -14,7 +14,7 @@ export class ControlMousePositionComponent implements OnInit, OnDestroy {
   coordinateFormat: CoordinateFormat;
   @Input()
   projection: ProjectionLike;
-  target: Element;
+  target: HTMLElement;
 
   constructor(private map: MapComponent, private element: ElementRef) {}
 

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

@@ -21,7 +21,7 @@ export class ControlOverviewMapComponent implements OnInit, OnChanges, OnDestroy
   @Input()
   layers: Layer[];
   @Input()
-  target: Element;
+  target: HTMLElement;
   @Input()
   tipLabel: string;
   @Input()

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

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

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

@@ -13,7 +13,7 @@ export class ControlZoomToExtentComponent implements OnInit, OnDestroy {
   @Input()
   className: string;
   @Input()
-  label: string | Node;
+  label: string | HTMLElement;
   @Input()
   tipLabel: string;
   @Input()

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

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

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

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

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

@@ -1,5 +1,5 @@
 import { OnDestroy, OnInit, OnChanges, Input, SimpleChanges } from '@angular/core';
-import { Event } from 'ol/events';
+import Event from 'ol/events/Event';
 import { MapComponent } from '../map.component';
 import { LayerGroupComponent } from './layergroup.component';
 import { Extent } from 'ol/extent';

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

@@ -10,8 +10,6 @@ import { Extent } from 'ol/extent';
   template: ` <ng-content></ng-content> `,
 })
 export class LayerImageComponent extends LayerComponent implements OnInit, OnChanges {
-  public source: Image;
-
   @Input()
   opacity: number;
   @Input()

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

@@ -9,8 +9,6 @@ import { LayerGroupComponent } from './layergroup.component';
   template: ` <ng-content></ng-content> `,
 })
 export class LayerTileComponent extends LayerComponent implements OnInit, OnDestroy, OnChanges {
-  public source: Tile;
-
   @Input()
   preload: number;
   @Input()

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

@@ -11,8 +11,6 @@ import { LayerGroupComponent } from './layergroup.component';
   template: ` <ng-content></ng-content> `,
 })
 export class LayerVectorComponent extends LayerComponent implements OnInit, OnDestroy, OnChanges {
-  public source: Vector;
-
   @Input()
   renderBuffer: number;
 

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

@@ -1,6 +1,6 @@
 import { Component, OnInit, Input, Optional, SimpleChanges, OnChanges } from '@angular/core';
 import { VectorTile } from 'ol/layer';
-import { RenderType } from 'ol/layer/VectorTile';
+import VectorTileRenderType from 'ol/layer/VectorTileRenderType';
 import { Feature } from 'ol';
 import { Style } from 'ol/style';
 import { MapComponent } from '../map.component';
@@ -16,7 +16,7 @@ export class LayerVectorTileComponent extends LayerComponent implements OnInit,
   @Input()
   renderBuffer: number;
   @Input()
-  renderMode: RenderType | string;
+  renderMode: VectorTileRenderType | string;
   /* not marked as optional in the typings */
   @Input()
   renderOrder: (feature1: Feature, feature2: Feature) => number;

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

@@ -9,10 +9,10 @@ import {
   SimpleChanges,
   OnChanges,
 } from '@angular/core';
-import Map from 'ol/Map';
+import { Map } from 'ol';
 import MapBrowserEvent from 'ol/MapBrowserEvent';
 import MapEvent from 'ol/MapEvent';
-import ObjectEvent from 'ol/Object';
+import { ObjectEvent } from 'ol/Object';
 import RenderEvent from 'ol/render/Event';
 import { Control } from 'ol/control';
 import { Interaction } from 'ol/interaction';
@@ -35,7 +35,7 @@ export class MapComponent implements OnInit, AfterViewInit, OnChanges {
   @Input()
   pixelRatio: number;
   @Input()
-  keyboardEventTarget: Element | string;
+  keyboardEventTarget: HTMLElement | string;
   @Input()
   loadTilesWhileAnimating: boolean;
   @Input()

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

@@ -1,6 +1,6 @@
 import { Component, ContentChild, Input, OnDestroy, OnInit } from '@angular/core';
 import { MapComponent } from './map.component';
-import { Overlay, PanOptions } from 'ol';
+import Overlay, { PanOptions } from 'ol/Overlay';
 import { ContentComponent } from './content.component';
 import OverlayPositioning from 'ol/OverlayPositioning';
 
@@ -11,7 +11,7 @@ import OverlayPositioning from 'ol/OverlayPositioning';
 export class OverlayComponent implements OnInit, OnDestroy {
   componentType = 'overlay';
   instance: Overlay;
-  element: Element;
+  element: HTMLElement;
   @ContentChild(ContentComponent, { static: true })
   content: ContentComponent;
 
@@ -20,7 +20,7 @@ export class OverlayComponent implements OnInit, OnDestroy {
   @Input()
   offset: number[];
   @Input()
-  positioning: OverlayPositioning | string;
+  positioning: OverlayPositioning;
   @Input()
   stopEvent: boolean;
   @Input()

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

@@ -1,7 +1,7 @@
 import { Component, Host, Input, OnInit, forwardRef } from '@angular/core';
 import { LayerVectorComponent } from '../layers/layervector.component';
 import { SourceComponent } from './source.component';
-import { Feature } from 'ol';
+import FeatureFormat from 'ol/format/Feature';
 import { Vector } from 'ol/source';
 import { GeoJSON } from 'ol/format';
 import { ProjectionLike } from 'ol/proj';
@@ -13,7 +13,7 @@ import { ProjectionLike } from 'ol/proj';
 })
 export class SourceGeoJSONComponent extends SourceComponent implements OnInit {
   instance: Vector;
-  format: Feature;
+  format: FeatureFormat;
   @Input()
   defaultDataProjection: ProjectionLike;
   @Input()

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

@@ -9,7 +9,7 @@ import {
   Output,
   SimpleChanges,
 } from '@angular/core';
-import { ImageArcGISRest } from 'ol/source';
+import ImageArcGISRest from 'ol/source/ImageArcGISRest';
 import { LayerImageComponent } from '../layers/layerimage.component';
 import { SourceComponent } from './source.component';
 import { ProjectionLike } from 'ol/proj';
@@ -27,7 +27,7 @@ export class SourceImageArcGISRestComponent extends SourceComponent implements O
 
   @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/raster.component.ts

@@ -9,7 +9,7 @@ import {
   Output,
 } from '@angular/core';
 import { Raster, Source } from 'ol/source';
-import { Operation, RasterOperationType, RasterSourceEvent } from 'ol/source/Raster';
+import { Operation, RasterSourceEvent } from 'ol/source/Raster';
 
 import { LayerImageComponent } from '../layers/layerimage.component';
 import { SourceComponent } from './source.component';
@@ -34,7 +34,7 @@ export class SourceRasterComponent extends SourceComponent implements AfterConte
   @Input()
   lib?: any;
   @Input()
-  operationType?: RasterOperationType;
+  operationType?: 'pixel' | 'image';
 
   @Output()
   beforeOperations: EventEmitter<RasterSourceEvent> = new EventEmitter<RasterSourceEvent>();

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

@@ -1,5 +1,5 @@
 import { Input, OnDestroy } from '@angular/core';
-import { Source } from 'ol';
+import Source from 'ol/source/Source';
 
 import { LayerComponent } from '../layers/layer.component';
 

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

@@ -2,7 +2,7 @@ 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';
+import TileGrid from 'ol/tilegrid/TileGrid';
 import { LoadFunction } from 'ol/Tile';
 
 @Component({

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

@@ -14,8 +14,8 @@ import { LayerTileComponent } from '../layers/layertile.component';
 import { SourceComponent } from './source.component';
 import { TileGridWMTSComponent } from '../tilegridwmts.component';
 import { WMTS } from 'ol/source';
-import { WMTS as TileGridWMTS } from 'ol/tilegrid';
-import { WMTSRequestEncoding } from 'ol/source';
+import TileGridWMTS from 'ol/tilegrid/WMTS';
+import WMTSRequestEncoding from 'ol/source/WMTSRequestEncoding';
 import { ProjectionLike } from 'ol/proj';
 import { LoadFunction } from 'ol/Tile';
 import { TileSourceEvent } from 'ol/source/Tile';

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

@@ -2,6 +2,7 @@ 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 +11,7 @@ import { UTFGrid } from 'ol/source';
 })
 export class SourceUTFGridComponent extends SourceComponent implements OnInit {
   instance: UTFGrid;
-  @Input() tileJSON: JSON;
+  @Input() tileJSON: Config;
   @Input() url: string;
 
   constructor(@Host() layer: LayerTileComponent) {

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';
+import { VectorTile } from 'ol/source';
 import Feature from 'ol/format/Feature';
 import TileGrid from 'ol/tilegrid/TileGrid';
 import { LayerVectorTileComponent } from '../layers/layervectortile.component';

projects/ngx-openlayers/src/lib/styles/circle.component.ts

@@ -1,5 +1,5 @@
 import { Component, Input, Host, AfterContentInit, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
-import { AtlasManager, Circle, Fill, Stroke } from 'ol/style';
+import { Circle, Fill, Stroke } from 'ol/style';
 import { StyleComponent } from './style.component';
 
 @Component({
@@ -18,8 +18,6 @@ export class StyleCircleComponent implements AfterContentInit, OnChanges, OnDest
   snapToPixel: boolean;
   @Input()
   stroke: Stroke;
-  @Input()
-  atlasManager: AtlasManager;
 
   constructor(@Host() private host: StyleComponent) {}
 

projects/ngx-openlayers/src/lib/styles/icon.component.ts

@@ -24,7 +24,7 @@ export class StyleIconComponent implements OnInit, OnChanges {
   @Input()
   crossOrigin: IconOrigin;
   @Input()
-  img: string;
+  img: HTMLCanvasElement | HTMLImageElement;
   @Input()
   offset: [number, number];
   @Input()

projects/ngx-openlayers/src/lib/styles/stroke.component.ts

@@ -17,11 +17,11 @@ export class StyleStrokeComponent implements OnInit, OnChanges {
   @Input()
   color: Color | undefined;
   @Input()
-  lineCap: string | undefined;
+  lineCap: CanvasLineCap | undefined;
   @Input()
   lineDash: number[] | undefined;
   @Input()
-  lineJoin: string | undefined;
+  lineJoin: CanvasLineJoin | undefined;
   @Input()
   miterLimit: number | undefined;
   @Input()