File

libs/map/src/lib/control/geosearch/geosearch.component.ts

Extends

MapControlComponent

Metadata

selector n52-geosearch-control
templateUrl ./geosearch.component.html

Index

Properties
Methods
Inputs
Outputs

Constructor

constructor(mapCache: MapCache, geosearch: GeoSearch)
Parameters :
Name Type Optional
mapCache MapCache No
geosearch GeoSearch No

Inputs

options
Type : GeoSearchOptions

Additional search options.

mapId
Type : string
Inherited from MapControlComponent

Connect map id.

Outputs

onResultChanged
Type : EventEmitter<GeoSearchResult>

Returns the search result.

onSearchTriggered
Type : EventEmitter<void>

Informs, when the search is triggered.

Methods

Public clearSearch
clearSearch()
Returns : void
Private removeOldGeometry
removeOldGeometry()
Returns : void
Public triggerSearch
triggerSearch()
Returns : void

Properties

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>
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""