libs/map/src/lib/selector/station-map-selector/station-map-selector.component.ts
selector | n52-station-map-selector |
styleUrls | ../map-selector.component.scss |
templateUrl | ../map-selector.component.html |
Properties |
|
Methods |
|
Inputs |
Outputs |
constructor(statusIntervalResolver: StatusIntervalResolverService, servicesConnector: HelgolandServicesConnector, mapCache: MapCache, kvDiffers: KeyValueDiffers, cd: ChangeDetectorRef)
|
||||||||||||||||||
Parameters :
|
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
|
|
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) |
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. |
Protected createColoredMarker | |||||||||
createColoredMarker(station: HelgolandPlatform, color: string)
|
|||||||||
Parameters :
Returns :
Layer
|
Protected createDefaultColoredMarker | ||||||
createDefaultColoredMarker(station: HelgolandPlatform)
|
||||||
Parameters :
Returns :
Layer
|
Protected createDefaultGeometry | ||||||
createDefaultGeometry(station: HelgolandPlatform)
|
||||||
Parameters :
Returns :
Layer
|
Protected createFilledMarker | ||||||||||||
createFilledMarker(station: HelgolandPlatform, color: string, radius: number)
|
||||||||||||
Parameters :
Returns :
Layer
|
Protected createStationGeometries |
createStationGeometries()
|
Returns :
void
|
Protected createValuedMarkers |
createValuedMarkers()
|
Returns :
void
|
Protected drawGeometries |
drawGeometries()
|
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
|
Protected markerFeatureGroup |
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,
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;
}
}