tirolGuide.md

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

GET https://rest.alpsolut.eu/v1/geo/stations?dateStart=2023-01-01T00:00:00Z&dateEnd=2023-01-15T00:00:00Z&stage=SNOWPACK&parameterCode=HS_mod

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&parameterCode=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