Vector Tile ♥ Digital Fabrication

I really like making physical objects, but I am clumsy at handiwork. Do you know a person who just can’t cut a straight line along the guide? That’s me. I can’t, I just can’t. This is why digital fabrication has very special place in my heart. Laser cutters, 3D printers, computerized embroidery machines, CNCs… they make me feel like Iron Woman.

Mapzen’s vector tile page explains what a vector tile is, and how we can benefit from it compared to raster tiles, but there is one thing that I’d like to add. Vector tiles are ✿awesome✿ for digital fabrication since most digital fabrication tools accept vector graphic formats as an input. I ♥ maps, I ♥ fabrication, and I have vector tiles to use, so let’s get to work.

Here it is

Since the vector tiles contain three-dimensional information, I decided to fabricate them with a 3D printer. To prepare the tiles for the printer, we first created a tool called the Tile Exporter. It grabs a Mapzen vector tile, offers you 3d preview in your browser, and then creates an .OBJ file of the scene that you can download.

You can use the search box in the left top corner (powered by Mapzen search) to find an address or a place, and choose your zoom level. The bigger the zoom level, the smaller the area and greater the detail. Hit ‘Preview the tile’ button after your selection is done. Didn’t get the exact point you wanted? Use the navigation maps at the bottom right — you can move in 8 directions! (The navigation map even uses the same data that eventually generates the tiles - the freedom of vectors!)

The tile exporter gets the buildings, earth, water, landuse layers of a tile. Learn more about layers in tiles at the Mapzen Vector Tile documentation. There is also a good read from previous blog post about how Open Street Map data is represented in a tile.

Quilt of open source

This exporter is a true quilt of many open source projects. First, geojson from a vector tile is passed to D3 to generate the SVG. This SVG is then processed into a form suitable for Three with d3-three js, which lets Three smartly extrude the processed SVG into a 3D shape based on its height information. Three also offers an OBJ exporter, which makes it really easy to grab the OBJ file from the scene - and it’s an OBJ that the 3D printer wants. The tile exporter can only exist thanks to all of these awesome open source tools working together.

･ﾟ✧ ･ﾟ✧ *: Let’s *:･ﾟ✧ ･ﾟ✧

We made this tile of southern Manhattan on our 3D printer (MakerBot) in our New York office.

We made this OBJ file of the heart of La Lengua in San Francisco and sent it to Shapeways!

Getting meta: a GIF of a 3D-printed tile in front of an OBJ file above an SVG of a vector tile:

Don’t see your favorite building in a tile? It means that OpenStreetMap doesn’t have information about it yet, so please contribute! And let us know what tiles you make!