Cartography Guide

A short, friendly guide to basic principles of map design

What is a web map?

“Web map” often implies a map that is not simply on the web, but rather one that is powered by the web. A digital map is on a computer, but may not be accessible by internet, and is relatively static if it is. A web map depends on the internet. It is usually interactive and not always self-contained.

Powered by the web

Web maps, in contrast to a simple static map image that resides on the web, rely on the web in order to exist and function. This means one or more of a few things:

Anatomy of a web map

In many contexts “web map” has an even narrower definition, a category of map that will be described here in further detail. It includes some of the maps you probably use almost every day, such as Google Maps.

Slippy maps

The typical form of web map is sometimes called a “slippy map.” This is a type of map you’re used to, like Google’s: you can grab and pan the map, and zoom in or out. Google was a major pioneer of this type of map with the introduction of their map service in 2005. It represented a huge leap from the previous standard web map, where panning (in fixed amounts) or zooming essentially required reloading the entire map image with a new extent.

Tiles

Slippy maps accomplish their slick usability with tiling schemes. In the old days, a map view was a single image. You had to load the whole thing before you could see it. Now, the map you see comprises many smaller tiles that load invididually. What this means is you only load the part of the map you need. For example if you want to look slightly east, you only need to load a new column of tiles on the right side instead of reloading the entire map. Tiling makes map viewing fast and data much more manageable.

A slowed-down example of how tiled maps load the visible map area piece-by-piece.

Tiles come in two flavors: raster tiles are pre-rendered images of map data, while vector tiles are small sections of the data itself, which is then rendered in the browser. Raster tiles are the original standard and are still very common, but vector tiles have moved to the forefront as technology has made live-rendering of map data feasible. Vector tiles are efficient and fast for a variety of reasons—see some technical explanations in Tom MacWright’s JS.Geo presentation on vector tiles.

Tiled maps use a standard tiling scheme which is worth understanding. Tiles are idenfied by three numbers, typically in this order:

  1. Zoom level: the scale of the map for this tile, relative to an initial scale at which the whole world fits in one tile. (More on this in a moment.)
  2. An X coordinate: the horizontal position of this tile, within the grid of tiles for the world map at this zoom level. Usually, this number increases from left to right, with 0 being the left edge of the map, or 180º West longitude.
  3. A Y coordinate: the vertical position of this tile, within the grid of tiles for the world map at this zoom level. Usually, this number counts up from top to bottom to right, with 0 being the top edge of the map, around 85º North latitude. (In the standard Mercator map projection of web maps, 85º latitude northern and southern limits allows everything to fit in a square.)

Tiles are typically numbered with [z, x, y] coordinates. This example is zoom level 2.

Each zoom level contains twice as many rows and columns as the previous level. With zoom level zero being a single tile for the whole world, this means the number of tiles for any zoom level z is:

2z x 2z, or 4z

Notice the relationship of tile numbers in zoom level 3 (below) to those in zoom level 2 (above). Consider the top left corner of each tile in zoom level 2. When we increase the zoom level by one, the x and y for a tile with that same corner position on the map are multiplied by two. For example Norway is in tile [2,2,1] at zoom level 2, and [3,4,2] at zoom level 3.

Although the numbering pattern is different in a couple of systems, tile positions and extents are nearly universal and are well understood by code libraries such as Leaflet. Many are built to understand URL patterns for tile locations (tiles are stored online one way or another), such as
http://path-to-tiles/{z}/{x}/{y}.png.

Map projections on the web

Standard slippy maps use the Web Mercator projection, much to the chagrin of many cartographers. There are a couple good reasons for this, though:

However, it comes with a few pitfalls: