[ci skip] Changed by Jenkins: 2414

# Conflicts:
#	package-lock.json
#	package.json

.gitignore

@@ -51,4 +51,5 @@ projects/common-map/node_modules/
 .angular/*
 projects/common-map3d/node_modules/
 projects/common-map/node_modules/
+projects/ngx-openlayers/node_modules/
 projects/common/node_modules/

Jenkinsfile

@@ -1,24 +1,24 @@
-@Library('farmmaps-shared-library') _
-
-pipeline {
-  agent any;
-  options {
-    copyArtifactPermission projectNames: env.allProjectsArtifactPermission;
-    disableConcurrentBuilds abortPrevious: true;
-  }
-  stages {
-    stage('FarmmapsLibBuildAll') {
-      steps {
-        stepFarmmapsLibBuildAll();
-      }
-    }
-  }
-  post {
-    success {
-      postSuccess();
-    }
-    always {
-      postAlways();
-    }
-  }
+@Library('farmmaps-shared-library') _
+
+pipeline {
+  agent any;
+  options {
+    copyArtifactPermission projectNames: env.allProjectsArtifactPermission;
+    disableConcurrentBuilds();
+  }
+  stages {
+    stage('FarmmapsLibBuildAll') {
+      steps {
+        stepFarmmapsLibBuildAll();
+      }
+    }
+  }
+  post {
+    success {
+      postSuccess();
+    }
+    always {
+      postAlways();
+    }
+  }
 }

Jenkinsfile.develop

@@ -1,24 +1,24 @@
-@Library('farmmaps-shared-library') _
-
-pipeline {
-  agent any;
-  options {
-    copyArtifactPermission projectNames: env.allProjectsArtifactPermission;
-    disableConcurrentBuilds abortPrevious: true;
-  }
-  stages {
-    stage('FarmmapsLibBuildAll') {
-      steps {
-        stepFarmmapsLibBuildAll();
-      }
-    }
-  }
-  post {
-    success {
-      postSuccess();
-    }
-    always {
-      postAlways();
-    }
-  }
+@Library('farmmaps-shared-library') _
+
+pipeline {
+  agent any;
+  options {
+    copyArtifactPermission projectNames: env.allProjectsArtifactPermission;
+    disableConcurrentBuilds();
+  }
+  stages {
+    stage('FarmmapsLibBuildAll') {
+      steps {
+        stepFarmmapsLibBuildAll();
+      }
+    }
+  }
+  post {
+    success {
+      postSuccess();
+    }
+    always {
+      postAlways();
+    }
+  }
 }

angular.json

@@ -215,7 +215,7 @@
               "tsConfig": "projects/common-map/tsconfig.lib.prod.json"
             }
           }
-},
+        },
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
@@ -253,6 +253,43 @@
           }
         }
       }
+    },
+    "ngx-openlayers": {
+      "projectType": "library",
+      "root": "projects/ngx-openlayers",
+      "sourceRoot": "projects/ngx-openlayers/src",
+      "prefix": "lib",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:ng-packagr",
+          "options": {
+            "tsConfig": "projects/ngx-openlayers/tsconfig.lib.json",
+            "project": "projects/ngx-openlayers/ng-package.json"
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "projects/ngx-openlayers/tsconfig.lib.prod.json"
+            }
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "projects/ngx-openlayers/src/test.ts",
+            "tsConfig": "projects/ngx-openlayers/tsconfig.spec.json",
+            "karmaConfig": "projects/ngx-openlayers/karma.conf.js"
+          }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": [
+              "projects/ngx-openlayers/**/*.ts",
+              "projects/ngx-openlayers/**/*.html"
+            ]
+          }
+        }
+      }
     }
   },
   "cli": {

package.json

@@ -1,7 +1,7 @@
 {
   "name": "farmmaps-lib-app",
-  "version": "3.4.0",
-  "scripts": {
+  "version": "4.2.0",
+  "scripts":   {
     "ng": "ng",
     "start": "ng serve",
     "build": "ng build",
@@ -10,7 +10,7 @@
     "e2e": "ng e2e"
   },
   "private": true,
-  "dependencies": {
+  "dependencies":   {
     "@angular/animations": "^14.1.3",
     "@angular/common": "^14.1.3",
     "@angular/compiler": "^14.1.3",
@@ -23,6 +23,7 @@
     "@farmmaps/common": "file:dist/common",
     "@farmmaps/common-map": "file:dist/common-map",
     "@farmmaps/common-map3d": "file:dist/common-map3d",
+    "ngx-openlayers": "file:dist/ngx-openlayers",
     "@microsoft/signalr": "^3.1.16",
     "@ng-bootstrap/ng-bootstrap": "^13.0.0",
     "@ngrx/effects": "^14",
@@ -42,12 +43,11 @@
     "ngx-avatar": "^4.1.0",
     "ngx-clipboard": "^14.0.1",
     "ngx-image-cropper": "^3.3.5",
-    "ngx-openlayers": "1.0.0-next.19",
     "ngx-uploadx": "^5.2.0",
-    "ol": "6.14.1",
+    "ol": "~6.3.1",
     "olcs": "^2.13.1",
     "resumablejs": "^1.1.0",
-    "rxjs": "^6.6.7",
+    "rxjs": "^7.8.1",
     "stream": "^0.0.2",
     "stream-http": "^3.2.0",
     "tassign": "^1.0.0",
@@ -56,7 +56,7 @@
     "util": "^0.12.4",
     "zone.js": "~0.11.4"
   },
-  "devDependencies": {
+  "devDependencies":   {
     "@angular-builders/custom-webpack": "^14",
     "@angular-devkit/build-angular": "^14.1.3",
     "@angular/cli": "^14.1.3",
@@ -86,4 +86,4 @@
     "ts-node": "^8.8.1",
     "typescript": "~4.6.4"
   }
-}
+}

projects/common-map/package-lock.json

@@ -12,11 +12,11 @@
       },
       "peerDependencies": {
         "@angular/core": ">=14.0.0",
+        "@farmmaps/ngx-openlayers": "file:dist/ngx-openlayers",
         "@ngrx/effects": ">=14.0.0",
         "@ngrx/router-store": ">=14.0.0",
         "@ngrx/store": ">=14.0.0",
         "ngrx-store-localstorage": ">=14.0.0",
-        "ngx-openlayers": ">=1.0.0-next.19",
         "ol": ">=6.8.1",
         "tassign": ">=1.0.0"
       }

projects/common-map/package.json

@@ -14,7 +14,7 @@
     "@ngrx/router-store":">=14.0.0",
     "@ngrx/store":">=14.0.0",
     "tassign": ">=1.0.0",
-    "ngx-openlayers": ">=1.0.0-next.19",
+    "ngx-openlayers": "file:dist/ngx-openlayers",
     "ol": ">=6.8.1"
   }
 }

projects/common-map/src/fm-map/actions/map.actions.ts

@@ -5,7 +5,7 @@ import { IItemLayer } from '../models/item.layer';
 import { ILayervalue } from '../models/layer.value';
 import { IQueryState } from '@farmmaps/common';
 import { IItem } from '@farmmaps/common';
-import { Feature, Observable } from 'ol';
+import { Feature } from 'ol';
 import { Style } from 'ol/style';
 import { Geometry } from 'ol/geom';
 import { IPeriodState } from '../models/period.state';
@@ -18,6 +18,7 @@ export const SETPARENT = '[Map] SetParent';
 export const SETPERIOD = '[Map] SetPeriod';
 export const STARTSEARCH = '[Map] StartSearch';
 export const STARTSEARCHSUCCESS = '[Map] StartSearchSuccess';
+export const CLICKFEATURE = '[Map] ClickFeature';
 export const SELECTFEATURE = '[Map] SelectFeature';
 export const SELECTITEM = '[Map] SelectItem';
 export const SELECTITEMSUCCESS = '[Map] SelectItemSuccess';
@@ -56,7 +57,8 @@ export const GETLAYERVALUE = '[Map] GetLayerValue'
 export const GETLAYERVALUESUCCESS = '[Map] GetLayerValueSuccess'
 export const TOGGLESHOWDATALAYERSLIDE = '[Map] ToggleShowDataLayerSlide'
 export const SETVIEWSTATE = '[Map] SetViewState'
-export const SETCODELIST = '[Map] SetCodeList'
+export const CLEARFEATURES = '[Map] ClearFeatures';
+
 
 export class Clear implements Action {
   readonly type = CLEAR;
@@ -111,6 +113,12 @@ export class StartSearchSuccess implements Action {
   constructor(public features: Array<Feature<Geometry>>, public query:IQueryState) { }
 }
 
+export class ClickFeature implements Action {
+  readonly type = CLICKFEATURE;
+
+  constructor(public feature:Feature<Geometry>) { }
+}
+
 export class SelectFeature implements Action {
   readonly type = SELECTFEATURE;
 
@@ -329,10 +337,9 @@ export class SetViewState implements Action {
   constructor(public enabled:boolean) {}
 }
 
-export class SetCodeList implements Action {
-  readonly type = SETCODELIST;
-
-  constructor(public itemType:string, public values: IItem[]) { }
+export class ClearFeatures implements Action {
+  readonly type = CLEARFEATURES;
+  constructor() {}
 }
 
 export type Actions = SetMapState
@@ -341,6 +348,7 @@ export type Actions = SetMapState
   | SetParent
   | StartSearch
   | StartSearchSuccess
+  | ClickFeature
   | SelectFeature
   | SelectItem
   | SelectItemSuccess
@@ -381,5 +389,5 @@ export type Actions = SetMapState
   | SetPeriod
   | ToggleShowDataLayerSlide
   | SetViewState
-  | SetCodeList;
+  | ClearFeatures;
 

projects/common-map/src/fm-map/components/aol/item-vector-source/item-vector-source.component.ts

@@ -1,6 +1,6 @@
-import { Component, Host, Input, Output, EventEmitter, OnInit, OnChanges, SimpleChanges, forwardRef, Inject, InjectionToken } from '@angular/core';
+import { Component, Host, Input, Output, EventEmitter, OnInit, OnChanges, SimpleChanges, forwardRef, Inject, InjectionToken, OnDestroy, LOCALE_ID } from '@angular/core';
 import { LayerVectorComponent, SourceVectorComponent, MapComponent } from 'ngx-openlayers';
-import { ItemService, ItemTypeService, IItem, IItemType } from '@farmmaps/common';
+import { ItemService, ItemTypeService, IItem, IItemType, FolderService } from '@farmmaps/common';
 
 import { Feature } from 'ol';
 import { Point, Geometry } from 'ol/geom';
@@ -17,6 +17,9 @@ import { GeoJSON } from 'ol/format';
 import { Select } from 'ol/interaction';
 import { IStyles } from '../../../models/style.cache';
 import { FeatureIconService } from '../../../services/feature-icon.service';
+import { Subscription } from 'rxjs';
+import { getCenter } from 'ol/extent';
+import { formatNumber } from '@angular/common';
 
 @Component({
   selector: 'fm-map-item-source-vector',
@@ -25,7 +28,7 @@ import { FeatureIconService } from '../../../services/feature-icon.service';
     { provide: SourceVectorComponent, useExisting: forwardRef(() => ItemVectorSourceComponent) }
   ]
 })
-export class ItemVectorSourceComponent extends SourceVectorComponent implements OnInit, OnChanges {
+export class ItemVectorSourceComponent extends SourceVectorComponent implements OnInit, OnDestroy, OnChanges {
   instance: Vector<Geometry>;
   private _format: GeoJSON;
   private _select: Select;
@@ -38,8 +41,10 @@ export class ItemVectorSourceComponent extends SourceVectorComponent implements
   @Output() onFeatureSelected: EventEmitter<Feature<Geometry>> = new EventEmitter<Feature<Geometry>>();
   @Output() onFeatureHover: EventEmitter<Feature<Geometry>> = new EventEmitter<Feature<Geometry>>();
   private stylesCache: IStyles = {};
+  private sub: Subscription;
+  private displayMapFeatureSettings: { [code: string]: string[] } = defaultDisplayMapFeatureSettings();
 
-  constructor(@Host() private layer: LayerVectorComponent, private itemService: ItemService, private map: MapComponent, private itemTypeService: ItemTypeService, private featureIconService$: FeatureIconService) {
+  constructor(@Host() private layer: LayerVectorComponent, private itemService: ItemService, private map: MapComponent, private itemTypeService: ItemTypeService, private featureIconService$: FeatureIconService, private folderService: FolderService, @Inject(LOCALE_ID) private locale: string) {
     super(layer);
     this._format = new GeoJSON();
   }
@@ -76,6 +81,17 @@ export class ItemVectorSourceComponent extends SourceVectorComponent implements
   }
 
   ngOnInit() {
+    this.sub = this.folderService.getFolder('my_settings').subscribe(
+      userSettingsRoot => {
+        this.itemService.getChildItemList(userSettingsRoot.code, 'vnd.farmmaps.itemtype.settings.general').subscribe(
+          items => {
+            if (items && items.length > 0 && items[0].data?.displayMapFeatureSettings) {
+              this.displayMapFeatureSettings = items[0].data?.displayMapFeatureSettings;
+            }
+          }
+        )
+      }
+    );
     this.strategy = loadingstrategy.bbox;
     this.format = new GeoJSON();
     this._select = new Select({
@@ -133,7 +149,8 @@ export class ItemVectorSourceComponent extends SourceVectorComponent implements
             fill: new style.Fill({
               color: fillColor
             }),
-            geometry: (feature: Feature<Geometry>) => this.geometry(feature)
+            geometry: (feature: Feature<Geometry>) => this.geometry(feature),
+            text: this.getDisplayTextForFeature(feature, this.map.instance.getView().getZoom())
           });
         } else {
           key = 'file';
@@ -153,6 +170,10 @@ export class ItemVectorSourceComponent extends SourceVectorComponent implements
     });
   }
 
+  ngOnDestroy(): void {
+    if (this.sub) this.sub.unsubscribe();
+  }
+
   ngOnChanges(changes: SimpleChanges) {
     if (changes["features"] && this.instance) {
       this.instance.clear(true);
@@ -188,4 +209,51 @@ export class ItemVectorSourceComponent extends SourceVectorComponent implements
       }
     }
   }
+  
+  getDisplayTextForFeature(feature: Feature<Geometry>, zoom: number, overrule?: style.Text) {
+    if (!feature) return null;
+
+    const propertiesToShow: string[] = this.displayMapFeatureSettings[feature.get('itemType')];
+    if (!propertiesToShow) return null;
+    if (propertiesToShow.length <= 0) return null;
+    if (zoom < 14) return null;
+
+    let displayText = '';
+    for (let i = 0; i < propertiesToShow.length; i++) {
+      let value = feature.get(propertiesToShow[i]);
+      switch (propertiesToShow[i]) {
+        case "area": value = formatNumber(value, this.locale, '0.1-2') + ' ha'; break;
+        case "centroid": {
+          if (feature.getGeometry()) {
+            const centroid = getCenter(feature.getGeometry().getExtent());
+            value = Math.round(centroid[0]) + ',' + Math.round(centroid[1]);
+          }
+        }
+          if (value) {
+            displayText += value + (i < propertiesToShow.length ? '\n' : '');
+          }
+      }
+    
+      const styleText = new style.Text({
+        font: '13px Calibri,sans-serif',
+        fill: new style.Fill({ color: '#ffffff' }),
+        stroke: new style.Stroke({ color: '#000000', width: 2 }),
+        text: displayText
+      });
+
+      if (overrule) {
+        if (overrule.getFont()) styleText.setFont(overrule.getFont());
+        if (overrule.getFill()) styleText.setFill(overrule.getFill());
+        if (overrule.getStroke()) styleText.setStroke(overrule.getStroke());
+      }
+
+      return styleText;
+    }
+  }
 }
+
+function defaultDisplayMapFeatureSettings() {
+  return {
+    'vnd.farmmaps.itemtype.cropfield': ['name', 'cropTypeName', 'area']
+  };
+}

projects/common-map/src/fm-map/components/feature-list-container/feature-list-container.component.ts

@@ -64,9 +64,9 @@ export class FeatureListContainerComponent {
     viewContainerRef.clear();
     if(showItem) {
       this.componentRef = viewContainerRef.createComponent(componentFactory);
-      (<AbstractFeatureListComponent>this.componentRef.instance).features = null;
-      (<AbstractFeatureListComponent>this.componentRef.instance).queryState = queryState;
-      (<AbstractFeatureListComponent>this.componentRef.instance).selectedFeature = null;
+      (<AbstractFeatureListComponent>this.componentRef.instance).features = this.features;
+      (<AbstractFeatureListComponent>this.componentRef.instance).queryState = this.queryState;
+      (<AbstractFeatureListComponent>this.componentRef.instance).selectedFeature = this.selectedFeature;
     }    
   }
 

projects/common-map/src/fm-map/components/feature-list/feature-list.component.ts

@@ -23,8 +23,9 @@ export abstract class AbstractFeatureListComponent {
 
   handleFeatureClick(feature:Feature<Geometry>) {
     if(feature) {
+      this.store.dispatch(new mapActions.ClickFeature(feature));
       const action = this.getAction(feature);
-      this.store.dispatch(action);  
+      this.store.dispatch(action);
     }
   }
 

projects/common-map/src/fm-map/components/legend/histogram-details/histogram-details.component.html

@@ -1,15 +1,15 @@
 <div class="row ps-3">
   <div class="col-8 nopadding"><span i18n>Average</span>:</div>
-  <div class="col-4 pull-left nopadding">{{histogram.mean| number:'1.0-2'}}</div>
+  <div class="col-4 pull-left nopadding">{{ getScaledValue(histogram.mean)| number:'1.0-2'}}</div>
   <div class="col-8 nopadding"><span i18n>Standard deviation</span>:</div>
-  <div class="col-4 pull-left nopadding">{{histogram.stddev| number:'1.0-2'}}</div>
+  <div class="col-4 pull-left nopadding">{{ getScaledValue(histogram.stddev)| number:'1.0-2'}}</div>
   <div class="col-8 nopadding"><span i18n>Min</span>:</div>
-  <div class="col-4 pull-left nopadding">{{histogram.min| number:'1.0-2'}}</div>
+  <div class="col-4 pull-left nopadding">{{ getScaledValue(histogram.min)| number:'1.0-2'}}</div>
   <div class="col-8 nopadding" ><span i18n>Max</span>:</div>
-  <div class="col-4 pull-left nopadding">{{histogram.max| number:'1.0-2'}}</div>
+  <div class="col-4 pull-left nopadding">{{ getScaledValue(histogram.max)| number:'1.0-2'}}</div>
 
   <ng-container *ngIf="showConfidenceInterval()">
     <div class="col-8 nopadding"><span i18n>Confidence interval</span>:</div>
-    <div class="col-4 pull-left nopadding">{{histogram.confidence * 100| number:'1.0-0'}}%</div>
+    <div class="col-4 pull-left nopadding">{{ getScaledValue(histogram.confidence * 100)| number:'1.0-0'}}%</div>
   </ng-container>
 </div>

projects/common-map/src/fm-map/components/legend/histogram-details/histogram-details.component.ts

@@ -14,6 +14,17 @@ export class HistogramDetailsComponent {
   @Input()
   histogram: IHistogram;
 
+  @Input()
+  scale: number | null;
+
+  public getScaledValue(value: number): number {
+    let v = value;
+    if (this.scale && this.scale != 0) {
+      v = this.scale * value;
+    }
+    return v;
+  }
+
   showConfidenceInterval(): boolean {
     return this.histogram.confidence != null && this.histogram.confidence !== 1;
   }

projects/common-map/src/fm-map/components/legend/legend.component.html

@@ -35,7 +35,7 @@
         </ng-container>
 
         <ng-template #histogram>
-          <fm-map-histogram-details [histogram]="layer.renderer.band.histogram"></fm-map-histogram-details>
+          <fm-map-histogram-details [histogram]="layer.renderer.band.histogram" [scale]="layer.scale"></fm-map-histogram-details>
         </ng-template>
       </div>
     </td>

projects/common-map/src/fm-map/components/map/map.component.ts

@@ -36,7 +36,6 @@ import {Extent,createEmpty,extend } from 'ol/extent';
 import {transform} from 'ol/proj';
 import { tassign } from 'tassign';
 import * as style from 'ol/style';
-import { ICodeLists } from '../../models/codelist.cache';
 
 
 @Component({
@@ -86,8 +85,6 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
   public overlayLayersCollapsed = true;
   public extent$: Observable<Extent> = this.store.select(mapReducers.selectGetExtent);
   public styles$:Observable<IStyles> = this.store.select(mapReducers.selectGetStyles);
-  public codeLists$: Observable<ICodeLists> = this.store.select(mapReducers.selectGetCodeLists);
-  public codeList$ = (id: string) => this.store.select(mapReducers.selectGetCodeList(id));
   public fullscreen$: Observable<boolean> = this.store.select(commonReducers.selectGetFullScreen);
   private lastUrl = "";
   private initialized = false;
@@ -195,6 +192,7 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
   }
 
   handleFeatureClick(feature: Feature<Geometry>) {
+    this.store.dispatch(new mapActions.ClickFeature(feature));
     this.clickedFeature.next(feature);
   }
 
@@ -368,7 +366,7 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
       else {
         return of(null);
       }
-      })).subscribe((newUrlState) =>{
+    })).subscribe((newUrlState: any) => {
         if(newUrlState) {
           //console.debug(`State to url`);
           this.replaceUrl(newUrlState.mapState,newUrlState.queryState,newUrlState.replaceUrl);

projects/common-map/src/fm-map/components/selected-item-geotiff/selected-item-geotiff.component.html

@@ -25,6 +25,7 @@
             <li *ngIf="!getItemLayer(item,itemLayer.layerIndex)"><a   href="#" (click)="handleAddAsLayer(item,itemLayer.layerIndex)"><i class="fas fa-layer-plus" aria-hidden="true" i18n-title title="Add as layer"></i>&nbsp;<span i18n>Add as overlay</span></a></li>
             <li *ngIf="getItemLayer(item,itemLayer.layerIndex)"><a  href="#" (click)="handleRemoveLayer(item,itemLayer.layerIndex)"><i class="fas fa-layer-minus" aria-hidden="true" i18n-title title="Remove overlay"></i>&nbsp;<span i18n>Remove overlay</span></a></li>
           </ng-container>
+          <li><fm-item-link class="text-primary p-0" [itemCode]="item.code" pathSuffix="data" [showText]="true"></fm-item-link></li>
         </ul>
       </div>
       <fm-map-zoom-to-show-alert [layer]="itemLayer?.layer"></fm-map-zoom-to-show-alert>

projects/common-map/src/fm-map/effects/map.effects.ts

@@ -5,7 +5,7 @@ import { ROUTER_NAVIGATED, RouterReducerState } from '@ngrx/router-store';
 import * as fromRouter from '@ngrx/router-store';
 import { createEffect, Actions, ofType } from '@ngrx/effects';
 
-import { EMPTY, Observable, of, forkJoin } from 'rxjs';
+import { EMPTY, Observable, of } from 'rxjs';
 import { withLatestFrom, switchMap, map, catchError, mergeMap } from 'rxjs/operators';
 
 import { GeoJSON, WKT } from 'ol/format';
@@ -99,65 +99,6 @@ export class MapEffects {
           color: 'rgba(0, 0, 0, 0)'
         })
       })));
-      // cache code lists
-      forkJoin([
-        this.itemService$.getItemList('vnd.farmmaps.itemtype.codelist.cl017'),
-        this.itemService$.getItemList('vnd.farmmaps.itemtype.codelist.cl018'),
-        this.itemService$.getItemList('vnd.farmmaps.itemtype.codelist.cl020'),
-        this.itemService$.getItemList('vnd.farmmaps.itemtype.codelist.cl022'),
-        this.itemService$.getItemList('vnd.farmmaps.itemtype.codelist.cl104'),
-        this.itemService$.getItemList('vnd.farmmaps.itemtype.codelist.cl127'),
-        this.itemService$.getItemList('vnd.farmmaps.itemtype.codelist.cl232'),
-        this.itemService$.getItemList('vnd.farmmaps.itemtype.codelist.cl251'),
-        this.itemService$.getItemList('vnd.farmmaps.itemtype.codelist.cl256'),
-        this.itemService$.getItemList('vnd.farmmaps.itemtype.codelist.cl259'),
-        this.itemService$.getItemList('vnd.farmmaps.itemtype.codelist.cl263'),
-        this.itemService$.getItemList('vnd.farmmaps.itemtype.codelist.cl264'),
-        this.itemService$.getItemList('vnd.farmmaps.itemtype.codelist.cl290'),
-        this.itemService$.getItemList('vnd.farmmaps.itemtype.codelist.cl291'),
-        this.itemService$.getItemList('vnd.farmmaps.itemtype.codelist.cl293'),
-        this.itemService$.getItemList('vnd.farmmaps.itemtype.codelist.cl405'),
-        this.itemService$.getItemList('vnd.farmmaps.itemtype.codelist.cl411'),
-        this.itemService$.getItemList('vnd.farmmaps.itemtype.codelist.cl421'),
-      ]).subscribe(([
-        cl017,
-        cl018,
-        cl020,
-        cl022,
-        cl104,
-        cl127,
-        cl232,
-        cl251,
-        cl256,
-        cl259,
-        cl263,
-        cl264,
-        cl290,
-        cl291,
-        cl293,
-        cl405,
-        cl411,
-        cl421,
-      ]) => {
-        actions.push(new mapActions.SetCodeList('vnd.farmmaps.itemtype.codelist.cl017', cl017));
-        actions.push(new mapActions.SetCodeList('vnd.farmmaps.itemtype.codelist.cl018', cl018));
-        actions.push(new mapActions.SetCodeList('vnd.farmmaps.itemtype.codelist.cl020', cl020));
-        actions.push(new mapActions.SetCodeList('vnd.farmmaps.itemtype.codelist.cl020', cl020));
-        actions.push(new mapActions.SetCodeList('vnd.farmmaps.itemtype.codelist.cl104', cl104));
-        actions.push(new mapActions.SetCodeList('vnd.farmmaps.itemtype.codelist.cl127', cl127));
-        actions.push(new mapActions.SetCodeList('vnd.farmmaps.itemtype.codelist.cl232', cl232));
-        actions.push(new mapActions.SetCodeList('vnd.farmmaps.itemtype.codelist.cl251', cl251));
-        actions.push(new mapActions.SetCodeList('vnd.farmmaps.itemtype.codelist.cl256', cl256));
-        actions.push(new mapActions.SetCodeList('vnd.farmmaps.itemtype.codelist.cl259', cl259));
-        actions.push(new mapActions.SetCodeList('vnd.farmmaps.itemtype.codelist.cl263', cl263));
-        actions.push(new mapActions.SetCodeList('vnd.farmmaps.itemtype.codelist.cl264', cl264));
-        actions.push(new mapActions.SetCodeList('vnd.farmmaps.itemtype.codelist.cl290', cl290));
-        actions.push(new mapActions.SetCodeList('vnd.farmmaps.itemtype.codelist.cl291', cl291));
-        actions.push(new mapActions.SetCodeList('vnd.farmmaps.itemtype.codelist.cl293', cl293));
-        actions.push(new mapActions.SetCodeList('vnd.farmmaps.itemtype.codelist.cl405', cl405));
-        actions.push(new mapActions.SetCodeList('vnd.farmmaps.itemtype.codelist.cl411', cl411));
-        actions.push(new mapActions.SetCodeList('vnd.farmmaps.itemtype.codelist.cl421', cl421));
-      });
 
       return actions;
     }

projects/common-map/src/fm-map/models/codelist.cache.ts

@@ -1,5 +0,0 @@
-import { IItem } from '@farmmaps/common';
-
-export interface ICodeLists {
-  [id: string]: IItem[];
-}

projects/common-map/src/fm-map/reducers/map.reducer.ts

@@ -1,5 +1,5 @@
 import { tassign } from 'tassign';
-import { IItem } from '@farmmaps/common';
+import { IItem,Item } from '@farmmaps/common';
 import { IItemLayer,ItemLayer,ITemporalItemLayer,TemporalItemLayer} from '../models/item.layer';
 import { IMapState} from '../models/map.state';
 import { IQueryState} from '@farmmaps/common';
@@ -17,7 +17,6 @@ import {Geometry} from 'ol/geom';
 import { ROUTER_NAVIGATION, RouterNavigationAction } from '@ngrx/router-store';
 
 import { MODULE_NAME } from '../module-name';
-import { ICodeLists } from '../models/codelist.cache';
 
 const startDate:Date = new Date(new Date(Date.now()).getFullYear(), new Date(Date.now()).getMonth() - 3, 1);
 const endDate:Date = new Date(Date.now());
@@ -73,8 +72,7 @@ export interface State {
   layerValuesEnabled:boolean,
   layerValues: Array<ILayervalue>
   showDataLayerSlide:boolean,
-  viewEnabled: boolean,
-  codeLists:ICodeLists,
+  viewEnabled:boolean
 }
 
 export const initialState: State = {
@@ -119,8 +117,7 @@ export const initialState: State = {
   layerValuesEnabled:false,
   layerValues:[],
   showDataLayerSlide:false,
-  viewEnabled: true,
-  codeLists: {}
+  viewEnabled:true
 }
 
 export function reducer(state = initialState, action: mapActions.Actions | commonActions.Actions | RouterNavigationAction): State {
@@ -391,6 +388,9 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
     case mapActions.CLEARLAYERS: {
       return tassign(state, {overlayLayers: [], selectedOverlayLayer: null});
     }
+    case mapActions.CLEARFEATURES: {
+      return tassign(state, {features: [], selectedFeature: null});
+    }
     case mapActions.SETVISIBILITY: {
       const a = action as mapActions.SetVisibility;
       if(state.selectedItemLayer == a.itemLayer) {
@@ -572,12 +572,6 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
       }
       return state;
     }
-    case mapActions.SETCODELIST:{
-      const a = action as mapActions.SetCodeList;
-      const codeLists = tassign(state.codeLists);
-      codeLists[a.itemType] = a.values;
-      return tassign(state,{codeLists:codeLists});
-    }
     default: {
       return state;
     }
@@ -616,7 +610,7 @@ export const getLayerValues = (state:State) => state.layerValues;
 export const getLayerValuesX = (state:State) => state.layerValuesX;
 export const getLayerValuesY = (state:State) => state.layerValuesY;
 export const getViewEnabled = (state:State) => state.viewEnabled;
-export const getCodeLists = (state:State) => state.codeLists;
+
 
 export const selectMapState = createFeatureSelector<State>(MODULE_NAME);
 export const selectGetMapState= createSelector(selectMapState, getMapState);
@@ -651,5 +645,5 @@ export const selectGetLayerValues = createSelector(selectMapState,getLayerValues
 export const selectGetLayerValuesX = createSelector(selectMapState,getLayerValuesX);
 export const selectGetLayerValuesY = createSelector(selectMapState,getLayerValuesY);
 export const selectGetViewEnabled = createSelector(selectMapState,getViewEnabled);
-export const selectGetCodeLists = createSelector(selectMapState, getCodeLists);
-export const selectGetCodeList = (id: string) => createSelector(selectGetCodeLists, (codeLists) => codeLists[id]);
+
+

projects/common-map3d/package.json

@@ -7,7 +7,7 @@
   "peerDependencies": {
     "@angular/common":  ">=14.0.0",
     "@angular/core":  ">=14.0.0",
-    "ngx-openlayers": "1.0.0-next.19",
+    "ngx-openlayers": "file:dist/ngx-openlayers",
     "cesium": ">=1.82.1",
     "ol-cesium": ">=2.13.0"
   },

projects/common/src/fm/common.module.ts

@@ -42,6 +42,8 @@ import { IEventMessage } from './models/event.message';
 import { IItem, Item } from './models/item';
 import { WeatherCurrentObservation } from './models/weatherCurrentObservation';
 import { IItemType } from './models/item.type';
+import { IItemLinkType} from './models/itemlink.type';
+import {IUrlType} from './models/url.type';
 import { IItemTypes } from './models/item.types';
 import { IItemTask, ItemTask } from './models/itemTask';
 import { IListItem } from './models/list.item';
@@ -65,6 +67,7 @@ import { HelpMenuComponent} from './components/help-menu/help-menu.component';
 import { BackButtonComponent } from './components/back-button/back-button.component';
 import { EditImageModalComponent } from './components/edit-image-modal/edit-image-modal.component';
 import { AvatarComponent } from './components/avatar/avatar.component';
+import { ItemLinkComponent } from './components/item-link/item-link.component';
 import { AvatarModule } from 'ngx-avatar';
 import { ImageCropperModule } from 'ngx-image-cropper';
 
@@ -92,6 +95,8 @@ export {
   IItem,
   Item,
   IItemType,
+  IItemLinkType,
+  IUrlType,
   IItemTypes,
   IItemTask,
   ItemTask,
@@ -115,6 +120,7 @@ export {
   IGradientstop,
   BackButtonComponent,
   AvatarComponent,
+  ItemLinkComponent,
   EditImageModalComponent,
   GradientComponent,
   GradientSelectComponent
@@ -160,7 +166,8 @@ export {
     BackButtonComponent,
     ThumbnailComponent,
     EditImageModalComponent,
-    AvatarComponent
+    AvatarComponent,
+    ItemLinkComponent
   ],
   exports: [
     NgbModule,
@@ -189,6 +196,7 @@ export {
     BackButtonComponent,
     ThumbnailComponent,
     AvatarComponent,
+    ItemLinkComponent,
     EditImageModalComponent
   ]
 })

projects/common/src/fm/components/app/app.component.ts

@@ -115,18 +115,11 @@ export class AppComponent implements OnInit, OnDestroy {
     return action;
   }
 
-  async loadItemTypes() {
-    await this.itemTypeService$.load(this.appConfig$)
-  }
-
   ngOnInit() {
     this.InstallRouteEventHandler();
     this.InstallEventServiceEventHandler();
     this.InstallAuthenticationEventHandler();
     this.InstallHealthCheck();
-
-    //load item types
-    this.loadItemTypes();
   }
 
   @HostListener('document:keyup', ['$event'])

projects/common/src/fm/components/item-link/item-link.component.html

@@ -0,0 +1 @@
+<span class="item-link" (click)="copylink(copiedtt)" 	triggers="manual"	ngbTooltip="Link copied" #copiedtt="ngbTooltip" ><i ngbTooltip='Copy link' class="fa-solid fa-link"></i> <span *ngIf="showText" i18n>Copy link</span></span>

projects/common/src/fm/components/item-link/item-link.component.ts

@@ -0,0 +1,44 @@
+import { Component, Input, OnDestroy} from '@angular/core';
+import { IItemLinkType} from '../../models/itemlink.type'
+import { IUrlType } from '../../models/url.type';
+import { ItemService } from '../../common-service.module';
+import { Subscription } from 'rxjs';
+import { ClipboardService } from 'ngx-clipboard'
+
+
+@Component({
+  selector: 'fm-item-link',
+  templateUrl: './item-link.component.html'
+})
+export class ItemLinkComponent implements OnDestroy {
+
+  @Input() itemCode:string;
+  @Input() pathSuffix:string;
+  @Input() query:string;
+  @Input() validMinutes:number;
+  @Input() showText:boolean;
+
+  private sub : Subscription = null;
+
+  constructor(private itemService:ItemService,private clipboardService$: ClipboardService) { }
+
+  copylink(tooltip) {
+    if(this.sub)  {
+        this.sub.unsubscribe();
+    }
+    let link: IItemLinkType = {itemcode:this.itemCode,pathsuffix:this.pathSuffix,query:this.query,validminutes:this.validMinutes}
+    this.sub = this.itemService.getItemLink(link).subscribe((url:IUrlType) => { 
+        this.clipboardService$.copy(url.url);
+        tooltip.open();
+        setTimeout(() => {
+            tooltip.close();
+        }, 2000);
+    })
+  }
+
+  ngOnDestroy(): void {
+    if(this.sub) {
+        this.sub.unsubscribe();
+    }      
+  }
+}

projects/common/src/fm/models/itemlink.type.ts

@@ -0,0 +1,6 @@
+export interface IItemLinkType {
+  itemcode: string;
+  pathsuffix?: string;
+  query?: string;
+  validminutes?: number;
+}

projects/common/src/fm/models/url.type.ts

@@ -0,0 +1,3 @@
+export interface IUrlType {
+  url: string;
+}

projects/common/src/fm/services/item.service.ts

@@ -2,6 +2,8 @@ import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { IItemType } from '../models/item.type';
+import { IItemLinkType } from '../models/itemlink.type';
+import { IUrlType } from '../models/url.type';
 import { IItem } from '../models/item';
 import { IJsonline } from '../models/json-line';
 import { IItemTask } from '../models/itemTask';
@@ -63,6 +65,10 @@ export class ItemService {
     return this.httpClient.get<IItem>(`${this.ApiEndpoint()}/api/v1/items/${code}`);
   }
 
+  getItemLink(itemLink: IItemLinkType): Observable<any> {
+    return this.httpClient.post<IItemLinkType>(`${this.ApiEndpoint()}/api/v1/itemlink`,itemLink);
+  }
+
   getItemData(code: string,start?:number,size?:number): Observable<ArrayBuffer> {
     let headers = new HttpHeaders();
     if(start !== undefined && size !== undefined) headers=headers.set("Range",`bytes=${start}-${size-1}`);

projects/common/src/fm/shared/app.config.factory.ts

@@ -11,7 +11,8 @@ import { IAuthconfigFactory } from './authconfigFactory';
 export function appConfigFactory(injector:Injector, appConfig: AppConfig, oauthService: OAuthService, authconfigFactory:IAuthconfigFactory,authStorage:OAuthStorage,itemtypeService:ItemTypeService): () => Promise<any> {
   return (): Promise<any> => {
     return new Promise<void>((resolve,reject) => {
-      appConfig.load().then(() => {            
+      appConfig.load().then(() => {
+        itemtypeService.load(appConfig);
         oauthService.configure(authconfigFactory.getAuthConfig(appConfig));
         oauthService.setStorage(authStorage);
         oauthService.setupAutomaticSilentRefresh();

projects/ngx-openlayers/.eslintrc.json

@@ -0,0 +1,56 @@
+{
+  "extends": "../../.eslintrc.json",
+  "ignorePatterns": [
+    "!**/*"
+  ],
+  "overrides": [
+    {
+      "files": [
+        "*.ts"
+      ],
+      "parserOptions": {
+        "project": [
+          "projects/ngx-openlayers/tsconfig.lib.json",
+          "projects/ngx-openlayers/tsconfig.spec.json"
+        ],
+        "createDefaultProgram": true
+      },
+      "rules": {
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "aol",
+            "style": "kebab-case"
+          }
+        ],
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "aol",
+            "style": "camelCase"
+          }
+        ],
+        "@typescript-eslint/explicit-member-accessibility": [
+          "off",
+          {
+            "accessibility": "explicit"
+          }
+        ],
+        "arrow-parens": [
+          "off",
+          "always"
+        ],
+        "import/order": "off",
+        "no-underscore-dangle": "off"
+      }
+    },
+    {
+      "files": [
+        "*.html"
+      ],
+      "rules": {}
+    }
+  ]
+}

projects/ngx-openlayers/ng-package.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/ngx-openlayers",
+  "assets": [
+    "ngcc.config.js"
+  ],
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

projects/ngx-openlayers/ngcc.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  ignorableDeepImportMatchers: [/ol\//]
+};

projects/ngx-openlayers/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "ngx-openlayers",
+  "version": "2.0.0",
+  "publishConfig": {
+    "registry": "https://repository.akkerweb.nl/repository/npm-hosted/"
+  },
+  "peerDependencies": {
+    "@angular/common": ">=14.x.x",
+    "@angular/core": ">=14.x.x",
+    "ol": "^6.0.0"
+  }
+}

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

@@ -0,0 +1,18 @@
+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;
+
+  constructor(private elementRef: ElementRef) {}
+
+  ngOnInit() {
+    this.html = this.elementRef.nativeElement.innerHTML;
+    this.instance = new Attribution(this);
+  }
+}

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

@@ -0,0 +1,26 @@
+import { AfterViewInit, Component, ContentChildren, Host, QueryList } from '@angular/core';
+import { Attribution } from 'ol/control';
+import { AttributionComponent } from './attribution.component';
+import { SourceComponent } from './sources/source.component';
+
+@Component({
+  selector: 'aol-attributions',
+  template: '<ng-content></ng-content>',
+})
+export class AttributionsComponent implements AfterViewInit {
+  @ContentChildren(AttributionComponent)
+  attributions: QueryList<AttributionComponent>;
+
+  instance: Array<Attribution>;
+
+  constructor(@Host() private source: SourceComponent) {}
+
+  /* we can do this at the very end */
+  ngAfterViewInit() {
+    if (this.attributions.length) {
+      this.instance = this.attributions.map((cmp) => cmp.instance);
+      // console.log('setting attributions:', this.instance);
+      this.source.instance.setAttributions(this.instance);
+    }
+  }
+}

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

@@ -0,0 +1,89 @@
+import { Component, Input, OnChanges, OnInit, Optional, SimpleChanges } from '@angular/core';
+import { Coordinate } from 'ol/coordinate';
+import { transform } from 'ol/proj';
+import { GeometryLinestringComponent } from './geom/geometrylinestring.component';
+import { GeometryMultiLinestringComponent } from './geom/geometrymultilinestring.component';
+import { GeometryMultiPointComponent } from './geom/geometrymultipoint.component';
+import { GeometryMultiPolygonComponent } from './geom/geometrymultipolygon.component';
+import { GeometryPolygonComponent } from './geom/geometrypolygon.component';
+import { MapComponent } from './map.component';
+
+@Component({
+  selector: 'aol-collection-coordinates',
+  template: ` <div class="aol-collection-coordinates"></div> `,
+})
+export class CollectionCoordinatesComponent implements OnChanges, OnInit {
+  @Input()
+  coordinates: Coordinate[] | Coordinate[][] | Coordinate[][][];
+  @Input()
+  srid = 'EPSG:3857';
+
+  private host: any;
+  private mapSrid = 'EPSG:3857';
+
+  constructor(
+    private map: MapComponent,
+    @Optional() geometryLinestring: GeometryLinestringComponent,
+    @Optional() geometryPolygon: GeometryPolygonComponent,
+    @Optional() geometryMultipoint: GeometryMultiPointComponent,
+    @Optional() geometryMultilinestring: GeometryMultiLinestringComponent,
+    @Optional() geometryMultipolygon: GeometryMultiPolygonComponent
+  ) {
+    if (!!geometryLinestring) {
+      this.host = geometryLinestring;
+    } else if (!!geometryPolygon) {
+      this.host = geometryPolygon;
+    } else if (!!geometryMultipoint) {
+      this.host = geometryMultipoint;
+    } else if (!!geometryMultilinestring) {
+      this.host = geometryMultilinestring;
+    } else if (!!geometryMultipolygon) {
+      this.host = geometryMultipolygon;
+    } else {
+      throw new Error('aol-collection-coordinates must be a child of a geometry component');
+    }
+  }
+
+  ngOnInit() {
+    this.map.instance.on('change:view', (e) => this.onMapViewChanged(e));
+    this.mapSrid = this.map.instance.getView().getProjection().getCode();
+    this.transformCoordinates();
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    this.transformCoordinates();
+  }
+
+  private onMapViewChanged(event) {
+    this.mapSrid = event.target.get(event.key).getProjection().getCode();
+    this.transformCoordinates();
+  }
+
+  private transformCoordinates() {
+    let transformedCoordinates: Coordinate[] | Coordinate[][] | Coordinate[][][];
+
+    if (this.srid === this.mapSrid) {
+      transformedCoordinates = this.coordinates;
+    } else {
+      switch (this.host.componentType) {
+        case 'geometry-linestring':
+        case 'geometry-multipoint':
+          transformedCoordinates = (this.coordinates as Coordinate[]).map((c) => transform(c, this.srid, this.mapSrid));
+          break;
+        case 'geometry-polygon':
+        case 'geometry-multilinestring':
+          transformedCoordinates = (this.coordinates as Coordinate[][]).map((cc) =>
+            cc.map((c) => transform(c, this.srid, this.mapSrid))
+          );
+          break;
+        case 'geometry-multipolygon':
+          transformedCoordinates = (this.coordinates as Coordinate[][][]).map((ccc) =>
+            ccc.map((cc) => cc.map((c) => transform(c, this.srid, this.mapSrid)))
+          );
+          break;
+      }
+    }
+
+    this.host.instance.setCoordinates(transformedCoordinates);
+  }
+}

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

@@ -0,0 +1,9 @@
+import { Component, ElementRef } from '@angular/core';
+
+@Component({
+  selector: 'aol-content',
+  template: '<ng-content></ng-content>',
+})
+export class ContentComponent {
+  constructor(public elementRef: ElementRef) {}
+}

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

@@ -0,0 +1,30 @@
+import { Component, ElementRef, Input, OnDestroy, OnInit } from '@angular/core';
+import { Attribution } from 'ol/control';
+import { MapComponent } from '../map.component';
+
+@Component({
+  selector: 'aol-control-attribution',
+  template: ``,
+})
+export class ControlAttributionComponent implements OnInit, OnDestroy {
+  @Input()
+  collapsible: boolean;
+
+  componentType = 'control';
+  instance: Attribution;
+  target: Element;
+
+  constructor(private map: MapComponent, private element: ElementRef) {}
+
+  ngOnInit() {
+    this.target = this.element.nativeElement;
+    // console.log('ol.control.Attribution init: ', this);
+    this.instance = new Attribution(this);
+    this.map.instance.addControl(this.instance);
+  }
+
+  ngOnDestroy() {
+    // console.log('removing aol-control-attribution');
+    this.map.instance.removeControl(this.instance);
+  }
+}

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

@@ -0,0 +1,33 @@
+import { Component, ContentChild, OnDestroy, OnInit } from '@angular/core';
+import { Control } from 'ol/control';
+import { ContentComponent } from '../content.component';
+import { MapComponent } from '../map.component';
+
+@Component({
+  selector: 'aol-control',
+  template: ` <ng-content></ng-content> `,
+})
+export class ControlComponent implements OnInit, OnDestroy {
+  @ContentChild(ContentComponent, { static: true })
+  content: ContentComponent;
+
+  componentType = 'control';
+  instance: Control;
+  element: Element;
+
+  constructor(private map: MapComponent) {}
+
+  ngOnInit() {
+    if (this.content) {
+      this.element = this.content.elementRef.nativeElement;
+      this.instance = new Control(this);
+      this.map.instance.addControl(this.instance);
+    }
+  }
+
+  ngOnDestroy() {
+    if (this.instance) {
+      this.map.instance.removeControl(this.instance);
+    }
+  }
+}

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

@@ -0,0 +1,42 @@
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { Collection } from 'ol';
+import { Control, defaults } from 'ol/control';
+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 {
+  @Input()
+  attribution: boolean;
+  @Input()
+  attributionOptions: AttributionOptions;
+  @Input()
+  rotate: boolean;
+  @Input()
+  rotateOptions: RotateOptions;
+  @Input()
+  zoom: boolean;
+  @Input()
+  zoomOptions: ZoomOptions;
+
+  instance: Collection<Control>;
+
+  constructor(private map: MapComponent) {}
+
+  ngOnInit() {
+    // console.log('ol.control.defaults init: ', this);
+    this.instance = defaults(this);
+    this.instance.forEach((c) => this.map.instance.addControl(c));
+  }
+
+  ngOnDestroy() {
+    // console.log('removing aol-control-defaults');
+    this.instance.forEach((c) => this.map.instance.removeControl(c));
+  }
+}

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

@@ -0,0 +1,36 @@
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+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 {
+  @Input()
+  className: string;
+  @Input()
+  label: string;
+  @Input()
+  labelActive: string;
+  @Input()
+  tipLabel: string;
+  @Input()
+  keys: boolean;
+
+  instance: FullScreen;
+
+  constructor(private map: MapComponent) {
+    // console.log('instancing aol-control-fullscreen');
+  }
+
+  ngOnInit() {
+    this.instance = new FullScreen(this);
+    this.map.instance.addControl(this.instance);
+  }
+
+  ngOnDestroy() {
+    // console.log('removing aol-control-fullscreen');
+    this.map.instance.removeControl(this.instance);
+  }
+}

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

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

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

@@ -0,0 +1,53 @@
+import { Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
+import { View } from 'ol';
+import { OverviewMap } from 'ol/control';
+import { Layer } from 'ol/layer';
+import { MapComponent } from '../map.component';
+
+@Component({
+  selector: 'aol-control-overviewmap',
+  template: ` <ng-content></ng-content> `,
+})
+export class ControlOverviewMapComponent implements OnInit, OnChanges, OnDestroy {
+  @Input()
+  collapsed: boolean;
+  @Input()
+  collapseLabel: string;
+  @Input()
+  collapsible: boolean;
+  @Input()
+  label: string;
+  @Input()
+  layers: Layer[];
+  @Input()
+  target: Element;
+  @Input()
+  tipLabel: string;
+  @Input()
+  view: View;
+
+  instance: OverviewMap;
+
+  constructor(private map: MapComponent) {}
+
+  ngOnInit() {
+    this.instance = new OverviewMap(this);
+    this.map.instance.addControl(this.instance);
+  }
+
+  ngOnDestroy() {
+    this.map.instance.removeControl(this.instance);
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (this.instance != null && changes.hasOwnProperty('view')) {
+      this.reloadInstance();
+    }
+  }
+
+  private reloadInstance() {
+    this.map.instance.removeControl(this.instance);
+    this.instance = new OverviewMap(this);
+    this.map.instance.addControl(this.instance);
+  }
+}

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

@@ -0,0 +1,36 @@
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+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 {
+  @Input()
+  className: string;
+  @Input()
+  label: string;
+  @Input()
+  tipLabel: string;
+  @Input()
+  duration: number;
+  @Input()
+  autoHide: boolean;
+
+  instance: Rotate;
+
+  constructor(private map: MapComponent) {
+    // console.log('instancing aol-control-rotate');
+  }
+
+  ngOnInit() {
+    this.instance = new Rotate(this);
+    this.map.instance.addControl(this.instance);
+  }
+
+  ngOnDestroy() {
+    // console.log('removing aol-control-rotate');
+    this.map.instance.removeControl(this.instance);
+  }
+}

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

@@ -0,0 +1,28 @@
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+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 {
+  @Input()
+  units: string;
+
+  instance: ScaleLine;
+
+  constructor(private map: MapComponent) {
+    // console.log('instancing aol-control-scaleline');
+  }
+
+  ngOnInit() {
+    this.instance = new ScaleLine(this);
+    this.map.instance.addControl(this.instance);
+  }
+
+  ngOnDestroy() {
+    // console.log('removing aol-control-scaleline');
+    this.map.instance.removeControl(this.instance);
+  }
+}

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

@@ -0,0 +1,38 @@
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+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 {
+  @Input()
+  duration: number;
+  @Input()
+  zoomInLabel: string | Node;
+  @Input()
+  zoomOutLabel: string | Node;
+  @Input()
+  zoomInTipLabel: string;
+  @Input()
+  zoomOutTipLabel: string;
+  @Input()
+  delta: number;
+
+  instance: Zoom;
+
+  constructor(private map: MapComponent) {
+    // console.log('instancing aol-control-zoom');
+  }
+
+  ngOnInit() {
+    this.instance = new Zoom(this);
+    this.map.instance.addControl(this.instance);
+  }
+
+  ngOnDestroy() {
+    // console.log('removing aol-control-zoom');
+    this.map.instance.removeControl(this.instance);
+  }
+}

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

@@ -0,0 +1,34 @@
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+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 {
+  @Input()
+  className: string;
+  @Input()
+  duration: number;
+  @Input()
+  maxResolution: number;
+  @Input()
+  minResolution: number;
+
+  instance: ZoomSlider;
+
+  constructor(private map: MapComponent) {
+    // console.log('instancing aol-control-zoomslider');
+  }
+
+  ngOnInit() {
+    this.instance = new ZoomSlider(this);
+    this.map.instance.addControl(this.instance);
+  }
+
+  ngOnDestroy() {
+    // console.log('removing aol-control-zoomslider');
+    this.map.instance.removeControl(this.instance);
+  }
+}

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

@@ -0,0 +1,35 @@
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { ZoomToExtent } from 'ol/control';
+import { Extent } from 'ol/extent';
+import { MapComponent } from '../map.component';
+
+@Component({
+  selector: 'aol-control-zoomtoextent',
+  template: ` <ng-content></ng-content> `,
+})
+export class ControlZoomToExtentComponent implements OnInit, OnDestroy {
+  @Input()
+  className: string;
+  @Input()
+  label: string | Node;
+  @Input()
+  tipLabel: string;
+  @Input()
+  extent: Extent;
+
+  instance: ZoomToExtent;
+
+  constructor(private map: MapComponent) {
+    // console.log('instancing aol-control-zoomtoextent');
+  }
+
+  ngOnInit() {
+    this.instance = new ZoomToExtent(this);
+    this.map.instance.addControl(this.instance);
+  }
+
+  ngOnDestroy() {
+    // console.log('removing aol-control-zoomtoextent');
+    this.map.instance.removeControl(this.instance);
+  }
+}

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

@@ -0,0 +1,80 @@
+import { Component, Input, OnChanges, OnInit, Optional, SimpleChanges } from '@angular/core';
+import { transform } from 'ol/proj';
+import { GeometryCircleComponent } from './geom/geometrycircle.component';
+import { GeometryPointComponent } from './geom/geometrypoint.component';
+import { MapComponent } from './map.component';
+import { OverlayComponent } from './overlay.component';
+import { ViewComponent } from './view.component';
+
+@Component({
+  selector: 'aol-coordinate',
+  template: ` <div class="aol-coordinate"></div> `,
+})
+export class CoordinateComponent implements OnChanges, OnInit {
+  @Input()
+  x: number;
+  @Input()
+  y: number;
+  @Input()
+  srid = 'EPSG:3857';
+
+  private host: any;
+  private mapSrid = 'EPSG:3857';
+
+  constructor(
+    private map: MapComponent,
+    @Optional() viewHost: ViewComponent,
+    @Optional() geometryPointHost: GeometryPointComponent,
+    @Optional() geometryCircleHost: GeometryCircleComponent,
+    @Optional() overlayHost: OverlayComponent
+  ) {
+    // console.log('instancing aol-coordinate');
+    if (geometryPointHost !== null) {
+      this.host = geometryPointHost;
+    } else if (geometryCircleHost !== null) {
+      this.host = geometryCircleHost;
+    } else if (viewHost !== null) {
+      this.host = viewHost;
+    } else if (overlayHost !== null) {
+      this.host = overlayHost;
+    }
+  }
+
+  ngOnInit() {
+    this.map.instance.on('change:view', (e) => this.onMapViewChanged(e));
+    this.mapSrid = this.map.instance.getView().getProjection().getCode();
+    this.transformCoordinates();
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    this.transformCoordinates();
+  }
+
+  private onMapViewChanged(event) {
+    this.mapSrid = event.target.get(event.key).getProjection().getCode();
+    this.transformCoordinates();
+  }
+
+  private transformCoordinates() {
+    let transformedCoordinates: number[];
+
+    if (this.srid === this.mapSrid) {
+      transformedCoordinates = [this.x, this.y];
+    } else {
+      transformedCoordinates = transform([this.x, this.y], this.srid, this.mapSrid);
+    }
+
+    switch (this.host.componentType) {
+      case 'geometry-point':
+        this.host.instance.setCoordinates(transformedCoordinates);
+        break;
+      case 'geometry-circle':
+      case 'view':
+        this.host.instance.setCenter(transformedCoordinates);
+        break;
+      case 'overlay':
+        this.host.instance.setPosition(transformedCoordinates);
+        break;
+    }
+  }
+}

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

@@ -0,0 +1,35 @@
+import { Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
+import { Feature } from 'ol';
+import { SourceVectorComponent } from './sources/vector.component';
+
+@Component({
+  selector: 'aol-feature',
+  template: ` <ng-content></ng-content> `,
+})
+export class FeatureComponent implements OnInit, OnDestroy, OnChanges {
+  @Input()
+  id: string | number | undefined;
+
+  componentType = 'feature';
+  instance: Feature;
+
+  constructor(private host: SourceVectorComponent) {}
+
+  ngOnInit() {
+    this.instance = new Feature();
+    if (this.id !== undefined) {
+      this.instance.setId(this.id);
+    }
+    this.host.instance.addFeature(this.instance);
+  }
+
+  ngOnDestroy() {
+    this.host.instance.removeFeature(this.instance);
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (this.instance) {
+      this.instance.setId(this.id);
+    }
+  }
+}

projects/ngx-openlayers/src/lib/formats/format.component.ts

@@ -0,0 +1,6 @@
+import Feature from 'ol/format/Feature';
+
+export class FormatComponent {
+  public instance: Feature;
+  public componentType = 'format';
+}

projects/ngx-openlayers/src/lib/formats/mvt.component.ts

@@ -0,0 +1,30 @@
+import { Component, forwardRef, Input } from '@angular/core';
+import { MVT } from 'ol/format';
+import { Geometry } from 'ol/geom';
+import GeometryType from 'ol/geom/GeometryType';
+import { FormatComponent } from './format.component';
+
+@Component({
+  selector: 'aol-format-mvt',
+  template: '',
+  providers: [{ provide: FormatComponent, useExisting: forwardRef(() => FormatMVTComponent) }],
+})
+export class FormatMVTComponent extends FormatComponent {
+  @Input()
+  featureClass:
+    | ((geom: Geometry | { [k: string]: any }) => any)
+    | ((geom: GeometryType, arg2: number[], arg3: number[] | number[][], arg4: { [k: string]: any }) => any);
+  @Input()
+  geometryName: string;
+  @Input()
+  layerName: string;
+  @Input()
+  layers: string[];
+
+  instance: MVT;
+
+  constructor() {
+    super();
+    this.instance = new MVT(this);
+  }
+}

projects/ngx-openlayers/src/lib/geom/geometrycircle.component.ts

@@ -0,0 +1,28 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { Circle } from 'ol/geom';
+import { FeatureComponent } from '../feature.component';
+import { MapComponent } from '../map.component';
+import { SimpleGeometryComponent } from './simplegeometry.component';
+
+@Component({
+  selector: 'aol-geometry-circle',
+  template: ` <ng-content></ng-content> `,
+})
+export class GeometryCircleComponent extends SimpleGeometryComponent implements OnInit {
+  componentType = 'geometry-circle';
+  instance: Circle;
+
+  constructor(map: MapComponent, host: FeatureComponent) {
+    super(map, host);
+    // defaulting coordinates to [0,0]. To be overridden in child component.
+    this.instance = new Circle([0, 0]);
+  }
+
+  @Input()
+  get radius(): number {
+    return this.instance.getRadius();
+  }
+  set radius(radius: number) {
+    this.instance.setRadius(radius);
+  }
+}

projects/ngx-openlayers/src/lib/geom/geometrylinestring.component.ts

@@ -0,0 +1,26 @@
+import { Component, OnInit } from '@angular/core';
+import { FeatureComponent } from '../feature.component';
+import { SimpleGeometryComponent } from './simplegeometry.component';
+import { MapComponent } from '../map.component';
+import { LineString } from 'ol/geom';
+
+@Component({
+  selector: 'aol-geometry-linestring',
+  template: ` <ng-content></ng-content> `,
+})
+export class GeometryLinestringComponent extends SimpleGeometryComponent implements OnInit {
+  public componentType = 'geometry-linestring';
+  public instance: LineString;
+
+  constructor(map: MapComponent, host: FeatureComponent) {
+    super(map, host);
+  }
+
+  ngOnInit() {
+    this.instance = new LineString([
+      [0, 0],
+      [1, 1],
+    ]);
+    super.ngOnInit();
+  }
+}

projects/ngx-openlayers/src/lib/geom/geometrymultilinestring.component.ts

@@ -0,0 +1,28 @@
+import { Component, OnInit } from '@angular/core';
+import { FeatureComponent } from '../feature.component';
+import { SimpleGeometryComponent } from './simplegeometry.component';
+import { MapComponent } from '../map.component';
+import { MultiLineString } from 'ol/geom';
+
+@Component({
+  selector: 'aol-geometry-multilinestring',
+  template: ` <ng-content></ng-content> `,
+})
+export class GeometryMultiLinestringComponent extends SimpleGeometryComponent implements OnInit {
+  public componentType = 'geometry-multilinestring';
+  public instance: MultiLineString;
+
+  constructor(map: MapComponent, host: FeatureComponent) {
+    super(map, host);
+  }
+
+  ngOnInit() {
+    this.instance = new MultiLineString([
+      [
+        [0, 0],
+        [1, 1],
+      ],
+    ]);
+    super.ngOnInit();
+  }
+}

projects/ngx-openlayers/src/lib/geom/geometrymultipoint.component.ts

@@ -0,0 +1,26 @@
+import { Component, OnInit } from '@angular/core';
+import { FeatureComponent } from '../feature.component';
+import { SimpleGeometryComponent } from './simplegeometry.component';
+import { MapComponent } from '../map.component';
+import { MultiPoint } from 'ol/geom';
+
+@Component({
+  selector: 'aol-geometry-multipoint',
+  template: ` <ng-content></ng-content> `,
+})
+export class GeometryMultiPointComponent extends SimpleGeometryComponent implements OnInit {
+  public componentType = 'geometry-multipoint';
+  public instance: MultiPoint;
+
+  constructor(map: MapComponent, host: FeatureComponent) {
+    super(map, host);
+  }
+
+  ngOnInit() {
+    this.instance = new MultiPoint([
+      [0, 0],
+      [1, 1],
+    ]);
+    super.ngOnInit();
+  }
+}

projects/ngx-openlayers/src/lib/geom/geometrymultipolygon.component.ts

@@ -0,0 +1,31 @@
+import { Component, OnInit } from '@angular/core';
+import { FeatureComponent } from '../feature.component';
+import { SimpleGeometryComponent } from './simplegeometry.component';
+import { MapComponent } from '../map.component';
+import { MultiPolygon } from 'ol/geom';
+
+@Component({
+  selector: 'aol-geometry-multipolygon',
+  template: ` <ng-content></ng-content> `,
+})
+export class GeometryMultiPolygonComponent extends SimpleGeometryComponent implements OnInit {
+  public componentType = 'geometry-multipolygon';
+  public instance: MultiPolygon;
+
+  constructor(map: MapComponent, host: FeatureComponent) {
+    super(map, host);
+  }
+
+  ngOnInit() {
+    this.instance = new MultiPolygon([
+      [
+        [
+          [0, 0],
+          [1, 1],
+          [0, 1],
+        ],
+      ],
+    ]);
+    super.ngOnInit();
+  }
+}

projects/ngx-openlayers/src/lib/geom/geometrypoint.component.ts

@@ -0,0 +1,23 @@
+import { Component, OnInit } from '@angular/core';
+import { FeatureComponent } from '../feature.component';
+import { SimpleGeometryComponent } from './simplegeometry.component';
+import { MapComponent } from '../map.component';
+import { Point } from 'ol/geom';
+
+@Component({
+  selector: 'aol-geometry-point',
+  template: ` <ng-content></ng-content> `,
+})
+export class GeometryPointComponent extends SimpleGeometryComponent implements OnInit {
+  public componentType = 'geometry-point';
+  public instance: Point;
+
+  constructor(map: MapComponent, host: FeatureComponent) {
+    super(map, host);
+  }
+
+  ngOnInit() {
+    this.instance = new Point([0, 0]);
+    super.ngOnInit();
+  }
+}

projects/ngx-openlayers/src/lib/geom/geometrypolygon.component.ts

@@ -0,0 +1,29 @@
+import { Component, OnInit } from '@angular/core';
+import { FeatureComponent } from '../feature.component';
+import { SimpleGeometryComponent } from './simplegeometry.component';
+import { MapComponent } from '../map.component';
+import { Polygon } from 'ol/geom';
+
+@Component({
+  selector: 'aol-geometry-polygon',
+  template: ` <ng-content></ng-content> `,
+})
+export class GeometryPolygonComponent extends SimpleGeometryComponent implements OnInit {
+  public componentType = 'geometry-polygon';
+  public instance: Polygon;
+
+  constructor(map: MapComponent, host: FeatureComponent) {
+    super(map, host);
+  }
+
+  ngOnInit() {
+    this.instance = new Polygon([
+      [
+        [0, 0],
+        [1, 1],
+        [0, 1],
+      ],
+    ]);
+    super.ngOnInit();
+  }
+}

projects/ngx-openlayers/src/lib/geom/simplegeometry.component.ts

@@ -0,0 +1,18 @@
+import { Directive, Input, OnInit } from '@angular/core';
+import SimpleGeometry from 'ol/geom/SimpleGeometry';
+import { FeatureComponent } from '../feature.component';
+import { MapComponent } from '../map.component';
+
+@Directive()
+export abstract class SimpleGeometryComponent implements OnInit {
+  @Input() srid: string;
+
+  instance: SimpleGeometry;
+  componentType = 'simple-geometry';
+
+  constructor(protected map: MapComponent, protected host: FeatureComponent) {}
+
+  ngOnInit() {
+    this.host.instance.setGeometry(this.instance);
+  }
+}

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

@@ -0,0 +1,57 @@
+import { AfterContentInit, Component, Input, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
+import { Graticule } from 'ol';
+import { Stroke } from 'ol/style';
+import { MapComponent } from './map.component';
+
+@Component({
+  selector: 'aol-graticule',
+  template: '<ng-content></ng-content>',
+})
+export class GraticuleComponent implements AfterContentInit, OnChanges, OnDestroy {
+  @Input()
+  strokeStyle: Stroke;
+  @Input()
+  showLabels: boolean;
+  @Input()
+  lonLabelPosition: number;
+  @Input()
+  latLabelPosition: number;
+
+  instance: any;
+  componentType = 'graticule';
+
+  constructor(private map: MapComponent) {}
+
+  ngOnChanges(changes: SimpleChanges) {
+    const properties: { [index: string]: any } = {};
+
+    if (!this.instance) {
+      return;
+    }
+
+    for (const key in changes) {
+      if (changes.hasOwnProperty(key)) {
+        properties[key] = changes[key].currentValue;
+      }
+    }
+
+    if (properties) {
+      this.instance = new Graticule(properties);
+    }
+    this.instance.setMap(this.map.instance);
+  }
+
+  ngAfterContentInit(): void {
+    this.instance = new Graticule({
+      strokeStyle: this.strokeStyle,
+      showLabels: this.showLabels,
+      lonLabelPosition: this.lonLabelPosition,
+      latLabelPosition: this.latLabelPosition,
+    });
+    this.instance.setMap(this.map.instance);
+  }
+
+  ngOnDestroy(): void {
+    this.instance.setMap(null);
+  }
+}

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

@@ -0,0 +1,23 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { defaults, Interaction } from 'ol/interaction';
+import { Collection } from 'ol';
+import { MapComponent } from '../map.component';
+
+@Component({
+  selector: 'aol-interaction-default',
+  template: '',
+})
+export class DefaultInteractionComponent implements OnInit, OnDestroy {
+  instance: Collection<Interaction>;
+
+  constructor(private map: MapComponent) {}
+
+  ngOnInit() {
+    this.instance = defaults();
+    this.instance.forEach((i) => this.map.instance.addInteraction(i));
+  }
+
+  ngOnDestroy() {
+    this.instance.forEach((i) => this.map.instance.removeInteraction(i));
+  }
+}

projects/ngx-openlayers/src/lib/interactions/doubleclickzoom.component.ts

@@ -0,0 +1,27 @@
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { DoubleClickZoom } from 'ol/interaction';
+import { MapComponent } from '../map.component';
+
+@Component({
+  selector: 'aol-interaction-doubleclickzoom',
+  template: '',
+})
+export class DoubleClickZoomInteractionComponent implements OnInit, OnDestroy {
+  @Input()
+  duration: number;
+  @Input()
+  delta: number;
+
+  instance: DoubleClickZoom;
+
+  constructor(private map: MapComponent) {}
+
+  ngOnInit() {
+    this.instance = new DoubleClickZoom(this);
+    this.map.instance.addInteraction(this.instance);
+  }
+
+  ngOnDestroy() {
+    this.map.instance.removeInteraction(this.instance);
+  }
+}

projects/ngx-openlayers/src/lib/interactions/draganddrop.component.ts

@@ -0,0 +1,31 @@
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import Feature from 'ol/format/Feature';
+import { DragAndDrop } from 'ol/interaction';
+import { ProjectionLike } from 'ol/proj';
+import { MapComponent } from '../map.component';
+
+@Component({
+  selector: 'aol-interaction-draganddrop',
+  template: '',
+})
+export class DragAndDropInteractionComponent implements OnInit, OnDestroy {
+  @Input()
+  formatConstructors: ((n: Feature) => any)[];
+  @Input()
+  projection: ProjectionLike;
+  @Input()
+  target: Element;
+
+  instance: DragAndDrop;
+
+  constructor(private map: MapComponent) {}
+
+  ngOnInit() {
+    this.instance = new DragAndDrop(this);
+    this.map.instance.addInteraction(this.instance);
+  }
+
+  ngOnDestroy() {
+    this.map.instance.removeInteraction(this.instance);
+  }
+}

projects/ngx-openlayers/src/lib/interactions/dragbox.component.ts

@@ -0,0 +1,31 @@
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { Condition } from 'ol/events/condition';
+import { DragBox } from 'ol/interaction';
+import { EndCondition } from 'ol/interaction/DragBox';
+import { MapComponent } from '../map.component';
+
+@Component({
+  selector: 'aol-interaction-dragbox',
+  template: '',
+})
+export class DragBoxInteractionComponent implements OnInit, OnDestroy {
+  @Input()
+  className: string;
+  @Input()
+  condition: Condition;
+  @Input()
+  boxEndCondition: EndCondition;
+
+  instance: DragBox;
+
+  constructor(private map: MapComponent) {}
+
+  ngOnInit() {
+    this.instance = new DragBox(this);
+    this.map.instance.addInteraction(this.instance);
+  }
+
+  ngOnDestroy() {
+    this.map.instance.removeInteraction(this.instance);
+  }
+}

projects/ngx-openlayers/src/lib/interactions/dragpan.component.ts

@@ -0,0 +1,29 @@
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import Kinetic from 'ol/Kinetic';
+import { Condition } from 'ol/events/condition';
+import { DragPan } from 'ol/interaction';
+import { MapComponent } from '../map.component';
+
+@Component({
+  selector: 'aol-interaction-dragpan',
+  template: '',
+})
+export class DragPanInteractionComponent implements OnInit, OnDestroy {
+  @Input()
+  condition: Condition;
+  @Input()
+  kinetic: Kinetic;
+
+  instance: DragPan;
+
+  constructor(private map: MapComponent) {}
+
+  ngOnInit() {
+    this.instance = new DragPan(this);
+    this.map.instance.addInteraction(this.instance);
+  }
+
+  ngOnDestroy() {
+    this.map.instance.removeInteraction(this.instance);
+  }
+}

projects/ngx-openlayers/src/lib/interactions/dragrotate.component.ts

@@ -0,0 +1,28 @@
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { Condition } from 'ol/events/condition';
+import { DragRotate } from 'ol/interaction';
+import { MapComponent } from '../map.component';
+
+@Component({
+  selector: 'aol-interaction-dragrotate',
+  template: '',
+})
+export class DragRotateInteractionComponent implements OnInit, OnDestroy {
+  @Input()
+  condition: Condition;
+  @Input()
+  duration: number;
+
+  instance: DragRotate;
+
+  constructor(private map: MapComponent) {}
+
+  ngOnInit() {
+    this.instance = new DragRotate(this);
+    this.map.instance.addInteraction(this.instance);
+  }
+
+  ngOnDestroy() {
+    this.map.instance.removeInteraction(this.instance);
+  }
+}

projects/ngx-openlayers/src/lib/interactions/dragrotateandzoom.component.ts

@@ -0,0 +1,28 @@
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { Condition } from 'ol/events/condition';
+import { DragRotateAndZoom } from 'ol/interaction';
+import { MapComponent } from '../map.component';
+
+@Component({
+  selector: 'aol-interaction-dragrotateandzoom',
+  template: '',
+})
+export class DragRotateAndZoomInteractionComponent implements OnInit, OnDestroy {
+  @Input()
+  condition: Condition;
+  @Input()
+  duration: number;
+
+  instance: DragRotateAndZoom;
+
+  constructor(private map: MapComponent) {}
+
+  ngOnInit() {
+    this.instance = new DragRotateAndZoom(this);
+    this.map.instance.addInteraction(this.instance);
+  }
+
+  ngOnDestroy() {
+    this.map.instance.removeInteraction(this.instance);
+  }
+}

projects/ngx-openlayers/src/lib/interactions/dragzoom.component.ts

@@ -0,0 +1,32 @@
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { Condition } from 'ol/events/condition';
+import { DragZoom } from 'ol/interaction';
+import { MapComponent } from '../map.component';
+
+@Component({
+  selector: 'aol-interaction-dragzoom',
+  template: '',
+})
+export class DragZoomInteractionComponent implements OnInit, OnDestroy {
+  @Input()
+  className: string;
+  @Input()
+  condition: Condition;
+  @Input()
+  duration: number;
+  @Input()
+  out: boolean;
+
+  instance: DragZoom;
+
+  constructor(private map: MapComponent) {}
+
+  ngOnInit() {
+    this.instance = new DragZoom(this);
+    this.map.instance.addInteraction(this.instance);
+  }
+
+  ngOnDestroy() {
+    this.map.instance.removeInteraction(this.instance);
+  }
+}

projects/ngx-openlayers/src/lib/interactions/draw.component.ts

@@ -0,0 +1,76 @@
+import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
+import { Collection, Feature } from 'ol';
+import { Condition } from 'ol/events/condition';
+import GeometryType from 'ol/geom/GeometryType';
+import { Draw } from 'ol/interaction';
+import { DrawEvent, GeometryFunction } from 'ol/interaction/Draw';
+import { Vector } from 'ol/source';
+import { Style } from 'ol/style';
+import { StyleFunction } from 'ol/style/Style';
+import { MapComponent } from '../map.component';
+
+@Component({
+  selector: 'aol-interaction-draw',
+  template: '',
+})
+export class DrawInteractionComponent implements OnInit, OnDestroy {
+  @Input()
+  clickTolerance?: number;
+  @Input()
+  features?: Collection<Feature>;
+  @Input()
+  source?: Vector;
+  @Input()
+  snapTolerance?: number;
+  @Input()
+  type: GeometryType;
+  @Input()
+  maxPoints?: number;
+  @Input()
+  minPoints?: number;
+  @Input()
+  finishCondition?: Condition;
+  @Input()
+  style?: Style | Style[] | StyleFunction;
+  @Input()
+  geometryFunction?: GeometryFunction;
+  @Input()
+  geometryName?: string;
+  @Input()
+  condition?: Condition;
+  @Input()
+  freehandCondition?: Condition;
+  @Input()
+  freehand?: boolean;
+  @Input()
+  wrapX?: boolean;
+
+  @Output()
+  olChange = new EventEmitter<DrawEvent>();
+  @Output()
+  olChangeActive = new EventEmitter<DrawEvent>();
+  @Output()
+  drawEnd = new EventEmitter<DrawEvent>();
+  @Output()
+  drawStart = new EventEmitter<DrawEvent>();
+  @Output()
+  propertyChange = new EventEmitter<DrawEvent>();
+
+  instance: Draw;
+
+  constructor(private map: MapComponent) {}
+
+  ngOnInit() {
+    this.instance = new Draw(this);
+    this.instance.on('change', (event: DrawEvent) => this.olChange.emit(event));
+    this.instance.on('change:active', (event: DrawEvent) => this.olChangeActive.emit(event));
+    this.instance.on('drawend', (event: DrawEvent) => this.drawEnd.emit(event));
+    this.instance.on('drawstart', (event: DrawEvent) => this.drawStart.emit(event));
+    this.instance.on('propertychange', (event: DrawEvent) => this.propertyChange.emit(event));
+    this.map.instance.addInteraction(this.instance);
+  }
+
+  ngOnDestroy() {
+    this.map.instance.removeInteraction(this.instance);
+  }
+}

projects/ngx-openlayers/src/lib/interactions/modify.component.ts

@@ -0,0 +1,59 @@
+import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
+import { Collection, Feature } from 'ol';
+import { Condition } from 'ol/events/condition';
+import { Modify } from 'ol/interaction';
+import { ModifyEvent } from 'ol/interaction/Modify';
+import { Vector } from 'ol/source';
+import { Style } from 'ol/style';
+import { StyleFunction } from 'ol/style/Style';
+import { MapComponent } from '../map.component';
+
+@Component({
+  selector: 'aol-interaction-modify',
+  template: '',
+})
+export class ModifyInteractionComponent implements OnInit, OnDestroy {
+  @Input()
+  condition?: Condition;
+  @Input()
+  deleteCondition?: Condition;
+  @Input()
+  pixelTolerance?: number;
+  @Input()
+  style?: Style | Style[] | StyleFunction;
+  @Input()
+  features: Collection<Feature>;
+  @Input()
+  wrapX?: boolean;
+  @Input()
+  source?: Vector;
+
+  @Output()
+  modifyEnd = new EventEmitter<ModifyEvent>();
+  @Output()
+  modifyStart = new EventEmitter<ModifyEvent>();
+  @Output()
+  olChange = new EventEmitter<ModifyEvent>();
+  @Output()
+  olChangeActive = new EventEmitter<ModifyEvent>();
+  @Output()
+  propertyChange = new EventEmitter<ModifyEvent>();
+
+  instance: Modify;
+
+  constructor(private map: MapComponent) {}
+
+  ngOnInit() {
+    this.instance = new Modify(this);
+    this.instance.on('change', (event: ModifyEvent) => this.olChange.emit(event));
+    this.instance.on('change:active', (event: ModifyEvent) => this.olChangeActive.emit(event));
+    this.instance.on('propertychange', (event: ModifyEvent) => this.propertyChange.emit(event));
+    this.instance.on('modifyend', (event: ModifyEvent) => this.modifyEnd.emit(event));
+    this.instance.on('modifystart', (event: ModifyEvent) => this.modifyStart.emit(event));
+    this.map.instance.addInteraction(this.instance);
+  }
+
+  ngOnDestroy() {
+    this.map.instance.removeInteraction(this.instance);
+  }
+}

projects/ngx-openlayers/src/lib/interactions/mousewheelzoom.component.ts

@@ -0,0 +1,29 @@
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { MouseWheelZoom } from 'ol/interaction';
+import { MapComponent } from '../map.component';
+
+@Component({
+  selector: 'aol-interaction-mousewheelzoom',
+  template: '',
+})
+export class MouseWheelZoomInteractionComponent implements OnInit, OnDestroy {
+  @Input()
+  duration: number;
+  @Input()
+  timeout: number;
+  @Input()
+  useAnchor: boolean;
+
+  instance: MouseWheelZoom;
+
+  constructor(private map: MapComponent) {}
+
+  ngOnInit() {
+    this.instance = new MouseWheelZoom(this);
+    this.map.instance.addInteraction(this.instance);
+  }
+
+  ngOnDestroy() {
+    this.map.instance.removeInteraction(this.instance);
+  }
+}

projects/ngx-openlayers/src/lib/interactions/pinchzoom.component.ts

@@ -0,0 +1,27 @@
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { PinchZoom } from 'ol/interaction';
+import { MapComponent } from '../map.component';
+
+@Component({
+  selector: 'aol-interaction-pinchzoom',
+  template: '',
+})
+export class PinchZoomInteractionComponent implements OnInit, OnDestroy {
+  @Input()
+  duration: number;
+  @Input()
+  constrainResolution: boolean;
+
+  instance: PinchZoom;
+
+  constructor(private map: MapComponent) {}
+
+  ngOnInit() {
+    this.instance = new PinchZoom(this);
+    this.map.instance.addInteraction(this.instance);
+  }
+
+  ngOnDestroy() {
+    this.map.instance.removeInteraction(this.instance);
+  }
+}

projects/ngx-openlayers/src/lib/interactions/select.component.ts

@@ -0,0 +1,61 @@
+import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
+import { Collection, Feature } from 'ol';
+import { Condition } from 'ol/events/condition';
+import { Select } from 'ol/interaction';
+import { FilterFunction, SelectEvent } from 'ol/interaction/Select';
+import { Layer } from 'ol/layer';
+import { Style } from 'ol/style';
+import { StyleFunction } from 'ol/style/Style';
+import { MapComponent } from '../map.component';
+
+@Component({
+  selector: 'aol-interaction-select',
+  template: '',
+})
+export class SelectInteractionComponent implements OnInit, OnDestroy {
+  @Input()
+  addCondition?: Condition;
+  @Input()
+  condition?: Condition;
+  @Input()
+  layers?: Layer[] | ((layer: Layer) => boolean);
+  @Input()
+  style?: Style | Style[] | StyleFunction;
+  @Input()
+  removeCondition?: Condition;
+  @Input()
+  toggleCondition?: Condition;
+  @Input()
+  multi?: boolean;
+  @Input()
+  features?: Collection<Feature>;
+  @Input()
+  filter?: FilterFunction;
+  @Input()
+  wrapX?: boolean;
+
+  @Output()
+  olChange = new EventEmitter<SelectEvent>();
+  @Output()
+  olSelect = new EventEmitter<SelectEvent>();
+  @Output()
+  propertyChange = new EventEmitter<SelectEvent>();
+
+  instance: Select;
+
+  constructor(private map: MapComponent) {}
+
+  ngOnInit() {
+    this.instance = new Select(this);
+
+    this.instance.on('change', (event: SelectEvent) => this.olChange.emit(event));
+    this.instance.on('select', (event: SelectEvent) => this.olSelect.emit(event));
+    this.instance.on('propertychange', (event: SelectEvent) => this.propertyChange.emit(event));
+
+    this.map.instance.addInteraction(this.instance);
+  }
+
+  ngOnDestroy() {
+    this.map.instance.removeInteraction(this.instance);
+  }
+}

projects/ngx-openlayers/src/lib/interactions/translate.component.ts

@@ -0,0 +1,56 @@
+import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
+import { Collection, Feature } from 'ol';
+import { Translate } from 'ol/interaction';
+import { TranslateEvent } from 'ol/interaction/Translate';
+import { Layer } from 'ol/layer';
+import { MapComponent } from '../map.component';
+
+@Component({
+  selector: 'aol-interaction-translate',
+  template: '',
+})
+export class TranslateInteractionComponent implements OnInit, OnDestroy {
+  @Input()
+  features?: Collection<Feature>;
+  @Input()
+  layers?: Layer[] | ((layer: Layer) => boolean);
+  @Input()
+  hitTolerance?: number;
+
+  @Output()
+  olChange: EventEmitter<TranslateEvent>;
+  @Output()
+  propertyChange: EventEmitter<TranslateEvent>;
+  @Output()
+  translateEnd: EventEmitter<TranslateEvent>;
+  @Output()
+  translateStart: EventEmitter<TranslateEvent>;
+  @Output()
+  translating: EventEmitter<TranslateEvent>;
+
+  instance: Translate;
+
+  constructor(private map: MapComponent) {
+    this.olChange = new EventEmitter<TranslateEvent>();
+    this.propertyChange = new EventEmitter<TranslateEvent>();
+    this.translateEnd = new EventEmitter<TranslateEvent>();
+    this.translateStart = new EventEmitter<TranslateEvent>();
+    this.translating = new EventEmitter<TranslateEvent>();
+  }
+
+  ngOnInit() {
+    this.instance = new Translate(this);
+
+    this.instance.on('change', (event: TranslateEvent) => this.olChange.emit(event));
+    this.instance.on('propertychange', (event: TranslateEvent) => this.propertyChange.emit(event));
+    this.instance.on('translateend', (event: TranslateEvent) => this.translateEnd.emit(event));
+    this.instance.on('translatestart', (event: TranslateEvent) => this.translateStart.emit(event));
+    this.instance.on('translating', (event: TranslateEvent) => this.translating.emit(event));
+
+    this.map.instance.addInteraction(this.instance);
+  }
+
+  ngOnDestroy() {
+    this.map.instance.removeInteraction(this.instance);
+  }
+}

projects/ngx-openlayers/src/lib/layers/layer.component.ts

@@ -0,0 +1,67 @@
+import { Directive, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
+import { Event } from 'ol/events';
+import { Extent } from 'ol/extent';
+import { MapComponent } from '../map.component';
+import { LayerGroupComponent } from './layergroup.component';
+
+@Directive()
+export abstract class LayerComponent implements OnInit, OnChanges, OnDestroy {
+  @Input()
+  opacity: number;
+  @Input()
+  visible: boolean;
+  @Input()
+  extent: Extent;
+  @Input()
+  zIndex: number;
+  @Input()
+  minResolution: number;
+  @Input()
+  maxResolution: number;
+
+  @Input()
+  prerender: (evt: Event) => void;
+  @Input()
+  postrender: (evt: Event) => void;
+
+  instance: any;
+  componentType = 'layer';
+
+  constructor(protected host: MapComponent | LayerGroupComponent) {}
+
+  ngOnInit() {
+    if (this.prerender !== null && this.prerender !== undefined) {
+      this.instance.on('prerender', this.prerender);
+    }
+    if (this.postrender !== null && this.postrender !== undefined) {
+      this.instance.on('postrender', this.postrender);
+    }
+    this.host.instance.getLayers().push(this.instance);
+  }
+
+  ngOnDestroy() {
+    this.host.instance.getLayers().remove(this.instance);
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    const properties: { [index: string]: any } = {};
+    if (!this.instance) {
+      return;
+    }
+    for (const key in changes) {
+      if (changes.hasOwnProperty(key)) {
+        properties[key] = changes[key].currentValue;
+        if (key === 'prerender') {
+          this.instance.un('prerender', changes[key].previousValue);
+          this.instance.on('prerender', changes[key].currentValue);
+        }
+        if (key === 'postrender') {
+          this.instance.un('postrender', changes[key].previousValue);
+          this.instance.on('postrender', changes[key].currentValue);
+        }
+      }
+    }
+    // console.log('changes detected in aol-layer, setting new properties: ', properties);
+    this.instance.setProperties(properties, false);
+  }
+}

projects/ngx-openlayers/src/lib/layers/layergroup.component.ts

@@ -0,0 +1,27 @@
+import { Component, OnDestroy, OnInit, SkipSelf, Optional } from '@angular/core';
+import { Group } from 'ol/layer';
+import { LayerComponent } from './layer.component';
+import { MapComponent } from '../map.component';
+
+@Component({
+  selector: 'aol-layer-group',
+  template: ` <ng-content></ng-content> `,
+})
+export class LayerGroupComponent extends LayerComponent implements OnInit, OnDestroy {
+  public instance: Group;
+
+  constructor(
+    map: MapComponent,
+    @SkipSelf()
+    @Optional()
+    group?: LayerGroupComponent
+  ) {
+    super(group || map);
+  }
+
+  ngOnInit() {
+    // console.log(`creating ol.layer.Group instance with:`, this);
+    this.instance = new Group(this);
+    super.ngOnInit();
+  }
+}

projects/ngx-openlayers/src/lib/layers/layerimage.component.ts

@@ -0,0 +1,40 @@
+import { Component, Input, OnChanges, OnInit, Optional, SimpleChanges } from '@angular/core';
+import { Extent } from 'ol/extent';
+import { Image } from 'ol/layer';
+import { MapComponent } from '../map.component';
+import { LayerComponent } from './layer.component';
+import { LayerGroupComponent } from './layergroup.component';
+
+@Component({
+  selector: 'aol-layer-image',
+  template: ` <ng-content></ng-content> `,
+})
+export class LayerImageComponent extends LayerComponent implements OnInit, OnChanges {
+  @Input()
+  opacity: number;
+  @Input()
+  visible: boolean;
+  @Input()
+  extent: Extent;
+  @Input()
+  minResolution: number;
+  @Input()
+  maxResolution: number;
+  @Input()
+  zIndex: number;
+
+  source: Image;
+
+  constructor(map: MapComponent, @Optional() group?: LayerGroupComponent) {
+    super(group || map);
+  }
+
+  ngOnInit() {
+    this.instance = new Image(this);
+    super.ngOnInit();
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    super.ngOnChanges(changes);
+  }
+}

projects/ngx-openlayers/src/lib/layers/layertile.component.ts

@@ -0,0 +1,32 @@
+import { Component, Input, OnChanges, OnDestroy, OnInit, Optional, SimpleChanges } from '@angular/core';
+import { Tile } from 'ol/layer';
+import { MapComponent } from '../map.component';
+import { LayerComponent } from './layer.component';
+import { LayerGroupComponent } from './layergroup.component';
+
+@Component({
+  selector: 'aol-layer-tile',
+  template: ` <ng-content></ng-content> `,
+})
+export class LayerTileComponent extends LayerComponent implements OnInit, OnDestroy, OnChanges {
+  @Input()
+  preload: number;
+  @Input()
+  useInterimTilesOnError: boolean;
+
+  source: Tile;
+
+  constructor(map: MapComponent, @Optional() group?: LayerGroupComponent) {
+    super(group || map);
+  }
+
+  ngOnInit() {
+    // console.log('creating ol.layer.Tile instance with:', this);
+    this.instance = new Tile(this);
+    super.ngOnInit();
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    super.ngOnChanges(changes);
+  }
+}

projects/ngx-openlayers/src/lib/layers/layervector.component.ts

@@ -0,0 +1,41 @@
+import { Component, Input, OnChanges, OnDestroy, OnInit, Optional, SimpleChanges } from '@angular/core';
+import { Vector } from 'ol/layer';
+import { Style } from 'ol/style';
+import { StyleFunction } from 'ol/style/Style';
+import { MapComponent } from '../map.component';
+import { LayerComponent } from './layer.component';
+import { LayerGroupComponent } from './layergroup.component';
+
+@Component({
+  selector: 'aol-layer-vector',
+  template: ` <ng-content></ng-content> `,
+})
+export class LayerVectorComponent extends LayerComponent implements OnInit, OnDestroy, OnChanges {
+  @Input()
+  renderBuffer: number;
+
+  @Input()
+  style: Style | Style[] | StyleFunction;
+
+  @Input()
+  updateWhileAnimating: boolean;
+
+  @Input()
+  updateWhileInteracting: boolean;
+
+  source: Vector;
+
+  constructor(map: MapComponent, @Optional() group?: LayerGroupComponent) {
+    super(group || map);
+  }
+
+  ngOnInit() {
+    // console.log('creating ol.layer.Vector instance with:', this);
+    this.instance = new Vector(this);
+    super.ngOnInit();
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    super.ngOnChanges(changes);
+  }
+}

projects/ngx-openlayers/src/lib/layers/layervectortile.component.ts

@@ -0,0 +1,45 @@
+import { Component, OnInit, Input, Optional, SimpleChanges, OnChanges } from '@angular/core';
+import { VectorTile } from 'ol/layer';
+import { RenderType } from 'ol/layer/VectorTile';
+import { Feature } from 'ol';
+import { Style } from 'ol/style';
+import { MapComponent } from '../map.component';
+import { LayerComponent } from './layer.component';
+import { LayerGroupComponent } from './layergroup.component';
+import { StyleFunction } from 'ol/style/Style';
+
+@Component({
+  selector: 'aol-layer-vectortile',
+  template: ` <ng-content></ng-content> `,
+})
+export class LayerVectorTileComponent extends LayerComponent implements OnInit, OnChanges {
+  @Input()
+  renderBuffer: number;
+  @Input()
+  renderMode: RenderType | string;
+  /* not marked as optional in the typings */
+  @Input()
+  renderOrder: (feature1: Feature, feature2: Feature) => number;
+  @Input()
+  style: Style | Style[] | StyleFunction;
+  @Input()
+  updateWhileAnimating: boolean;
+  @Input()
+  updateWhileInteracting: boolean;
+  @Input()
+  visible: boolean;
+
+  constructor(map: MapComponent, @Optional() group?: LayerGroupComponent) {
+    super(group || map);
+  }
+
+  ngOnInit() {
+    // console.log('creating ol.layer.VectorTile instance with:', this);
+    this.instance = new VectorTile(this);
+    super.ngOnInit();
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    super.ngOnChanges(changes);
+  }
+}

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

@@ -0,0 +1,122 @@
+import {
+  AfterViewInit,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  OnChanges,
+  OnInit,
+  Output,
+  SimpleChanges,
+} from '@angular/core';
+import Map from 'ol/Map';
+import MapBrowserEvent from 'ol/MapBrowserEvent';
+import MapEvent from 'ol/MapEvent';
+import ObjectEvent from 'ol/Object';
+import { Control } from 'ol/control';
+import { Interaction } from 'ol/interaction';
+import RenderEvent from 'ol/render/Event';
+
+@Component({
+  selector: 'aol-map',
+  template: `
+    <div [style.width]="width" [style.height]="height"></div>
+    <ng-content></ng-content>
+  `,
+})
+export class MapComponent implements OnInit, AfterViewInit, OnChanges {
+  @Input()
+  width = '100%';
+  @Input()
+  height = '100%';
+  @Input()
+  pixelRatio: number;
+  @Input()
+  keyboardEventTarget: Element | string;
+  @Input()
+  loadTilesWhileAnimating: boolean;
+  @Input()
+  loadTilesWhileInteracting: boolean;
+  @Input()
+  logo: string | boolean;
+  @Input()
+  renderer: 'canvas' | 'webgl';
+
+  @Output()
+  olClick: EventEmitter<MapBrowserEvent>;
+  @Output()
+  dblClick: EventEmitter<MapBrowserEvent>;
+  @Output()
+  moveStart: EventEmitter<MapEvent>;
+  @Output()
+  moveEnd: EventEmitter<MapEvent>;
+  @Output()
+  pointerDrag: EventEmitter<MapBrowserEvent>;
+  @Output()
+  pointerMove: EventEmitter<MapBrowserEvent>;
+  @Output()
+  onpostrender: EventEmitter<RenderEvent>;
+  @Output()
+  postRender: EventEmitter<MapEvent>;
+  @Output()
+  onprerender: EventEmitter<RenderEvent>;
+  @Output()
+  propertyChange: EventEmitter<ObjectEvent>;
+  @Output()
+  singleClick: EventEmitter<MapBrowserEvent>;
+
+  instance: Map;
+  componentType = 'map';
+  // we pass empty arrays to not get default controls/interactions because we have our own directives
+  controls: Control[] = [];
+  interactions: Interaction[] = [];
+
+  constructor(private host: ElementRef) {
+    this.olClick = new EventEmitter<MapBrowserEvent>();
+    this.dblClick = new EventEmitter<MapBrowserEvent>();
+    this.moveStart = new EventEmitter<MapEvent>();
+    this.moveEnd = new EventEmitter<MapEvent>();
+    this.pointerDrag = new EventEmitter<MapBrowserEvent>();
+    this.pointerMove = new EventEmitter<MapBrowserEvent>();
+    this.onpostrender = new EventEmitter<RenderEvent>();
+    this.postRender = new EventEmitter<MapEvent>();
+    this.onprerender = new EventEmitter<RenderEvent>();
+    this.propertyChange = new EventEmitter<ObjectEvent>();
+    this.singleClick = new EventEmitter<MapBrowserEvent>();
+  }
+
+  ngOnInit() {
+    // console.log('creating ol.Map instance with:', this);
+    this.instance = new Map(this);
+    this.instance.setTarget(this.host.nativeElement.firstElementChild);
+    this.instance.on('click', (event: MapBrowserEvent) => this.olClick.emit(event));
+    this.instance.on('dblclick', (event: MapBrowserEvent) => this.dblClick.emit(event));
+    this.instance.on('movestart', (event: MapEvent) => this.moveStart.emit(event));
+    this.instance.on('moveend', (event: MapEvent) => this.moveEnd.emit(event));
+    this.instance.on('pointerdrag', (event: MapBrowserEvent) => this.pointerDrag.emit(event));
+    this.instance.on('pointermove', (event: MapBrowserEvent) => this.pointerMove.emit(event));
+    this.instance.on('postrender', (event: RenderEvent) => this.onpostrender.emit(event));
+    this.instance.on('postrender', (event: MapEvent) => this.postRender.emit(event));
+    this.instance.on('prerender', (event: RenderEvent) => this.onprerender.emit(event));
+    this.instance.on('propertychange', (event: ObjectEvent) => this.propertyChange.emit(event));
+    this.instance.on('singleclick', (event: MapBrowserEvent) => this.singleClick.emit(event));
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    const properties: { [index: string]: any } = {};
+    if (!this.instance) {
+      return;
+    }
+    for (const key in changes) {
+      if (changes.hasOwnProperty(key)) {
+        properties[key] = changes[key].currentValue;
+      }
+    }
+    // console.log('changes detected in aol-map, setting new properties: ', properties);
+    this.instance.setProperties(properties, false);
+  }
+
+  ngAfterViewInit() {
+    this.instance.updateSize();
+  }
+}

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

@@ -0,0 +1,51 @@
+import { Component, ContentChild, Input, OnDestroy, OnInit } from '@angular/core';
+import { Overlay, PanOptions } from 'ol';
+import OverlayPositioning from 'ol/OverlayPositioning';
+import { ContentComponent } from './content.component';
+import { MapComponent } from './map.component';
+
+@Component({
+  selector: 'aol-overlay',
+  template: '<ng-content></ng-content>',
+})
+export class OverlayComponent implements OnInit, OnDestroy {
+  @ContentChild(ContentComponent, { static: true })
+  content: ContentComponent;
+
+  @Input()
+  id: number | string;
+  @Input()
+  offset: number[];
+  @Input()
+  positioning: OverlayPositioning | string;
+  @Input()
+  stopEvent: boolean;
+  @Input()
+  insertFirst: boolean;
+  @Input()
+  autoPan: boolean;
+  @Input()
+  autoPanAnimation: PanOptions;
+  @Input()
+  autoPanMargin: number;
+
+  componentType = 'overlay';
+  instance: Overlay;
+  element: Element;
+
+  constructor(private map: MapComponent) {}
+
+  ngOnInit() {
+    if (this.content) {
+      this.element = this.content.elementRef.nativeElement;
+      this.instance = new Overlay(this);
+      this.map.instance.addOverlay(this.instance);
+    }
+  }
+
+  ngOnDestroy() {
+    if (this.instance) {
+      this.map.instance.removeOverlay(this.instance);
+    }
+  }
+}

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

@@ -0,0 +1,42 @@
+import { Component, Host, Input, OnInit, forwardRef } from '@angular/core';
+import { LoadFunction } from 'ol/Tile';
+import { BingMaps } from 'ol/source';
+import { LayerTileComponent } from '../layers/layertile.component';
+import { SourceComponent } from './source.component';
+
+@Component({
+  selector: 'aol-source-bingmaps',
+  template: ` <div class="aol-source-bingmaps"></div> `,
+  providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceBingmapsComponent) }],
+})
+export class SourceBingmapsComponent extends SourceComponent implements OnInit {
+  @Input()
+  cacheSize: number;
+  @Input()
+  hidpi: boolean;
+  @Input()
+  culture: string;
+  @Input()
+  key: string;
+  @Input()
+  imagerySet: 'Road' | 'Aerial' | 'AerialWithLabels' | 'collinsBart' | 'ordnanceSurvey' = 'Aerial';
+  @Input()
+  maxZoom: number;
+  @Input()
+  reprojectionErrorThreshold: number;
+  @Input()
+  tileLoadFunction: LoadFunction;
+  @Input()
+  wrapX: boolean;
+
+  instance: BingMaps;
+
+  constructor(@Host() layer: LayerTileComponent) {
+    super(layer);
+  }
+
+  ngOnInit() {
+    this.instance = new BingMaps(this);
+    this.host.instance.setSource(this.instance);
+  }
+}

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

@@ -0,0 +1,53 @@
+import {
+  AfterContentInit,
+  Component,
+  ContentChild,
+  forwardRef,
+  Host,
+  Input,
+  OnChanges,
+  SimpleChanges,
+} from '@angular/core';
+import { Feature } from 'ol';
+import { Point } from 'ol/geom';
+import { Cluster, Vector } from 'ol/source';
+
+import { LayerVectorComponent } from '../layers/layervector.component';
+import { SourceComponent } from './source.component';
+import { SourceVectorComponent } from './vector.component';
+
+@Component({
+  selector: 'aol-source-cluster',
+  template: ` <ng-content></ng-content> `,
+  providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceClusterComponent) }],
+})
+export class SourceClusterComponent extends SourceComponent implements AfterContentInit, OnChanges {
+  @Input()
+  distance: number;
+  @Input()
+  geometryFunction?: (feature: Feature) => Point;
+  @Input()
+  wrapX?: boolean;
+
+  @ContentChild(SourceVectorComponent)
+  sourceVectorComponent: SourceVectorComponent;
+  source: Vector;
+  instance: Cluster;
+
+  constructor(@Host() layer: LayerVectorComponent) {
+    super(layer);
+  }
+
+  ngAfterContentInit() {
+    this.source = this.sourceVectorComponent.instance;
+
+    this.instance = new Cluster(this);
+    this.host.instance.setSource(this.instance);
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (this.instance && changes.hasOwnProperty('distance')) {
+      this.instance.setDistance(this.distance);
+    }
+  }
+}

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

@@ -0,0 +1,36 @@
+import { Component, Host, Input, OnInit, forwardRef } from '@angular/core';
+import { Feature } from 'ol';
+import { GeoJSON } from 'ol/format';
+import { ProjectionLike } from 'ol/proj';
+import { Vector } from 'ol/source';
+import { LayerVectorComponent } from '../layers/layervector.component';
+import { SourceComponent } from './source.component';
+
+@Component({
+  selector: 'aol-source-geojson',
+  template: ` <ng-content></ng-content> `,
+  providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceGeoJSONComponent) }],
+})
+export class SourceGeoJSONComponent extends SourceComponent implements OnInit {
+  @Input()
+  defaultDataProjection: ProjectionLike;
+  @Input()
+  featureProjection: ProjectionLike;
+  @Input()
+  geometryName: string;
+  @Input()
+  url: string;
+
+  instance: Vector;
+  format: Feature;
+
+  constructor(@Host() layer: LayerVectorComponent) {
+    super(layer);
+  }
+
+  ngOnInit() {
+    this.format = new GeoJSON(this);
+    this.instance = new Vector(this);
+    this.host.instance.setSource(this.instance);
+  }
+}

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

@@ -0,0 +1,62 @@
+import {
+  Component,
+  EventEmitter,
+  forwardRef,
+  Host,
+  Input,
+  OnChanges,
+  OnInit,
+  Output,
+  SimpleChanges,
+} from '@angular/core';
+import { LoadFunction } from 'ol/Image';
+import { ProjectionLike } from 'ol/proj';
+import { ImageArcGISRest } from 'ol/source';
+import { ImageSourceEvent } from 'ol/source/Image';
+import { AttributionLike } from 'ol/source/Source';
+import { LayerImageComponent } from '../layers/layerimage.component';
+import { SourceComponent } from './source.component';
+
+@Component({
+  selector: 'aol-source-imagearcgisrest',
+  template: ` <ng-content></ng-content> `,
+  providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceImageArcGISRestComponent) }],
+})
+export class SourceImageArcGISRestComponent extends SourceComponent implements OnInit, OnChanges {
+  @Input() projection: ProjectionLike | string;
+  @Input() url: string;
+  @Input() attributions: AttributionLike[];
+  @Input() crossOrigin?: string;
+  @Input() imageLoadFunction?: LoadFunction;
+  @Input() params?: { [k: string]: any };
+  @Input() ratio = 1.5;
+  @Input() resolutions?: number[];
+  @Input() wrapX?: boolean;
+
+  @Output()
+  imageLoadStart = new EventEmitter<ImageSourceEvent>();
+  @Output()
+  imageLoadEnd = new EventEmitter<ImageSourceEvent>();
+  @Output()
+  imageLoadError = new EventEmitter<ImageSourceEvent>();
+
+  instance: ImageArcGISRest;
+
+  constructor(@Host() layer: LayerImageComponent) {
+    super(layer);
+  }
+
+  ngOnInit() {
+    this.instance = new ImageArcGISRest(this);
+    this.host.instance.setSource(this.instance);
+    this.instance.on('imageloadstart', (event: ImageSourceEvent) => this.imageLoadStart.emit(event));
+    this.instance.on('imageloadend', (event: ImageSourceEvent) => this.imageLoadEnd.emit(event));
+    this.instance.on('imageloaderror', (event: ImageSourceEvent) => this.imageLoadError.emit(event));
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (this.instance && changes.hasOwnProperty('params')) {
+      this.instance.updateParams(this.params);
+    }
+  }
+}

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

@@ -0,0 +1,88 @@
+import {
+  Component,
+  EventEmitter,
+  Host,
+  Input,
+  OnChanges,
+  OnInit,
+  Output,
+  SimpleChanges,
+  forwardRef,
+} from '@angular/core';
+import { LoadFunction } from 'ol/Image';
+import { Extent } from 'ol/extent';
+import { ProjectionLike } from 'ol/proj';
+import { Size } from 'ol/size';
+import { ImageStatic } from 'ol/source';
+import { ImageSourceEvent } from 'ol/source/Image';
+import { AttributionLike } from 'ol/source/Source';
+import { LayerImageComponent } from '../layers/layerimage.component';
+import { SourceComponent } from './source.component';
+
+@Component({
+  selector: 'aol-source-imagestatic',
+  template: ` <ng-content></ng-content> `,
+  providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceImageStaticComponent) }],
+})
+export class SourceImageStaticComponent extends SourceComponent implements OnInit, OnChanges {
+  @Input()
+  projection: ProjectionLike | string;
+  @Input()
+  imageExtent: Extent;
+  @Input()
+  url: string;
+  @Input()
+  attributions: AttributionLike;
+  @Input()
+  crossOrigin?: string;
+  @Input()
+  imageLoadFunction?: LoadFunction;
+  @Input()
+  imageSize?: Size;
+
+  @Output()
+  imageLoadStart = new EventEmitter<ImageSourceEvent>();
+  @Output()
+  imageLoadEnd = new EventEmitter<ImageSourceEvent>();
+  @Output()
+  imageLoadError = new EventEmitter<ImageSourceEvent>();
+
+  instance: ImageStatic;
+
+  constructor(@Host() layer: LayerImageComponent) {
+    super(layer);
+  }
+
+  setLayerSource(): void {
+    this.instance = new ImageStatic(this);
+    this.host.instance.setSource(this.instance);
+    this.instance.on('imageloadstart', (event: ImageSourceEvent) => this.imageLoadStart.emit(event));
+    this.instance.on('imageloadend', (event: ImageSourceEvent) => this.imageLoadEnd.emit(event));
+    this.instance.on('imageloaderror', (event: ImageSourceEvent) => this.imageLoadError.emit(event));
+  }
+
+  ngOnInit() {
+    this.setLayerSource();
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    const properties: { [index: string]: any } = {};
+    if (!this.instance) {
+      return;
+    }
+    for (const key in changes) {
+      if (changes.hasOwnProperty(key)) {
+        switch (key) {
+          case 'url':
+            this.url = changes[key].currentValue;
+            this.setLayerSource();
+            break;
+          default:
+            break;
+        }
+        properties[key] = changes[key].currentValue;
+      }
+    }
+    this.instance.setProperties(properties, false);
+  }
+}

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

@@ -0,0 +1,73 @@
+import {
+  Component,
+  Host,
+  Input,
+  OnChanges,
+  OnInit,
+  forwardRef,
+  SimpleChanges,
+  Output,
+  EventEmitter,
+} from '@angular/core';
+import { ImageWMS } from 'ol/source';
+import { LayerImageComponent } from '../layers/layerimage.component';
+import { SourceComponent } from './source.component';
+import { ProjectionLike } from 'ol/proj';
+import { AttributionLike } from 'ol/source/Source';
+import { LoadFunction } from 'ol/Image';
+import { ImageSourceEvent } from 'ol/source/Image';
+
+@Component({
+  selector: 'aol-source-imagewms',
+  template: ` <ng-content></ng-content> `,
+  providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceImageWMSComponent) }],
+})
+export class SourceImageWMSComponent extends SourceComponent implements OnChanges, OnInit {
+  @Input()
+  attributions: AttributionLike;
+  @Input()
+  crossOrigin: string;
+  @Input()
+  hidpi: boolean;
+  @Input()
+  serverType: string;
+  @Input()
+  imageLoadFunction?: LoadFunction;
+  @Input()
+  params: { [key: string]: any };
+  @Input()
+  projection: ProjectionLike | string;
+  @Input()
+  ratio: number;
+  @Input()
+  resolutions: Array<number>;
+  @Input()
+  url: string;
+
+  @Output()
+  imageLoadStart = new EventEmitter<ImageSourceEvent>();
+  @Output()
+  imageLoadEnd = new EventEmitter<ImageSourceEvent>();
+  @Output()
+  imageLoadError = new EventEmitter<ImageSourceEvent>();
+
+  instance: ImageWMS;
+
+  constructor(@Host() layer: LayerImageComponent) {
+    super(layer);
+  }
+
+  ngOnInit() {
+    this.instance = new ImageWMS(this);
+    this.host.instance.setSource(this.instance);
+    this.instance.on('imageloadstart', (event: ImageSourceEvent) => this.imageLoadStart.emit(event));
+    this.instance.on('imageloadend', (event: ImageSourceEvent) => this.imageLoadEnd.emit(event));
+    this.instance.on('imageloaderror', (event: ImageSourceEvent) => this.imageLoadError.emit(event));
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (this.instance && changes.hasOwnProperty('params')) {
+      this.instance.updateParams(this.params);
+    }
+  }
+}

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

@@ -0,0 +1,64 @@
+import { AfterContentInit, Component, EventEmitter, forwardRef, Host, Input, Optional, Output } from '@angular/core';
+import { OSM } from 'ol/source';
+import { AttributionLike } from 'ol/source/Source';
+import { TileSourceEvent } from 'ol/source/Tile';
+import { LoadFunction } from 'ol/Tile';
+import { LayerTileComponent } from '../layers/layertile.component';
+import { SourceComponent } from './source.component';
+import { SourceXYZComponent } from './xyz.component';
+
+@Component({
+  selector: 'aol-source-osm',
+  template: ` <div class="aol-source-osm"></div> `,
+  providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceOsmComponent) }],
+})
+export class SourceOsmComponent extends SourceXYZComponent implements AfterContentInit {
+  @Input()
+  attributions: AttributionLike;
+  @Input()
+  cacheSize: number;
+  @Input()
+  crossOrigin: string;
+  @Input()
+  maxZoom: number;
+  @Input()
+  opaque: boolean;
+  @Input()
+  reprojectionErrorThreshold: number;
+  @Input()
+  tileLoadFunction: LoadFunction;
+  @Input()
+  url: string;
+  @Input()
+  wrapX: boolean;
+
+  @Output()
+  tileLoadStart: EventEmitter<TileSourceEvent> = new EventEmitter<TileSourceEvent>();
+  @Output()
+  tileLoadEnd: EventEmitter<TileSourceEvent> = new EventEmitter<TileSourceEvent>();
+  @Output()
+  tileLoadError: EventEmitter<TileSourceEvent> = new EventEmitter<TileSourceEvent>();
+
+  instance: OSM;
+
+  constructor(
+    @Optional()
+    @Host()
+    protected layer?: LayerTileComponent
+  ) {
+    super(layer);
+  }
+
+  ngAfterContentInit() {
+    if (this.tileGridXYZ) {
+      this.tileGrid = this.tileGridXYZ.instance;
+    }
+
+    this.instance = new OSM(this);
+
+    this.instance.on('tileloadstart', (event: TileSourceEvent) => this.tileLoadStart.emit(event));
+    this.instance.on('tileloadend', (event: TileSourceEvent) => this.tileLoadEnd.emit(event));
+    this.instance.on('tileloaderror', (event: TileSourceEvent) => this.tileLoadError.emit(event));
+    this._register(this.instance);
+  }
+}

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

@@ -0,0 +1,68 @@
+import {
+  AfterContentInit,
+  Component,
+  ContentChild,
+  EventEmitter,
+  forwardRef,
+  Host,
+  Input,
+  Output,
+} from '@angular/core';
+import { Raster, Source } from 'ol/source';
+import { Operation, RasterOperationType, RasterSourceEvent } from 'ol/source/Raster';
+
+import { LayerImageComponent } from '../layers/layerimage.component';
+import { SourceComponent } from './source.component';
+
+@Component({
+  selector: 'aol-source-raster',
+  template: ` <ng-content></ng-content> `,
+  providers: [
+    {
+      provide: SourceComponent,
+      useExisting: forwardRef(() => SourceRasterComponent),
+    },
+  ],
+})
+export class SourceRasterComponent extends SourceComponent implements AfterContentInit {
+  @Input()
+  operation?: Operation;
+  @Input()
+  threads?: number;
+  @Input()
+  lib?: any;
+  @Input()
+  operationType?: RasterOperationType;
+
+  @Output()
+  beforeOperations: EventEmitter<RasterSourceEvent> = new EventEmitter<RasterSourceEvent>();
+  @Output()
+  afterOperations: EventEmitter<RasterSourceEvent> = new EventEmitter<RasterSourceEvent>();
+
+  instance: Raster;
+  sources: Source[] = [];
+
+  constructor(@Host() layer: LayerImageComponent) {
+    super(layer);
+  }
+
+  @ContentChild(SourceComponent)
+  set source(sourceComponent: SourceComponent) {
+    this.sources = [sourceComponent.instance];
+    if (this.instance) {
+      // Openlayer doesn't handle sources update. Just recreate Raster instance.
+      this.init();
+    }
+  }
+
+  ngAfterContentInit() {
+    this.init();
+  }
+
+  init() {
+    this.instance = new Raster(this);
+    this.instance.on('beforeoperations', (event: RasterSourceEvent) => this.beforeOperations.emit(event));
+    this.instance.on('afteroperations', (event: RasterSourceEvent) => this.afterOperations.emit(event));
+    this._register(this.instance);
+  }
+}

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

@@ -0,0 +1,27 @@
+import { Directive, Input, OnDestroy } from '@angular/core';
+import { Source } from 'ol';
+
+import { LayerComponent } from '../layers/layer.component';
+
+@Directive()
+export abstract class SourceComponent implements OnDestroy {
+  @Input()
+  attributions: any;
+
+  public instance: Source;
+  public componentType = 'source';
+
+  constructor(protected host: LayerComponent) {}
+
+  ngOnDestroy() {
+    if (this.host && this.host.instance) {
+      this.host.instance.setSource(null);
+    }
+  }
+
+  protected _register(s: Source) {
+    if (this.host) {
+      this.host.instance.setSource(s);
+    }
+  }
+}

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

@@ -0,0 +1,25 @@
+import { Component, Host, Input, OnInit, forwardRef } from '@angular/core';
+import { TileJSON } from 'ol/source';
+import { LayerTileComponent } from '../layers/layertile.component';
+import { SourceComponent } from './source.component';
+
+@Component({
+  selector: 'aol-source-tilejson',
+  template: ` <ng-content></ng-content> `,
+  providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceTileJSONComponent) }],
+})
+export class SourceTileJSONComponent extends SourceComponent implements OnInit {
+  @Input()
+  url: string;
+
+  instance: TileJSON;
+
+  constructor(@Host() layer: LayerTileComponent) {
+    super(layer);
+  }
+
+  ngOnInit() {
+    this.instance = new TileJSON(this);
+    this.host.instance.setSource(this.instance);
+  }
+}

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

@@ -0,0 +1,57 @@
+import { Component, Host, Input, OnChanges, OnInit, forwardRef, SimpleChanges } from '@angular/core';
+import { LayerTileComponent } from '../layers/layertile.component';
+import { SourceComponent } from './source.component';
+import { TileWMS } from 'ol/source';
+import { TileGrid } from 'ol/tilegrid';
+import { LoadFunction } from 'ol/Tile';
+
+@Component({
+  selector: 'aol-source-tilewms',
+  template: ` <ng-content></ng-content> `,
+  providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceTileWMSComponent) }],
+})
+export class SourceTileWMSComponent extends SourceComponent implements OnChanges, OnInit {
+  @Input()
+  cacheSize: number;
+  @Input()
+  crossOrigin: string;
+  @Input()
+  gutter: number;
+  @Input()
+  hidpi: boolean;
+  @Input()
+  params: { [key: string]: any };
+  @Input()
+  projection: string;
+  @Input()
+  reprojectionErrorThreshold: number;
+  @Input()
+  serverType: string;
+  @Input()
+  tileGrid: TileGrid;
+  @Input()
+  tileLoadFunction: LoadFunction;
+  @Input()
+  url: string;
+  @Input()
+  urls: string[];
+  @Input()
+  wrapX: boolean;
+
+  instance: TileWMS;
+
+  constructor(@Host() layer: LayerTileComponent) {
+    super(layer);
+  }
+
+  ngOnInit() {
+    this.instance = new TileWMS(this);
+    this.host.instance.setSource(this.instance);
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (this.instance && changes.hasOwnProperty('params')) {
+      this.instance.updateParams(this.params);
+    }
+  }
+}

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

@@ -0,0 +1,117 @@
+import {
+  Component,
+  Host,
+  Input,
+  forwardRef,
+  AfterContentInit,
+  ContentChild,
+  SimpleChanges,
+  OnChanges,
+  Output,
+  EventEmitter,
+} from '@angular/core';
+import { LayerTileComponent } from '../layers/layertile.component';
+import { SourceComponent } from './source.component';
+import { TileGridWMTSComponent } from '../tilegridwmts.component';
+import { WMTS } from 'ol/source';
+import { WMTS as TileGridWMTS } from 'ol/tilegrid';
+import { WMTSRequestEncoding } from 'ol/source';
+import { ProjectionLike } from 'ol/proj';
+import { LoadFunction } from 'ol/Tile';
+import { TileSourceEvent } from 'ol/source/Tile';
+
+@Component({
+  selector: 'aol-source-tilewmts',
+  template: ` <ng-content></ng-content> `,
+  providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceTileWMTSComponent) }],
+})
+export class SourceTileWMTSComponent extends SourceComponent implements AfterContentInit, OnChanges {
+  @Input()
+  cacheSize?: number;
+  @Input()
+  crossOrigin?: string;
+  @Input()
+  tileGrid: TileGridWMTS;
+  @Input()
+  projection: ProjectionLike;
+  @Input()
+  reprojectionErrorThreshold?: number;
+  @Input()
+  requestEncoding?: WMTSRequestEncoding | string;
+  @Input()
+  layer: string;
+  @Input()
+  style: string;
+  @Input()
+  tileClass?: any;
+  @Input()
+  tilePixelRatio?: number;
+  @Input()
+  version?: string;
+  @Input()
+  format?: string;
+  @Input()
+  matrixSet: string;
+  @Input()
+  dimensions?: any;
+  @Input()
+  url?: string;
+  @Input()
+  tileLoadFunction?: LoadFunction;
+  @Input()
+  urls?: string[];
+  @Input()
+  wrapX?: boolean;
+
+  @Output()
+  tileLoadStart: EventEmitter<TileSourceEvent> = new EventEmitter<TileSourceEvent>();
+  @Output()
+  tileLoadEnd: EventEmitter<TileSourceEvent> = new EventEmitter<TileSourceEvent>();
+  @Output()
+  tileLoadError: EventEmitter<TileSourceEvent> = new EventEmitter<TileSourceEvent>();
+
+  @ContentChild(TileGridWMTSComponent)
+  tileGridWMTS: TileGridWMTSComponent;
+
+  instance: WMTS;
+
+  constructor(@Host() layer: LayerTileComponent) {
+    super(layer);
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    const properties: { [index: string]: any } = {};
+    if (!this.instance) {
+      return;
+    }
+    for (const key in changes) {
+      if (changes.hasOwnProperty(key)) {
+        switch (key) {
+          case 'url':
+            this.url = changes[key].currentValue;
+            this.setLayerSource();
+            break;
+          default:
+            break;
+        }
+        properties[key] = changes[key].currentValue;
+      }
+    }
+    this.instance.setProperties(properties, false);
+  }
+
+  setLayerSource(): void {
+    this.instance = new WMTS(this);
+    this.instance.on('tileloadstart', (event: TileSourceEvent) => this.tileLoadStart.emit(event));
+    this.instance.on('tileloadend', (event: TileSourceEvent) => this.tileLoadEnd.emit(event));
+    this.instance.on('tileloaderror', (event: TileSourceEvent) => this.tileLoadError.emit(event));
+    this.host.instance.setSource(this.instance);
+  }
+
+  ngAfterContentInit(): void {
+    if (this.tileGridWMTS) {
+      this.tileGrid = this.tileGridWMTS.instance;
+      this.setLayerSource();
+    }
+  }
+}

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

@@ -0,0 +1,25 @@
+import { Component, Host, Input, OnInit, forwardRef } from '@angular/core';
+import { SourceComponent } from './source.component';
+import { LayerTileComponent } from '../layers/layertile.component';
+import { UTFGrid } from 'ol/source';
+
+@Component({
+  selector: 'aol-source-utfgrid',
+  template: ` <ng-content></ng-content> `,
+  providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceUTFGridComponent) }],
+})
+export class SourceUTFGridComponent extends SourceComponent implements OnInit {
+  @Input() tileJSON: JSON;
+  @Input() url: string;
+
+  instance: UTFGrid;
+
+  constructor(@Host() layer: LayerTileComponent) {
+    super(layer);
+  }
+
+  ngOnInit() {
+    this.instance = new UTFGrid(this);
+    this.host.instance.setSource(this.instance);
+  }
+}

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

@@ -0,0 +1,37 @@
+import { Component, Host, Input, OnInit, forwardRef } from '@angular/core';
+import { Vector } from 'ol/source';
+import Feature from 'ol/format/Feature';
+import { LayerVectorComponent } from '../layers/layervector.component';
+import { SourceComponent } from './source.component';
+import { LoadingStrategy } from 'ol/source/Vector';
+
+@Component({
+  selector: 'aol-source-vector',
+  template: ` <ng-content></ng-content> `,
+  providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceVectorComponent) }],
+})
+export class SourceVectorComponent extends SourceComponent implements OnInit {
+  @Input()
+  overlaps: boolean;
+  @Input()
+  useSpatialIndex: boolean;
+  @Input()
+  wrapX: boolean;
+  @Input()
+  url: string;
+  @Input()
+  format: Feature;
+  @Input()
+  strategy: LoadingStrategy;
+
+  instance: Vector;
+
+  constructor(@Host() layer: LayerVectorComponent) {
+    super(layer);
+  }
+
+  ngOnInit() {
+    this.instance = new Vector(this);
+    this.host.instance.setSource(this.instance);
+  }
+}

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

@@ -0,0 +1,57 @@
+import { Component, Host, Input, forwardRef, ContentChild, AfterContentInit } from '@angular/core';
+import { VectorTile } from 'ol';
+import Feature from 'ol/format/Feature';
+import TileGrid from 'ol/tilegrid/TileGrid';
+import { LayerVectorTileComponent } from '../layers/layervectortile.component';
+import { FormatComponent } from '../formats/format.component';
+import { TileGridComponent } from '../tilegrid.component';
+import { SourceComponent } from './source.component';
+import { ProjectionLike } from 'ol/proj';
+import { UrlFunction } from 'ol/Tile';
+
+@Component({
+  selector: 'aol-source-vectortile',
+  template: ` <ng-content></ng-content> `,
+  providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceVectorTileComponent) }],
+})
+export class SourceVectorTileComponent extends SourceComponent implements AfterContentInit {
+  @Input()
+  cacheSize: number;
+  @Input()
+  overlaps: boolean;
+  @Input()
+  projection: ProjectionLike;
+  @Input()
+  tilePixelRatio: number;
+  @Input()
+  tileUrlFunction: UrlFunction;
+  @Input()
+  url: string;
+  @Input()
+  urls: string[];
+  @Input()
+  wrapX: boolean;
+
+  @ContentChild(FormatComponent)
+  formatComponent: FormatComponent;
+  @ContentChild(TileGridComponent)
+  tileGridComponent: TileGridComponent;
+
+  format: Feature;
+  tileGrid: TileGrid;
+
+  instance: VectorTile;
+
+  constructor(@Host() layer: LayerVectorTileComponent) {
+    super(layer);
+  }
+
+  /* need the children to construct the OL3 object */
+  ngAfterContentInit() {
+    this.format = this.formatComponent.instance;
+    this.tileGrid = this.tileGridComponent.instance;
+    // console.log('creating ol.source.VectorTile instance with:', this);
+    this.instance = new VectorTile(this);
+    this.host.instance.setSource(this.instance);
+  }
+}

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

@@ -0,0 +1,115 @@
+import {
+  AfterContentInit,
+  Component,
+  ContentChild,
+  EventEmitter,
+  forwardRef,
+  Host,
+  Input,
+  OnChanges,
+  Optional,
+  Output,
+  SimpleChanges,
+} from '@angular/core';
+import { Size } from 'ol/size';
+import { XYZ } from 'ol/source';
+import { TileSourceEvent } from 'ol/source/Tile';
+import { LoadFunction, UrlFunction } from 'ol/Tile';
+import TileGrid from 'ol/tilegrid/TileGrid';
+
+import { LayerTileComponent } from '../layers/layertile.component';
+import { TileGridComponent } from '../tilegrid.component';
+import { SourceComponent } from './source.component';
+
+@Component({
+  selector: 'aol-source-xyz',
+  template: ` <ng-content></ng-content> `,
+  providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceXYZComponent) }],
+})
+export class SourceXYZComponent extends SourceComponent implements AfterContentInit, OnChanges {
+  @Input()
+  cacheSize: number;
+  @Input()
+  crossOrigin: string;
+  @Input()
+  opaque: boolean;
+  @Input()
+  projection: string;
+  @Input()
+  reprojectionErrorThreshold: number;
+  @Input()
+  minZoom: number;
+  @Input()
+  maxZoom: number;
+  @Input()
+  tileGrid: TileGrid;
+  @Input()
+  tileLoadFunction?: LoadFunction;
+  @Input()
+  tilePixelRatio: number;
+  @Input()
+  tileSize: number | Size;
+  @Input()
+  tileUrlFunction?: UrlFunction;
+  @Input()
+  url: string;
+  @Input()
+  urls: string[];
+  @Input()
+  wrapX: boolean;
+
+  @ContentChild(TileGridComponent)
+  tileGridXYZ: TileGridComponent;
+
+  @Output()
+  tileLoadStart: EventEmitter<TileSourceEvent> = new EventEmitter<TileSourceEvent>();
+  @Output()
+  tileLoadEnd: EventEmitter<TileSourceEvent> = new EventEmitter<TileSourceEvent>();
+  @Output()
+  tileLoadError: EventEmitter<TileSourceEvent> = new EventEmitter<TileSourceEvent>();
+
+  instance: XYZ;
+
+  constructor(
+    @Optional()
+    @Host()
+    protected layer?: LayerTileComponent
+  ) {
+    super(layer);
+  }
+
+  ngAfterContentInit() {
+    if (this.tileGridXYZ) {
+      this.tileGrid = this.tileGridXYZ.instance;
+    }
+    this.init();
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    const properties: { [index: string]: any } = {};
+
+    if (!this.instance) {
+      return;
+    }
+    for (const key in changes) {
+      if (changes.hasOwnProperty(key)) {
+        properties[key] = changes[key].currentValue;
+      }
+    }
+
+    this.instance.setProperties(properties, false);
+    if (changes.hasOwnProperty('url')) {
+      this.init();
+    }
+  }
+
+  init() {
+    this.instance = new XYZ(this);
+
+    this.instance.on('tileloadstart', (event: TileSourceEvent) => this.tileLoadStart.emit(event));
+    this.instance.on('tileloadend', (event: TileSourceEvent) => this.tileLoadEnd.emit(event));
+    this.instance.on('tileloaderror', (event: TileSourceEvent) => this.tileLoadError.emit(event));
+
+    this._register(this.instance);
+  }
+}

projects/ngx-openlayers/src/lib/styles/circle.component.ts

@@ -0,0 +1,60 @@
+import { Component, Input, Host, AfterContentInit, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
+import { AtlasManager, Circle, Fill, Stroke } from 'ol/style';
+import { StyleComponent } from './style.component';
+
+@Component({
+  selector: 'aol-style-circle',
+  template: ` <ng-content></ng-content> `,
+})
+export class StyleCircleComponent implements AfterContentInit, OnChanges, OnDestroy {
+  @Input()
+  fill: Fill;
+  @Input()
+  radius: number;
+  @Input()
+  snapToPixel: boolean;
+  @Input()
+  stroke: Stroke;
+  @Input()
+  atlasManager: AtlasManager;
+
+  componentType = 'style-circle';
+  instance: Circle;
+
+  constructor(@Host() private host: StyleComponent) {}
+
+  /**
+   * WORK-AROUND: since the re-rendering is not triggered on style change
+   * we trigger a radius change.
+   * see openlayers #6233 and #5775
+   */
+  update() {
+    if (!!this.instance) {
+      // console.log('setting ol.style.Circle instance\'s radius');
+      this.instance.setRadius(this.radius);
+    }
+    this.host.update();
+  }
+
+  ngAfterContentInit() {
+    // console.log('creating ol.style.Circle instance with: ', this);
+    this.instance = new Circle(this);
+    this.host.instance.setImage(this.instance);
+    this.host.update();
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (!this.instance) {
+      return;
+    }
+    if (changes.radius) {
+      this.instance.setRadius(changes.radius.currentValue);
+    }
+    // console.log('changes detected in aol-style-circle, setting new radius: ', changes['radius'].currentValue);
+  }
+
+  ngOnDestroy() {
+    // console.log('removing aol-style-circle');
+    this.host.instance.setImage(null);
+  }
+}