Category: OpenLayers

Categories
Data Graphics Mashups OpenLayers

The Political Colour of Great Britain

Following on my UK General Elections 2010 Swings map, where circles represent each constituency, with the sizes and colour describing the metrics, I have used a technique that James has been studying, to combine the vote proportions together to produce a single coloured dot for each constituency. The more blue the dot, the higher the proportion of the vote was Conservative. Similarly, red for Labour and Green for the Lib Dems and the other parties and independents.

A purple constituency represents a Labour/Conservative marginal, as blue+red = purple. There are many of these in the Midlands. Similarly, orange areas indicate likely Labour/Lib Dem (or SNP/PC etc) marginals, such as in South Wales, and turquoise areas indicate Conservative/Lib Dem (& other) margins, there are many of these in SW England. Grey dots show three-way marginals, e.g. Hampstead in London.

Because I am using just three colours, to represent three political groupings, the visualisation does not show the variation in results between the Liberal Democrats and the nationalist parties – the SNP and PC in Scotland and Wales respectively.

Some interesting patterns are revealed – the ring of blue/purple around the red/orange centres of London and Birmingham – with no such corresponding ring around Manchester or Newcastle. Scotland’s lack of blue. The straightforward Labour/Conservative split in NW England. East London isn’t quite as safe-Labour as you might think – with the exception of East Ham standing out in bright red.

The benefit of this visualisation is that every vote is included in it – on a regular election map, if one party just fails to win, then an election map won’t show them at all on it. Here, every vote influences the colour of the map. Each circle represents roughly the same number of people – the populations of constituencies are fairly even, with some notable exceptions such as the Isle of Wight (very populated) and the Scottish Islands (very few people.)

You can see the colour map by going to the election visualisation and choosing “Constituency Colour” from the “Other graphs” drop-down. James has produced a regular choropleth map version, which shows the green (SNP/LD) of northern Scotland and blue (Conservative) of southern England strikingly well.

Categories
Data Graphics Mashups OpenLayers OpenStreetMap

Tube Stations in London – Visualisation

I was inspired by seeing this map and associated article on the New York Times website, linked from Going Underground, to create a similar mashup/visualisation of entry/exit volumes from the 300-odd tube stations in London. On their website, Transport for London provide the metrics for entries/exits from the stations, between 2003 and 2008, broken up into rush-hour, regular and weekend travel.

Each circle’s area is directly proportional to the flow numbers for that station (click on the circle to see the numbers.) The circles are rescaled between the first metric (total flows) and the rest, so direct comparison of metrics is possible except between the first and others, Blue circles represent an increase in flow and red a decrease.

If the mass of circles are obscuring each other, zoom in!

You can try it out here.

Some technical notes:

The background map is a custom render of OpenStreetMap data, with the tube lines highlighted in their traditional colour – it doesn’t always look quite “right” when you zoom in, due to the way the lines are tagged in my own copy of the OpenStreetMap database. The stations are even harder to disambiguate, so I’m using a free source from Wikimedia Commons, this means they don’t always line up.

Because your browser gets a copy of all the flow data when you load the page (yes I’ve heard of AJAX) it does run a little slowly in Internet Explorer, particularly the slider bars – these allow you to “drag” through the range of metrics or years.

Categories
Mashups OpenLayers OpenStreetMap

Manchester Map Mashup

I’ve created a mashup of lots of maps of Manchester as a proof-of-concept of how easy it is to mashup using OpenLayers. It’s not particularly pretty but does involve lots of maps.

See it here.

The layers are:

  • OpenStreetMap
  • Ordnance Survey Street View
  • Ordnance Survey 1:25000 First Series (1959)
  • Ordnance Survey New Popular Edition (1948)
  • Marr Map of Housing Conditions (1904)
  • Swire Map of Manchester (1824)

The first four maps are all hosted on OpenStreetMap servers.
The Swire map also contains an inset, dated 1650!

Categories
Mashups OpenLayers OpenStreetMap

Accuracy vs Completeness: OSM vs Meridian 2

[Updated x2] Yesterday’s Ordnance Survey OpenData launch has provided the OpenStreetMap community with a potentially rich set of data to use to complete the map of Great Britain. OpenStreetMap’s accuracy and detail is generally excellent, however a problem which is (very arguably) more important than either accuracy or detail, in a map is that some parts of the country are substantially incomplete.

It’s not that the data quality is poor, it’s that someone with a GPS (or a satellite photo) has never been to that part of the country to gather the data in the first place. There are still significant parts of Scotland and Northern England which have many missing roads. The NPE (out-of-copyright) maps have been useful in starting to fill out these sections, but there’s always going to be a roads missing from a 60-year-old (or older) map.

So, the OS datasets could be very useful. Perhaps the most interesting of the datasets is Meridian 2, it is a vector dataset covering the whole country. One thing that needs to be watched out for though is that Meridian (which is a “complete” dataset of the country) is relatively inaccurate Pixellation or resolution isn’t a problem, it being vector based – but data is quite simplified.

I’ve built a mashup which allows direct comparision of the Meridian and OSM data for Great Britain. I’ve added in most of the available layer files that come with the Meridian package that has been released as part of the OS OpenData initative. The only two areal ones I’ve added are for woodland areas and lakes – everything is linear. I’ve added in labels for the roads and rivers, but no boundaries or point features, at this stage.

You can access the mashup here [now offline] (N.B. Not tested in IE so will probably break horribly in it.) Zooming in reveals the relative coarseness of the Meridian data – although crucially it is “substantially” complete for all but the smallest of roads, for the whole of the UK – not just for the major cities where the OSM contributors mostly live!

Completeness
In the pictures below, the “solid”, thinner roads are Meridian and the fatter roads with “borders” are OSM.

Spot the missing roads in Meridian around Leytonstone in East London [Update 1 – Some sections of motorway are missing from my rendering but are present in the data – it is possible this problem extends to smaller roads too so take these screenshots with a pinch of salt]:

…but go further out of London, and it doesn’t look so good for OSM:

Interestingly, the Park Estate in central Nottingham is missing entirely from Meridian:

The Park Estate is a private estate and the roads are not maintained by the council – this might have something to do with it. I’ll be running around the Park Estate next weekend.

Accuracy
[Update 2 – Meridian is not intended to be used at scales larger than 1:50000, as per its documentation, so I shouldn’t really be comparing it with OSM which generally is based on data recorded at larger scales. So, bear in mind these screenshots are all larger than 1:50000 scale.] It’s difficult to authoritatively judge the relative accuracies of the two datasets without getting out on the streets or looking at aerial imagery – but you can infer a basic measure of accuracy by looking at how roads “wiggle” – or, in the case of the Mayfair squares below, how Meridian converges the square to a point:

Detail
A little unfair to compare the two here, as Meridian 2 was always meant to be a medium-scale dataset, whereas OSM can be all things to all people!

The tiles that make up the imagery are generated on demand (and cached for subsequent use) so may run slowly. You’ll need to zoom in quite a long way before all the features get added to the map. Use the slider on the top left to fade between the OSM and Meridian layers.

The images are derived from Ordnance Survey data © Crown copyright and database right 2010 and OpenStreetMap data which is CC-By-SA OSM and contributors.

Categories
OpenLayers

OpenLayers 101

[Updated] Here’s a simple one-file way to get an OpenLayers map on a website. This is all the code you need, including the HTML, Javascript and CSS.

This particular example simply shows an OpenStreetMap map. It is up to you to add additional layers, be them from raster sources, or vector data. It’s been updated for the simpler syntax used for OpenLayers 2.13.1, and also HTML 5.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>My OpenStreetMap Map</title>
<script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js">
</script>
<script type="text/javascript">
var map;

function init() 
{
    map = new OpenLayers.Map ("map", 
    {
        controls:[
            new OpenLayers.Control.Navigation(),
            new OpenLayers.Control.PanZoomBar(),
            new OpenLayers.Control.Attribution(),
        new OpenLayers.Control.LayerSwitcher()],
        projection: "EPSG:900913",
        displayProjection: "EPSG:4326"
    });
    
    layerMapnik = new OpenLayers.Layer.OSM(
    	null, null, { numZoomLevels: 15 });
    map.addLayer(layerMapnik);
    var start = new OpenLayers.LonLat(-3.5, 56.5);
    map.setCenter(start.transform("EPSG:4326", "EPSG:900913"), 7);
}
</script>
</head>
<body onload="init();" style="margin: 0;">
<div id="map" 
    style="position: absolute; width: 100%; height: 100%;">
</div>
</body>
</html>
 

Here’s what it looks like:
ol101v2

Categories
OpenLayers OpenStreetMap

On-The-Fly Mapping Preview

oom1

A public preview of the on-the-fly mapping that is being used for the CensusGIV project is available at OpenOrienteeringMap (OOM).

The same mechanism that will be used to produce the varied choropleth maps of census data is being used to produce the “Street-O” and “Pseud-O” maps on OOM. The main differences are that the map image files, or tiles, are more aggressively cached – as there’s only two maps rather than millions – and the designs are in an XML file rather than being specified on the URL, as they are much more complex than simple thematic choropleth maps.

oom4

Further details of the construction are in a posting and information page on my personal blog.

Top: “Pseud-O” map of Furzton district in Milton Keynes. Bottom: Edinburgh Old Town “Street-O” map.

Categories
Data Graphics Mashups OpenLayers OpenStreetMap

CensusGIV Prototype Presentation for CASA

My boss (Dr Pablo Mateos) and I gave this presentation today as part of this term’s CASA Seminar series here at UCL. My bit starts at slide 22 (of 60! – we just about managed it in the hour but only by rushing at the end.)

chorogen
CensusGIV – Geographic Information Visualisation of Census Data

View more documents from oliverobrien.

Note that the censusprofiler site mentioned a couple of times in the presentation only has a (very out of date) blog on it at the moment, and the prototype itself is not yet available for general use – with luck, an alpha version will be available to play with by the end of the year.

Categories
Mashups OpenLayers

Manchester Map

This is the fifth in a series detailing the projects I have worked on at UCL in the last academic year.

manchester

This was born out of Alex acquiring a old (1094) map of Manchester showing the different housing types that existed back then. I put together some image tiles he created of the map, in OpenLayers, and combined it with some existing modern OAC demographic map tiles that I had created for a separate project, and Google mapping and aerial imagery. Vectors are not used on the map, but you can switch between, combine and reorder the raster layers, for quick visual comparison between the maps.

Alex blogs the creation process here, and you can see the map itself here.

Categories
Data Graphics Mashups OpenLayers

HE Profiler

This is the fourth in a series detailing the projects I have worked on at UCL in the last academic year.

The HE Profiler is the last of the three “core” school-profiling map mashups that I have developed over the last year – this has been developed over the last few weeks and indeed was finished only today, my final project of the year.

It is designed to be used by university widening-participation administrators, as a graphical tool to discover and evaluate the schools to target for campaigns to encourage university application. To do this, it makes use of two metrics – the OAC demographics of pupils attending each school, and the POLAR score of their postcode – in simple terms a National Statistics demographic describing the likelihood that people from this postcode go to university.

Again it is powered by OpenLayers, displaying point-based vector information on top of Google Maps image tiles, using NPE data for geocoding postcodes. The most interesting thing about this application is I’ve started to explore the very powerful rule/attribute based symbolisation for points available in OpenLayers. This sort of symbolisation will be, I expect, very useful in my next year’s project. I am very impressed with what can be done – some quite GIS-like properties present in a popular and freely available web application.

heprofiler

The graphic above shows target schools for a central-London university, based on the proportion of POLAR1/2 pupils (least likely to go to universities) compared with the rest. Schools with a majority of pupils in this category are coloured red. The area of each circle represents the number of such pupils present. The poor representation at university of the Thames Gateway region can be clearly seen. As an aside, the OAC demographic, not shown here, does not work well for London due to its size – the OAC is calibrated across the whole UK, and it is likely a more specific demographic analysis for London (e.g. LOAC) for schools there, would be more useful.

Categories
Mashups OpenLayers

The Education Atlas

This is the second in a series detailing the projects I have worked on at UCL in the last academic year.

This is a mashup, powered by OpenLayers, and using network data from OpenStreetMap (OSM) to provide a “contextual window” on top of choropleths (colour-region maps) representing various educational attributes. Both the choropleths and the OSM maps were created using Mapnik. Data from the NPEMap project is used to provide geocoding (locating from postcodes). Schools from the ShowUsABetterWay competition are available as a simple point-based vector layer.

This project has been through various iterations before ending up as a (sort-of) finished product. An earlier version was briefly demoed at the GISRUK 2009 conference in April at Durham. This was an “all-singing, all-dancing” mashup, which wowed the judges at the conference (it was entered in, and won, the Mashup Challenge competition) with its many layers and features, but was probably too complicated for the intended end use.

The functionality has been split into three different mashups – the first, the choropleths, form the Education Atlas. The school catchment contours are in a separate mashup, School Catchments, which I’ll talk about in a future post. The detailed metrics about each individual school are in a third application.

The choropleths mainly relate to academic attainment and geodemographic background (for GCSE pupils) and A-Level subject choice. Some interesting patterns emerge, for example French is particularly popular in Kent (funny that…) and Geography is more popular in the rural north of England than in the cities – as shown below. The demographic maps show a characteristic pattern of city poverty/underachievement compared with rural areas.

eduatlas

The resulting slimmed-down application is available at http://atlas.publicprofiler.org/, however it is only soft-launched, as the data is quite old, and there are some noticeable gaps in coverage, particularly in Manchester and Hampshire, where state school pupils generally don’t have any sixth-form provision in their secondary schools.

Noteable features, apart from the bespoke black-and-white “network” layer, are the keys, which change depending on the choropleth selected.

I presented some screenshots of the mashup, and talked about how it was made, at the RGS conference in Manchester, in August.

A screenshot of the mashup forms the banner of this blog.