Alpsolut widgets integration
In this guide we briefly explain how to use Alpsolut API to fetch the station data and how to integrate our widgets in a HTML page.
1. API to get all stations
To fetch the list of all stations with the last measures call this API
API Parametes
| Name | Type | Description |
|---|---|---|
| parameterCode | string | Name of the parameter for which you want to load data |
| dateStart | Date iso 8601 format | Start date for the measured data |
| dateEnd | Date iso 8601 format | End date for the measured data. To load also the forecast date use a future date (e.g. now + 5 days) |
| stage | string: ORIGINAL,WEATHER,SNOPACK | Level of data elaboration. |
NOTES:
- You could fetch data of one parameter at a time.
- The max range of the data (dateEnd-dateStar) is 15 days
- For your use case as Stage use always SNOWPACK
Authentication
This API is authenticated via API-KEY. The HEADER of the request must contain the following property:
X-API-KEY: <YOUR_API_KEY>
Curl example
curl --location --request GET 'https://rest.alpsolut.eu/v1/geo/stations?dateStart=2022-12-01T00:00:00Z&dateEnd=2022-12-14T00:00:00Z&stage=SNOWPACK¶meterCode=HS_mod' \ --header 'X-API-KEY: <YOUR_API_KEY>'
Example of response
{
"features": [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
10.305964,
46.453565,
2300
]
},
"properties": {
"id": 646,
"code": "OGAS2",
"name": "Oga S.Colombano",
"dataSets": [
{
"dataSetId": 542,
"stage": "SNOWPACK",
"aspect": "WEST",
"slopeAngle": 38,
"slopeAzimuth": 270,
"forecastModel": "METEOBLUE",
"forecastStartsAt": "2023-01-15T18:00:00Z",
"timestamps": [
"2023-01-15T00:00:00Z",
"2023-01-15T01:00:00Z",
...
],
"values": [
0.8442100000000001,
0.8437399999999999,
...
]
},
{
"dataSetId": 543,
"stage": "SNOWPACK",
"aspect": "NORTH",
"slopeAngle": 38,
"slopeAzimuth": 0,
"forecastModel": "METEOBLUE",
"forecastStartsAt": "2023-01-15T18:00:00Z",
"timestamps": [
"2023-01-15T00:00:00Z",
"2023-01-15T01:00:00Z",
...
],
"values": [
0.8729399999999999,
0.87244,
...
]
},
{
"dataSetId": 545,
"stage": "SNOWPACK",
"aspect": "EAST",
"slopeAngle": 38,
"slopeAzimuth": 90,
"forecastModel": "METEOBLUE",
"forecastStartsAt": "2023-01-15T18:00:00Z",
"timestamps": [
"2023-01-15T00:00:00Z",
"2023-01-15T01:00:00Z",
...
],
"values": [
0.8656,
0.8651099999999999,
...
]
},
{
"dataSetId": 546,
"stage": "SNOWPACK",
"aspect": "SOUTH",
"slopeAngle": 38,
"slopeAzimuth": 180,
"forecastModel": "METEOBLUE",
"forecastStartsAt": "2023-01-15T18:00:00Z",
"timestamps": [
"2023-01-15T00:00:00Z",
"2023-01-15T01:00:00Z",
...
],
"values": [
0.61926,
0.6189800000000001,
...
]
},
{
"dataSetId": 547,
"stage": "SNOWPACK",
"aspect": "MAIN",
"slopeAngle": 0,
"slopeAzimuth": 0,
"forecastModel": "METEOBLUE",
"forecastStartsAt": "2023-01-15T18:00:00Z",
"timestamps": [
"2023-01-15T00:00:00Z",
"2023-01-15T01:00:00Z",
...
],
"values": [
0.7732800000000001,
0.77273,
...
]
}
]
}
}
]
}
Response key concepts
The attribute properties represent a station with its id, code, name. Each station could have one or more dataSets. A dataSet is a group of data coming from the station or from a data elaboration. In the above example there are 5 data sets. Each one of them is related to the data from a specific aspect: NORTH, SOUTH, EAST, WEST and FLAT (also called MAIN)
The forecastModel and forecastStartsAt attributes are present only if the data set contain some forecast data. They represent the model used to compute the forecast (COSMO or METEOBLUE) and the timestamp of the first forecast sample.
2. Widget integration
The widget integration require that you add 3 pieces of code in your HTML file.
IMPORT LIBRAY
<script src="https://dashboard.alpsolut.eu/graphs/stable/embed.js" async></script>CREATE HTML ELEMENT
<div id="alpsolut"></div>ADD JS SCRIPTS
<script type="text/javascript">
window.addEventListener('load', function () {
new ALPsolut.embed.ViewerEmbedding('#alpsolut', {
apiKey: '<YOUR API KEY>',
configurationId: 'cbc610ef-7b29-46c8-b070-333d339c2cd4',
uiSettings: {
aliasSelectionMode: 'none',
},
externalParams: {
datesPresetKey: 'forecast',
aliasId: 'AliasId (aka dataSetId if you use station API)',
},
datesPresets:{
forecastBackDays: 5,
forecastFwdDays: 5,
options: ['season', '1m', '1w', 'forecast']
}
})
});
</script>Full example - stratigraphies + RTA widget
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://dashboard.alpsolut.eu/graphs/stable/embed.js" async></script>
</head>
<body>
<div id="alpsolut"></div>
<script type="text/javascript">
window.addEventListener('load', function () {
new ALPsolut.embed.ViewerEmbedding('#alpsolut', {
apiKey: '<YOUR API KEY>',
configurationId: 'cbc610ef-7b29-46c8-b070-333d339c2cd4',
uiSettings: {
aliasSelectionMode: 'none',
},
externalParams: {
datesPresetKey: 'forecast',
aliasId: '<DATA SET ID>',
},
datesPresets:{
forecastBackDays: 5,
forecastFwdDays: 5,
options: ['season', '1m', '1w', 'forecast']
}
})
});
</script>
</body>
</html>Full example - wind drift widget
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://dashboard.alpsolut.eu/graphs/stable/embed.js" async></script>
</head>
<body>
<div id="alpsolut"></div>
<script type="text/javascript">
window.addEventListener('load', function () {
new ALPsolut.embed.ViewerEmbedding('#alpsolut', {
apiKey: '<YOUR API KEY>',
configurationId: 'f3ecf8fb-3fd7-427c-99fd-582750be236d',
uiSettings: {
aliasSelectionMode: 'none',
},
externalParams: {
datesPresetKey: 'forecast',
aliasId: '<DATA SET ID>',
},
datesPresets:{
forecastBackDays: 5,
forecastFwdDays: 5,
options: ['season', '1m', '1w', 'forecast']
}
})
});
</script>
</body>
</html>** The only difference is the configurationId
Author
Daniel Cantoni - it@alpsolut.eu
Last Update
2023-01-15