Migrate to OpenLayers 5

angular.json

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

projects/ngx-openlayers/ng-package.json

@@ -3,7 +3,7 @@
   "dest": "../../dist/ngx-openlayers",
   "deleteDestPath": false,
   "whitelistedNonPeerDependencies": [
-   "openlayers", "@types/openlayers"
+   "ol", "@angular/core"
   ],
   "lib": {
     "entryFile": "src/public_api.ts"

projects/ngx-openlayers/package.json

@@ -1,10 +1,11 @@
 {
   "name": "ngx-openlayers",
   "version": "0.0.1",
+  "dependencies": {
+    "ol": "^5.1.3"
+  },
   "peerDependencies": {
-    "@angular/common": "^6.0.0-rc.0 || ^6.0.0",
-    "@angular/core": "^6.0.0-rc.0 || ^6.0.0",
-    "@types/openlayers": "4.3.x || 4.4.x",
-    "openlayers": "4.3.x || 4.4.x"
+    "@angular/common": "^6.0.0",
+    "@angular/core": "^6.0.0"
   }
 }

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';
 
@@ -9,7 +9,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;
@@ -19,7 +19,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,32 @@
 import { Component, OnDestroy, OnInit, Input } from '@angular/core';
-import { control, Collection } from 'openlayers';
+import { Control, defaults } from 'ol/control';
+import { Collection } from 'ol';
 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: any; // TODO: olx.control.AttributionOptions;
   @Input()
   rotate: boolean;
   @Input()
-  rotateOptions: olx.control.RotateOptions;
+  rotateOptions: any; // TODO: olx.control.RotateOptions;
   @Input()
   zoom: boolean;
   @Input()
-  zoomOptions: olx.control.ZoomOptions;
+  zoomOptions: any; // TODO: olx.control.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,13 +1,13 @@
 import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { control } from 'openlayers';
+import { FullScreen } from 'ol/control';
 import { MapComponent } from '../map.component';
 
 @Component({
   selector: 'aol-control-fullscreen',
   template: `<ng-content></ng-content>`,
 })
 export class ControlFullScreenComponent implements OnInit, OnDestroy {
-  instance: control.FullScreen;
+  instance: FullScreen;
 
   @Input()
   className: string;
@@ -25,7 +25,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,16 @@
 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, ProjectionLike } from '../../ol-models';
 
 @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 +20,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,13 +1,15 @@
 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({
   selector: 'aol-control-overviewmap',
   template: `<ng-content></ng-content>`,
 })
 export class ControlOverviewMapComponent implements OnInit, OnDestroy {
-  instance: control.OverviewMap;
+  instance: OverviewMap;
   @Input()
   collapsed: boolean;
   @Input()
@@ -17,7 +19,7 @@ export class ControlOverviewMapComponent implements OnInit, OnDestroy {
   @Input()
   label: string;
   @Input()
-  layers: layer.Layer[];
+  layers: Layer[];
   @Input()
   target: Element;
   @Input()
@@ -30,7 +32,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,13 +1,13 @@
 import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { control } from 'openlayers';
+import { Rotate } from 'ol/control';
 import { MapComponent } from '../map.component';
 
 @Component({
   selector: 'aol-control-rotate',
   template: `<ng-content></ng-content>`,
 })
 export class ControlRotateComponent implements OnInit, OnDestroy {
-  instance: control.Rotate;
+  instance: Rotate;
 
   @Input()
   className: string;
@@ -25,7 +25,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,13 +1,13 @@
 import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { control } from 'openlayers';
+import { ScaleLine } from 'ol/control';
 import { MapComponent } from '../map.component';
 
 @Component({
   selector: 'aol-control-scaleline',
   template: `<ng-content></ng-content>`,
 })
 export class ControlScaleLineComponent implements OnInit, OnDestroy {
-  instance: control.ScaleLine;
+  instance: ScaleLine;
   @Input()
   units: string;
 
@@ -16,7 +16,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,13 +1,13 @@
 import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { control } from 'openlayers';
+import { Zoom } from 'ol/control';
 import { MapComponent } from '../map.component';
 
 @Component({
   selector: 'aol-control-zoom',
   template: `<ng-content></ng-content>`,
 })
 export class ControlZoomComponent implements OnInit, OnDestroy {
-  instance: control.Zoom;
+  instance: Zoom;
 
   @Input()
   duration: number;
@@ -27,7 +27,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,13 +1,13 @@
 import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { control } from 'openlayers';
+import { ZoomSlider } from 'ol/control';
 import { MapComponent } from '../map.component';
 
 @Component({
   selector: 'aol-control-zoomslider',
   template: `<ng-content></ng-content>`,
 })
 export class ControlZoomSliderComponent implements OnInit, OnDestroy {
-  instance: control.ZoomSlider;
+  instance: ZoomSlider;
 
   @Input()
   className: string;
@@ -23,7 +23,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,13 +1,14 @@
 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-models';
 
 @Component({
   selector: 'aol-control-zoomtoextent',
   template: `<ng-content></ng-content>`,
 })
 export class ControlZoomToExtentComponent implements OnInit, OnDestroy {
-  instance: control.ZoomToExtent;
+  instance: ZoomToExtent;
 
   @Input()
   className: string;
@@ -23,7 +24,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);
   }
 

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

@@ -1,9 +1,10 @@
 import { Component, Optional, OnChanges, Input, SimpleChanges } from '@angular/core';
-import { proj, Coordinate } from 'openlayers';
+import { Projection, transform } from 'ol/proj';
 import { MapComponent } from './map.component';
-import { GeometryPointComponent, GeometryLinestringComponent, GeometryPolygonComponent } from './geometry.components';
 import { ViewComponent } from './view.component';
+import { GeometryLinestringComponent, GeometryPointComponent, GeometryPolygonComponent } from './geometry.components';
 import { OverlayComponent } from './overlay.component';
+import { Coordinate } from '../ol-models';
 
 @Component({
   selector: 'aol-coordinate',
@@ -36,7 +37,7 @@ export class CoordinateComponent implements OnChanges {
   }
 
   ngOnChanges(changes: SimpleChanges) {
-    let referenceProjection: proj.Projection;
+    let referenceProjection: Projection;
     let referenceProjectionCode: string;
     let transformedCoordinates: number[];
 
@@ -46,7 +47,7 @@ export class CoordinateComponent implements OnChanges {
     if (this.srid === referenceProjectionCode) {
       transformedCoordinates = [this.x, this.y];
     } else {
-      transformedCoordinates = proj.transform([this.x, this.y], this.srid, referenceProjectionCode);
+      transformedCoordinates = transform([this.x, this.y], this.srid, referenceProjectionCode);
     }
 
     switch (this.host.componentType) {
@@ -91,7 +92,7 @@ export class CollectionCoordinatesComponent implements OnChanges {
   }
 
   ngOnChanges(changes: SimpleChanges) {
-    let referenceProjection: proj.Projection;
+    let referenceProjection: Projection;
     let referenceProjectionCode: string;
     let transformedCoordinates: Array<Coordinate>;
 
@@ -106,7 +107,7 @@ export class CollectionCoordinatesComponent implements OnChanges {
       transformedCoordinates = [];
       this.coordinates.forEach(
         function(coordinate: Coordinate) {
-          transformedCoordinates.push(proj.transform(coordinate, this.srid, referenceProjectionCode));
+          transformedCoordinates.push(transform(coordinate, this.srid, referenceProjectionCode));
         }.bind(this)
       );
     }

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

@@ -1,5 +1,5 @@
 import { Component, OnInit, OnDestroy, OnChanges, Input, SimpleChanges } from '@angular/core';
-import { Feature } from 'openlayers';
+import { Feature } from 'ol';
 import { SourceVectorComponent } from './sources/vector.component';
 
 @Component({