This tutorial gives a short instruction on how to add a last value map into your app.
Add Component somewhere to HTML
<n52-last-value-map-selector [lastValueSeriesIDs]="lastValueSeriesIDs" [lastValuePresentation]="lastValuePresentation" [fitBoundsMarkerOptions]="fitBoundsMarkerOptions"></n52-last-value-map-selector>Sample configuration for the component:
public lastValueSeriesIDs = [ 'https://www.fluggs.de/sos2/api/v1/__51', 'https://www.fluggs.de/sos2/api/v1/__78', 'https://www.fluggs.de/sos2/api/v1/__95', 'https://www.fluggs.de/sos2/api/v1/__54' ];
public lastValuePresentation = LastValuePresentation.Textual;
public fitBoundsMarkerOptions: FitBoundsOptions = { padding: [20, 20] };lastValueSeriesIDs - list of internal series idslastValuePresentation - type of last value presentation, currently the following options are possible: herefitBoundsMarkerOptions - additional adjustments, while zoom to the marker (fitbounds options in leaflet)Add the css to style the label presentation. Play around to find a good solution for your use case:
.last-value-container {
background-color: white;
padding: 3px;
border: 2px blue solid;
border-radius: 5px;
height: auto !important;
width: auto !important;
text-align: center;
}
.last-value-container .last-value-date {
display: none;
white-space: pre;
}
.last-value-container:hover {
display: inherit;
z-index: 999999 !important;
}
.last-value-container:hover .last-value-date {
display: inherit;
}To adjust the default LastValueLabelGeneratorService you can write your own service by extend LastValueLabelGenerator
@NgModule({
...
imports: [
...
HelgolandMapSelectorModule.forRoot({
lastValueLabelGeneratorService: YourCustomizedLastValueLabelGeneratorService
}),
...
],
...
})
export class AppModule { }