Javascript
Leave a comment

Modern Map Art – Deconstructing, filling and restitching maps

Created by David Hoe (Mini Cloud Studios) from London, and currently on Kickstarter, ‘Modern Map Art Prints’ is a collection of detailed maps transformed into colourful abstract art prints of anywhere in the world. The project celebrates the joys of travel and the unique fingerprint of every city from above – it is a crossover of modern maps and playful colour using specially created software.

Each map is like a jigsaw puzzle with thousands (potentially hundreds of thousands) of individual pieces. David deconstructs this puzzle to find every piece in order to colour them and then put it all back together again with his custom designed software.

↑ San Francisco deconstructed and coloured

High resolution base maps are created out of a grid of smaller map tiles and stitched together.  The Static Maps API allows anyone to download a small region with a particular base style applied.  Google has a page to try out different styles here and it is really flexible as you can switch off whatever you don’t want and also define things like line thickness for roads. The API call requires 3 main things: a zoom level, latitude and longitude, but what he actually needs is to specify is a X and Y position instead of the Lat-Long coordinates for the tile offsets.  After testing it turned out that longitude is linearly proportional to x for all locations, but the same delta latitude jump would result in very different jumps along the Y direction for different locations.  So to find an  optimal x and y offset to use, the team first downloaded a few tiles with an initial guess, calculating the overlap distance in x and y directions.  This is done using a simple sliding window and differencing of pixels until a minimum is found – this will be the overlap point. They can now download all the tiles ensuring a small overlap and then apply the alignment  process to these tiles again to perfectly align every row and column in the grid –  ending up with a high resolution base map to work from.

Extracting each shape is done by walking each pixel and using a flood-filling algorithm to find all the pixels that are part of the same region, stopping when they hit a road or water pixel. The algorithm along with some animations of it visualised can be seen here. On average, the examples shown have about 10-30 thousand shapes.  Tokyo when zoomed out one step further has about 250 thousand shapes.

Once segmented, each shape has a colour applied to it.  This colour is sampled from a hand made colour-map. The advantage of sampling from a bitmap instead of just a array of colours is that it’s alot easier to adjust by eye and it means you can vary  the chance of particular colour being picked by just having more of that colour on the colour-map.

Finally, a standard flood-fill will end up with jagged edges or bits of artifacting around the anti-aliased parts of an image.  To fix this they oversample when flood-filling by filling in the pixels that are anti-aliased, and use the original map to create a alpha map for the roads and water.  This then gets applied over the top hiding all the jaggies and they end up with the final images you see.

Created using Node.js, Google Maps API and node-canvas package.

Backing the project on Kickstarter will get you a high quality, very detailed custom made poster with the location and colour scheme of your choice.  Backers will also have access to a simple-to-use Map Designer that’s accessible from any web browser, this will let them choose the exact region and preview for each print they order.  Posters are printed on museum quality archival paper in a range of sizes that are ready to pop into a frame to hang.

Project PageDavid Hoe