Soft style

I'm working on a project for the Hull area. I want to display overlays on a map. I want the map to be there, but not in your face. I don't want any shops, pubs or other such objects to detract from the overlay, but I do want people to be able to relate the overlay to places in the city and to the road layout. I needed my own render for the city.

At one time I might have turned to Maperitive to create a custom render. It works well but it uses .net so is best used in Windows. Windows leaves me cold. I have used the excellent Mapnik in the past to customise map rendering. Although the end results from Mapnik are superb, wrangling the xml to produce the required result was not easy to understand, so my customisations were tweaks rather than rewrites. Then MapBox released TileMill. I quickly saw how powerful it was. It uses a new style of coding called Carto to define the map style and uses easily defined layers to determine how the map is built up. Under the skin it uses Mapnik to render the example each time you save a change. One of the options is to export the Mapnik XML of your current design so you can throw that at a Mapnik instance and either generate a static image or a set of tiles for a slippy map - which is what I want.

Like any new environment it does take a little understanding. OSM data is best used by importing it into a PostgreSQL database using a recent version of osm2pgsql. This is a lossy process, intended to populate a database schema laid out for use by a renderer. Coastline is created by using a huge shapefile. I have a cut-down version just for the UK which is smaller and quicker to use. If you want to generate images at low zoom levels there are other short-cut shapefiles such as a simplified coastline and named places for example. These speed up processing at low zoom levels when massive amounts of OSM data would otherwise be needed.

Using TileMill is really about getting to grips with Carto and its relationship with the layers. Layers are each a definition of a data source such as a shapefile or a database table or a selection of part of a database table for example. The order they are listed defines the order that image of the map is built up. Carto, which is a lot like CSS, then applies the detailed use of the data in a layer to define the style of each object, such as its colour, opacity and so on. Some objects on the map may use separate layers to define them and be rendered by separate Carto statements. A road may be made up of a casing (its edge), the centre space which may well be coloured differently from the casing, and text for the name of the road to be displayed. These will be built up in different layers to make the joints between roads seamless and to ensure the casing is covered by the filler and then the text lays on top again. Then there are tunnels and bridges and all the other options the real world throws at cartographers. Layers and specific Carto statements together sort all of this out.

I have been helped in my growing understanding of the best ways to do some of this by reading examples, both that come as part of the download of TileMill and by reading the details of Andy Allan's excellent recreation of the Standard OSM map in TileMill.

To create my map, I downloaded the OSM data I needed from Geofabrik's download server, which is a simple and reliable way to get OSM data that is only a day old. I loaded it into a PostgreSQL database with the PostGIS extensions using osm2pgsql just using the default schema. It probably has all sorts of stuff I won't render, but it is quick and easy to do. Then I pointed TileMill at that and the UK coastline shapefile and set to work. Just to check all was well, when I had some of the style working I exported the Mapnik XML file to render some tiles and it quite quickly produced zoom 11 to zoom 18 for the area. I uploaded the tiles just to see how my web server responds with the tiles and all is well. The style needs a lot more work, but the process works very well, so I'm happy to put the hours in to become more of a cartographer as well as a mapper. I'm just not sure how good I'll be at it.

You can see the crude first pass here. The city will also look better not only when I've improved my style but also when the landuse gets tidied up with fewer gaps and overall more careful coverage - something Bing imagery will help with a lot.

Road search fixed

A friend from my school days pointed out that my previous post about finding a road had a browser problem. The drop-down list of road names get hidden by the map. All things MS and Internet Explorer especially are irritating to me. Quite how a company can grow to be so huge based on such poor quality products still confounds me, but still. The problem is that most people by far who use a computer use an MS operating system on it and a large number of them still use a version of Internet Explorer. If I want wide range of people to be able to use a web page it has to work on IE 7+, there is no option.

It seems that amongst the plethora of inconsistencies that IE demonstrates, there is a horrible process of not supporting the z-index style. z-index should determine which item on a web page should appear above another, with the highest z-index being on top and visible. In IE, anything that uses relative or absolute positioning can cause a separate z-index set to be created, starting at zero which causes the z-index of other objects to be seemingly disregarded. The map tiles use absolute positioning so the drop-down can have a huge z-index and yet it is hidden behind the map. There seems to be various ways to overcome this, but forcing the z-index of the map div to -1 seems to be the simplest solution. Hopefully now anyone trying this simple page will see the list of suggested names above the map.

Some good has come from this. Apart for becoming aware of this problem and trying out the various solutions, I have set up a much better test environment for Windows and IE. A Twitter exchange with Iván Sánchez Ortega also turned up with the concept that Win8 should really be renamed to Fail8 which made me chuckle.