paulashby/flood-watch-map

OpenLayers map for use on Flood Watch web app

flood-watch-map

Map making use of the OpenLayers library for use on the Flood Watch web app.

Data is sourced from the Environment Agency (EA) Real Time flood-monitoring API via jQuery AJAX calls. The returned positional data is fed into an OpenLayers map featuring an Open Street Map tile layer and appears as marker dots. The map can be zoomed and updated, allowing dynamic flood data to be displayed in response to user input.

Challenges

The floods endpoint of the EA API does not directly return geographical coordinates. These are available via API links included in the response, but retrieving coordinates from each of these proved to be a considerable bottle neck. In order to improve loading times, the flood area coordinate data was retrieved and stored locally. This proved to be a successful strategy, and allowed complete control over the rate at which individual markers were added.

Using the OpenLayers map full width while keeping the UK clear of the surrounding page elements was a tricky problem. Fortunately, the OpenLayers API provides a fit method that allows a polygon to be framed in the view. This accepts padding values which determine the offset of the polygon from the edge of the view. A hidden HTML element was added to the page purely to provide these padding values, with ChatGPT providing a geojson object of the UK bounds as a source for the polygon. This worked very nicely, with the scale and position of the UK portion of the map exactly matching that of the responsive HTML element.

This was further optimised by replacing the geojson polygon with an extent (an array of four floats) representing the extremities of the UK.

Usage

Visit the deployed Flood Watch app to see the map in action. Enter a location to zoom, clear the search field to revert the view, Use the provided buttons to filter by severity.

The colourised map as it appears in the app.

Credits

Thanks to the following: the Trilogy Skills Bootcamp in Front-End Web Development for giving us the opportunity to work together as a team. Thanks also to Philip Howley, the course Instructor and Brooke Love, my personal teaching assistant.

All contributors to the OpenLayers library. (Please see license).

The Environment Agency (EA) Real Time flood-monitoring API. This uses Environment Agency flood and river level data from the real-time data API (Beta). (Please see license).

OpenStreetMap® is open data, licensed under the Open Data Commons Open Database License (ODbL) by the OpenStreetMap Foundation (OSMF).

Contributors to the Flood Watch web app itself:

• Sam Brooke
• Damien Nsoh Ayine
• Dayo Adekunle

flood-watch-map's Issues

Flood area data incomplete?

Considerably fewer items are added to the map than are returned by the API. Possible cause is addMarker function discarding items that lack corresponding entries in the floodAreas object. So seems the floodAreas object may not represent a comprehensive data set.