fix: lint, rebase, restore deleted exemple

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

@@ -1,7 +1,8 @@
 import { Component, forwardRef, Host, Input, OnInit } from '@angular/core';
-import { source, ProjectionLike, Attribution, ImageLoadFunctionType } from 'openlayers';
+import { ImageArcGISRest } from 'ol/source';
 import { LayerImageComponent } from '../layers/layerimage.component';
 import { SourceComponent } from './source.component';
+import { AttributionLike, ImageLoadFunction, ProjectionLike } from '../../ol-models';
 
 @Component({
   selector: 'aol-source-imagearcgisrest',
@@ -11,24 +12,24 @@ import { SourceComponent } from './source.component';
   providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceImageArcGISRestComponent) }],
 })
 export class SourceImageArcGISRestComponent extends SourceComponent implements OnInit {
-  instance: source.ImageArcGISRest;
+  instance: ImageArcGISRest;
 
   @Input() projection: ProjectionLike | string;
   @Input() url: string;
-  @Input() attributions: Attribution[];
+  @Input() attributions: AttributionLike[];
   @Input() crossOrigin?: string;
-  @Input() imageLoadFunction?: ImageLoadFunctionType;
+  @Input() imageLoadFunction?: ImageLoadFunction;
   @Input() params?: { [k: string]: any };
   @Input() ratio = 1;
   @Input() resolutions?: number[];
-  @Input() logo?: string | olx.LogoOptions;
+  @Input() logo?: string; // TODO: (string | olx.LogoOptions);
 
   constructor(@Host() layer: LayerImageComponent) {
     super(layer);
   }
 
   ngOnInit() {
-    this.instance = new source.ImageArcGISRest(this);
+    this.instance = new ImageArcGISRest(this);
     this.host.instance.setSource(this.instance);
   }
 }

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

@@ -12,7 +12,7 @@ import { AttributionLike, ImageLoadFunction, ProjectionLike } from '../../ol-mod
   providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceImageWMSComponent) }],
 })
 export class SourceImageWMSComponent extends SourceComponent implements OnChanges, OnInit {
-  instance: source.ImageWMS;
+  instance: ImageWMS;
 
   @Input()
   attributions: AttributionLike;

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

@@ -1,6 +1,5 @@
 import { Component, Host, Input, OnInit, forwardRef } from '@angular/core';
 import { TileJSON } from 'ol/source';
-import { TileGrid } from 'ol/tilegrid';
 import { LayerTileComponent } from '../layers/layertile.component';
 import { SourceComponent } from './source.component';
 

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

@@ -14,7 +14,7 @@ import { TileGridWMTSComponent } from '../tilegridwmts.component';
 import { WMTS } from 'ol/source';
 import { WMTS as TileGridWMTS } from 'ol/tilegrid';
 import { WMTSRequestEncoding } from 'ol/source';
-import { ProjectionLike, TileCoord, TileLoadFunction } from '../../ol-models';
+import { ProjectionLike, TileLoadFunction } from '../../ol-models';
 
 @Component({
   selector: 'aol-source-tilewmts',

projects/ngx-openlayers/src/ol-models.ts

@@ -9,7 +9,6 @@ import { Layer } from 'ol/layer';
 import { Geometry } from 'ol/geom';
 import MapBrowserEvent from 'ol/MapBrowserEvent';
 
-
 export type Extent = [number, number, number, number];
 
 export type Coordinate = [number, number];
@@ -28,13 +27,15 @@ export type TileLoadFunction = (tile: Tile, url: string) => void;
 
 export type ImageLoadFunction = (image: Image, src: string) => void;
 
-export type Attribution = () => (string | Array<string>);
+export type Attribution = () => string | Array<string>;
 
 export type AttributionLike = string | Array<string> | Attribution;
 
 export type Pixel = [number, number, number, number];
 
-export type RasterOperation = ((pixels: Array<Pixel>, data: any) => Pixel) | ((images: Array<ImageData>, data: any) => ImageData);
+export type RasterOperation =
+  | ((pixels: Array<Pixel>, data: any) => Pixel)
+  | ((images: Array<ImageData>, data: any) => ImageData);
 
 export type TileCoord = [number, number, number];
 

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

@@ -1,8 +1,8 @@
 import { Component, OnInit } from '@angular/core';
-import { createBox, Draw } from 'ol/interaction/Draw';
+import { createBox } from 'ol/interaction/Draw';
 import { Feature } from 'ol';
 import Projection from 'ol/proj/Projection';
-import { fromExtent, Polygon } from 'ol/geom/Polygon';
+import { fromExtent } from 'ol/geom/Polygon';
 
 @Component({
   selector: 'app-draw-polygon',

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

@@ -104,10 +104,6 @@ export class MapPositionComponent implements OnInit {
 
   displayCoordinates(): void {
     this.currentZoom = this.view.instance.getZoom();
-    [this.currentLon, this.currentLat] = transform(
-      this.view.instance.getCenter(),
-      this.displayProj,
-      this.inputProj
-    );
+    [this.currentLon, this.currentLat] = transform(this.view.instance.getCenter(), this.displayProj, this.inputProj);
   }
 }

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

@@ -0,0 +1,93 @@
+import { Component, OnInit } from '@angular/core';
+import { Feature } from 'ol';
+import Projection from 'ol/proj/Projection';
+import { GeoJSON } from 'ol/format';
+
+@Component({
+  selector: 'app-modify-polygon',
+  template: `
+    <aol-map #map width="100%" height="100%">
+      <aol-interaction-default></aol-interaction-default>
+      <aol-interaction-select [wrapX]="true" #select></aol-interaction-select>
+      <aol-interaction-modify
+        #modify
+        [features]="select.instance.getFeatures()"
+        (onModifyEnd)="modifyEnd($event.features.getArray()[0])"
+      >
+      </aol-interaction-modify>
+
+      <aol-view [zoom]="5">
+        <aol-coordinate [x]="1.4886" [y]="43.5554" [srid]="'EPSG:4326'"></aol-coordinate>
+      </aol-view>
+
+      <aol-layer-tile [opacity]="1"> <aol-source-osm></aol-source-osm> </aol-layer-tile>
+
+      <aol-layer-vector *ngIf="feature">
+        <aol-source-vector>
+          <aol-feature>
+            <aol-geometry-polygon>
+              <aol-collection-coordinates [coordinates]="feature.geometry.coordinates[0]" [srid]="'EPSG:4326'">
+              </aol-collection-coordinates>
+            </aol-geometry-polygon>
+          </aol-feature>
+        </aol-source-vector>
+      </aol-layer-vector>
+    </aol-map>
+
+    <div class="info">
+      <h3>Result</h3>
+      <code>
+        <pre>{{ feature | json }}</pre>
+      </code>
+    </div>
+  `,
+  styles: [
+    `
+      :host {
+        display: flex;
+      }
+
+      aol-map {
+        width: 70%;
+      }
+
+      .info {
+        width: 28%;
+        padding: 1rem;
+      }
+    `,
+  ],
+})
+export class ModifyPolygonComponent implements OnInit {
+  constructor() {}
+
+  format: GeoJSON = new GeoJSON();
+  displayProj = new Projection({ code: 'EPSG:3857' });
+  inputProj = new Projection({ code: 'EPSG:4326' });
+
+  feature: Feature = {
+    geometry: {
+      coordinates: [
+        [
+          [-1.7138671875, 43.35713822211053],
+          [4.515380859375, 43.35713822211053],
+          [4.515380859375, 47.76886840424207],
+          [-1.7138671875, 47.76886840424207],
+          [-1.7138671875, 43.35713822211053],
+        ],
+      ],
+      type: 'Polygon',
+    },
+    properties: {},
+    type: 'Feature',
+  };
+
+  ngOnInit() {}
+
+  modifyEnd(feature: Feature) {
+    this.feature = this.format.writeFeatureObject(feature, {
+      dataProjection: this.inputProj,
+      featureProjection: this.displayProj,
+    });
+  }
+}

src/app/overlay/overlay.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { GeoJSON } from 'ol/format';
 import { Feature as OlFeature } from 'ol';
-import { fromExtent, Polygon } from 'ol/geom/Polygon';
+import { fromExtent } from 'ol/geom/Polygon';
 
 @Component({
   selector: 'app-display-overlay',