Typographic maps using OpenStreetMap, XSLT, JavaScript and SVG

Recently I came across Typographic Maps, and I thought I’d try something similar. Not by hand, like they do. Instead, grabbing some map data off OpenStreetMap and automatically transforming it into SVG, as shown below. Not as nice as the original, but I didn’t want to spend hours making it look better. (It would probably never look as nice as when done by hand, although the ability to choose any place is a plus.) Instead I learned a few interesting things along the way.

Brussels Centre (SVG version)

How it works:

A rectangular map is selected. I used GetLatLon to find the exact latitude and longitude of the test maps.

The OpenStreetMap data is retrieved (here, Hyde Park Corner):

http://api.openstreetmap.org/api/0.6/map?bbox=-0.1593017578125,51.49805708407405,-0.14591217041015625,51.50687269909403

This returns nice and well-formed XML.

The format is easy to understand, and so it was also easy to write a basic XSLT stylesheet to select features of interest (roads, parks, etc) and turn them into SVG. Again, if someone ever wanted to make it into a generic tool, there should be a GUI lets you choose your map and the tool would automatically adjust to the scale and filter out details that are too small and make the output a mess like now.

Here is the rendering of Hyde Park Corner (and in SVG):

Hyde Park Corner

And that’s it.

Now what’s really interesting is that while looking for the latest version of Saxon, I discovered SaxonCE, a JavaScript versionĀ of Saxon. It’s not even a wrapper for the Java version, it’s the actual Saxon code cross-compiled to JS (using GWT) and running in the browser. Very impressive. And so, you can now bypass your browser’s old and buggy XSLT engine and instead add to an HTML page something like:

<script type="text/javascript"
        language="javascript" 
        src="../Saxonce/Saxonce.nocache.js"></script>

(You can also use the old XML Stylesheet Processing Instruction, and there’s a JS API, too). Here’s an example using the <script> construct above, where the XSLT transform mentioned above inserts theĀ SVG map into an HTML page, where the <script> is. It takes a while to run, but it works, and in all browsers I’ve tried. When I think about the fact that the XSLT transform itself contains some JavaScript to text nodes to the SVG DOM, my head starts spinning.

All the code and examples are at github/maxf/maporizer

This entry was posted in General. Bookmark the permalink.