File

libs/map/src/lib/selector/station-map-selector/station-map-selector.component.ts

Extends

MapSelectorComponent

Implements

OnChanges AfterViewInit

Metadata

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

Index

Properties
Methods
Inputs
Outputs

Constructor

constructor(statusIntervalResolver: StatusIntervalResolverService, servicesConnector: HelgolandServicesConnector, mapCache: MapCache, kvDiffers: KeyValueDiffers, cd: ChangeDetectorRef)
Parameters :
Name Type Optional
statusIntervalResolver StatusIntervalResolverService No
servicesConnector HelgolandServicesConnector No
mapCache MapCache No
kvDiffers KeyValueDiffers No
cd ChangeDetectorRef No

Inputs

cluster
Type : boolean
ignoreStatusIntervalIfBeforeDuration
Default value : Infinity

Ignores all Statusintervals where the timestamp is before a given duration in milliseconds and draws instead the default marker.

statusIntervals
Type : boolean
avoidZoomToSelection
Type : boolean
Inherited from MapSelectorComponent
filter
Type : HelgolandParameterFilter
Inherited from MapSelectorComponent
fitBoundsMarkerOptions
Type : L.FitBoundsOptions
Inherited from MapSelectorComponent
markerSelectorGenerator
Type : MarkerSelectorGenerator
Inherited from MapSelectorComponent
serviceUrl
Type : string
Inherited from MapSelectorComponent
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

onContentLoading
Type : EventEmitter<boolean>
Inherited from MapSelectorComponent
onNoResultsFound
Type : EventEmitter<boolean>
Inherited from MapSelectorComponent
onSelected
Type : EventEmitter<T>
Inherited from MapSelectorComponent
mapInitialized
Type : EventEmitter<string>
Inherited from CachedMapComponent

Informs when initialization is done with map id.

Methods

Protected createColoredMarker
createColoredMarker(station: HelgolandPlatform, color: string)
Parameters :
Name Type Optional
station HelgolandPlatform No
color string No
Returns : Layer
Protected createDefaultColoredMarker
createDefaultColoredMarker(station: HelgolandPlatform)
Parameters :
Name Type Optional
station HelgolandPlatform No
Returns : Layer
Protected createDefaultGeometry
createDefaultGeometry(station: HelgolandPlatform)
Parameters :
Name Type Optional
station HelgolandPlatform No
Returns : Layer
Protected createFilledMarker
createFilledMarker(station: HelgolandPlatform, color: string, radius: number)
Parameters :
Name Type Optional
station HelgolandPlatform No
color string No
radius number No
Returns : Layer
Protected createStationGeometries
createStationGeometries()
Returns : void
Protected createValuedMarkers
createValuedMarkers()
Returns : void
Protected drawGeometries
drawGeometries()
Returns : void
Public ngOnChanges
ngOnChanges(changes: SimpleChanges)
Parameters :
Name Type Optional
changes SimpleChanges No
Returns : void
Protected Abstract drawGeometries
drawGeometries()
Inherited from MapSelectorComponent

Draws the geometries

Returns : void
Public ngAfterViewInit
ngAfterViewInit()
Inherited from MapSelectorComponent
Returns : void
Public ngOnChanges
ngOnChanges(changes: SimpleChanges)
Inherited from MapSelectorComponent
Parameters :
Name Type Optional
changes SimpleChanges No
Returns : void
Protected zoomToMarkerBounds
zoomToMarkerBounds(bounds: L.LatLngBoundsExpression)
Inherited from MapSelectorComponent

Zooms to the given bounds

Parameters :
Name Type Optional Description
bounds L.LatLngBoundsExpression No

where to zoom

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

Protected markerFeatureGroup
Type : L.FeatureGroup
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 * as L from 'leaflet';
import 'leaflet.markercluster';

import {
    AfterViewInit,
    ChangeDetectorRef,
    Component,
    Input,
    KeyValueDiffers,
    OnChanges,
    SimpleChanges,
} from '@angular/core';
import {
    StatusIntervalResolverService,
    TimeseriesExtras,
    HelgolandServicesConnector,
    HelgolandTimeseries,
    HelgolandPlatform,
    HelgolandParameterFilter
} from '@helgoland/core';
import GeoJSON from 'geojson';
import { Observable } from 'rxjs';

import { MapCache } from '../../base/map-cache.service';
import { MapSelectorComponent } from '../map-selector.component';
import { Layer } from 'leaflet';
import { forkJoin } from 'rxjs';

@Component({
    selector: 'n52-station-map-selector',
    templateUrl: '../map-selector.component.html',
    styleUrls: ['../map-selector.component.scss']
})
export class StationMapSelectorComponent extends MapSelectorComponent<HelgolandPlatform> implements OnChanges, AfterViewInit {

    @Input()
    public cluster: boolean;

    @Input()
    public statusIntervals: boolean;

    /**
     * Ignores all Statusintervals where the timestamp is before a given duration in milliseconds and draws instead the default marker.
     */
    @Input()
    public ignoreStatusIntervalIfBeforeDuration = Infinity;

    protected markerFeatureGroup: L.FeatureGroup;

    constructor(
        protected statusIntervalResolver: StatusIntervalResolverService,
        protected servicesConnector: HelgolandServicesConnector,
        protected mapCache: MapCache,
        protected kvDiffers: KeyValueDiffers,
        protected cd: ChangeDetectorRef
    ) {
        super(mapCache, kvDiffers, cd);
    }

    public ngOnChanges(changes: SimpleChanges) {
        super.ngOnChanges(changes);
        if (this.map && changes.statusIntervals) { this.drawGeometries(); }
    }

    protected drawGeometries() {
        this.onContentLoading.emit(true);
        if (this.map && this.markerFeatureGroup) { this.map.removeLayer(this.markerFeatureGroup); }
        if (this.statusIntervals && this.filter && this.filter.phenomenon) {
            this.createValuedMarkers();
        } else {
            this.createStationGeometries();
        }
    }

    protected createValuedMarkers() {
        const tempFilter: HelgolandParameterFilter = {
            phenomenon: this.filter.phenomenon,
            expanded: true
        };
        this.servicesConnector.getDatasets(this.serviceUrl, tempFilter).subscribe(
            datasets => {
                this.markerFeatureGroup = L.featureGroup();
                const obsList: Array<Observable<TimeseriesExtras>> = [];
                datasets.forEach((ts: HelgolandTimeseries) => {
                    const obs = this.servicesConnector.getDatasetExtras(ts.internalId);
                    obsList.push(obs);
                    obs.subscribe((extras: TimeseriesExtras) => {
                        let marker;
                        if (extras.statusIntervals) {
                            if ((ts.lastValue.timestamp) > new Date().getTime() - this.ignoreStatusIntervalIfBeforeDuration) {
                                const interval = this.statusIntervalResolver.getMatchingInterval(ts.lastValue.value, extras.statusIntervals);
                                if (interval) { marker = this.createColoredMarker(ts.platform, interval.color); }
                            }
                        }
                        if (!marker) { marker = this.createDefaultColoredMarker(ts.platform); }
                        marker.on('click', () => {
                            this.onSelected.emit(ts.platform);
                        });
                        this.markerFeatureGroup.addLayer(marker);
                    });
                });

                forkJoin(obsList).subscribe(() => {
                    this.zoomToMarkerBounds(this.markerFeatureGroup.getBounds());
                    if (this.map) { this.map.invalidateSize(); }
                    this.onContentLoading.emit(false);
                });

                if (this.map) { this.markerFeatureGroup.addTo(this.map); }
            },
            error => console.error(error)
        );
    }

    protected createColoredMarker(station: HelgolandPlatform, color: string): Layer {
        if (this.markerSelectorGenerator && this.markerSelectorGenerator.createFilledMarker) {
            return this.markerSelectorGenerator.createFilledMarker(station, color);
        }
        return this.createFilledMarker(station, color, 10);
    }

    protected createDefaultColoredMarker(station: HelgolandPlatform): Layer {
        if (this.markerSelectorGenerator && this.markerSelectorGenerator.createDefaultFilledMarker) {
            return this.markerSelectorGenerator.createDefaultFilledMarker(station);
        }
        return this.createFilledMarker(station, '#000', 10);
    }

    protected createFilledMarker(station: HelgolandPlatform, color: string, radius: number): Layer {
        let geometry: Layer;
        if (station.geometry.type === 'Point') {
            const point = station.geometry as GeoJSON.Point;
            geometry = L.circleMarker([point.coordinates[1], point.coordinates[0]], {
                color: '#000',
                fillColor: color,
                fillOpacity: 0.8,
                radius: 10,
                weight: 2
            });
        } else {
            geometry = L.geoJSON(station.geometry, {
                style: (feature) => {
                    return {
                        color: '#000',
                        fillColor: color,
                        fillOpacity: 0.8,
                        weight: 2
                    };
                }
            });
        }
        if (geometry) {
            geometry.on('click', () => {
                this.onSelected.emit(station);
            });
            return geometry;
        }
    }

    protected createStationGeometries() {
        this.servicesConnector.getPlatforms(this.serviceUrl, this.filter)
            .subscribe((res) => {
                if (this.cluster) {
                    this.markerFeatureGroup = L.markerClusterGroup({ animate: true });
                } else {
                    this.markerFeatureGroup = L.featureGroup();
                }
                if (res instanceof Array && res.length > 0) {
                    res.forEach((entry) => {
                        const marker = this.createDefaultGeometry(entry);
                        if (marker) { this.markerFeatureGroup.addLayer(marker); }
                    });
                    this.markerFeatureGroup.addTo(this.map);
                    this.zoomToMarkerBounds(this.markerFeatureGroup.getBounds());
                } else {
                    this.onNoResultsFound.emit(true);
                }
                this.map.invalidateSize();
                this.onContentLoading.emit(false);
            });
    }

    protected createDefaultGeometry(station: HelgolandPlatform): Layer {
        let layer: Layer;
        if (this.markerSelectorGenerator && this.markerSelectorGenerator.createDefaultGeometry) {
            layer = this.markerSelectorGenerator.createDefaultGeometry(station);
        } else if (station.geometry) {
            layer = L.geoJSON(station.geometry);
        } else {
            console.error(station.id + ' has no geometry');
        }
        // register click event
        if (layer) { layer.on('click', () => this.onSelected.emit(station)); }
        return layer;
    }
}
<div class="map-wrapper" style="height: 100%;">
  <div [attr.id]="mapId" class="map-viewer"></div>
</div>

../map-selector.component.scss

:host {
    position: relative;
    .map-viewer {
        width: 100%;
        height: 100%;
    }
    .map-notifier {
        position: absolute;
        bottom: 10px;
        left: 10px;
        z-index: 1001;
        width: 120px;
        height: 70px;
        padding: 5px;
        opacity: 0.8;
        text-align: center;
    }
}
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""