From 884429f7b44ba815587e97f9668d11ae05f20d50 Mon Sep 17 00:00:00 2001
From: Aymeric Duchein <aymeric.duchein.external@airbus.com>
Date: Wed, 26 Sep 2018 11:14:09 +0200
Subject: [PATCH] feat(view): add zoom change output

---
 projects/ngx-openlayers/src/lib/view.component.ts | 9 +++++++--
 src/app/basic/basic.component.ts                  | 6 +++++-
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/projects/ngx-openlayers/src/lib/view.component.ts b/projects/ngx-openlayers/src/lib/view.component.ts
index 9fad63d9..d7877222 100644
--- a/projects/ngx-openlayers/src/lib/view.component.ts
+++ b/projects/ngx-openlayers/src/lib/view.component.ts
@@ -1,5 +1,5 @@
-import { Component, Input, OnInit, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
-import { View, Extent, Coordinate } from 'openlayers';
+import { Component, Input, OnInit, OnChanges, OnDestroy, SimpleChanges, EventEmitter, Output } from '@angular/core';
+import { View, Extent, ObjectEvent, Coordinate } from 'openlayers';
 import { MapComponent } from './map.component';
 
 @Component({
@@ -42,12 +42,17 @@ export class ViewComponent implements OnInit, OnChanges, OnDestroy {
   @Input()
   zoomAnimation = false;
 
+  @Output()
+  onChangeZoom: EventEmitter<ObjectEvent> = new EventEmitter<ObjectEvent>();
+
   constructor(private host: MapComponent) {}
 
   ngOnInit() {
     // console.log('creating ol.View instance with: ', this);
     this.instance = new View(this);
     this.host.instance.setView(this.instance);
+
+    this.instance.on('change:zoom', (event: ObjectEvent) => this.onChangeZoom.emit(event));
   }
 
   ngOnChanges(changes: SimpleChanges) {
diff --git a/src/app/basic/basic.component.ts b/src/app/basic/basic.component.ts
index 03342a2e..4fe1e75c 100644
--- a/src/app/basic/basic.component.ts
+++ b/src/app/basic/basic.component.ts
@@ -4,7 +4,7 @@ import { Component } from '@angular/core';
   selector: 'app-root',
   template: `
   <aol-map [width]="'100%'" [height]="'100%'">
-    <aol-view [zoom]="zoom">
+    <aol-view [zoom]="zoom" (onChangeZoom)="onChangeZoom($event)">
       <aol-coordinate [x]="5" [y]="45" [srid]="'EPSG:4326'"></aol-coordinate>
     </aol-view>
     <aol-layer-tile [opacity]="opacity">
@@ -86,4 +86,8 @@ export class BasicComponent {
     this.opacity = Math.max(this.opacity - 0.1, 0);
     console.log('opacity: ', this.opacity);
   }
+
+  onChangeZoom(evt) {
+    console.log('Zoom changed:', evt);
+  }
 }