libs/map/src/lib/control/geosearch/geosearch.component.ts
selector | n52-geosearch-control |
templateUrl | ./geosearch.component.html |
Properties |
|
Methods |
|
Inputs |
Outputs |
constructor(mapCache: MapCache, geosearch: GeoSearch)
|
options | |
Type : GeoSearchOptions
|
|
Additional search options. |
mapId | |
Type : string
|
|
Inherited from
MapControlComponent
|
|
Defined in
MapControlComponent:11
|
|
Connect map id. |
onResultChanged | |
Type : EventEmitter<GeoSearchResult>
|
|
Returns the search result. |
onSearchTriggered | |
Type : EventEmitter<void>
|
|
Informs, when the search is triggered. |
Public clearSearch |
clearSearch()
|
Returns :
void
|
Private removeOldGeometry |
removeOldGeometry()
|
Returns :
void
|
Public triggerSearch |
triggerSearch()
|
Returns :
void
|
Public loading |
Type : boolean
|
Public result |
Type : GeoSearchResult
|
Public resultGeometry |
Type : L.GeoJSON
|
Public searchTerm |
Type : string
|
import { Component, EventEmitter, Input, Output } from '@angular/core';
import * as L from 'leaflet';
import { GeoSearch, GeoSearchOptions, GeoSearchResult } from '../../base/geosearch/geosearch';
import { MapCache } from '../../base/map-cache.service';
import { MapControlComponent } from '../map-control-component';
@Component({
selector: 'n52-geosearch-control',
templateUrl: './geosearch.component.html'
})
export class GeosearchControlComponent extends MapControlComponent {
/**
* Additional search options.
*/
@Input() public options: GeoSearchOptions;
/**
* Returns the search result.
*/
@Output() public onResultChanged: EventEmitter<GeoSearchResult> = new EventEmitter();
/**
* Informs, when the search is triggered.
*/
@Output() public onSearchTriggered: EventEmitter<void> = new EventEmitter();
public result: GeoSearchResult;
public resultGeometry: L.GeoJSON;
public searchTerm: string;
public loading: boolean;
constructor(
protected mapCache: MapCache,
protected geosearch: GeoSearch
) {
super(mapCache);
}
public triggerSearch() {
this.onSearchTriggered.emit();
if (this.resultGeometry) {
this.resultGeometry.remove();
}
if (this.searchTerm) {
this.loading = true;
this.geosearch.searchTerm(this.searchTerm, this.options).subscribe(
(result) => {
if (!result) {
this.searchTerm = '';
this.onResultChanged.emit(null);
return;
}
this.result = result;
if (this.mapId && this.mapCache.getMap(this.mapId)) {
this.resultGeometry = L.geoJSON(result.geometry).addTo(this.mapCache.getMap(this.mapId));
if (result.bounds) {
this.mapCache.getMap(this.mapId).fitBounds(result.bounds);
} else {
this.mapCache.getMap(this.mapId).fitBounds(this.resultGeometry.getBounds());
}
}
this.onResultChanged.emit(result);
},
(error) => {
this.searchTerm = 'error occurred';
this.onResultChanged.emit(null);
},
() => this.loading = false
);
}
}
public clearSearch() {
this.searchTerm = '';
this.onResultChanged.emit(null);
this.removeOldGeometry();
}
private removeOldGeometry() {
if (this.resultGeometry) {
this.resultGeometry.remove();
}
}
}
<div>
<input [(ngModel)]="searchTerm" (keyup.enter)="triggerSearch()">
<span *ngIf="loading">loading...</span>
<button type="button" class="btn btn-light btn-sm" (click)="clearSearch()">X</button>
</div>