Skip to content

List widget

Johannes Strassmayr edited this page Feb 27, 2023 · 5 revisions

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

List of gauges from an area


You can customize the iframe's content using HTML and CSS.

	title="List of gauges" 

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.


Response attribute description

Name Optional Example Description
src no
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.

  1. Download the example CSS file from our server: grey-chart.css
  2. Adapt the CSS file to your UI needs
  3. Upload the CSS file to your server
  4. Refer to the CSS-file in the URL-parameter 'customerCss' of the 'src'-URL