Migrate to OpenLayers 5

.gitignore

@@ -31,6 +31,7 @@ node_modules
 /libpeerconnection.log
 npm-debug.log
 yarn-error.log
+yarn.lock
 testem.log
 /typings
 

angular.json

@@ -48,7 +48,7 @@
             ],
             "styles": [
               "src/styles.css",
-              "projects/ngx-openlayers/node_modules/openlayers/dist/ol.css"
+              "node_modules/ol/ol.css"
             ],
             "scripts": []
           },

package.json

@@ -27,6 +27,7 @@
     "geojson": "^0.5.0",
     "hammer-timejs": "^1.1.0",
     "hammerjs": "^2.0.8",
+    "ol": "^5.3.1",
     "rxjs": "6.3.3",
     "zone.js": "^0.8.26"
   },

projects/ngx-openlayers/ng-package.json

@@ -2,9 +2,6 @@
   "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
   "dest": "../../dist/ngx-openlayers",
   "deleteDestPath": false,
-  "whitelistedNonPeerDependencies": [
-   "openlayers", "@types/openlayers"
-  ],
   "lib": {
     "entryFile": "src/public_api.ts"
   }

projects/ngx-openlayers/package.json

@@ -9,10 +9,8 @@
   },
   "peerDependencies": {
     "@angular/common": "^6.0.0-rc.0 || ^6.0.0 || ^7.0.0",
-    "@angular/core": "^6.0.0-rc.0 || ^6.0.0 || ^7.0.0"
+    "@angular/core": "^6.0.0-rc.0 || ^6.0.0 || ^7.0.0",
+    "ol": "^5.3.1"
   },
-  "dependencies": {
-    "@types/openlayers": "4.3.x || 4.4.x",
-    "openlayers": "4.3.x || 4.4.x"
-  }
+  "dependencies": {}
 }

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

@@ -1,5 +1,5 @@
 import { Component, ElementRef, OnInit } from '@angular/core';
-import { Attribution } from 'openlayers';
+import { Attribution } from 'ol/control';
 
 @Component({
   selector: 'aol-attribution',

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

@@ -1,5 +1,5 @@
 import { AfterViewInit, Component, ContentChildren, Host, QueryList } from '@angular/core';
-import { Attribution } from 'openlayers';
+import { Attribution } from 'ol/control';
 import { SourceComponent } from './sources/source.component';
 import { AttributionComponent } from './attribution.component';
 

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

@@ -1,5 +1,5 @@
 import { Component, ElementRef, Input, OnDestroy, OnInit } from '@angular/core';
-import { control } from 'openlayers';
+import { Attribution } from 'ol/control';
 import { MapComponent } from '../map.component';
 
 @Component({
@@ -8,7 +8,7 @@ import { MapComponent } from '../map.component';
 })
 export class ControlAttributionComponent implements OnInit, OnDestroy {
   public componentType = 'control';
-  instance: control.Attribution;
+  instance: Attribution;
   target: Element;
   @Input()
   collapsible: boolean;
@@ -18,7 +18,7 @@ export class ControlAttributionComponent implements OnInit, OnDestroy {
   ngOnInit() {
     this.target = this.element.nativeElement;
     // console.log('ol.control.Attribution init: ', this);
-    this.instance = new control.Attribution(this);
+    this.instance = new Attribution(this);
     this.map.instance.addControl(this.instance);
   }
 

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

@@ -1,5 +1,5 @@
 import { Component, ContentChild, OnDestroy, OnInit } from '@angular/core';
-import { control } from 'openlayers';
+import { Control } from 'ol/control';
 import { MapComponent } from '../map.component';
 import { ContentComponent } from '../content.component';
 
@@ -11,7 +11,7 @@ import { ContentComponent } from '../content.component';
 })
 export class ControlComponent implements OnInit, OnDestroy {
   public componentType = 'control';
-  instance: control.Control;
+  instance: Control;
   element: Element;
   @ContentChild(ContentComponent)
   content: ContentComponent;
@@ -21,7 +21,7 @@ export class ControlComponent implements OnInit, OnDestroy {
   ngOnInit() {
     if (this.content) {
       this.element = this.content.elementRef.nativeElement;
-      this.instance = new control.Control(this);
+      this.instance = new Control(this);
       this.map.instance.addControl(this.instance);
     }
   }

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

@@ -1,31 +1,36 @@
 import { Component, OnDestroy, OnInit, Input } from '@angular/core';
-import { control, Collection } from 'openlayers';
+import { Control, defaults } from 'ol/control';
+import { Collection } from 'ol';
+import { Options as AttributionOptions } from 'ol/control/Attribution';
+import { Options as RotateOptions } from 'ol/control/Rotate';
+import { Options as ZoomOptions } from 'ol/control/Zoom';
+
 import { MapComponent } from '../map.component';
 
 @Component({
   selector: 'aol-control-defaults',
   template: '',
 })
 export class DefaultControlComponent implements OnInit, OnDestroy {
-  instance: Collection<control.Control>;
+  instance: Collection<Control>;
   @Input()
   attribution: boolean;
   @Input()
-  attributionOptions: olx.control.AttributionOptions;
+  attributionOptions: AttributionOptions;
   @Input()
   rotate: boolean;
   @Input()
-  rotateOptions: olx.control.RotateOptions;
+  rotateOptions: RotateOptions;
   @Input()
   zoom: boolean;
   @Input()
-  zoomOptions: olx.control.ZoomOptions;
+  zoomOptions: ZoomOptions;
 
   constructor(private map: MapComponent) {}
 
   ngOnInit() {
     // console.log('ol.control.defaults init: ', this);
-    this.instance = control.defaults(this);
+    this.instance = defaults(this);
     this.instance.forEach(c => this.map.instance.addControl(c));
   }
 

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

@@ -1,5 +1,5 @@
 import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { control } from 'openlayers';
+import { FullScreen } from 'ol/control';
 import { MapComponent } from '../map.component';
 
 @Component({
@@ -9,7 +9,7 @@ import { MapComponent } from '../map.component';
   `,
 })
 export class ControlFullScreenComponent implements OnInit, OnDestroy {
-  instance: control.FullScreen;
+  instance: FullScreen;
 
   @Input()
   className: string;
@@ -27,7 +27,7 @@ export class ControlFullScreenComponent implements OnInit, OnDestroy {
   }
 
   ngOnInit() {
-    this.instance = new control.FullScreen(this);
+    this.instance = new FullScreen(this);
     this.map.instance.addControl(this.instance);
   }
 

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

@@ -1,15 +1,17 @@
 import { Component, ElementRef, Input, OnDestroy, OnInit } from '@angular/core';
-import { control, CoordinateFormatType, ProjectionLike } from 'openlayers';
+import MousePosition from 'ol/control/MousePosition';
 import { MapComponent } from '../map.component';
+import { CoordinateFormat } from 'ol/coordinate';
+import { ProjectionLike } from 'ol/proj';
 
 @Component({
   selector: 'aol-control-mouseposition',
   template: ``,
 })
 export class ControlMousePositionComponent implements OnInit, OnDestroy {
-  instance: control.MousePosition;
+  instance: MousePosition;
   @Input()
-  coordinateFormat: CoordinateFormatType;
+  coordinateFormat: CoordinateFormat;
   @Input()
   projection: ProjectionLike;
   target: Element;
@@ -19,7 +21,7 @@ export class ControlMousePositionComponent implements OnInit, OnDestroy {
   ngOnInit() {
     this.target = this.element.nativeElement;
     // console.log('ol.control.MousePosition init: ', this);
-    this.instance = new control.MousePosition(this);
+    this.instance = new MousePosition(this);
     this.map.instance.addControl(this.instance);
   }
 

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

@@ -1,5 +1,7 @@
 import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { control, View, layer } from 'openlayers';
+import { Layer } from 'ol/layer';
+import { View } from 'ol';
+import { OverviewMap } from 'ol/control';
 import { MapComponent } from '../map.component';
 
 @Component({
@@ -9,7 +11,7 @@ import { MapComponent } from '../map.component';
   `,
 })
 export class ControlOverviewMapComponent implements OnInit, OnDestroy {
-  instance: control.OverviewMap;
+  instance: OverviewMap;
   @Input()
   collapsed: boolean;
   @Input()
@@ -19,7 +21,7 @@ export class ControlOverviewMapComponent implements OnInit, OnDestroy {
   @Input()
   label: string;
   @Input()
-  layers: layer.Layer[];
+  layers: Layer[];
   @Input()
   target: Element;
   @Input()
@@ -32,7 +34,7 @@ export class ControlOverviewMapComponent implements OnInit, OnDestroy {
   }
 
   ngOnInit() {
-    this.instance = new control.OverviewMap(this);
+    this.instance = new OverviewMap(this);
     this.map.instance.addControl(this.instance);
   }
 

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

@@ -1,5 +1,5 @@
 import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { control } from 'openlayers';
+import { Rotate } from 'ol/control';
 import { MapComponent } from '../map.component';
 
 @Component({
@@ -9,7 +9,7 @@ import { MapComponent } from '../map.component';
   `,
 })
 export class ControlRotateComponent implements OnInit, OnDestroy {
-  instance: control.Rotate;
+  instance: Rotate;
 
   @Input()
   className: string;
@@ -27,7 +27,7 @@ export class ControlRotateComponent implements OnInit, OnDestroy {
   }
 
   ngOnInit() {
-    this.instance = new control.Rotate(this);
+    this.instance = new Rotate(this);
     this.map.instance.addControl(this.instance);
   }
 

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

@@ -1,5 +1,5 @@
 import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { control } from 'openlayers';
+import { ScaleLine } from 'ol/control';
 import { MapComponent } from '../map.component';
 
 @Component({
@@ -9,7 +9,7 @@ import { MapComponent } from '../map.component';
   `,
 })
 export class ControlScaleLineComponent implements OnInit, OnDestroy {
-  instance: control.ScaleLine;
+  instance: ScaleLine;
   @Input()
   units: string;
 
@@ -18,7 +18,7 @@ export class ControlScaleLineComponent implements OnInit, OnDestroy {
   }
 
   ngOnInit() {
-    this.instance = new control.ScaleLine(this);
+    this.instance = new ScaleLine(this);
     this.map.instance.addControl(this.instance);
   }
 

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

@@ -1,5 +1,5 @@
 import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { control } from 'openlayers';
+import { Zoom } from 'ol/control';
 import { MapComponent } from '../map.component';
 
 @Component({
@@ -9,7 +9,7 @@ import { MapComponent } from '../map.component';
   `,
 })
 export class ControlZoomComponent implements OnInit, OnDestroy {
-  instance: control.Zoom;
+  instance: Zoom;
 
   @Input()
   duration: number;
@@ -29,7 +29,7 @@ export class ControlZoomComponent implements OnInit, OnDestroy {
   }
 
   ngOnInit() {
-    this.instance = new control.Zoom(this);
+    this.instance = new Zoom(this);
     this.map.instance.addControl(this.instance);
   }
 

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

@@ -1,5 +1,5 @@
 import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { control } from 'openlayers';
+import { ZoomSlider } from 'ol/control';
 import { MapComponent } from '../map.component';
 
 @Component({
@@ -9,7 +9,7 @@ import { MapComponent } from '../map.component';
   `,
 })
 export class ControlZoomSliderComponent implements OnInit, OnDestroy {
-  instance: control.ZoomSlider;
+  instance: ZoomSlider;
 
   @Input()
   className: string;
@@ -25,7 +25,7 @@ export class ControlZoomSliderComponent implements OnInit, OnDestroy {
   }
 
   ngOnInit() {
-    this.instance = new control.ZoomSlider(this);
+    this.instance = new ZoomSlider(this);
     this.map.instance.addControl(this.instance);
   }
 

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

@@ -1,6 +1,7 @@
 import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { control, Extent } from 'openlayers';
+import { ZoomToExtent } from 'ol/control';
 import { MapComponent } from '../map.component';
+import { Extent } from 'ol/extent';
 
 @Component({
   selector: 'aol-control-zoomtoextent',
@@ -9,7 +10,7 @@ import { MapComponent } from '../map.component';
   `,
 })
 export class ControlZoomToExtentComponent implements OnInit, OnDestroy {
-  instance: control.ZoomToExtent;
+  instance: ZoomToExtent;
 
   @Input()
   className: string;
@@ -25,7 +26,7 @@ export class ControlZoomToExtentComponent implements OnInit, OnDestroy {
   }
 
   ngOnInit() {
-    this.instance = new control.ZoomToExtent(this);
+    this.instance = new ZoomToExtent(this);
     this.map.instance.addControl(this.instance);
   }