Animations Using Open Street Map Data

london with shadows

The image above was made using Open Street Map (OSM) data. This past weekend at the OSM Conference State of the Map Barry Crabtree showed off several experimental animations. If you look at the image closely you’ll see that there are shadows. It’s a still from a short video that shows an online map as the sun moves across it. You can see before and after shots here.

He also made an awesome clip (after the jump) that shows the map breathing. A third clip shows a route by wriggling (as though moles are running through tunnels).

Barry made these animations by:

I used osmarender that’s one of the OSM tools to render a map. It takes the OSM data and creates an SVG. I then modified the SVG to add in the filter effects to create the drop shadows, then rendered them using the Batik svg renderer [Brady: link to Batik]. The animations were created by repeatedly modifying a local copy of the OSM data & rendering it to create a set of pngs. Stitch them together and get nice breathing maps videos

I got to the OSM conference a bit late, but before I had been there 15 minutes I had been told about these animations by two people. It’s exciting to see what a person can do when he has access to the code and the data (like Stamen with their Trulia Hindsight mapRadar post). It really highlighted to me the limitations of the current map APIs and the importance of open data projects like OSM.

tags: , , ,