Javascript & jQuery: Accessing the UK Environment Agency’s data API

The UK Environment Agency (EA) provides free access to a lot of its real-time measurements, forecasts, and historical environmental data through its APIs. Full API specifications are available through the Environment Agency website. The APIs available at time of writing are:

Queries to the API return JSON data packets from which you can extract the information you need. Using Javascript and jQuery, this is easy to do. The EA documentation gives detailed information about the queries you can use and the data returned.

Below I’ve included example code for using an API call to the EA for a specific location and then extracting the current flood alert status. The alert value (in a range of 1-4) is used to change an icon (red, amber, or green) displayed on a webpage. If the value is null (because there is no current alert status), a grey icon is displayed. The call is repeated every 15 minutes – which is the frequency that the data is updated on the EA site.


$(document).ready(function() {
  // Get flood status JSON data from Environment Agency for Malmesbury, Wiltshire every 15 minutes
  var floodDataUrl = "https://environment.data.gov.uk/flood-monitoring/id/floods?lat=51.580872&long=-2.094819&dist=1";
  setInterval(function(){
    $.ajax({
      url : floodDataUrl,
      method : 'GET',
      success : function (data) {
        // Extract the data we need - Flood Warning Severity Level
        var floodWarningSeverityLevel = "";
        if (data.items.severityLevel != null) {
          floodWarningSeverityLevel = data.items.severityLevel.toString();
        }
        // Choose flood status icon
        var floodIcon = "flood-status-grey.svg";
        switch (floodWarningSeverityLevel) {
          case "1":
          case "2":
            floodIcon = "flood-status-red.svg";
            break;
          case "3":
            floodIcon = "flood-status-amber.svg";
            break;
          case "4":
            floodIcon = "flood-status-green.svg";
            break;
        }
        // Update flood alert status based on the extracted data
        //  preceding code
        var imgPrecedingCode = "<img class='img-responsive navbar-alert' src='./images/";
        //  following code
        var imgFollowingCode = "' alt=\"Flood Status\" />";
        // Update icon
        $("#floodStatus").html(imgPrecedingCode + floodIcon + imgFollowingCode);
      }
    });
  }, 900000);
}
              
Creative Commons Attribution-ShareAlike License

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to Top