Simple street maps in SVG

OpenStreetMap Brussels

Simplified (click to enlarge)

As part of some data visualisation I’m currently working on (more on that soon), I needed a way to show simple street maps in the background of the data to be visualised. I looked around for existing SVG map renderers, but didn’t find much that was easy enough (to be honest I didn’t look that much, as I thought it would be a fun thing to do myself, and I’d already done something very similar with Maporizer).

The map data come from OpenStreetMaps (using their custom XML format), and I’ve used XSLT to transform them into SVG.

Everything is available on github. The README file explains what needs to be done to obtain the maps from OpenStreetMap and run the converter.


  • It’s not very hard. XSLT makes XML-to-XML transformations easier to write than any other language.
  • What’s tricky is that, on large scales, the osm files can be huge. The osm map of Brussels as shown on the image above is a 110MB file, for instance. That’s why there are two XSLT transforms: one to select the elements that should be shown on the SVG, and another to transforms those elements into SVG markup
  • The params.xml file shows how to simply select the map elements to select. And the styling in the SVG is done using a CSS stylesheet whose classes correspond to the types of elements shown on the SVG. Both are straightforward, although you have to know a little bit of how openstreetmap names map elements (like ‘primary highway’)

For now I don’t need anything much more complicated, but I believe that without much effort it’s possible to render more map elements, like buildings, street names, etc. One would just need to select the element to be added in params.xml and its appearance in style.css.

This entry was posted in General. Bookmark the permalink.