AW-3096 Zoeken op locatie (geocoding) mogelijk maken

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

@@ -1,5 +1,5 @@
 <ng-template #rt let-r="result" let-t="term">
-  <i class="fal fa-search" aria-hidden="true" style="width:2rem"></i>
+  <i [class]="getIcon(r.type)" aria-hidden="true" style="width:2rem"></i>
   <ngb-highlight [result]="formatter(r)" [term]="t"></ngb-highlight> 
 </ng-template>
 

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

@@ -1,6 +1,6 @@
 import { Component, Input, Output, OnInit, EventEmitter, SimpleChanges, OnChanges, ViewChild } from '@angular/core';
-import { Observable ,  of } from 'rxjs';
+import { Observable ,  of,merge,forkJoin } from 'rxjs';
-import { debounceTime,distinctUntilChanged,tap,switchMap,merge,catchError} from 'rxjs/operators';
+import { debounceTime,distinctUntilChanged,tap,switchMap,catchError,map} from 'rxjs/operators';
 import { TypeaheadService, TimespanService } from '@farmmaps/common';
 import { IQueryState } from '@farmmaps/common';
 import { IPeriodState } from '../../models/period.state';
@@ -26,7 +26,8 @@ export class MapSearchComponent {
     this.periodLocal =  tassign(this.periodLocal,{startDate: period.startDate,endDate:period.endDate});
     this.startEndCaption = this.timespanService.getCaption(period.startDate, period.endDate, 4)
   }
-  @Output() onSearch = new EventEmitter<IQueryState>();
+  @Output() onSearch = new EventEmitter<IQueryState>()
+  @Output() onCitySearch = new EventEmitter<string>()
   @Output() onClear = new EventEmitter<any>();
   @Output() onSearchCollapse = new EventEmitter<any>();
   @Output() onSearchExpand = new EventEmitter<any>();
@@ -73,16 +74,23 @@ export class MapSearchComponent {
     text$.pipe(
       debounceTime(300),
       distinctUntilChanged(),
-      tap(() => this.searching = true),
+      tap(() => {this.searching = true;this.searchFailed=false;}),
       switchMap(term => term.length < 1 ? of([]) : 
-        this.typeaheadService.getSearchTypeaheadItems(term).pipe(
+      forkJoin(
-          tap(() => this.searchFailed = false),
+        this.typeaheadService.getTagTypeaheadItems(term).pipe(
           catchError(() => {
             this.searchFailed = true;
             return of([]);
-          })) ),
+          }),map( (sa:string[]) => sa.map((s,i) => ({"name":s,"type":"tag"})))),
+          this.typeaheadService.getCityTypeaheadItems(term).pipe(
+            catchError(() => {
+              this.searchFailed = true;
+              return of([]);
+            }),map( (sa:string[]) => sa.map((s,i) => ({"name":s,"type":"city"})))),
+        ).pipe(map(([a1,a2]) => [...a1, ...a2] ),map(a => a.sort((a, b) => (a.name.toUpperCase() > b.name.toUpperCase()) ? 1 : -1)))
+      ),
       tap(() => this.searching = false),
-      merge(this.hideSearchingWhenUnsubscribed));
+      );
 
   formatter = (x: { name: string }) => x.name;
 
@@ -109,18 +117,23 @@ export class MapSearchComponent {
   }
 
   handleSelect(event) {
-    event.preventDefault();
+    if(event.item.type == "tag") {
-    this.filterOptionsLocal.query = null;
+      event.preventDefault();
-    this.filterOptionsLocal.itemType = null;
+      this.filterOptionsLocal.query = null;
-    this.filterOptionsLocal.itemCode = null;
+      this.filterOptionsLocal.itemType = null;
-    this.filterOptionsLocal.parentCode = null;
+      this.filterOptionsLocal.itemCode = null;
-    this.filterOptionsLocal.tags = event.item.name;
+      this.filterOptionsLocal.parentCode = null;
-    if (this.dateFilter) {
+      this.filterOptionsLocal.tags = event.item.name;
-      this.filterOptionsLocal.startDate = this.periodLocal.startDate;
+      if (this.dateFilter) {
-      this.filterOptionsLocal.endDate = this.periodLocal.endDate;
+        this.filterOptionsLocal.startDate = this.periodLocal.startDate;
+        this.filterOptionsLocal.endDate = this.periodLocal.endDate;
+      }
+      this.onSearch.emit(this.filterOptionsLocal);
+      this.searchTextLocal = { name: this.filterOptionsLocal.tags };  
+    } else if (event.item.type == "city") {
+      this.clearEnabled = true;
+      this.onCitySearch.emit(event.item.name);
     }
-    this.onSearch.emit(this.filterOptionsLocal);
-    this.searchTextLocal = { name: this.filterOptionsLocal.tags };
   }
 
   handleSelectPeriod(event: { startDate: Date, endDate: Date }) {
@@ -177,5 +190,15 @@ export class MapSearchComponent {
   handleClearClick(event) {
     this.onClear.emit({});
   }
+
+  getIcon(type):string {
+    if(type == "tag")
+      return "fal fa-tag";
+    else if(type == "city")
+      return "fal fa-map-marker-alt";
+    else if(type == "search")
+      return "fal fa-search";
+
+  }
 }
 

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

@@ -50,7 +50,7 @@
     <fm-map-file-drop-target [parentCode]="state.parentCode" (onFileDropped)="handleFileDropped($event)"></fm-map-file-drop-target>
 
     <div *ngIf="noContent">
-      <fm-map-map-search #mapSearch [openedModalName]="state.openedModalName" (onOpenModal)="handleOpenModal($event)" (onCloseModal)="handleCloseModal()" [ngClass]="{'menuVisible':state.menuVisible}" (onToggleMenu)="handleToggleMenu($event)" (onSearchCollapse)="handleSearchCollapse($event)" (onSearchExpand)="handleSearchExpand($event)" [collapsed]="state.searchCollapsed" [searchMinified]="state.searchMinified" (onSearch)="handleSearch($event)" (onClear)="handleClearSearch($event)" [filterOptions]="state.queryState" [clearEnabled]="state.clearEnabled" [period]="state.period" (onPeriodChange)="handlePeriodChange($event)"></fm-map-map-search>
+      <fm-map-map-search #mapSearch [openedModalName]="state.openedModalName" (onOpenModal)="handleOpenModal($event)" (onCloseModal)="handleCloseModal()" [ngClass]="{'menuVisible':state.menuVisible}" (onToggleMenu)="handleToggleMenu($event)" (onSearchCollapse)="handleSearchCollapse($event)" (onSearchExpand)="handleSearchExpand($event)" [collapsed]="state.searchCollapsed" [searchMinified]="state.searchMinified" (onSearch)="handleSearch($event)" (onClear)="handleClearSearch($event)" [filterOptions]="state.queryState" [clearEnabled]="state.clearEnabled" [period]="state.period" (onPeriodChange)="handlePeriodChange($event)" (onCitySearch)="handleCitySearch($event)"></fm-map-map-search>
     </div>
     <div class="side-panel-container">
       <fm-side-panel [resizeable]="true" [visible]="state.panelVisible && noContent" [collapsed]="state.panelCollapsed" [collapsable]="false">

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

@@ -21,6 +21,7 @@ import {IStyles} from '../../models/style.cache';
 import { IDroppedFile } from '../aol/file-drop-target/file-drop-target.component';
 import { StateSerializerService } from '@farmmaps/common';
 import { GeolocationService} from '../../services/geolocation.service';
+import { GeolocatorService } from '@farmmaps/common';
 import {DeviceOrientationService} from '../../services/device-orientation.service';
 
 // AppCommon
@@ -30,7 +31,7 @@ import {commonReducers} from '@farmmaps/common';
 import {commonActions} from '@farmmaps/common';
 
 import {Feature} from 'ol';
-import {Geometry} from 'ol/geom';
+import {Geometry,Point,Circle} from 'ol/geom';
 import {Extent,createEmpty,extend } from 'ol/extent';
 import {transform} from 'ol/proj';
 import { tassign } from 'tassign';
@@ -101,6 +102,7 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
     public itemTypeService: ItemTypeService,
     private location: Location,
     private geolocationService: GeolocationService,
+    private geolocaterService: GeolocatorService,
     private zone: NgZone,
     private deviceorientationService:DeviceOrientationService,
     public devicesService:DeviceService) {
@@ -452,6 +454,19 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
     this.store.dispatch(new mapActions.SetPeriod(period));
   }
 
+  handleCitySearch(location:string) {
+    this.geolocaterService.geocode(location).subscribe(locations => {
+      if( locations.length > 0) {
+        let point = new  Point([locations[0].coordinates.lon,locations[0].coordinates.lat]);
+        point.transform('EPSG:4326', 'EPSG:3857');
+        let circle = new Circle(point.getCoordinates(),5000);// 
+        let extent = createEmpty();
+        extend(extent, circle.getExtent());
+        this.store.dispatch(new mapActions.SetExtent(extent))
+      }
+     });
+  }
+
   ngOnDestroy() {
     if (this.paramSub) this.paramSub.unsubscribe();
     if (this.itemTypeSub) this.itemTypeSub.unsubscribe();

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

@@ -22,4 +22,8 @@ export class TypeaheadService {
   getTagTypeaheadItems(searchText: string, skip: number = 0, take: number = 10): Observable<ITypeaheadItem[]> {
     return this.httpClient.get<ITypeaheadItem[]>(`${this.ApiEndpoint()}/api/v1/typeahead/tag/?q=${searchText}&skip=${skip}&take=${take}`);
   }  
+
+  getCityTypeaheadItems(searchText: string, skip: number = 0, take: number = 10): Observable<ITypeaheadItem[]> {
+    return this.httpClient.get<ITypeaheadItem[]>(`${this.ApiEndpoint()}/api/v1/typeahead/city/?q=${searchText}&skip=${skip}&take=${take}`);
+  }  
 }