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.
