Lines

This post was originally published on mapzen.com by Geraldine Sarmiento on 14 January 2016.

Cartographic design is all about drawing. Before I begin something new, I always start by reflecting on the essentials. I like to dissect and think about the most basic elements. What’s in my toolbox? What are my ingredients? Let’s think about lines. What can lines describe?

A line can describe a route — from point A to point B

screen-reader accessible "alternate text" for image

A line can describe a shape or a form, such as a coastline

screen-reader accessible "alternate text" for image

open the map, and take a look at the code that makes it work

A line can describe a ground feature such as these airport runways at SFO

In this case it’s a drawing but, now also a symbol, like a signature or calligraphic writing. Fascinating!

map | code

With contour lines we can give forms dimension

screen-reader accessible "alternate text" for image

image from Thematic Mapping — link

Here’s a drawing technique I learned at NACIS, called Illuminated or Shadowed Contours, or otherwise called “Tanaka Contours”

screen-reader accessible "alternate text" for image

James Eynard gave a detailed talk about this drawing technique in Minneapolis at NACIS this year, Evaluating the Effectiveness of Illuminated and Shadowed Contour Lines — link. This technique was developed by Tanaka Kitiro in 1950 — link.

Here are a variety of railroad lines by cartographer Erwin Raisz

screen-reader accessible "alternate text" for image

Lines can also describe a structure such as a grid

Check out these grids!

map | code

Lines can form into polygons such as these building footprints

screen-reader accessible "alternate text" for image

Forbidden City, Beijing

map | code

Apply a grid to a building facade and it becomes a surface

screen-reader accessible "alternate text" for image

Columbus Circle, Manhattan

map | code

Repetition! The tool I love most! Repeat a line and we have stripes!

screen-reader accessible "alternate text" for image

Brasília

map | code

Change the rhythm and we have a gradient

Lower Manhattan

map | code

Stripes can become texture when applied to lines, such as these diagonal stripes on a coastline

screen-reader accessible "alternate text" for image

Stockholm Coastline Area

map | code

Or apply these repeated wave lines to an area and you can create a water texture

screen-reader accessible "alternate text" for image

Southeast Asia

map | code

I use some of these drawing techniques in one of our featured styles called Refill. Refill is a continuation of the Toner style I started at Stamen. Think of Refill as a more detailed Toner, an elaboration with the GL capabilities of Tangram. With Tangram I’m able to explore more detailed line work, patterns and building extrusions. Below are some highlights of line-work from the Refill Style along with some isolated examples of drawing techniques I talked about above.

San Francisco in Refill

screen-reader accessible "alternate text" for image

map | code

YYJ Victoria, British Columbia

screen-reader accessible "alternate text" for image

map | code

HND Tokyo in Refill

screen-reader accessible "alternate text" for image

map | code

Airport Runways Looking Like Symbols around London

screen-reader accessible "alternate text" for image

map | code

Shinjuku West

screen-reader accessible "alternate text" for image

map | code

Stockholm Coastline Views in Refill

screen-reader accessible "alternate text" for image

map | code

Rome in Stripes!

map | code

Building extrusions in Singapore

screen-reader accessible "alternate text" for image

map | code

I’ll conclude this with some gorgeous examples of beautiful line-work for your inspiration.

Jorinde Voigt

screen-reader accessible "alternate text" for image

Massimo Vignelli

screen-reader accessible "alternate text" for image

Daniel Libeskind

screen-reader accessible "alternate text" for image

Julie Mehretu

screen-reader accessible "alternate text" for image

Go and explore what you can do with lines!

Read the Tangram Documentation for more details. Let us know if you have any questions!