File

libs/facet-search/src/lib/components/result-map/result-map.component.ts

Extends

CachedMapComponent

Implements

OnInit AfterViewInit OnDestroy

Metadata

selector n52-result-map
styleUrls ./result-map.component.scss
templateUrl ./result-map.component.html

Index

Properties
Methods
Inputs
Outputs

Constructor

constructor(mapCache: MapCache, differs: KeyValueDiffers)
Parameters :
Name Type Optional
mapCache MapCache No
differs KeyValueDiffers No

Inputs

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

Map, which holds all base map layer (see: https://leafletjs.com/reference-1.3.4.html#layer)

fitBounds
Type : L.LatLngBoundsExpression
Inherited from CachedMapComponent

Bounds for the map

layerControlOptions
Type : L.Control.LayersOptions
Inherited from CachedMapComponent

Describes the the zoom options (see: https://leafletjs.com/reference-1.3.4.html#control-layers)

mapId
Type : string
Inherited from CachedMapComponent

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

The corresponding leaflet map options (see: https://leafletjs.com/reference-1.3.4.html#map-option)

overlayMaps
Type : LayerMap
Inherited from CachedMapComponent

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

Describes the the zoom control options (see: https://leafletjs.com/reference-1.3.4.html#control-zoom)

Outputs

selected
Type : EventEmitter<HelgolandTimeseries | literal type>
mapInitialized
Type : EventEmitter<string>
Inherited from CachedMapComponent

Informs when initialization is done with map id.

Methods

Private createStationGeometry
createStationGeometry(station: HelgolandPlatform, url: string)
Parameters :
Name Type Optional
station HelgolandPlatform No
url string No
Returns : L.GeoJSON
Private createTsGeometry
createTsGeometry(ts: HelgolandTimeseries)
Parameters :
Name Type Optional
ts HelgolandTimeseries No
Returns : any
Private fetchResults
fetchResults(ts: HelgolandTimeseries[])
Parameters :
Name Type Optional
ts HelgolandTimeseries[] No
Returns : void
ngAfterViewInit
ngAfterViewInit()
Returns : void
ngOnDestroy
ngOnDestroy()
Returns : void
ngOnInit
ngOnInit()
Returns : void
Private addBaseMap
addBaseMap(layerOptions?: LayerOptions)
Inherited from CachedMapComponent
Parameters :
Name Type Optional
layerOptions LayerOptions Yes
Returns : void
Private addOverlayMap
addOverlayMap(layerOptions: LayerOptions)
Inherited from CachedMapComponent
Parameters :
Name Type Optional
layerOptions LayerOptions No
Returns : void
Protected createMap
createMap()
Inherited from CachedMapComponent
Returns : void
Private generateUUID
generateUUID()
Inherited from CachedMapComponent
Returns : string
Public ngDoCheck
ngDoCheck()
Inherited from CachedMapComponent
Returns : void
Public ngOnChanges
ngOnChanges(changes: SimpleChanges)
Inherited from CachedMapComponent
Parameters :
Name Type Optional
changes SimpleChanges No
Returns : void
Public ngOnDestroy
ngOnDestroy()
Inherited from CachedMapComponent
Returns : void
Public ngOnInit
ngOnInit()
Inherited from CachedMapComponent
Returns : void
Private removeBaseMap
removeBaseMap(layerOptions: LayerOptions)
Inherited from CachedMapComponent
Parameters :
Name Type Optional
layerOptions LayerOptions No
Returns : void
Private removeOverlayMap
removeOverlayMap(layerOptions: LayerOptions)
Inherited from CachedMapComponent
Parameters :
Name Type Optional
layerOptions LayerOptions No
Returns : void
Private updateLayerControl
updateLayerControl()
Inherited from CachedMapComponent
Returns : void
Private updateZoomControl
updateZoomControl()
Inherited from CachedMapComponent
Returns : void

Properties

Private markerFeatureGroup
Type : L.FeatureGroup
Private resultsSubs
Type : Subscription
Private _baseMaps
Type : LayerMap
Inherited from CachedMapComponent
Private _differBaseMaps
Type : KeyValueDiffer<string | LayerOptions>
Inherited from CachedMapComponent
Private _differOverlayMaps
Type : KeyValueDiffer<string | LayerOptions>
Inherited from CachedMapComponent
Private _overlayMaps
Type : LayerMap
Inherited from CachedMapComponent
Protected layerControl
Type : L.Control.Layers
Inherited from CachedMapComponent
Protected map
Type : L.Map
Inherited from CachedMapComponent

The map object.

Protected oldBaseLayer
Type : L.Control.LayersObject
Default value : {}
Inherited from CachedMapComponent
Protected oldOverlayLayer
Type : L.Control.LayersObject
Default value : {}
Inherited from CachedMapComponent
Protected zoomControl
Type : L.Control.Zoom
Inherited from CachedMapComponent
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%;
    }
}
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""