OPC IT. Managed services and web development in Canberra.

Case Study: MDBA Live Data

Date: 
25 February 2015
Authored by: 
Toby Wild

Project Overview

The Murray Darling Basin Authority is responsible for the management and maintenance of a large number of water ways in the Basin.

Currently, there are a number of sites located along the Murray River system, from Biggara in the North East of Victoria, all the way through to Encounter Bay in South Australia.  These sites are monitored for a number of data points, including water flow, rainfall and more.

This ‘Live River’ system data is currently available on the MDBA website as a series of static clickable images for navigation between sites, with each location having static graph images available outlining the yearly or monthly data.

MDBA decided to upgrade this technology and commissioned a prototype website be developed using Drupal and Open Layers to provide interactivity to the data.

Once the prototype was completed, OPC was brought in to review the site, and assist the MDBA staff in revising the site until it was production ready.

Why Drupal was chosen

Drupal was chosen, as it fit with the existing environment available at the MDBA.  As their existing corporate website was already developed in Drupal, and their in-house staff was already used to the system.

Goals, requirements and outcome

OPC’s goals in the project were to review how the data was being used and greatly improve performance of the website which was suffering due to an extremely large DOM (Document Object Model) on the homepage.

In addition to this, the site had to be visually improved and ready for a production deployment.

The major hurdle early in the process was improving the performance of the homepage.  At the beginning of the project the homepage was an Openlayers Map showing a custom map of the Murray Darling Basin with a View displaying around 70 data locations.  Each of these locations would contain roughly six data points. 

With each of these 420 data points having their HTML markup configured in the View in order to easily pass it to the UI on the homepage, this incurred an incredibly huge overhead on the homepage.  The solution to this problem was instead for the View to pass only the required value, and a Javascript would construct the markup on the homepage on an as needed basis.

While this increased processing time very slightly, we were able to cut down the number of characters being passed by a massive 90%.  This lowered the homepage load time by a significant margin.

In addition to the performance issues, we were also tasked with visually improving the website.

With the homepage of the site dominated by a large interactive Map, we were required to create our own custom map tiles in order to highlight the Murray Darling Basin area.

For this, we collaborated with the MDBA’s own Geospatial Information Specialist and obtained a number of ‘Shape Files’, which are a common definition file for geographical data.

These Shape Files were loaded into a free software called ‘Tile Mill’.  In collaboration with the business area and the MDBA’s graphic designer we were able to customise most aspects of the data, such as river width and colour, town names, state and territory boundaries and more.

This allowed us to create a custom and unique map specifically for the MDBA.

The project is still underway, with OPC helping convert the site’s theme to include responsiveness and specifically to provide a streamlined mobile experience.

Key components that were used

The major components of the build were:

Why these components were chosen

OpenLayers was the Geospatial Technology that the prototype was developed in, and one that OPC staff members had used in the past.  OpenLayers integrate well with Drupal and can include a lot of flexibility.

The majority of work for the homepage performance was gained from altering OpenLayers' own behaviour Javascripts in order to further customise the output.

Displaying the data on the location pages required us to use a robust chart system that would also meet the clients accessibility requirements.  After some testing, we settled on the use of the High Charts library.

We were able to quickly iterate through the available data points for a location and print out an interactive graph.  Having the graph contain a second graph on a longer time scale allows the user to visually change the date range of the graph.

The other key component of High Charts is its ability to convert a static HTML table into a graph.  Displaying the Graph visually on top of the table allows the table to exist for screen reader software, while the visual graph is available for sighted users.

Finally our use of Tile Mill allowed us to quickly create custom map tiles for our interactive maps.

This meant we were able to customise lake and river colour, size, and labels.  Using CartoCSS we were able to target specific styles for the various zoom levels; for example, making a town label larger when the user zooms in.

By only generating map tiles for the area we needed (Australia) we were able to create map tiles in under five minutes, rather than a world render that would take thousands of hours.

These new tiles plugged very easily in the existing OpenLayers and Linux environment.

Homepage

 

Icon selected, details shown

 

Location detail page