Friday, 23 March 2012

Behind the scenes of our new map

Last week we quietly released a preview of the University's new online map.  Our map launch blog post introduces the map's features and some future developments. This follow-up post delves a little deeper to examine how we put the map together.

Early sketches of the interactive map
There are a few components all stitched together to make the map work: map data, map tiles, a map user interface and some York-specific data which we drop onto the map. We'll go through each in turn.

The map data

Map data is drawn from This is basically the Wikipedia of maps, and we're able to add and edit buildings, paths and more as the campus develops. As Paul mentioned in our earlier post, we're really grateful to the folk who worked on the YUSU iPhone app last year because they did a lot of work getting OpenStreetMap data up to scratch for their map features.

The campus on
You can see the campus on directly, but if you do you'll notice that it looks quite different to on our version. That's because we're using custom map tiles...

Custom map tiles

The map starts to get a bit cluttered if we include absolutely everything from OpenStreetMap, so in order to emphasise the most important features of campus we use a custom map style which we developed using tools from

CloudMade's Style Editor allow us to choose which types of elements to display on the map, and what colours to use for each element.

The CloudMade Style Editor
Every month or so CloudMade take a snapshot of OSM data, which is then used to generate map images (tiles) using the rules defined in our custom style, which we use on the website.

The monthly updates might not sound ideal, especially for a rapidly developing campus such as ours. But when balanced against the ease with which we can make updates and the flexibility that these methods offer us, we think it's the right choice and will allow us to build a better online map than any of the alternatives.

The map user interface

Hopefully when you browse and zoom the map it feels instantly familiar. If it does, that's  because it works exactly the same as Google Maps. Indeed, it is Google Maps, at least in terms of the controls you use to interact with it.

The Google Maps API is the set of programming tools Google provide to let anyone have a go at building something with their technology. It has a relatively little known feature which allows map tiles from any source to be loaded into their interface. So, we can load our OSM map data, which we've transformed to a York-tailored style with CloudMade, directly into a familiar Google interface.

Using Google's maps API brings some other benefits too. We get satellite view, which although it hasn't kept up with developments on Heslington East too well, gives an interesting aerial perspective on campus. We also get StreetView, so you can drag the 'pegman' onto campus and see what it looks like at ground level. But possibly  most importantly, at least for those of us working on building the map, we get to use some of the most robust and widely used mapping code around, which is invaluable when feeling your way through a project like this. Which brings us neatly to...

York's custom data

A draggable, zoomable overview map of campus would have been a big improvement on the previous static version even without anything extra. But, if there's one thing we've learned from our own use of the map, reports from other people and, most tellingly, from watching other people in usability tests, it's that finding somewhere you've never been before can be incredibly frustrating. A nice 'slippy' map doesn't help much if you don't know where to look.

Alongside the map we load a list of locations, and clicking any one drops a pin to show you exactly where that is. We know there's more to do - search and directions are features we hope to add in the future - but as a first step we think this should prove pretty handy.

We maintain our list of locations in a Google Spreadsheet, which we publish to the web for anyone to see if they know the link (take a look at the map location data). Doing this allows us to retrieve the data in some other formats using Google's data API. Unfortunately none of these formats are much use for loading straight into a web page. Fortunately, the web can do magical things, and we can use Yahoo! Query Language (YQL) to fetch our location data from Google in CSV format and translate it into a JSON data object. We load and process the JSON data using a bit of JavaScript and populate the list of locations alongside the map.

Location data stored in a Google Spreadsheet

We cache a copy of the JSON data rather than fetching it live from YQL every time, but that's just for speed and to reduce the number of possible points of failure. Even with the caching, managing our locations list like this means we can add or amend a location in a few minutes.

Putting it all together

Taken together, we think the combination of OSM data, Cloudmade custom-designed map tiles, the Google Maps API, a Google Spreadsheet, a simple YQL query and a sprinkling of homegrown JavaScript (although actually, even that uses JQuery and an onhashchange plugin so isn't completely our own) make for a pretty decent version 1 of a new online map.

We've got a big list of future feature ideas, most of which we're confident we can build on top of the foundations we've laid with this first release. All things considered, we think it's not bad at all for zero budget and just a few odd days of effort grabbed here and there.

Missed anything that you're interested in? Feel free to ask in the comments and we'll be glad to fill in any gaps.


  1. You forgot the York Plasma Institute! We get visitors too! :'(

  2. Sorry about that, we'll make sure to add you

  3. This is excellent, well done!

  4. I think it's wonderful too. I really like the combination of OSM data and Google interface, I think that's the best of both worlds really.

    What I'd really love is a way of entering a room name and it then dropping a pin in the correct building (ideally with a little bit of a description of where the room is). However, I know it's early days!

    Overall, I think v1 is a major step forward, good work!

  5. This is really excellent work, I love this tool. Thanks for developing it this far guys, hope you're successful with future versions! :-)

  6. Hi there, me and some other students are currently working on software project based around University navigation. Would it possible to talk to one of you guys about our current prototype? It has similar functionality to yours but with additional features.

  7. Matthew, sorry for the delayed response - Blogger doesn't do a great job of telling us we've got comments waiting.

    If we're still in time to be useful, we'd be happy to talk to you. Give me a shout at and we can set something up.