Tag Archives: tangram

Map Club — Interactive Maps with Mapzen

20160901_banner_fall_v1

Last week, Map Club revisited Tangram, the powerful open-source renderer for Mapzen. (We first explored Mapzen over the summer.) Mapzen is an open, sustainable, and accessible mapping platform that offers intricate control over the design of web-based maps.

Centered on a map of Manhattan, attendees referenced the comprehensive documentation page to alter the drawing style of Tangram’s vector tile service. Tangram is connected to the OpenStreetMap database, and leverages OpenGL and shader language to enable mapmakers to fine-tune the visual effects of rendered data. The custom YAML syntax through which Tangram maps are styled provided a readable way of adjusting the visual attributes of the city in unexpected ways.

rachael

Emily_01_128_1000_02

From top: Vibrant map by Rachael, animated water and building coloring using GLSL

There will be no Map Club session next Friday! The following Friday (10/28), we will be looking at OpenLayers, a high-performance library for rendering geographic information in web pages.

Sign up here if you would like to receive updates on future Map Club sessions. For this session’s resources and materials, visit the Map Club Github repository.

Map Club, Session 04 — Vibrant Maps with Mapzen

20160712_Banner_v1

Map Club spent this week’s session exploring Mapzen, an open, sustainable, and accessible mapping platform. Attendees focused specifically on Tangram, an open-source renderer that allows intricate control over the design of web-based interactive maps. Mapzen leverages vector graphics and OpenGL to generate speedy, beautifully-rendered tiles, easily displayed using Leaflet.

Centered on Columbia, Tricia customized Tangram’s lighting model to produce a concentrated spotlight:

Tricia

Jeremiah made use of different point light properties to generate a vivid cityscape:

Jeremiah_02

Along with lighting capabilities and color customization, Tangram allows for custom GLSL. (Full overview here.) Emily used a fragment shader to animate the colors of New York City buildings and water:

Emily_01_128_1000_02

Eric imported Transit App trip requests, and used the date of a request to extrude elevation:

Eric_03_128_1000

A successful week full of beautiful and strange results. Next Tuesday, in our final summer session, we will explore different projections in the D3.js JavaScript library. See you then!

For this session’s resources and materials, visit the Map Club Github repository.