libs/map/src/lib/selector/trajectory-map-selector/trajectory-map-selector.component.ts
selector | n52-profile-trajectory-map-selector |
styleUrls | ../map-selector.component.scss |
templateUrl | ../map-selector.component.html |
Properties |
|
Methods |
|
Inputs |
Outputs |
constructor(servicesConnector: HelgolandServicesConnector, mapCache: MapCache, kvDiffers: KeyValueDiffers, cd: ChangeDetectorRef)
|
|||||||||||||||
Parameters :
|
selectedTimespan | |
Type : Timespan
|
|
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) |
onTimeListDetermined | |
Type : EventEmitter<number[]>
|
|
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. |
Private clearMap |
clearMap()
|
Returns :
void
|
Private createGeoJson | |||||||||
createGeoJson(profileDataEntry: LocatedProfileDataEntry, dataset: HelgolandDataset)
|
|||||||||
Parameters :
Returns :
L.GeoJSON
|
Protected drawGeometries |
drawGeometries()
|
Returns :
void
|
Private initLayer |
initLayer()
|
Returns :
void
|
Public ngOnChanges | ||||||
ngOnChanges(changes: SimpleChanges)
|
||||||
Parameters :
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 :
Returns :
void
|
Protected zoomToMarkerBounds | ||||||||
zoomToMarkerBounds(bounds: L.LatLngBoundsExpression)
|
||||||||
Inherited from
MapSelectorComponent
|
||||||||
Defined in
MapSelectorComponent:94
|
||||||||
Zooms to the given bounds
Parameters :
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 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
|
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;
}
}