Screaming Stone Design

A Better Rain Radar

Technologies: REST API, AJAX, JSON, Javascript, CSS, HTML

A little while ago I wrote about the awful new Met Éireann website and the utterly useless new rain radar it displays.

I was bothered by this and wanted something I could actually use, so I worked out how Met Éireann's rain radar API is set up so I could gain access to its rain maps.

Once this was done I designed a simple page with a few DIVs to hold the map, the rain radar images and the time the images were recorded and then coded some Javascript to read from Met Éireann's API and pull the images into the page.

The Javascript creates a new DIV element for each time-slice provided by the API and within that elements are created to hold the individual rain radar images - 12 for each time-slice - and their placement is defined by the CSS which I added to the page.

a better rain radar

I then coded some event listeners which would work out the position of the cursor over the map and dynamically hide or show images as the cursor moved.

Once the page is loaded you just move your cursor left and right over the map and you can instantly see how much rain there is and which way it is moving.

The result of this is a better rain radar which loads in a tiny fraction of the time taken by the awful Met Éireann website and will allow you to gauge, within seconds, how long it will be before you can expect the rain to arrive in your area.

In order to make this work on mobile I added a small amount of CSS to shrink the map to an appropriate size to fit the screen.

Unfortunately it seems Safari doesn't support CSS transforms so it will not work on your iPhone.

I have tested it on an Android phone running Firefox for Android and it works perfectly.

I might come back to this in the future and build a new version which uses CANVAS or SVG so that it runs everywhere on everything but for now it suits my needs.