AW-3096 Zoeken op locatie (geocoding) mogelijk maken
All checks were successful
FarmMaps.Develop/FarmMapsLib/pipeline/head This commit looks good

This commit is contained in:
Willem Dantuma
2022-02-04 16:21:26 +01:00
parent f5b312a888
commit f4ba89920c
5 changed files with 66 additions and 24 deletions

View File

@@ -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">

View File

@@ -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();