quentinlampin · maurizi · Oct 9, 2019
diff --git a/package.json b/package.json
@@ -36,6 +36,7 @@
     "@angular/cli": "^8.3.13",
     "@angular/compiler-cli": "^8.2.11",
     "@angular/language-service": "^8.2.11",
+    "@hanreev/types-ol": "^3.0.0",
     "@types/jasmine": "~3.3.8",
     "@types/jasminewd2": "~2.0.3",
     "@types/node": "~8.9.4",

diff --git a/projects/ngx-openlayers/src/lib/attribution.component.ts b/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;
   }
 }
diff --git a/projects/ngx-openlayers/src/lib/attributions.component.ts b/projects/ngx-openlayers/src/lib/attributions.component.ts
@@ -1,5 +1,4 @@
 import { AfterViewInit, Component, ContentChildren, Host, QueryList } from '@angular/core';
-import { Attribution } from 'ol/control';
 import { SourceComponent } from './sources/source.component';
 import { AttributionComponent } from './attribution.component';
 
@@ -8,7 +7,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 +17,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);
     }

diff --git a/projects/ngx-openlayers/src/lib/controls/attribution.component.ts b/projects/ngx-openlayers/src/lib/controls/attribution.component.ts
@@ -1,15 +1,15 @@
 import { Component, ElementRef, Input, OnDestroy, OnInit } from '@angular/core';
-import { Attribution } from 'ol/control';
+import Attribution, { Options as AttributionOptions } from 'ol/control/Attribution';
 import { MapComponent } from '../map.component';
 
 @Component({
   selector: 'aol-control-attribution',
   template: ``,
 })
-export class ControlAttributionComponent implements OnInit, OnDestroy {
+export class ControlAttributionComponent implements OnInit, OnDestroy, AttributionOptions {
   public componentType = 'control';
   instance: Attribution;
-  target: Element;
+  target: HTMLElement;
   @Input()
   collapsible: boolean;
 

diff --git a/projects/ngx-openlayers/src/lib/controls/control.component.ts b/projects/ngx-openlayers/src/lib/controls/control.component.ts
@@ -1,5 +1,5 @@
 import { Component, ContentChild, OnDestroy, OnInit } from '@angular/core';
-import { Control } from 'ol/control';
+import Control, { Options as ControlOptions } from 'ol/control/Control';
 import { MapComponent } from '../map.component';
 import { ContentComponent } from '../content.component';
 import { TileGridComponent } from '../tilegrid.component';
@@ -10,10 +10,10 @@ import { TileGridComponent } from '../tilegrid.component';
     <ng-content></ng-content>
   `,
 })
-export class ControlComponent implements OnInit, OnDestroy {
+export class ControlComponent implements OnInit, OnDestroy, ControlOptions {
   public componentType = 'control';
   instance: Control;
-  element: Element;
+  element: HTMLElement;
   @ContentChild(ContentComponent, { static: true })
   content: ContentComponent;
 

diff --git a/projects/ngx-openlayers/src/lib/controls/default.component.ts b/projects/ngx-openlayers/src/lib/controls/default.component.ts
@@ -1,5 +1,6 @@
 import { Component, OnDestroy, OnInit, Input } from '@angular/core';
 import { Control, defaults } from 'ol/control';
+import { DefaultsOptions } from 'ol/control';
 import { Collection } from 'ol';
 import { Options as AttributionOptions } from 'ol/control/Attribution';
 import { Options as RotateOptions } from 'ol/control/Rotate';
@@ -11,7 +12,7 @@ import { MapComponent } from '../map.component';
   selector: 'aol-control-defaults',
   template: '',
 })
-export class DefaultControlComponent implements OnInit, OnDestroy {
+export class DefaultControlComponent implements OnInit, OnDestroy, DefaultsOptions {
   instance: Collection<Control>;
   @Input()
   attribution: boolean;

diff --git a/projects/ngx-openlayers/src/lib/controls/fullscreen.component.ts b/projects/ngx-openlayers/src/lib/controls/fullscreen.component.ts
@@ -1,5 +1,5 @@
 import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { FullScreen } from 'ol/control';
+import FullScreen, { Options as FullScreenOptions } from 'ol/control/FullScreen';
 import { MapComponent } from '../map.component';
 
 @Component({
@@ -8,7 +8,7 @@ import { MapComponent } from '../map.component';
     <ng-content></ng-content>
   `,
 })
-export class ControlFullScreenComponent implements OnInit, OnDestroy {
+export class ControlFullScreenComponent implements OnInit, OnDestroy, FullScreenOptions {
   instance: FullScreen;
 
   @Input()

diff --git a/projects/ngx-openlayers/src/lib/controls/mouseposition.component.ts b/projects/ngx-openlayers/src/lib/controls/mouseposition.component.ts
@@ -1,5 +1,5 @@
 import { Component, ElementRef, Input, OnDestroy, OnInit } from '@angular/core';
-import MousePosition from 'ol/control/MousePosition';
+import MousePosition, { Options as MousePositionOptions } from 'ol/control/MousePosition';
 import { MapComponent } from '../map.component';
 import { CoordinateFormat } from 'ol/coordinate';
 import { ProjectionLike } from 'ol/proj';
@@ -8,13 +8,13 @@ import { ProjectionLike } from 'ol/proj';
   selector: 'aol-control-mouseposition',
   template: ``,
 })
-export class ControlMousePositionComponent implements OnInit, OnDestroy {
+export class ControlMousePositionComponent implements OnInit, OnDestroy, MousePositionOptions {
   instance: MousePosition;
   @Input()
   coordinateFormat: CoordinateFormat;
   @Input()
   projection: ProjectionLike;
-  target: Element;
+  target: HTMLElement;
 
   constructor(private map: MapComponent, private element: ElementRef) {}
 

diff --git a/projects/ngx-openlayers/src/lib/controls/overviewmap.component.ts b/projects/ngx-openlayers/src/lib/controls/overviewmap.component.ts
@@ -1,7 +1,7 @@
 import { Component, Input, OnDestroy, OnInit, OnChanges, SimpleChanges } from '@angular/core';
 import { Layer } from 'ol/layer';
 import { View } from 'ol';
-import { OverviewMap } from 'ol/control';
+import OverviewMap, { Options as OverviewMapOptions } from 'ol/control/OverviewMap';
 import { MapComponent } from '../map.component';
 
 @Component({
@@ -10,7 +10,7 @@ import { MapComponent } from '../map.component';
     <ng-content></ng-content>
   `,
 })
-export class ControlOverviewMapComponent implements OnInit, OnChanges, OnDestroy {
+export class ControlOverviewMapComponent implements OnInit, OnChanges, OnDestroy, OverviewMapOptions {
   instance: OverviewMap;
   @Input()
   collapsed: boolean;
@@ -23,7 +23,7 @@ export class ControlOverviewMapComponent implements OnInit, OnChanges, OnDestroy
   @Input()
   layers: Layer[];
   @Input()
-  target: Element;
+  target: HTMLElement;
   @Input()
   tipLabel: string;
   @Input()

diff --git a/projects/ngx-openlayers/src/lib/controls/rotate.component.ts b/projects/ngx-openlayers/src/lib/controls/rotate.component.ts
@@ -1,5 +1,5 @@
 import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { Rotate } from 'ol/control';
+import Rotate, { Options as RotateOptions } from 'ol/control/Rotate';
 import { MapComponent } from '../map.component';
 
 @Component({
@@ -8,7 +8,7 @@ import { MapComponent } from '../map.component';
     <ng-content></ng-content>
   `,
 })
-export class ControlRotateComponent implements OnInit, OnDestroy {
+export class ControlRotateComponent implements OnInit, OnDestroy, RotateOptions {
   instance: Rotate;
 
   @Input()

diff --git a/projects/ngx-openlayers/src/lib/controls/scaleline.component.ts b/projects/ngx-openlayers/src/lib/controls/scaleline.component.ts
@@ -1,5 +1,5 @@
 import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { ScaleLine } from 'ol/control';
+import ScaleLine, { Options as ScaleLineOptions } from 'ol/control/ScaleLine';
 import { MapComponent } from '../map.component';
 
 @Component({
@@ -8,7 +8,7 @@ import { MapComponent } from '../map.component';
     <ng-content></ng-content>
   `,
 })
-export class ControlScaleLineComponent implements OnInit, OnDestroy {
+export class ControlScaleLineComponent implements OnInit, OnDestroy, ScaleLineOptions {
   instance: ScaleLine;
   @Input()
   units: string;

diff --git a/projects/ngx-openlayers/src/lib/controls/zoom.component.ts b/projects/ngx-openlayers/src/lib/controls/zoom.component.ts
@@ -1,5 +1,5 @@
 import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { Zoom } from 'ol/control';
+import Zoom, { Options as ZoomOptions } from 'ol/control/Zoom';
 import { MapComponent } from '../map.component';
 
 @Component({
@@ -8,15 +8,15 @@ import { MapComponent } from '../map.component';
     <ng-content></ng-content>
   `,
 })
-export class ControlZoomComponent implements OnInit, OnDestroy {
+export class ControlZoomComponent implements OnInit, OnDestroy, ZoomOptions {
   instance: Zoom;
 
   @Input()
   duration: number;
   @Input()
-  zoomInLabel: string | Node;
+  zoomInLabel: string | HTMLElement;
   @Input()
-  zoomOutLabel: string | Node;
+  zoomOutLabel: string | HTMLElement;
   @Input()
   zoomInTipLabel: string;
   @Input()

diff --git a/projects/ngx-openlayers/src/lib/controls/zoomslider.component.ts b/projects/ngx-openlayers/src/lib/controls/zoomslider.component.ts
@@ -1,5 +1,5 @@
 import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { ZoomSlider } from 'ol/control';
+import ZoomSlider, { Options as ZoomSliderOptions } from 'ol/control/ZoomSlider';
 import { MapComponent } from '../map.component';
 
 @Component({
@@ -8,7 +8,7 @@ import { MapComponent } from '../map.component';
     <ng-content></ng-content>
   `,
 })
-export class ControlZoomSliderComponent implements OnInit, OnDestroy {
+export class ControlZoomSliderComponent implements OnInit, OnDestroy, ZoomSliderOptions {
   instance: ZoomSlider;
 
   @Input()

diff --git a/projects/ngx-openlayers/src/lib/controls/zoomtoextent.component.ts b/projects/ngx-openlayers/src/lib/controls/zoomtoextent.component.ts
@@ -1,5 +1,5 @@
 import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { ZoomToExtent } from 'ol/control';
+import ZoomToExtent, { Options as ZoomToExtentOptions } from 'ol/control/ZoomToExtent';
 import { MapComponent } from '../map.component';
 import { Extent } from 'ol/extent';
 
@@ -9,13 +9,13 @@ import { Extent } from 'ol/extent';
     <ng-content></ng-content>
   `,
 })
-export class ControlZoomToExtentComponent implements OnInit, OnDestroy {
+export class ControlZoomToExtentComponent implements OnInit, OnDestroy, ZoomToExtentOptions {
   instance: ZoomToExtent;
 
   @Input()
   className: string;
   @Input()
-  label: string | Node;
+  label: string | HTMLElement;
   @Input()
   tipLabel: string;
   @Input()

diff --git a/projects/ngx-openlayers/src/lib/formats/mvt.component.ts b/projects/ngx-openlayers/src/lib/formats/mvt.component.ts
@@ -1,21 +1,18 @@
 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';
+import MVT, { Options as MVTOptions } from 'ol/format/MVT';
 
 @Component({
   selector: 'aol-format-mvt',
   template: '',
   providers: [{ provide: FormatComponent, useExisting: forwardRef(() => FormatMVTComponent) }],
 })
-export class FormatMVTComponent extends FormatComponent {
+export class FormatMVTComponent extends FormatComponent implements MVTOptions {
   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()

diff --git a/projects/ngx-openlayers/src/lib/interactions/draganddrop.component.ts b/projects/ngx-openlayers/src/lib/interactions/draganddrop.component.ts
@@ -1,22 +1,22 @@
 import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { DragAndDrop } from 'ol/interaction';
-import Feature from 'ol/format/Feature';
+import DragAndDrop, { Options as DragAndDropOptions } from 'ol/interaction/DragAndDrop';
+import FeatureFormat from 'ol/format/Feature';
 import { MapComponent } from '../map.component';
 import { ProjectionLike } from 'ol/proj';
 
 @Component({
   selector: 'aol-interaction-draganddrop',
   template: '',
 })
-export class DragAndDropInteractionComponent implements OnInit, OnDestroy {
+export class DragAndDropInteractionComponent implements OnInit, OnDestroy, DragAndDropOptions {
   instance: DragAndDrop;
 
   @Input()
-  formatConstructors: ((n: Feature) => any)[];
+  formatConstructors: FeatureFormat[];
   @Input()
   projection: ProjectionLike;
   @Input()
-  target: Element;
+  target: HTMLElement;
 
   constructor(private map: MapComponent) {}
 

diff --git a/projects/ngx-openlayers/src/lib/interactions/dragbox.component.ts b/projects/ngx-openlayers/src/lib/interactions/dragbox.component.ts
@@ -1,14 +1,13 @@
 import { Component, OnDestroy, OnInit, Input } from '@angular/core';
-import { DragBox } from 'ol/interaction';
-import { MapComponent } from '../map.component';
+import DragBox, { EndCondition, Options as DragBoxOptions } from 'ol/interaction/DragBox';
 import { Condition } from 'ol/events/condition';
-import { EndCondition } from 'ol/interaction/DragBox';
+import { MapComponent } from '../map.component';
 
 @Component({
   selector: 'aol-interaction-dragbox',
   template: '',
 })
-export class DragBoxInteractionComponent implements OnInit, OnDestroy {
+export class DragBoxInteractionComponent implements OnInit, OnDestroy, DragBoxOptions {
   instance: DragBox;
 
   @Input()
@@ -18,6 +17,8 @@ export class DragBoxInteractionComponent implements OnInit, OnDestroy {
   @Input()
   boxEndCondition: EndCondition;
 
+  onBoxEnd = undefined;
+
   constructor(private map: MapComponent) {}
 
   ngOnInit() {

diff --git a/projects/ngx-openlayers/src/lib/layers/layer.component.ts b/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';

diff --git a/projects/ngx-openlayers/src/lib/layers/layergroup.component.ts b/projects/ngx-openlayers/src/lib/layers/layergroup.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnDestroy, OnInit, SkipSelf, Optional } from '@angular/core';
-import { Group } from 'ol/layer';
+import Group, { Options as GroupOptions } from 'ol/layer/Group';
 import { LayerComponent } from './layer.component';
 import { MapComponent } from '../map.component';
 
@@ -9,7 +9,7 @@ import { MapComponent } from '../map.component';
     <ng-content></ng-content>
   `,
 })
-export class LayerGroupComponent extends LayerComponent implements OnInit, OnDestroy {
+export class LayerGroupComponent extends LayerComponent implements OnInit, OnDestroy, GroupOptions {
   public instance: Group;
 
   constructor(

diff --git a/projects/ngx-openlayers/src/lib/layers/layerimage.component.ts b/projects/ngx-openlayers/src/lib/layers/layerimage.component.ts
@@ -1,5 +1,6 @@
 import { Component, Input, OnChanges, OnInit, Optional, SimpleChanges } from '@angular/core';
-import { Image } from 'ol/layer';
+import Image from 'ol/layer/Image';
+import { Options as ImageOptions } from 'ol/layer/BaseImage';
 import { MapComponent } from '../map.component';
 import { LayerComponent } from './layer.component';
 import { LayerGroupComponent } from './layergroup.component';
@@ -11,9 +12,7 @@ import { Extent } from 'ol/extent';
     <ng-content></ng-content>
   `,
 })
-export class LayerImageComponent extends LayerComponent implements OnInit, OnChanges {
-  public source: Image;
-
+export class LayerImageComponent extends LayerComponent implements OnInit, OnChanges, ImageOptions {
   @Input()
   opacity: number;
   @Input()