An Introduction to OpenStreetMap and the University of Southampton

The OpenStreetMap project was started in 2004 with the aim of creating a free map of the world. The core, but perhaps less obvious output from the project is the data. You can see an example of some OSM data, represented in XML on the right.

This abreviated data describes the Zepler building on Highfield Campus. You can see in the tags, that the building name, number, and uri are present.

Data to Images (or Tiles)

XML is perhaps not the best way to view the data if you want to use if for navigation, so this data can be rendered in to images for use in a map. Shown here is the "Standard" rendering of part of Highfield campus.

This tile has been downloaded from the OpenStreetMap tile servers. A tileserver is normally composed of a database (usually postgresql with postgis), a tile rendering stack (e.g. renderd and mapnik) and a webserver (e.g. apache with mod_tile).

Leaflet

There are a few libraries that can handle displaying a "slippy" map, the one in use here is called leaflet. Tiles like the one shown above are combined together in to a grid that can be moved with the mouse.

The javascript used to create the map seen on the right is shown below.

                var map1 = L.map('zepler-osm');

                map1.setView([50.93733, -1.39779], 19);

                L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
                    maxZoom: 19
                }).addTo(map1);
                

Custom Rendering (sum-carto)

Jumping back to tileservers, the rendering stack decides how to display the data as an image. Mapnik, which is commonly used has an xml stylesheet that it uses, this can be (and in the case of the "Standard" OSM style, is) generated from another CSS like language called carto.

The "Standard" OSM rendering has some disadvantages for the University. Probably the biggest is that it shows some irelevent things, e.g. housenumbers for the surrounding residential area, it also does not show relevent things e.g. building numbers, cycle parking, ...

To the left, you can see the same view as before, but this time, the data has been rendered according to a different stylesheet. Notice that the buildings number is displayed below the name, and that some cycle parking is shown just to the top right of the Zepler building (green P).

Currently there are two tileservers hosting this University specific tileset. Inside ECS there is kanga-cb15g11.ecs.soton.ac.uk, which is updated daily. Outside of ECS, there is bus.southampton.ac.uk.

                var map2 = L.map('sum-carto');

                map2.setView([50.93733, -1.39779], 19);

                L.tileLayer('http://bus.southampton.ac.uk/graphics/map/tiles/{z}/{x}/{y}.png', {
                    maxZoom: 19
                }).addTo(map2);
                

leaflet-soton

So far we have seen static maps, and slippy maps. But extra interactivty can be used to enhance slippy maps with more data where available. The University is off to a good start with this data, and some of it can be interacted with through the map.

The leaflet-soton library allows you to add this interactivity to the map with ease, its mainly clientside, with a small server side component. It handles everything from setting up Leaflet, to advanced interactive components.

Try clicking on the buildings and the bicycle parking.

                var map3 = LS.map('sum-basic');
                

Workstations

One of the very useful pieces of information published by the University is the workstation use data. On the left you can see this being displayed on the map.

As you zoom in and out, the workstation markers will group together and split apart to keep the data visible. All markers are also interactive and display more data in a popup when clicked on.

                var map4 = LS.map('sum-workstations', {
                    workstations: true
                });
                

Indoor Maps

Navigating around the University is slightly different from navigating around a city, e.g. Southampton or London. Most of navigation for students and staff of the university involves moving between rooms.

The leaflet-soton library also has an experimental indoor feature, you can see a view of the library (level 2) on the left.