File

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

Extends

MapSelectorComponent

Implements

OnChanges AfterViewInit

Metadata

selector n52-profile-trajectory-map-selector
styleUrls ../map-selector.component.scss
templateUrl ../map-selector.component.html

Index

Properties
Methods
Inputs
Outputs

Constructor

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

Inputs

selectedTimespan
Type : Timespan
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

onTimeListDetermined
Type : EventEmitter<number[]>
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

Private clearMap
clearMap()
Returns : void
Private createGeoJson
createGeoJson(profileDataEntry: LocatedProfileDataEntry, dataset: HelgolandDataset)
Parameters :
Name Type Optional
profileDataEntry LocatedProfileDataEntry No
dataset HelgolandDataset No
Returns : L.GeoJSON
Protected drawGeometries
drawGeometries()
Returns : void
Private initLayer
initLayer()
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

Private data
Type : LocatedProfileDataEntry[]
Private dataset
Type : HelgolandDataset
Private defaultStyle
Type : L.PathOptions
Default value : { color: 'red', weight: 5, opacity: 0.65 }
Private highlightStyle
Type : L.PathOptions
Default value : { color: 'blue', weight: 7, opacity: 1 }
Private layer
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,
    EventEmitter,
    Input,
    KeyValueDiffers,
    OnChanges,
    Output,
    SimpleChanges,
} from '@angular/core';
import {
    HelgolandDataset,
    HelgolandLocatedProfileData,
    HelgolandProfile,
    HelgolandServicesConnector,
    LocatedProfileDataEntry,
    Timespan,
} from '@helgoland/core';

import { MapCache } from '../../base/map-cache.service';
import { MapSelectorComponent } from '../map-selector.component';
import { TrajectoryResult } from '../model/trajectory-result';

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

    @Input()
    public selectedTimespan: Timespan;

    @Output()
    public onTimeListDetermined: EventEmitter<number[]> = new EventEmitter();

    private layer: L.FeatureGroup;
    private data: LocatedProfileDataEntry[];
    private dataset: HelgolandDataset;

    private defaultStyle: L.PathOptions = {
        color: 'red',
        weight: 5,
        opacity: 0.65
    };

    private highlightStyle: L.PathOptions = {
        color: 'blue',
        weight: 7,
        opacity: 1
    };

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

    public ngOnChanges(changes: SimpleChanges) {
        super.ngOnChanges(changes);
        if (changes.selectedTimespan && this.selectedTimespan && this.map) {
            this.clearMap();
            this.initLayer();
            this.data.forEach((entry) => {
                if (this.selectedTimespan.from <= entry.timestamp && entry.timestamp <= this.selectedTimespan.to) {
                    this.layer.addLayer(this.createGeoJson(entry, this.dataset));
                }
            });
            this.layer.addTo(this.map);
        }
    }

    protected drawGeometries() {
        this.onContentLoading.emit(true);
        if (!this.serviceUrl) { return; }
        this.servicesConnector.getDatasets(this.serviceUrl, { ...this.filter, expanded: true }).subscribe((datasets) => {
            datasets.forEach((dataset) => {
                if (dataset instanceof HelgolandProfile) {
                    this.dataset = dataset;
                    const timespan = new Timespan(dataset.firstValue.timestamp, dataset.lastValue.timestamp);
                    this.servicesConnector.getDatasetData(dataset, timespan)
                        .subscribe((data: HelgolandLocatedProfileData) => {
                            if (this.map && data.values instanceof Array) {
                                this.initLayer();
                                this.data = [];
                                const timelist: number[] = [];
                                data.values.forEach((entry) => {
                                    this.data.push(entry);
                                    const geojson = this.createGeoJson(entry, dataset);
                                    timelist.push(entry.timestamp);
                                    this.layer.addLayer(geojson);
                                });
                                this.onTimeListDetermined.emit(timelist);
                                this.layer.addTo(this.map);
                                this.zoomToMarkerBounds(this.layer.getBounds());
                            }
                            this.onContentLoading.emit(false);
                        });
                }
            });
        });
    }

    private initLayer() {
        this.layer = L.markerClusterGroup({ animate: false });
    }

    private clearMap() {
        if (this.map && this.layer) {
            this.map.removeLayer(this.layer);
        }
    }

    private createGeoJson(profileDataEntry: LocatedProfileDataEntry, dataset: HelgolandDataset): L.GeoJSON {
        const geojson = new L.GeoJSON(profileDataEntry.geometry);
        geojson.setStyle(this.defaultStyle);
        geojson.on('click', () => {
            this.onSelected.emit({
                dataset,
                data: profileDataEntry
            });
        });
        geojson.on('mouseover', () => {
            geojson.setStyle(this.highlightStyle);
            geojson.bringToFront();
        });
        geojson.on('mouseout', () => {
            geojson.setStyle(this.defaultStyle);
        });
        return geojson;
    }
}
<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 ""