AW-6046 Angular 17

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

@@ -0,0 +1,33 @@
+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;
+
+  public componentType = 'control';
+  instance: Attribution;
+  target: HTMLElement;
+
+  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/ng-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 { MapComponent } from '../map.component';
+import { ContentComponent } from '../content.component';
+
+@Component({
+  selector: 'aol-control',
+  template: ` <ng-content></ng-content> `,
+})
+export class ControlComponent implements OnInit, OnDestroy {
+  @ContentChild(ContentComponent, { static: true })
+  content: ContentComponent;
+
+  public componentType = 'control';
+  instance: Control;
+  element: HTMLElement;
+
+  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/ng-openlayers/src/lib/controls/default.component.ts

@@ -0,0 +1,42 @@
+import { Component, OnDestroy, OnInit, Input } from '@angular/core';
+import { Control, defaults } from 'ol/control';
+import { Collection } from 'ol';
+import { Options as AttributionOptions } from 'ol/control/Attribution';
+import { Options as RotateOptions } from 'ol/control/Rotate';
+import { Options as ZoomOptions } from 'ol/control/Zoom';
+
+import { MapComponent } from '../map.component';
+
+@Component({
+  selector: 'aol-control-defaults',
+  template: '',
+})
+export class DefaultControlComponent implements OnInit, OnDestroy {
+  @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/ng-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/ng-openlayers/src/lib/controls/mouseposition.component.ts

@@ -0,0 +1,36 @@
+import { Component, ElementRef, Input, OnDestroy, OnInit } from '@angular/core';
+import MousePosition from 'ol/control/MousePosition';
+import { MapComponent } from '../map.component';
+import { CoordinateFormat } from 'ol/coordinate';
+import { ProjectionLike } from 'ol/proj';
+
+@Component({
+  selector: 'aol-control-mouseposition',
+  template: ``,
+})
+export class ControlMousePositionComponent implements OnInit, OnDestroy {
+  @Input()
+  coordinateFormat: CoordinateFormat;
+  @Input()
+  projection: ProjectionLike;
+
+  instance: MousePosition;
+  target: HTMLElement;
+
+  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/ng-openlayers/src/lib/controls/overviewmap.component.ts

@@ -0,0 +1,53 @@
+import { Component, Input, OnDestroy, OnInit, OnChanges, SimpleChanges } from '@angular/core';
+import { Layer } from 'ol/layer';
+import { View } from 'ol';
+import { OverviewMap } from 'ol/control';
+import { MapComponent } from '../map.component';
+
+@Component({
+  selector: 'aol-control-overviewmap',
+  template: ` <ng-content></ng-content> `,
+})
+export class ControlOverviewMapComponent implements OnInit, OnChanges, OnDestroy {
+  @Input()
+  collapsed: boolean;
+  @Input()
+  collapseLabel: string;
+  @Input()
+  collapsible: boolean;
+  @Input()
+  label: string;
+  @Input()
+  layers: Layer[];
+  @Input()
+  target: HTMLElement;
+  @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/ng-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/ng-openlayers/src/lib/controls/scaleline.component.ts

@@ -0,0 +1,26 @@
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { ScaleLine } from 'ol/control';
+import { MapComponent } from '../map.component';
+import { Units } from 'ol/control/ScaleLine';
+
+@Component({
+  selector: 'aol-control-scaleline',
+  template: ` <ng-content></ng-content> `,
+})
+export class ControlScaleLineComponent implements OnInit, OnDestroy {
+  @Input()
+  units: Units;
+
+  instance: ScaleLine;
+
+  constructor(private map: MapComponent) {}
+
+  ngOnInit() {
+    this.instance = new ScaleLine(this);
+    this.map.instance.addControl(this.instance);
+  }
+
+  ngOnDestroy() {
+    this.map.instance.removeControl(this.instance);
+  }
+}

projects/ng-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 | HTMLElement;
+  @Input()
+  zoomOutLabel: string | HTMLElement;
+  @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/ng-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/ng-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 { MapComponent } from '../map.component';
+import { Extent } from 'ol/extent';
+
+@Component({
+  selector: 'aol-control-zoomtoextent',
+  template: ` <ng-content></ng-content> `,
+})
+export class ControlZoomToExtentComponent implements OnInit, OnDestroy {
+  @Input()
+  className: string;
+  @Input()
+  label: string | HTMLElement;
+  @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);
+  }
+}