Making maps from OpenStreetMap geodata

dankarran — Tue, 16 Sep 2008 19:00:26 -0400

I spent some time last year making some maps of the Snaefell Mountain Course (and other roads) on the Isle of Man so that I could add an overview map to the Wikipedia entry for the course.

Last night I was trying out some of the options in the OpenStreetMap 'export' tab, and since it can now export SVG (scalable vector graphics) files, I thought I'd have a try at redoing the maps from last year in a more re-usable and editable form using vector graphics instead of bitmaps.

To make the SVG map using data from OpenStreetMap (as shown in the preview), I just followed some relatively simple steps and a little trial and error while using the graphics editor.

I thought I'd share some of the steps below, in case anybody else was interested in making maps from the great data becoming available in the OpenStreetMap project.

So, what's needed to make your own custom maps?

An area of OpenStreetMap that's got enough information in it to be useful for your purpose.
If the data you want is not all there, or you want to add more, see the beginners' guide and the map making guide to get you started off adding or improving data in the project.
An SVG image generated from OpenStreetMap using the export tab.
To export your vector graphic file, zoom the main map into the area you want to export, click on the export tab, tweak the area you're interested in (if necessary), select 'Mapnik image' and 'SVG' from the options and click Export. Experiment with the scale to see what the results are, but initially the default scale will probably suffice.
A vector graphics editor such as Adobe Illustrator or, even better, an open source editor such as Inkscape.
Open the downloaded SVG file in your editor and you should see a nice pretty OpenStreetMap image there. To start to work on it, it's a good idea to 'ungroup' the items so that you can edit them individually (I had to do this twice to fully separate out all the objects). You'll notice that the map is made up of many objects, one for each node and way you'd normally see rendered on the maps at openstreetmap.org. You'll also notice that text annotations (names, road references, etc.) are all broken down to their constituent characters too.
Some time to do some (at times quite fiddly) image editing and map making.
You can get some results out in a relatively short timeframe, but you'll likely want to improve the map over time as you become more familiar with the data and tools available.

What steps were needed to create the TT map?

Select all the items and fade them (I lowered the level of transparency, but there are probably better ways of doing it).
Select the text items, group each the characters of each name together to make it easier to edit them, re-emphasise them, and change their size if desired.
Select any other items that should be re-emphasised and do that (I did the sea and the land).
Select each element of the subject that you'd like to highlight (for me, this was each way that makes up the course) and change the styling of it (I increased the size, and re-emphasised the original colours). I also combined them all into a single 'path' and joined the end of each one to the end of the next (using the 'Edit paths by nodes' ad 'Join selected end nodes' tools) to make it fill in the gaps that appear between them.

Hopefully this short tutorial (well, documentation of my first steps) was helpful for other budding neo-cartographers out there. If you've made your own maps from OpenStreetMap data and have any hints and tips that may be useful, please feel free to add a comment to this post.