Update examples

src/app/color-select-hover/color-select-hover.component.ts

@@ -1,6 +1,8 @@
 import { Component, OnInit, QueryList, ViewChild, ViewChildren } from '@angular/core';
-import { Feature as OlFeature, layer as OlLayer, style } from 'openlayers';
 import { MapComponent, LayerVectorComponent } from 'ngx-openlayers';
+import { Fill, Stroke, Style } from 'ol/style';
+import { Layer } from 'ol/layer';
+import { Feature } from 'ol';
 
 @Component({
   selector: 'app-color-select-hover',
@@ -125,11 +127,11 @@ export class ColorSelectHoverComponent implements OnInit {
     ],
   };
 
-  styleInterationSelected = new style.Style({
-    fill: new style.Fill({
+  styleInterationSelected = new Style({
+    fill: new Fill({
       color: 'rgba(0, 153, 255, 0.1)',
     }),
-    stroke: new style.Stroke({
+    stroke: new Stroke({
       color: 'rgba(0, 153, 255)',
       width: 3,
     }),
@@ -140,10 +142,10 @@ export class ColorSelectHoverComponent implements OnInit {
   ngOnInit() {}
 
   changeFeatureHovered(event) {
-    const hit: OlFeature = this.map.instance.forEachFeatureAtPixel(event.pixel, f => f, {
+    const hit: Feature = this.map.instance.forEachFeatureAtPixel(event.pixel, f => f, {
       layerFilter: inLayer(...this.aoiLayerVector.toArray()),
       hitTolerance: 10,
-    }) as OlFeature;
+    }) as Feature;
 
     if (!hit && this.hoveredFeatureId) {
       this.hoveredFeatureId = null;
@@ -154,6 +156,6 @@ export class ColorSelectHoverComponent implements OnInit {
   }
 }
 
-function inLayer(...layers: LayerVectorComponent[]): (l: OlLayer.Layer) => boolean {
-  return (l: OlLayer.Layer) => layers.some(layer => layer.instance === l);
+function inLayer(...layers: LayerVectorComponent[]): (l: Layer) => boolean {
+  return (l: Layer) => layers.some(layer => layer.instance === l);
 }

src/app/cursor-position/cursor-position.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { proj } from 'openlayers';
+import { transform } from 'ol/proj';
 
 @Component({
   selector: 'app-cursor-position',
@@ -57,8 +57,8 @@ export class CursorPositionComponent implements OnInit {
 
   dispatchCursor(event): void {
     const coordinates = event.coordinate;
-    this.lon = proj.transform(coordinates, 'EPSG:3857', 'EPSG:4326')[0];
-    this.lat = proj.transform(coordinates, 'EPSG:3857', 'EPSG:4326')[1];
+    this.lon = transform(coordinates, 'EPSG:3857', 'EPSG:4326')[0];
+    this.lat = transform(coordinates, 'EPSG:3857', 'EPSG:4326')[1];
   }
 
   latToString(lat: number) {

src/app/draw-polygon/draw-polygon.component.ts

@@ -1,5 +1,8 @@
 import { Component, OnInit } from '@angular/core';
-import { interaction, Feature, geom, proj } from 'openlayers';
+import Draw from 'ol/interaction/Draw';
+import { Feature } from 'ol';
+import Projection from 'ol/proj/Projection';
+import { Polygon } from 'ol/geom';
 
 @Component({
   selector: 'app-draw-polygon',
@@ -64,7 +67,7 @@ export class DrawPolygonComponent implements OnInit {
   constructor() {}
 
   isDrawing = false;
-  drawBoxGeometryFunction = interaction.Draw.createBox();
+  drawBoxGeometryFunction = Draw.createBox();
   feature;
 
   ngOnInit() {}
@@ -74,8 +77,8 @@ export class DrawPolygonComponent implements OnInit {
   }
 
   endDraw(feature: Feature) {
-    const olGeomPolygon = geom.Polygon.fromExtent(feature.getGeometry().getExtent());
-    olGeomPolygon.transform(new proj.Projection({ code: 'EPSG:3857' }), new proj.Projection({ code: 'EPSG:4326' }));
+    const olGeomPolygon = Polygon.fromExtent(feature.getGeometry().getExtent());
+    olGeomPolygon.transform(new Projection({ code: 'EPSG:3857' }), new Projection({ code: 'EPSG:4326' }));
     this.feature = {
       type: 'Feature',
       properties: {},

src/app/map-position/map-position.component.ts

@@ -1,7 +1,8 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { proj } from 'openlayers';
 import { MapComponent, ViewComponent } from 'ngx-openlayers';
 import { FormBuilder, FormGroup } from '@angular/forms';
+import { transform } from 'ol/proj';
+import Projection from 'ol/proj/Projection';
 
 @Component({
   selector: 'app-map-position',
@@ -87,8 +88,8 @@ export class MapPositionComponent implements OnInit {
   @ViewChild('view')
   view: ViewComponent;
 
-  displayProj = new proj.Projection({ code: 'EPSG:3857' });
-  inputProj = new proj.Projection({ code: 'EPSG:4326' });
+  displayProj = new Projection({ code: 'EPSG:3857' });
+  inputProj = new Projection({ code: 'EPSG:4326' });
 
   currentZoom = 0;
   currentLon = 0;
@@ -106,7 +107,7 @@ export class MapPositionComponent implements OnInit {
 
   displayCoordinates(): void {
     this.currentZoom = this.view.instance.getZoom();
-    [this.currentLon, this.currentLat] = proj.transform(
+    [this.currentLon, this.currentLat] = transform(
       this.view.instance.getCenter(),
       this.displayProj,
       this.inputProj

src/app/modify-polygon/modify-polygon.component.ts

@@ -1,6 +1,8 @@
 import { Component, OnInit } from '@angular/core';
-import { Feature as OlFeature, format, proj } from 'openlayers';
 import { Feature } from 'geojson';
+import { GeoJSON } from 'ol/format';
+import Projection from 'ol/proj/Projection';
+import { Feature as OlFeature } from 'ol';
 
 @Component({
   selector: 'app-modify-polygon',
@@ -61,9 +63,9 @@ import { Feature } from 'geojson';
 export class ModifyPolygonComponent implements OnInit {
   constructor() {}
 
-  format: format.GeoJSON = new format.GeoJSON();
-  displayProj = new proj.Projection({ code: 'EPSG:3857' });
-  inputProj = new proj.Projection({ code: 'EPSG:4326' });
+  format: GeoJSON = new GeoJSON();
+  displayProj = new Projection({ code: 'EPSG:3857' });
+  inputProj = new Projection({ code: 'EPSG:4326' });
 
   feature: Feature = {
     geometry: {

src/app/overlay/overlay.component.ts

@@ -1,5 +1,7 @@
 import { Component, OnInit } from '@angular/core';
-import { Feature as OlFeature, format, geom } from 'openlayers';
+import { GeoJSON } from 'ol/format';
+import { Feature as OlFeature } from 'ol';
+import { Polygon } from 'ol/geom';
 
 @Component({
   selector: 'app-display-overlay',
@@ -64,7 +66,7 @@ import { Feature as OlFeature, format, geom } from 'openlayers';
 export class OverlayComponent implements OnInit {
   constructor() {}
 
-  geoJsonFormat = new format.GeoJSON();
+  geoJsonFormat = new GeoJSON();
 
   feature = {
     type: 'Feature',
@@ -91,7 +93,7 @@ export class OverlayComponent implements OnInit {
 
   ngOnInit() {
     const olFeature: OlFeature = this.geoJsonFormat.readFeature(this.feature);
-    const olGeomPolygon = geom.Polygon.fromExtent(olFeature.getGeometry().getExtent());
+    const olGeomPolygon = Polygon.fromExtent(olFeature.getGeometry().getExtent());
     [, this.tooltip.lat, this.tooltip.lon] = olGeomPolygon.getExtent();
   }
 }

tsconfig.json

@@ -21,8 +21,35 @@
       "ngx-openlayers": [
         "dist/ngx-openlayers"
       ],
-      "openlayers": [
-        "projects/ngx-openlayers/node_modules/openlayers"
+      "ol": [
+        "projects/ngx-openlayers/node_modules/ol"
+      ],
+      "ol/format": [
+        "projects/ngx-openlayers/node_modules/ol/format"
+      ],
+      "ol/geom": [
+        "projects/ngx-openlayers/node_modules/ol/geom"
+      ],
+      "ol/interaction": [
+        "projects/ngx-openlayers/node_modules/ol/interaction"
+      ],
+      "ol/interaction/Draw": [
+        "projects/ngx-openlayers/node_modules/ol/interaction/Draw"
+      ],
+      "ol/layer": [
+        "projects/ngx-openlayers/node_modules/ol/layer"
+      ],
+      "ol/proj": [
+        "projects/ngx-openlayers/node_modules/ol/proj"
+      ],
+      "ol/proj/Projection": [
+        "projects/ngx-openlayers/node_modules/ol/proj/Projection"
+      ],
+      "ol/source": [
+        "projects/ngx-openlayers/node_modules/ol/source"
+      ],
+      "ol/style": [
+        "projects/ngx-openlayers/node_modules/ol/style"
       ]
     }
   }