List widget
You can freely integrate a widget containing a list of gauges from a certain region (geographical bounding box) and their current waterlevel into your website.
Example output
Integration
You can customize the iframe's content using HTML and CSS.
<iframe
src="https://ris.pegelalarm.at/paw/areawidget.html?bBoxLat1=48.1521857926752&bBoxLon1=13.8880810930436&bBoxLat2=47.9683281339185&bBoxLon2=14.3811237315271&customerCss=https://www.kremsmuenster.at/css/startseite2016__pegelalarm.css&lang=de"
title="List of gauges"
scrolling="no">
</iframe>Hint: The list is sorted by the distance of each station (gauge) to the center of your given bounding box. Thus, stations closer to the middle of the bounding box are listed first.
Attributes
Response attribute description
| Name | Optional | Example | Description |
|---|---|---|---|
| src | no | https://pegelalarm.at/paw/areawidget.html | |
| src.bBoxLat1 | no | 48.15218579267 | Latitude of North-West point of the boundingbox |
| src.bBoxLon1 | no | 13.88808109304 | Longitude of North-West point of the boundingbox |
| src.bBoxLat2 | no | 47.96832813391 | Latitude of South-East point of the boundingbox |
| src.bBoxLon2 | no | 14.38112373152 | Longitude of South-East point of the boundingbox |
| src.customerCss | yes | https://... | Define a URL to your custom CSS file. |
| src.lang | yes | en, de, it | The language in which the chart should be displayed. |
| src.scrolling | yes | yes, no |
Customize widget colors to your company brand
If you want to adapt the look of the iFrame to match your containing website, you can customize the iFrame using CSS. See above's parameter customerCss. We have prepared a few example CSS files to fasten your implementation.
- Download the example CSS file from our server: grey-chart.css
- Adapt the CSS file to your UI needs
- Upload the CSS file to your server
- Refer to the CSS-file in the URL-parameter 'customerCss' of the 'src'-URL