Embiggening the campus map

The eagle-eyed among you may have noticed a small addition to the online campus map: you can now switch the map to full screen mode, allowing you to see a lot more of the campus at once.

Hopefully this will make it easier to navigate around our ever-expanding campus.

We know that there's still a lot of other functionality that you'd all like added to the map - like being able to search for rooms and buildings - we're hoping to work on some more of these kinds of features in our upcoming sprints, so stay tuned.

What we’ve been up to, Spring 2013

Oftentimes it’s hard to know what other teams are working on and easy to miss interesting developments that get released without a big launch. With that in mind, we thought an occasional series of updates about things we’ve been working on might be of interest.

Festival of Ideas

One of the biggest things we worked on throughout May was the 2013 Festival of Ideas website, including listings and ticket bookings (via EventBrite) for over 150 events.

 

History of the University - a timeline

Built as part of our 50th Anniversary site, our interactive timeline of the University’s history features well over 100 entries, with videos and imagery to help tell the story.

Food and drink on the web

We’ve started a project working with Commercial Services to move catering and bars information into the Web CMS. There’s not much to see just yet, but work is underway to create a dedicated section of the website for catering and drinking outlets on campus, which should be coming soon.

Updating the campus map

The campus map page now has more location pins available, including a dedicated section for venues being used for Festival of Ideas events, in order to help those who may not be familiar with the University to find their way around.

Also pretty cool, but not one we can take the credit for (that belongs with IT Services and Estates), is internal mapping of campus buildings starting to roll out on Google Maps. If you zoom in close, internal mapping information for most buildings on campus is starting to appear. It’s early days, for both us and Google (they’re using us as a pilot for universities in the UK), so we’re not shouting about it yet but this should be really handy once everything’s in place.

York Research Database and the University search engine

We launched the York Research Database back in February, but it took us another couple of months to test and integrate results into our main University search engine, but they’re there now. The big challenge was not indexing too many pages - the research database contains such a vast amount of data that indexing all of it would have overwhelmed the search engine.

Foursquare

We’ve done a small piece of work to establish ourselves on Foursquare. After taking ownership of all our locations a few months ago, we’ve been updating them with accurate information, up to date imagery and links to additional resources.

Updated Twitter widgets

Twitter are in the process of retiring their v1 API, which meant that that our custom Twitter widget available in the Web CMS was about to stop working. We've updated the template to now use the updated standard Twitter widget and it’s working well.

Improving our YouTube channel and notes on video

If you’ve been following our YouTube channel you may have noticed that some of our videos now have a unified thumbnail scheme. This helps in maintaining a brand identity across the institution - we’ve used departmental colours on the bands across the thumbnails in order to better fit them in. We’ve also been doing something of a spring clean on the channel, deleting some old playlists and updating others.

The featured playlist is now a focus on our History Project, including a new series of oral history videos. If you’re interested in a more multimedia-based history of the University there’s some really interesting content here.

We also added some new tips on producing video for the web which are well worth a read if you’re considering adding video content to your site.

Welcome pages

The undergraduate welcome pages will be seeing a big overhaul for the 2013 intake of students. As well as cutting down on the number of pages, we’ve redesigned them to mesh more closely with the welcome booklet sent out to all new students. The pages will be going live in July, in time to help a whole new generation of students settle in at York.

Website redesign

In more behind-the-scenes news, we’ve been doing a lot of work on preparing for a big website redesign. If you’ve had a look at our 50th site you’ll have already seen an idea of what it’s going to look like, but there’s still a lot more to come!

Mapping with TileMill

When we launched our interactive campus map last year, we were using a third party company called CloudMade to generate our custom map tiles from OpenStreetMap data. CloudMade weren't making updates to their map data quite as often as we needed, which is problematic when you've got a big campus expansion project on the go that means new buildings are appearing all the time. So we went looking for a replacement.

Finding a replacement

Ideally a replacement tile provider would give us the same functionality as Cloudmade, just with more frequent updates.

We looked at a lot of alternatives, but nothing was looking too promising. Some of the options we rejected were:

• Google Maps - half the campus is still missing.
• Stamen - beautiful watercolour maps, but too light on details to be practical.
• MapQuest Open - nice enough looking maps, but not enough detail.

The best option was looking like MapBox, which would give us the control and level of detail we needed, but that looked like it could be a bit pricey.

Enter TileMill

My search continued and led me to TileMill, an open source project by MapBox.

TileMill is different to the other options I had been looking at: rather than being a service that provides tiles itself, it's a piece of software that lets you design and publish your own interactive maps.

Campus taking shape in the TileMill interface

TileMill takes all sorts of different data formats as an input: ESRI Shapefile, KML, GeoJSON, GeoTIFF, PostGIS, CSV, and SQLite.

You then have full control over how your data looks through a language called Carto. Carto is similar to CSS but has extras like variables and functions that make it much more powerful.

The map data

If you really wanted to you could download OpenStreetMap's data for the entire planet and work from that, but that's a 250GB XML file that I'm not sure my PC could cope with.

I came across a company called Geofabrik that provides more manageable shapefiles of smaller parts of the world (often down to individual cities), which are updated every few days and can be downloaded for free from http://download.geofabrik.de/. In the end we paid Geofabrik for some extra data to be included in a custom set of shapefiles, so it wasn't completely free.

Making it look nice

Getting started with Carto is easy enough if you already know CSS, but I found the most time consuming part was deciding exactly what to show at all the differing zoom levels. When you've looking at a bird's eye view of the whole campus you only want to see the major landmarks, with more detail being revealed as you zoom in, down to the names of individual buildings and car parks.

Luckily there are a few examples bundled with TileMill that help you get the hang of what works best at different levels.

An example of some of the Carto styling rules used on our map

It also takes a bit of thought to get all of your layers appearing in the correct order. At various points I ended up with bridges going underneath roads and the entire campus looking like it was underwater!

Outputting the tiles

Once you've got your map looking how you want it, it's time to export it. TileMill gives you several formats to choose from for your export.

In order to use this with our existing maps setup (see the previous behind the scenes post), we needed the individual map tiles. TileMill doesn't quite let you do this directly, but you can export to a single MBTiles file, and then use a utility called mbutil to extract the individual tiles from that.

Our map covers central York (up to the outer ring road) at six different zoom levels, which resulted in about 15,000 tiles. You can easily end up generating hundreds of thousands or even millions of tiles if you go down to very high zoom levels for large areas. Be prepared for a wait (and have plenty of spare storage space) if you decide to do that!

Making it live

The final step was to put the tiles on the web and change a single line within the map application code to point to our own tiles instead of Cloudmade's servers.

The interactive map with new tiles in place

We're now able to make much more regular updates to the map, and TileMill looks like it could come in handy if any other projects involving maps come our way.

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.

Google Maps comes to campus (ish)

A few days ago, we noticed that where there had previously been a complete void, Google Maps now includes coverage of the university campus:


View Larger Map

Well, sort of anyway. There are a few big omissions, most notably that the whole of the Heslington East campus development is missing. Also absent are footpaths, so directions aren't much use unless you fancy taking a very leisurely stroll.

Promising stuff though, hopefully the data will improve over time.