feat(igo-toast) provite zoom to feature for mobile devices

infra-geo-ouverte · Oct 17, 2018 · 5de0afb · 5de0afb
1 parent 09c2d36
commit 5de0afb
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 0 deletions.
diff --git a/projects/geo/src/lib/toast/toast.component.html b/projects/geo/src/lib/toast/toast.component.html
@@ -20,6 +20,10 @@
       </mat-icon>
     </button>
 
+    <button mat-icon-button panelRightButton class="igo-icon-button" (click)="zoomToFeatureExtent()" *ngIf="feature.geometry">
+      <mat-icon>zoom_in</mat-icon>
+    </button>
+
     <igo-feature-details [feature]="feature"></igo-feature-details>
   </igo-panel>
 

diff --git a/projects/geo/src/lib/toast/toast.component.ts b/projects/geo/src/lib/toast/toast.component.ts
@@ -1,7 +1,9 @@
 import { Component, Input, Output, EventEmitter } from '@angular/core';
 
 import { FlexibleState } from '@igo2/common';
+import olFormatGeoJSON from 'ol/format/GeoJSON';
 import { Feature } from '../feature/shared/feature.interface';
+import { IgoMap } from '../map/shared/map';
 
 @Component({
   selector: 'igo-toast',
@@ -13,6 +15,7 @@ export class ToastComponent {
     UP: 'swipeup',
     DOWN: 'swipedown'
   };
+  private format = new olFormatGeoJSON();
 
   @Input()
   get expanded(): boolean {
@@ -24,6 +27,15 @@ export class ToastComponent {
   }
   private _expanded: boolean;
 
+  @Input()
+  get map(): IgoMap {
+    return this._map;
+  }
+  set map(value: IgoMap) {
+    this._map = value;
+  }
+  private _map: IgoMap;
+
   @Input()
   get feature(): Feature {
     return this._feature;
@@ -44,6 +56,16 @@ export class ToastComponent {
     this.opened.emit(this.expanded);
   }
 
+  zoomToFeatureExtent() {
+    if (this.feature.geometry) {
+      const olFeature = this.format.readFeature(this.feature, {
+        dataProjection: this.feature.projection,
+        featureProjection: this.map.projection
+      });
+      this.map.zoomToFeature(olFeature);
+    }
+  }
+
   swipe(action: string) {
     if (action === ToastComponent.SWIPE_ACTION.UP) {
       if (!this.expanded) {