NiwaWeather Designed for embedding.

My team at NIWA and I have spent the last few months working very hard on a system that allows NIWA’s EcoConnect web services to be made available as visual components within web sites. The first result of this is the rather stylish

This provides an instant at a glance summary of the weather for the day. You can tell the mood of the day, and you can easily spot those windows of opportunity – a dry spell or rain showers.

The interactive website is great and I’ll hope that you will bookmark your local page. But I’d also like to demonstrate that we have an embeddable mode. This allows you to put the key weather forecast elements into your own website.

Like this for Auckland:

And this for Dunedin:

The key is to add /kiosk after the location in the URL. This gives you just the interactive graphical elements and leaves off the rest of the website content and chrome.

If you do use this in your website be sure to give credit to NIWA and provide a link to the main weather site: Also be sure to read the DISCLAIMER

If you are running a commercial site then you will need to get an agreement from NIWA and they might want to charge you if traffic is high.

We can also do special locations – NIWA installed a local weather station at Mystery Creek for fieldays 2013 where the site was launched. The NiwaWeather kiosk appeared on the Giant display screens, on stand display and on the fieldays website .


The Server

The service url is

The full path is:{locationList}/{displayMode}/{trackingMode}/{extras}

Location list

The first parameter is one or more location names. The forecast is repeated for each location given in a comma separated list.

1. single location e..g Auckland
2. Names with spaces use underscores e.g. Mystery_Creek
3. Multiple locations e.g Auckland,Wellington – shows a list of panels.

The stations list is available at /stationsAvailable this returns a javascript variable containing the stations list.

Example of,Christchurch,Timaru/kiosk


The mode parameter controls what is on the page and the number of hours showing:

  1. /weather (default) – shows the title bar with the previous locations, the hours, days, main page body text and footer
  2. /kiosk – shows hours and days only
  3. /ribbon – shows hours only with 144 hours showing – for testing purposes only.


The track parameter controls how the page is presented and updates over time.

  1. hour – keep the infoText in the left hand column and move the day left once each hour. Default for weather mode
  2. day – centre the day in the window and track the infoText across the page. Default for kiosk mode
    1. Extra features

      Controls the appearance of extra features. You can add multiple extras with a comma separated list.

      1. textOnly – replace the hours and days SVG graphics with a pure HTML table.
      2. temperatureChart – display a temperature chart on the hours graphic.
      3. minMaxTemperature – display min and max daily temperatures on the hours graphic. (can be combined with 2).

      If we detect that your browser does not support SVG we will switch to textOnly automatically.

      Other URLS
      /about – Shows the about page.
      /weathermap/rain – Shows the rainfall map ( may change this) .

      This is just the beginning – lots more to come.


Comments are disabled for this post