Tile them vectors, part 1

2017-12-27 - posted in: data-visualization, geo, web-technologies,

Part of my day job involves the handling and processing of geospatial data, so why not get creative with it?

Thanks to the folks at Mapzen, some pretty awesome and cutting edge geo services are available to dabble with.

One of them is the Vector Tile service. Contrary to popular belief, Google Maps, OSM and other online map services do not render data live on your device. Rather, they look up and deliver static tile images to be displayed, along with metadata. With the Mapzen Vector Tile Service, however, you get all the raw geodata to be rendered via canvas or WebGL. This presents an opportunity to hook into this process and hack around a little bit.

Which brings the second service, the Tangram map rendering platform, into the equation. Via config (YAML) files you can design all the usual map elements like earth, water, roads, buildings etc., mix in predefined styles (Tangram Blocks) and even provide your own vertex and fragment shaders. With Tangram Play thereā€˜s a tool which gets you going instantly, all you need is a Github (or Mapzen) account.

So here are some takes on different maps, which I will mould into a single multimedia composition at a later time.


Unfortunately, Mapzen have announced the shutdown of their services. For me, this is terrible news, but I will be looking for alternatives…

This version employs a vertex displacement shader and a mixed in noise Tangram block for the random coloring of buildings. Furthermore, roads are animated using a cosine function displacing the vertices.

My first take on terrain mapping using normal mapping, as explained here. In short, a color gradient is used to determine how the normals (derived from a rasterized terrain tiles source) are to reflect incoming light.

Additionally, I mixed in the fx-water tangram block for water surfaces.

Another terrain map, very similar to the one mentioned above

A variation of the animated contours example. The map normals are used to determine lines of equal elevation and animate them to produce a rolling lava effect.