Category Archives: Web mapping

Matters relating to the provision of map and cartographical services over the web

Merry Christmas from all at Geothread

Once again, we’re preparing to wrap up for the year here at Cranfield University. Before we sign off, we’ll leave you with something that’s become a bit of a tradition with the Geothread team over the past couple of years; our Christmas Twitter map. Last year we mapped the spread of festive cheer across the country, according to Twitter users. Once again, we’ve collected a sample of 60,000 georeferenced tweets mentioning the word Christmas, along with a handful of other related keywords. These have been grouped by county and then normalised against a random sample of tweets taken earlier in the year to eliminate the effects of population density.

Comparing against the same map last year, it’s clear that there are several areas that are consistent in their anticipation of the festive season; Central Wales and North Yorkshire in particular. Anglesey and Conwy in North Wales certainly seem to be getting excited about things this year, whilst Cumbria and the Scottish Highlands don’t seem to be feeling the same level of enthusiasm that they did 12 months ago.

Christmas tweets 2014
Apologies to anyone we missed out in Ireland. Unfortunately the random sample of tweets we used for normalisation did not include coverage of all of the British Isles, which is why there are some holes in the final map.

As a bonus this year, we’ve included an interactive map of the raw data collected from twitter, for you to explore below.

Merry Christmas and a happy New Year from all at Geothread!

UK Soil Observatory wins Geospatial Excellence Award

AGI Award Winner

AGI Award Winner

Following on from the UK Soil Observatory’s recent nomination for a Geospatial Excellence Award, Cranfield is delighted to announce that the UKSO won the AGI award for Excellence with Impact. The award recognises projects which have achieved outstanding success or impact – whether this be within an organisation or at a local, national or international scale.

Commenting on the UKSO, the judges described it as “An ambitious project with huge potential as a spatial research resource for a range of fields including agriculture and geotechnical engineering”.

Cranfield University’s National Soil Resources Institute (NSRI) was pleased to play a part in the development of the UKSO, contributing several of its soil related datasets to the project. The UKSO draws together soils data from institutions such as the British Geological Survey (BGS), the James Hutton Institute (JHI) and the Agri-Food and Biosciences Institute (AFBI) and provides a unified starting point for accessing consolidated soil datasets via a series of interactive web maps and other web based resources. Further information on the UKSO is available on the project website.

UK Soil Observatory nominated for Geospatial Excellence award

UK Soil Observatory

UK Soil Observatory

Cranfield is pleased to announce that the UK Soil Observatory (UKSO) has been shortlisted by the Association for Geographic Information (AGI) in their upcoming 2014 Awards for Geospatial Excellence. The UKSO was nominated for the AGI Award for Excellence with Impact. AGI describe this award as recognising projects which have achieved outstanding success or impact, measured against societal, humanitarian, environmental or financial benchmarks.

Cranfield University’s National Soil Resources Institute (NSRI) was pleased to play a part in the development of the UKSO, contributing several of its soil related datasets to the project. The UKSO draws together soils data from institutions such as the British Geological Survey (BGS), the James Hutton Institute (JHI) and the Agri-Food and Biosciences Institute (AFBI) and provides a unified starting point for accessing consolidated soil datasets via a series of interactive web maps and other web based resources. Further information on the UKSO is available on the project website.

The AGI awards have been launched to mark the AGI’s 25th anniversary. They are due to take place on Tuesday 11th November 2014. Further details on the awards are available here.

Flood Risk Modelling of Rail Infrastructure

A recent MSc student group project, recently concluded at Cranfield University, Bedfordshire, and run on behalf of Network Rail, has investigated novel methodologies for integrated flood risk modelling of rail infrastructure.

Delays are costly for Network Rail. 2012/13 was the second wettest year in the UK national record and resulted in significant disruption to rail services and infrastructure. Some £136 million in compensation was paid to train operators in consideration of unplanned delays and cancellations in that year. Winter 2013/14 saw more challenging weather conditions and impacts on delays. In February 2014 the Department of Transport announced it would provide £31 million to fund rail resilience projects in the South West including the installation of rainfall, river flow and groundwater monitoring at key risk locations.
Cranfield_MScGroupProjectTeam

Flooding is a major contributor to rail delays. To help develop a proactive approach to flood risk assessment, a project was commissioned at Cranfield University to develop methods and tools to help Network Rail. The project was conducted by students from the Masters courses in both Environmental Informatics and Geographical Information Management. The project set out to address a number of key objectives. First, to evaluate existing flood risk assessment methods and flood models to identify techniques applicable to Network Rail’s infrastructure; second to develop approaches for flood risk modelling utilising datasets provided by Network Rail, as well as other available data within 3 selected study areas (fluvial, coastal and surface run-off); thirdly to implement the approach within a GIS framework; and fourthly to develop a web tool to enable visualisation of risk assessments by non-GIS experts.

Given the size and scale of Network Rail’s operations, it is unlikely that there is a single solution to predicting flood risk to Network Rail’s assets. However, this project saw the development and use of a data analytical technique from the world of ‘Big Data’, called CART, or ‘Classification and Regression Tree’. Use of CART ‘inference algorithms’ has helped ascertain the key contributory factors for helping explain the flooding events in the case study areas selected. CART profiles were used both to examine static ‘legacy’ data, as well as more dynamic time-series data. The use of these techniques has helped identify a customised data-oriented approach to flood risk modelling that shows considerable promise, and which could now potentially be extended to other parts of the network beyond the case study areas, as well as to other types of incident (for example, landslips or embankment failures). The approach adopted should be seen as complementary with traditional hydrological modelling approaches that would need to be undertaken for specific site requirements. However, further development of the data driven method, and a systematic approach to reviewing incidents and communicating flood risk to stakeholders, may provide further opportunities to reduce the costs of delays.
Cranfield_WebPresentationTool
As the project concluded, a number of key recommendations emerged that would improve information used for strategic decision-making, as well as providing a platform for cost effective data driven flood risk mitigation. Firstly, the importance of clean and categorised incident data has become evident. Appropriate future mechanisms are therefore required to develop operational processes to ensure recording of new incidents capture and codify locations and, where known, the root causes of flooding. The data driven approach adopted in this study has delivered impressive and promising results, but further studies should now be undertaken to develop data driven prediction of asset flood risk further. Such work could commence, for example, with a target route network and use an iterative approach. Another outcome of the work has been in identifying the importance of adopting the means to visualise and communicate visually the modelling results. The web-based portal developed for dissemination of the flood risk profiles, flooding alerts and other data sources, direct from GIS, has proved a powerful means to communicate risk. Further to this, the project has also usefully trialled the use of 3D ‘virtual reality’ visualisation and projection techniques for analysing flood incidents, and educating stakeholders in improved flood risk management. The benefits of a range of software tools were evaluated. Overall, it is seen that the techniques and tools developed during this project can contribute usefully to managing the rail network and related national critical infrastructure.

Dr Stephen Hallett, whose students undertook the project, said: “This project has provided Network Rail with a powerful methodology for undertaking integrated flood risk assessment, made all the more timely after the recent extreme flooding events. The approach adopted highlights how a data-driven approach can help account for contributory factors to flooding, both proximal to the track, but also in the surrounding catchment areas, such as soil type, landuse, land cover and meteorological conditions.”

Student Project Leader: David Medcalf
Student Team Members: Usman Muhammad Buhari, David Cavero Montaner, Jose J. Cavero Montaner, Santiago Gamiz Tormo, Life Magobeya, Kerry Mazhindu-Page, Alan Yates.
Academic Supervisors: Dr Stephen Hallett (s.hallett@:cranfield.ac.uk), Tim Brewer (t.brewer@cranfield.ac.uk)

About Cranfield University
Cranfield University is a globally significant centre of expertise and enterprise in science, technology, engineering and management. The University is an exceptional environment for strongly business-engaged research and innovation and for postgraduate and post-experience education and training.
‘Environment’ is a key strategic theme at Cranfield. We have been contributing to the ‘green economy’ for over 40 years with deep expertise in environmental governance and sustainability, natural resource management, agriculture and land management, energy and the environment, environmental engineering for the treatment of water, wastes and contaminated soils and environmental health and food.

http://www.cranfield.ac.uk/environment

Big Data and Environmental Informatics

Today the sheer volume of environmental ‘big data’ gathered by real-time sensors, data loggers, satellite and aerial remote observation platforms, machinery and simulation outputs, such as climate-change models, can challenge traditional methods for structuring, manipulating and outputting digital information used for decision support. Such spatio-temporal knowledge is required to improve our understanding and management of environmental systems. New informatics techniques can help address this challenge.

Above is a video made of a seminar presented by Cranfield University’s Dr Stephen Hallett, held on 14 May 2014, discussing how current research activities in environmental informatics are addressing the theme of ‘Big Data’, touching on approaches such as data mining, statistical interpretation, and predictive analytics for handling such ‘big data’.

The Seminar was Chaired by Professor Simon Pollard, Cranfield University and Julie Vaughan, Senior Associate, Herbert Smith Freehills LLP.

Building a mobile mapping application

Leaflet mobile mapping application

Leaflet mobile mapping application

Our earlier articles on mobile application development demonstrated the process of getting an app up and running on an Android phone using Adobe PhoneGap and GitHub. For the purposes of this article we’re going to assume that you are now comfortable with that process and will demonstrate how easy it is begin building mobile mapping applications. This is something we are developing a lot of interest in here at Cranfield University.

As with previous examples, the app is going to be based on a package of HTML, CSS and JavaScript code and will therefore use one of the many JavaScript web mapping APIs available. Any of the following APIs would work well:

  • Google Maps API
  • ArcGIS API for Javascript
  • Leaflet
  • OpenLayers
  • OS OpenSpace API

The decision on which one to use will depend on what the functional requirements of your app are, how familiar you are with a particular API and a number of other factors. For this example we are going to build a simple mobile web map using the Leaflet mapping API. Leaflet is an extremely lightweight JavaScript library which makes it ideal for bundling with a mobile app, as we shall see shortly. It is also relatively simple to use and has great flexibility for puling in geospatial resources from a number of different sources, in a variety of formats.

The Leaflet website provides a page of useful examples to get you started with creating basic web maps. Below is a typical web page that would display a basic web map using Leaflet. You can save this code to a HTML file and view it in a browser to test it out for yourself.

<!DOCTYPE html>
<html>
<head>
<title>Basic Leaflet Map</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.css" />

<style type="text/css">
body {
	padding: 0;
	margin: 0;
}
html, body, #map {
	height: 100%;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
</head>
<body>
<div id="map"></div>
<script src="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.js"></script> 
<script>
	var map = L.map('map').setView([52.04, -0.73], 12);
        L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
		maxZoom: 18			
	}).addTo(map);
</script>
</body>
</html>

The process of turning this into a mobile app is very straightforward, assuming you’ve already got your PhoneGap/Cordova framework in place. Rather than build a new index.htm for our project, we’ll take the default index.htm that has been created for us and drop in the relevant sections of the Leaflet map example above into the correct places. The index.htm file that sits within the www folder of you mobile app framework (taken from the default PhoneGap example on GitHub) should look something like this:

<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <title>Hello World</title>
    </head>
    <body>
        <div class="app">
            <h1>PhoneGap</h1>
            <div id="deviceready" class="blink">
                <p class="event listening">Connecting to Device</p>
                <p class="event received">Device is Ready</p>
            </div>
        </div>
        <script type="text/javascript" src="phonegap.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
        <script type="text/javascript">
            app.initialize();
        </script>
    </body>
</html>

The key parts of the Leaflet map example are as follows:

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.css" />

This ensures the appropriate CSS files are loaded so that the map is is styled correctly.

body {
	padding: 0;
	margin: 0;
}
html, body, #map {
	height: 100%;
}

Here we are defining some layout parameters, including how much space the #map element of the page should use

<div id=”map”></div>

This is the container in the body of the page that will house our map

<script src="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.js"></script> 

Load in the Leaflet API

<script>
	var map = L.map('map').setView([52.04, -0.73], 12);
	L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
		maxZoom: 18			
	}).addTo(map);
</script>

This is the code that generates and renders the map on the page.

Dropping these elements into our existing index.htm whilst retaining the important components (such as app.initialise(); and the calls to phonegap.js and js/index.js) that are already there, gives a page that looks as follows:

<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.css" />
        <title>Basic Leaflet Mobile Map</title>
    </head>
    <body>
        <div class="app">
            <div id="map"></div>

        </div>
	<script src="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.js"></script> 
	<script>
		var map = L.map('map').setView([52.04, -0.73], 12);		
	        L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
			maxZoom: 18					
		}).addTo(map);
	</script>
        <script type="text/javascript" src="phonegap.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
        <script type="text/javascript">
            app.initialize();
        </script>
    </body>
</html>

This can now be compiled and deployed to your device using the process detailed earlier to give you a simple mobile mapping application.

Hosting libraries and APIs locally

Before we finish, we shall make one more minor alteration to our app to improve efficiency and performance. Currently the app loads up the Leaflet API from http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.js. We are going to take a copy of the full API, copy it to our app’s folder tree and deploy it to the phone so that our app can reference it locally rather than having to load it over web each time the app is launched. This will reduce the reliance on network connectivity and speed up application launch times as well as eliminate any reliance on the Leaflet website; we want our app to continue to work regardless of whether any remote websites may be experiencing problems of their own.

The full leaflet API can be downloaded here:
http://leafletjs.com/download.html
Unpack the zipfile and place the contents into a subfolder of your www folder named leaflet within your mobile app framework. All that needs to be done now is to modify the calls in your code that load the Leaflet API and CSS so that they reference your local copies. They should be changed from

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.js?2"></script>

to

<link rel="stylesheet" href="leaflet/leaflet.css" />
<script src="leaflet/leaflet.js"></script>

This change will make your app almost fully self sufficient, without any reliance on loading libraries from external websites. Note that the map tiles that make up your map are still being loaded from the following location:
http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png
Your app will therefore still require a working internet connection in order to function correctly. In our next post we’ll discuss bundling a selection of map tiles with your application so it can be used completely offline with no internet connection

Leaflet mobile mapping application

Leaflet mobile mapping application