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 OpenStreetMap.org. 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 openstreetmap.org

You can see the campus on openstreetmap.org 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.com.

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.

Introducing our interactive campus map

We're really pleased to unveil our new interactive map of campus, which we've been working on over the last couple of months.

Easily find your way around campus with the new interactive map

With the new map, you can really quickly find any department, building or any of around 150 locations across campus. As well as departments and buildings, you can also see University services and facilities, colleges, cafés, bars, restaurants, shops, cash machines and car parks. So no more excuses for being lost around campus.

Within each category you also have the option to see all locations, useful for things like cafes and cash machines where you just want an idea of what's nearby.

"Show all" lets you see all the locations for any given category. Here's all the places to eat and drink on Heslington West

Anyone who has used Google Maps before will be familiar with the interface, which allows you to easily pan and zoom around the campus, and works great across all sorts of mobile devices.

Because we're using the Google Maps interface, you can switch to a satellite view of the campus and see what it looks like from above.

Looking down on the University lake with satellite view

In some parts of campus, you can also drag the orange "pegman" onto the map to enter Street View and see what the buildings look like.

Street View of Heslington Hall, home to Web Office HQ

Other improvements

We've made improvements to the rest of our maps and directions pages too, giving them a general tidy-up and have added a journey planner to campus, powered by Google Maps.

Get driving directions to campus from pretty much anywhere 

Still to come

This is the first version of the interactive map, and there's plenty more to come in the near future. At the top of our list we've got:

• Searching for locations by typing in their name, rather than browsing a list
• Walking and cycling directions between any two locations on campus
• Clickable pins to provide extra information about a location - such as an image of the building, links to websites, opening times
• Bus stops with live information about when the next bus is due

We're keen to hear what you all think would be most useful, so please let us know in the comments or via our feedback form.

We're really grateful to YUSU for sharing some of the work that they did for the map in the YUSU iPhone app. This gave us a great head start and meant that we could do this a lot quicker than we would have done otherwise.

Check back soon for our second post about the new map, where we'll go into the technical details of how it all works.