libs/facet-search/src/lib/components/result-map/result-map.component.ts
OnInit
AfterViewInit
OnDestroy
| selector | n52-result-map |
| styleUrls | ./result-map.component.scss |
| templateUrl | ./result-map.component.html |
Properties |
|
Methods |
|
Inputs |
Outputs |
constructor(mapCache: MapCache, differs: KeyValueDiffers)
|
|||||||||
|
Parameters :
|
| aggregateToStations | |
Default value : false
|
|
| autoZoomToResults | |
Default value : true
|
|
| cluster | |
Default value : true
|
|
| facetSearchService | |
Type : FacetSearchService
|
|
| nextResultsZoom | |
Default value : true
|
|
| selectSingleStation | |
Default value : false
|
|
| baseMaps | |
Type : LayerMap
|
|
|
Inherited from
CachedMapComponent
|
|
|
Defined in
CachedMapComponent:52
|
|
|
Map, which holds all base map layer (see: https://leafletjs.com/reference-1.3.4.html#layer) |
|
| fitBounds | |
Type : L.LatLngBoundsExpression
|
|
|
Inherited from
CachedMapComponent
|
|
|
Defined in
CachedMapComponent:40
|
|
|
Bounds for the map |
|
| layerControlOptions | |
Type : L.Control.LayersOptions
|
|
|
Inherited from
CachedMapComponent
|
|
|
Defined in
CachedMapComponent:58
|
|
|
Describes the the zoom options (see: https://leafletjs.com/reference-1.3.4.html#control-layers) |
|
| mapId | |
Type : string
|
|
|
Inherited from
CachedMapComponent
|
|
|
Defined in
CachedMapComponent:28
|
|
|
A map with the given ID is created inside this component. This ID can be used the get the map instance over the map cache service. |
|
| mapOptions | |
Type : L.MapOptions
|
|
|
Inherited from
CachedMapComponent
|
|
|
Defined in
CachedMapComponent:34
|
|
|
The corresponding leaflet map options (see: https://leafletjs.com/reference-1.3.4.html#map-option) |
|
| overlayMaps | |
Type : LayerMap
|
|
|
Inherited from
CachedMapComponent
|
|
|
Defined in
CachedMapComponent:46
|
|
|
Map, which holds all overlay map layer (see: https://leafletjs.com/reference-1.3.4.html#layer) |
|
| zoomControlOptions | |
Type : L.Control.ZoomOptions
|
|
|
Inherited from
CachedMapComponent
|
|
|
Defined in
CachedMapComponent:64
|
|
|
Describes the the zoom control options (see: https://leafletjs.com/reference-1.3.4.html#control-zoom) |
|
| selected | |
Type : EventEmitter<HelgolandTimeseries | literal type>
|
|
| mapInitialized | |
Type : EventEmitter<string>
|
|
|
Inherited from
CachedMapComponent
|
|
|
Defined in
CachedMapComponent:70
|
|
|
Informs when initialization is done with map id. |
|
| Private createStationGeometry | |||||||||
createStationGeometry(station: HelgolandPlatform, url: string)
|
|||||||||
|
Parameters :
Returns :
L.GeoJSON
|
| Private createTsGeometry | ||||||
createTsGeometry(ts: HelgolandTimeseries)
|
||||||
|
Parameters :
Returns :
any
|
| Private fetchResults | ||||||
fetchResults(ts: HelgolandTimeseries[])
|
||||||
|
Parameters :
Returns :
void
|
| ngAfterViewInit |
ngAfterViewInit()
|
|
Returns :
void
|
| ngOnDestroy |
ngOnDestroy()
|
|
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| Private addBaseMap | ||||||
addBaseMap(layerOptions?: LayerOptions)
|
||||||
|
Inherited from
CachedMapComponent
|
||||||
|
Defined in
CachedMapComponent:180
|
||||||
|
Parameters :
Returns :
void
|
| Private addOverlayMap | ||||||
addOverlayMap(layerOptions: LayerOptions)
|
||||||
|
Inherited from
CachedMapComponent
|
||||||
|
Defined in
CachedMapComponent:164
|
||||||
|
Parameters :
Returns :
void
|
| Protected createMap |
createMap()
|
|
Inherited from
CachedMapComponent
|
|
Defined in
CachedMapComponent:137
|
|
Returns :
void
|
| Private generateUUID |
generateUUID()
|
|
Inherited from
CachedMapComponent
|
|
Defined in
CachedMapComponent:155
|
|
Returns :
string
|
| Public ngDoCheck |
ngDoCheck()
|
|
Inherited from
CachedMapComponent
|
|
Defined in
CachedMapComponent:112
|
|
Returns :
void
|
| Public ngOnChanges | ||||||
ngOnChanges(changes: SimpleChanges)
|
||||||
|
Inherited from
CachedMapComponent
|
||||||
|
Defined in
CachedMapComponent:101
|
||||||
|
Parameters :
Returns :
void
|
| Public ngOnDestroy |
ngOnDestroy()
|
|
Inherited from
CachedMapComponent
|
|
Defined in
CachedMapComponent:131
|
|
Returns :
void
|
| Public ngOnInit |
ngOnInit()
|
|
Inherited from
CachedMapComponent
|
|
Defined in
CachedMapComponent:95
|
|
Returns :
void
|
| Private removeBaseMap | ||||||
removeBaseMap(layerOptions: LayerOptions)
|
||||||
|
Inherited from
CachedMapComponent
|
||||||
|
Defined in
CachedMapComponent:198
|
||||||
|
Parameters :
Returns :
void
|
| Private removeOverlayMap | ||||||
removeOverlayMap(layerOptions: LayerOptions)
|
||||||
|
Inherited from
CachedMapComponent
|
||||||
|
Defined in
CachedMapComponent:173
|
||||||
|
Parameters :
Returns :
void
|
| Private updateLayerControl |
updateLayerControl()
|
|
Inherited from
CachedMapComponent
|
|
Defined in
CachedMapComponent:205
|
|
Returns :
void
|
| Private updateZoomControl |
updateZoomControl()
|
|
Inherited from
CachedMapComponent
|
|
Defined in
CachedMapComponent:218
|
|
Returns :
void
|
| Private markerFeatureGroup |
Type : L.FeatureGroup
|
| Private resultsSubs |
Type : Subscription
|
| Private _baseMaps |
Type : LayerMap
|
|
Inherited from
CachedMapComponent
|
|
Defined in
CachedMapComponent:84
|
| Private _differBaseMaps |
Type : KeyValueDiffer<string | LayerOptions>
|
|
Inherited from
CachedMapComponent
|
|
Defined in
CachedMapComponent:85
|
| Private _differOverlayMaps |
Type : KeyValueDiffer<string | LayerOptions>
|
|
Inherited from
CachedMapComponent
|
|
Defined in
CachedMapComponent:83
|
| Private _overlayMaps |
Type : LayerMap
|
|
Inherited from
CachedMapComponent
|
|
Defined in
CachedMapComponent:82
|
| Protected layerControl |
Type : L.Control.Layers
|
|
Inherited from
CachedMapComponent
|
|
Defined in
CachedMapComponent:79
|
| Protected map |
Type : L.Map
|
|
Inherited from
CachedMapComponent
|
|
Defined in
CachedMapComponent:75
|
|
The map object. |
| Protected oldBaseLayer |
Type : L.Control.LayersObject
|
Default value : {}
|
|
Inherited from
CachedMapComponent
|
|
Defined in
CachedMapComponent:78
|
| Protected oldOverlayLayer |
Type : L.Control.LayersObject
|
Default value : {}
|
|
Inherited from
CachedMapComponent
|
|
Defined in
CachedMapComponent:77
|
| Protected zoomControl |
Type : L.Control.Zoom
|
|
Inherited from
CachedMapComponent
|
|
Defined in
CachedMapComponent:80
|
import { AfterViewInit, Component, EventEmitter, Input, KeyValueDiffers, OnDestroy, OnInit, Output } from '@angular/core';
import { HelgolandPlatform, HelgolandTimeseries, Required } from '@helgoland/core';
import { CachedMapComponent, MapCache } from '@helgoland/map';
import { geoJSON } from 'leaflet';
import * as L from 'leaflet';
import { Subscription } from 'rxjs';
import { FacetSearchService } from '../../facet-search.service';
delete L.Icon.Default.prototype['_getIconUrl'];
L.Icon.Default.mergeOptions({
iconRetinaUrl: './assets/images/leaflet/marker-icon-2x.png',
iconUrl: './assets/images/leaflet/marker-icon.png',
shadowUrl: './assets/images/leaflet/marker-shadow.png',
});
@Component({
selector: 'n52-result-map',
templateUrl: './result-map.component.html',
styleUrls: ['./result-map.component.scss'],
})
export class ResultMapComponent extends CachedMapComponent implements OnInit, AfterViewInit, OnDestroy {
@Input() @Required public facetSearchService: FacetSearchService;
@Input() public cluster = true;
@Input() public aggregateToStations = false;
@Input() public selectSingleStation = false;
@Input() public autoZoomToResults = true;
@Input() public nextResultsZoom = true;
@Output() public selected: EventEmitter<HelgolandTimeseries | { station: HelgolandPlatform, url: string }> = new EventEmitter();
private markerFeatureGroup: L.FeatureGroup;
private resultsSubs: Subscription;
constructor(
protected mapCache: MapCache,
protected differs: KeyValueDiffers
) {
super(mapCache, differs);
}
ngOnInit() {
super.ngOnInit();
this.resultsSubs = this.facetSearchService.getResults().subscribe(ts => this.fetchResults(ts));
}
ngOnDestroy() {
super.ngOnDestroy();
this.resultsSubs.unsubscribe();
}
ngAfterViewInit(): void {
this.createMap();
const res = this.facetSearchService.getFilteredResults();
if (res) {
this.fetchResults(res);
}
}
private fetchResults(ts: HelgolandTimeseries[]) {
if (this.map) {
if (this.markerFeatureGroup) { this.map.removeLayer(this.markerFeatureGroup); }
if (this.cluster) {
this.markerFeatureGroup = L.markerClusterGroup({ animate: true });
} else {
this.markerFeatureGroup = L.featureGroup();
}
if (this.aggregateToStations) {
const stations = new Map<string, { station: HelgolandPlatform, url: string }>();
ts.forEach(e => {
const id = `${e.platform.id}-${e.url}`;
if (!stations.has(id)) {
stations.set(id, { station: e.platform, url: e.url });
}
});
stations.forEach(v => {
const station = this.createStationGeometry(v.station, v.url);
if (station) { this.markerFeatureGroup.addLayer(station); }
});
if (stations.size === 1 && this.selectSingleStation) {
const entry = stations.get(stations.keys().next().value);
this.selected.emit({ station: entry.station, url: entry.url });
}
} else {
ts.forEach(e => {
const marker = this.createTsGeometry(e);
if (marker) { this.markerFeatureGroup.addLayer(marker); }
});
}
this.markerFeatureGroup.addTo(this.map);
const bounds = this.markerFeatureGroup.getBounds();
if (bounds.isValid() && (this.autoZoomToResults || this.nextResultsZoom)) {
this.map.fitBounds(bounds);
this.map.invalidateSize();
this.nextResultsZoom = false;
}
}
}
private createStationGeometry(station: HelgolandPlatform, url: string): L.GeoJSON {
if (station) {
const geometry = geoJSON(station.geometry);
geometry.on('click', () => this.selected.emit({ station, url }));
return geometry;
}
}
private createTsGeometry(ts: HelgolandTimeseries) {
if (ts.platform) {
const geometry = geoJSON(ts.platform.geometry);
geometry.on('click', () => this.selected.emit(ts));
return geometry;
}
}
}
<div [attr.id]="mapId" class="map-viewer"></div>
./result-map.component.scss
:host {
height: 100%;
width: 100%;
.map-viewer {
height: 100%;
width: 100%;
}
}