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

Constructor

constructor(servicesConnector: HelgolandServicesConnector, mapCache: MapCache, kvDiffers: KeyValueDiffers, cd: ChangeDetectorRef)

Defined in libs/map/src/lib/selector/trajectory-map-selector/trajectory-map-selector.component.ts:57

Parameters :

Name	Type	Optional
servicesConnector	`HelgolandServicesConnector`	No
mapCache	`MapCache`	No
kvDiffers	`KeyValueDiffers`	No
cd	`ChangeDetectorRef`	No

Inputs

selectedTimespan
Type : `Timespan`
Defined in libs/map/src/lib/selector/trajectory-map-selector/trajectory-map-selector.component.ts:38

avoidZoomToSelection
Type : `boolean`
Inherited from `MapSelectorComponent`
Defined in `MapSelectorComponent:35`

filter
Type : `HelgolandParameterFilter`
Inherited from `MapSelectorComponent`
Defined in `MapSelectorComponent:32`

fitBoundsMarkerOptions
Type : `L.FitBoundsOptions`
Inherited from `MapSelectorComponent`
Defined in `MapSelectorComponent:50`

markerSelectorGenerator
Type : `MarkerSelectorGenerator`
Inherited from `MapSelectorComponent`
Defined in `MapSelectorComponent:38`

serviceUrl
Type : `string`
Inherited from `MapSelectorComponent`
Defined in `MapSelectorComponent:26`

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)

Outputs

onTimeListDetermined
Type : `EventEmitter<number[]>`
Defined in libs/map/src/lib/selector/trajectory-map-selector/trajectory-map-selector.component.ts:41

onContentLoading
Type : `EventEmitter<boolean>`
Inherited from `MapSelectorComponent`
Defined in `MapSelectorComponent:44`

onNoResultsFound
Type : `EventEmitter<boolean>`
Inherited from `MapSelectorComponent`
Defined in `MapSelectorComponent:53`

onSelected
Type : `EventEmitter<T>`
Inherited from `MapSelectorComponent`
Defined in `MapSelectorComponent:41`

mapInitialized
Type : `EventEmitter<string>`
Inherited from `CachedMapComponent`
Defined in `CachedMapComponent:70`
Informs when initialization is done with map id.

Methods

Private clearMap

clearMap()

Defined in libs/map/src/lib/selector/trajectory-map-selector/trajectory-map-selector.component.ts:117

Returns : void

Private createGeoJson

createGeoJson(profileDataEntry: LocatedProfileDataEntry, dataset: HelgolandDataset)

Defined in libs/map/src/lib/selector/trajectory-map-selector/trajectory-map-selector.component.ts:123

Parameters :

Name	Type	Optional
profileDataEntry	`LocatedProfileDataEntry`	No
dataset	`HelgolandDataset`	No

Returns : L.GeoJSON

Protected drawGeometries

drawGeometries()

Defined in libs/map/src/lib/selector/trajectory-map-selector/trajectory-map-selector.component.ts:82

Returns : void

Private initLayer

initLayer()

Defined in libs/map/src/lib/selector/trajectory-map-selector/trajectory-map-selector.component.ts:113

Returns : void

Public ngOnChanges

ngOnChanges(changes: SimpleChanges)

Defined in libs/map/src/lib/selector/trajectory-map-selector/trajectory-map-selector.component.ts:68

Parameters :

Name	Type	Optional
changes	`SimpleChanges`	No

Returns : void

Protected Abstract drawGeometries

drawGeometries()

Inherited from MapSelectorComponent

Defined in MapSelectorComponent:86

Draws the geometries

Returns : void

Public ngAfterViewInit

ngAfterViewInit()

Inherited from MapSelectorComponent

Defined in MapSelectorComponent:63

Returns : void

Public ngOnChanges

ngOnChanges(changes: SimpleChanges)

Inherited from MapSelectorComponent

Defined in MapSelectorComponent:71

Parameters :

Name	Type	Optional
changes	`SimpleChanges`	No

Returns : void

Protected zoomToMarkerBounds

zoomToMarkerBounds(bounds: L.LatLngBoundsExpression)

Inherited from MapSelectorComponent

Defined in MapSelectorComponent:94

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

Defined in CachedMapComponent:180

Parameters :

Name	Type	Optional
layerOptions	`LayerOptions`	Yes

Returns : void

Private addOverlayMap

addOverlayMap(layerOptions: LayerOptions)

Inherited from CachedMapComponent

Defined in CachedMapComponent:164

Parameters :

Name	Type	Optional
layerOptions	`LayerOptions`	No

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 :

Name	Type	Optional
changes	`SimpleChanges`	No

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 :

Name	Type	Optional
layerOptions	`LayerOptions`	No

Returns : void

Private removeOverlayMap

removeOverlayMap(layerOptions: LayerOptions)

Inherited from CachedMapComponent

Defined in CachedMapComponent:173

Parameters :

Name	Type	Optional
layerOptions	`LayerOptions`	No

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

Properties

Private data

Type : LocatedProfileDataEntry[]

Defined in libs/map/src/lib/selector/trajectory-map-selector/trajectory-map-selector.component.ts:44

Private dataset

Type : HelgolandDataset

Defined in libs/map/src/lib/selector/trajectory-map-selector/trajectory-map-selector.component.ts:45

Private defaultStyle

Type : L.PathOptions

Default value :

{
        color: 'red',
        weight: 5,
        opacity: 0.65
    }

Defined in libs/map/src/lib/selector/trajectory-map-selector/trajectory-map-selector.component.ts:47

Private highlightStyle

Type : L.PathOptions

Default value :

{
        color: 'blue',
        weight: 7,
        opacity: 1
    }

Defined in libs/map/src/lib/selector/trajectory-map-selector/trajectory-map-selector.component.ts:53

Private layer

Type : L.FeatureGroup

Defined in libs/map/src/lib/selector/trajectory-map-selector/trajectory-map-selector.component.ts:43

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 * 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

File

Extends

Implements

Metadata

Index

Properties

Methods

Inputs

Outputs

Constructor

Inputs

Outputs

Methods

Properties

result-matching ""

No results matching ""