The Patchwork Patterns of Tangram

Tangram Patterns is an eye dazzling demonstration of a Tangram vector map incorporating patterns from texture.js.

Mapzen's Tangram mapping platform is a library for creating 2D & 3D maps using WebGL. Tangram Patterns uses Textures.js, a d3.js based library for creating SVG patterns, with the Tagram map library. The SVG patterns created by Textures.js are designed to be used in data visualizations.

The effect isn't exactly easy on the eyes when you apply so many of the textures on one map like this. Hopefully if you ever create a mapped visualization of your data using Textures.js you will be a little more selective in the choice and number of patterns.


A number of other great experimental maps have been created with Tangram. This Day / Night Map shows how colors and building footprints can be updated in real-time in the browser. The Tron Map shows how you can apply animation to map tiles (in this case to create the effect of moving vehicles on roads and streets).

My favorite style so far is this Cross Hatch map (pictured). I'm also rather fond of the Lego Style map, made out of colored plastic brick textures. When panning around on these maps notice how the perspective on the 3d buildings changes with your point of view.