The University of Cambridge today launched its new responsive web site design, and its map, based on OSM and originally released last September, was part of this. My previous diary entries talk about the development of the map using OSM.

However, the map update was more than the design, and an API revision. It introduces a new facility to mark your own features in an overlay on top of the map. Want to let someone know where to meet? Or how to reach you from the station? Where will our new building be? Draw it on the map and send a link.

While the drawing facilities aren’t particularly novel - you can draw points (which can have text and an image linked to them), lines and areas, and style these - what makes it a bit different from some other map annotations is that there isn’t a database behind it. The editor creates (and edits) files, and the link you can send is a combination of two URLs. So it’s a bit like KML, though actually we chose a JSON format. But because you can put the file at any URL, they don’t have to be simple files generated by the editor: they can be scripted, so other formats and data sets can be overlaid (so KML or GPX or extracts from OSM XML files could be converted as an overlay on the fly, for example, though we haven’t done that yet).

For example, we can overlay the University data cabling network (called the Granta Backbone, comprising a hundred miles of ducting across the whole city and dozens of inspection chambers and terminal junctions) on the map, from a protected overlay (sorry, it is not public data, so I can’t show you this). Another overlay seeks out the college staircase entries from OSM data and creates dynamic overlays from these. It has also allowed us to translate links from the old University map (which were pixel offsets onto a set of fixed images).

A simple storage mechanism is available to University users, but anyone can use it if you have somewhere to put it: indeed Dropbox is such a place accessible to anyone: just share the overlay from Dropbox as a link. By not relying on a closed database, in principle where overlays are generated (whether interactively or programatically) is divorced from where they are used. Here’s an example: http://map.cam.ac.uk#http://www.frankieandshadow.com/tj/csf.json - note the links off the overlay.

The map is at http://map.cam.ac.uk (and linked from the About the University link on the home page www.cam.ac.uk). ‘Annotate the map’ on the More menu takes you to the editor, which is http://map.cam.ac.uk/overlay

Most of the code is Javascript, and in two separate chunks, one for overlaying the data on a map, and the other to edit it. It only has loose ties to the underlying map tiles: the calling map supplies some functions to say where to put the new graphics, and how to tie lat/lon to pixel offsets. So in principle, it can work with OpenLayers or leaflet with minor changes, though the University map is neither of these. It would be fairly easy, for example, to allow the OSM home page to apply such overlays, edited elsewhere. The libraries are fundamentally reliant on jQuery though.

In the University Map, the drawing is done through the Raphael JS cross browser graphics library, though it only uses a tiny part of it - basically move, line and close path, and colours, widths etc of those. But it doesn’t have to - SVG could be generated directly, but I didn’t do that because I’d have had to do it differently for IE.

Though the University has financed its development for its own use, The code will be licensed GPL, so it should be both technically and legally possible to use it elsewhere. There’s a lot more info on the format used and so on from the help pages and links above.