Chapter 13

The Tile-Based Mapping Transition

in Cartography

Michael P. Peterson

Abstract Arguably, the major development of the first two decades of maps and
the Internet is a method of map distribution that divides the map into smaller tiles.
The tiling of maps along with a more interactive form of communication with a
server called AJAX transformed the online mapping experience. Soon after the
method was introduced through Google Maps, all other online map providers
switched to the new form of map distribution. The introduction of Application
Programmer Interfaces that allowed user information to be added to the maps
solidified this form of online map presentation. Whether for good or bad, online
mapping is currently in a tile-based era and will likely be so for the foreseeable
future. The method is examined more closely along with the potential for adding
user-defined maps.

13.1 Introduction

Maps became a major component of the online information landscape in 1993 after
graphical illustrations could be added to World Wide Web pages (Peterson 2003).
All types of maps became easily available, from subway maps of cities to maps of
the moon. Map users could even choose between alternative representations of the
same environment and determine the one that best suited their needs. Interactive
sites made it possible to center the map on an area of interest and include features
requested by the user.
The nearly two decades since 1993 can be seen as a period of discovery as map
providers tried different ways to make use of the new medium. Paper maps were
initially scanned. Then, cartographers alternated between various vector and raster
formats and forms of interactivity. A major goal was to increase the speed of map

M.P. Peterson (*)

Department of Geography/Geology, University of Nebraska at Omaha, Omaha, NE, USA
e-mail: [email protected]

L. Zentai and J.R. Nunez (eds.), Maps for the Future, 151
Lecture Notes in Geoinformation and Cartography 5,
DOI 10.1007/978-3-642-19522-8_13, # Springer-Verlag Berlin Heidelberg 2012
152 M.P. Peterson

delivery. Map users did not want to wait for the map and a method was devised to
appease the impatient online map user. This method involved dividing the map into
pieces, or tiles. It is important to understand the tile-based mapping transition and
what it means to cartography. We begin by examining server-based mapping.

13.2 Server-Based Mapping

Interactive server-based mapping began in 1993 within months after the introduc-
tion of the Mosaic browser in March of that year. The first interactive online
mapping application was developed by Steve Putz (1994) at the Xerox Palo Alto
Research Center (PARC). His Map Viewer program allowed the user’s client
computer to create on-demand maps from a geographic database. Each interaction
with Map Viewer would request a new map from the server that was zoomed in on a
specific point (see Fig. 13.1). Individual maps were generated in a graphic file and
embedded into a web page.

Fig. 13.1 Xerox Parc Map Viewer was an early example of an interactive web map. By
interacting with a mapping program on the server, the site made it possible to generate a map of
the world at different zoom levels. The resultant map was converted into a graphic file and inserted
into a web page
13 The Tile-Based Mapping Transition in Cartography 153

MapQuest introduced its online mapping site in 1996 based on a large database
that included most streets in the North America. Within months, it was producing
millions of maps every day and was the leading online map provider until 2009. The
user’s client computer would make a request for a specific map. MapQuest servers
would respond to the request by drawing the map from a database of points and
lines, converting this to a grid-based raster format and delivering the resultant map
within a web page.
Each request for another map, at a different zoom level or centered at another
point, would result in another server request that would produce another map that
would be embedded in another webpage that would update the page on the user’s
computer. Although the process was fairly fast, there was always a wait for the
server to respond. A simple zoom or pan required waiting for the server to produce
another map that was inserted into another webpage. Server requests are also
subject to Internet traffic so a request for a map might take considerably longer
when traffic was heavy. Maps would be produced more quickly in the overnight
hours when Internet traffic was lighter. This variability in response times was found
to be more annoying for users than the generally slow response times. Figure 13.2
depicts a 2001 version of MapQuest along with three maps of southern Florida at
different scales.

13.3 Tiled Web Maps

Google Maps, introduced in 2005, offered a more interactive street map interface
(Peterson 2007). Google, known for its search engine, effectively added a map-
based search engine through Google Maps and the stand-alone Google Earth. In the
process, they found a more effective way to indirectly make money from online
maps by charging businesses, much like the way they make a profit through their
search engine. In addition, by not including ads around the map, like MapQuest,
they left more room for the map on the computer screen. Google Maps is based on
two major ideas: (1) image tiling; and (2) AJAX.

13.3.1 Image Tiling

Image tiling had been used since the early days of the World Wide Web to speed the
delivery of graphics (Sample and Ioup 2010). In comparison to text, images
require more storage and therefore take longer to download. A solution was to
divide the image into smaller segments, or tiles, and send each tile individually
through the Internet. These smaller files often travel faster because each can take a
different route to the destination computer. On the receiving end, the tiles are
reassembled in their proper location on the web page. With a moderately fast
Internet connection, all of this occurs so quickly that the user rarely notices that
154 M.P. Peterson

Fig. 13.2 A 2001 version of the MapQuest webpage. Dominated by ads, the map constitutes only
a small part of the webpage. Three different maps of southern Florida are also depicted. A total of
ten zoom levels were available

the image is actually composed of square pieces. With a slower Internet connection,
the individual tiles are clearly evident.
The basic street map is the most functional of all the views provided by these
services. The map is provided in up to 20 scales called levels of detail (LOD). Each
map at a particular level of detail is rendered from an underlying vector database
consisting of points, lines and areas. This map is converted into a grid representa-
tion by placing the points, lines, and areas into a matrix of pixels. In the process,
anti-aliasing is performed by adding lighter pixels around sharp edges to soften the
stair-step effect. After the map is placed in a matrix that can be millions of pixels on
each side, it is divided into tiles—usually 256  256 pixels (see Fig. 13.3). This
process is repeated for every LOD.
13 The Tile-Based Mapping Transition in Cartography 155

Large Raster

Vectors Individual
tile

256

points lines areas 256

Rasterization

Fig. 13.3 The process of making map tiles. A database of points, lines and areas is rasterized into
a large matrix that is subsequently divided into 256  256 square tiles

Fig. 13.4 Individual map tiles from Google Map at six different levels of detail (zoom levels). In
2005, Google introduced a tiling system to deliver online maps. Over a trillion tiles are used for
Google’s 20 zoom levels

Figure 13.4 depicts a series of Google Map tiles at different scales. All tiles are
256256 pixels and require an average of 15 KB a piece to store in the PNG format.
Table 13.1 shows the number of tiles that are used in a tile-based mapping system
for 20 levels of detail (LOD), or zoom levels, and the associated storage
requirements and storage costs. With 20 LODs, there are a total of approximately
1 trillion tiles for the whole world. At an average of 15 KB per tile, the total memory
requirements would be 20 Petabytes, or 20,480 Terabytes. No single client
156 M.P. Peterson

Table 13.1 The number of tiles, storage requirements, and storage costs used by a tile-based
online mapping system to represent the world at different levels of detail (LOD) or zoom levels
Levels Number of tiles Ground Storage Disk storage RAM memory
of detail distance per requirements at costs at $100 storage costs at
(LOD) pixel in 15 kilobytes per per terabyte $30 per gigabyte
meters tile
1 4 78,272 60 kilobytes $0.000006 $0.002
(KB)
2 16 39,136 240 KB $0.00002 $0.007
3 64 19,568 968 KB $0.0001 $0.03
4 256 9,784 3.75 megabytes $0.0004 $0.11
(MB)
5 1,024 4,892 15 MB $0.001 $0.44
6 4,096 2,446 60 MB $0.006 $1.76
7 16,384 1,223 240 MB $0.02 $7.03
8 65,536 611.50 960 MB $0.09 $28.13
9 262,144 305.75 3.75 gigabytes $0.37 $112.50
(GB)
10 1,048,576 152.88 15 GB $1.46 $450.00
11 4,194,304 76.44 60 GB $5.86 $1,800.00
12 16,777,216 38.22 240 GB $23.44 $7,200.00
13 67,108,864 19.11 968 GB $93.75 $28,800.00
14 268,435,456 9.55 3.75 terabytes $375 $115,200.00
(TB)
15 1,073,741,824 4.78 15 TB $1,500 $460,800.00
16 4,294,967,296 2.39 60 TB $6,000 $1,843,200.00
17 17,179,869,184 1.19 240 TB $24,000 $7,372,800.00
18 68,719,476,736 0.60 960 TB $96,000 $29,491,200.00
19 274,877,906,944 0.30 3.75 petabytes $384,000 $117,964,800.00
(PB)
20 1,099,511,627,776 0.15 15 PB $1,536,000 $471,859,200.00
Total 1,466,015,503,700 20,480 terabytes $2,048,000 $629,145,600
or
20 petabytes

computer could have this much storage capacity. A data center is required to store
this amount of data.
The cost of storing this much data on hard drives can be calculated based on a
cost of about $100 for a 1 Terabyte drive, a price that does not include the housing
or computer connection. To store the entire one trillion tiles would cost about $2
million ($100  20,480 Terabytes). In order to achieve faster response times, there
is some indication that Google uses faster random-access memory (RAM) to store
the Google map tiles. If the entire map of the world were stored in RAM, it would
cost the company more than $629 million. It is possible that only a subset of tiles are
stored with the rest being created on-the-fly based on demand.
These data storage requirements and costs are only for the map. The satellite
view, with tiles in the JPEG format, requires approximately the same amount of
storage space. A terrain view is also provided with 15 levels of detail. Google
13 The Tile-Based Mapping Transition in Cartography 157

maintains multiple data centers around the world and each would likely have a copy
of the map and satellite image, and any other map that is provided. Combining all of
these data storage costs provides some indication of the importance placed on maps
by Google and other companies. Even governments would have difficulty justifying
the initial and ongoing expense of maintaining an online map in this way.
In a transformation that shows that imitation is the sincerest form of flattery, all
of the other major interactive map providers—MapQuest, Yahoo, Microsoft
(Bing)—converted from the standard server-client to the AJAX, tile-based method
of map delivery within a short time after the introduction of Google Maps. In
addition, they all used the same exact method of tiling with the same divisions. All
of the tiles from the major map providers are inter-changeable—at least by position.

13.3.2 AJAX

The second major innovation brought by Google Maps was the incorporation of
Asynchronous JavaScript and XML (AJAX) in the relationship between the server
and client. This was the culmination of many years of effort to re-shape interaction
on the Internet. Essentially, AJAX maintains a continuous connection with the
server—exchanging small messages in the background even when the user has not
made a specific request. This allows for faster server responses when the user does
make a request. AJAX might be thought of an application that works in the
background of a browser to anticipate what the user might want and be ready to
communicate with the server to respond to a request. Operations in Google Maps
that are particularly assisted by AJAX include zooming and panning, a common
form of interaction with maps.
AJAX is a technique that combines JavaScript and XML to create very interac-
tive, server-client web applications. AJAX is not a programming language in itself,
but a term that refers to the use of a group of different technologies together. The
technique uses a combination of HTML, Cascading Style Sheets (CSS), Document
Object Model (DOM), and the eXtensible Markup Language (XML). These are all
freely available technologies. Asynchronous communication is used to exchange
data with the server while the user is idle so that the entire web page does not have
to be reloaded each time the user makes a change (see Fig. 13.5). The result is
increased interactivity, speed, and an improved user interface.
AJAX eliminates the usual start-stop-start-stop type of interaction. When the
map is scrolled, additional map tiles are automatically downloaded. The tiles are
added almost instantly because a connection is maintained to the server so that
additional tiles can be quickly loaded. As the user scrolls, more of the map or
satellite image is downloaded from the server without the user making a specific
request for additional tiles.
Asynchronous communication is made possible by the AJAX engine, JavaScript
code that resides between the user and the server. Instead of loading the webpage at
158 M.P. Peterson

Classic Web Application Model (synchronous)

CLIENT

user activity user activity user activity

data transmiss

data transmiss
data transmission

data transmission
TIME
ion

ion
system system
processing processing
SERVER

Ajax Web Application Model (asynchronous)

CLIENT
browser

user activity
display

display

display

display
input

input

input
input

Ajax engine

client-side processing
data transmiss

data transmiss

data transmiss

data transmiss
data transmission

data transmission

data transmission

data transmission

TIME
ion

ion

ion

ion

server-side server-side server-side server-side

processing processing processing processing
SERVER

Fig. 13.5 The typical client–server communication is synchronous (top illustration). AJAX uses
asynchronous communication between the client and the server. A connection is maintained to the
server to speed interaction

the start of a web session, the AJAX engine is initially loaded in the background.
Once loaded, the JavaScript code downloads data from the server without refresh-
ing the web page. A user action that normally would generate an HTTP request to
the server becomes instead a JavaScript call to the AJAX engine. If the engine can
respond to a user action, no response from the server is required. If the AJAX
engine needs something from the server to respond to a user request—such as
retrieving new data—the engine makes the request without interrupting the user’s
13 The Tile-Based Mapping Transition in Cartography 159

interaction with the application. AJAX has transformed the online client/server
experience and is used by many different types of applications.

13.3.3 Mashups and the Application Programmer Interface

Mashups are an integral part of what is commonly referred to as Web 2.0 (Batty
et al. 2010). Beginning in about 2004, Web 2.0 represents a variety of innovative
resources, and ways of interacting with, or combining web content. In addition to
mashups, Web 2.0 also includes the concept of wikis, such as Wikipedia, blog
pages, podcasts, RSS feeds, and AJAX. Social networking sites like MySpace and
Facebook are also seen as Web 2.0 applications.
Central to mashups are Application Programming Interfaces (APIs), online
libraries of functions that that are made freely available. Many different API
libraries have been written for the user-driven web. APIs are the tools that facilitate
the melding of data and resources from multiple web resources by providing tools
to acquire, manipulate and display information from a variety of sources. In a strict
sense, map mashups combine data from one website and display it with a mapping
API. The term has come to be used for any mapping of data using an API, even data
supplied by the user.
APIs are used for many different types of applications but the creation of maps is
one of the major uses. This should not be surprising because there is a great deal of
data that has a location component. The relative ease of overlaying all types of
information with online mapping tools has further transformed cartography from a
passive to an active enterprise with all types of data being mapped.
Introduced in 2006, the Google Maps API consists of a series of map-related
functions. These functions control the appearance of the map, including the scale,
position, and any added information in the form of points, lines or areas. The
purpose of the API is to make it possible to incorporate user-defined maps on
websites, and to overlay information from other sources.

13.3.4 Map Layers

Google and the other online map providers have a large number of pre-defined
layers. These layers have also been tiled—like all of the tiles that make up the map
and the satellite image. Table 13.2 shows the available layers provided by Google.
These overlays consist of a series of tiles that have the same size and dimension
as the base tiles. Most of the overlay tiles are made transparent so that you can see
the tile underneath. Whatever part of the tile is opaque becomes superimposed on
the underlying map (see Fig. 13.6). Overlaying transparent tiles in this way is faster
than overlaying individual points or lines. Most maps supplied by these services are
160 M.P. Peterson

Table 13.2 Standard layers Traffic Current traffic conditions

provided by Google. All
layers are tiled Photos Locations of available photographs
Labels Street, city, and boundary names
Webcams Locations of cameras with live imagery
Videos Locations of YouTube videos
Wikipedia Wikipedia pages for locations on map
Bicycling Biking paths and trails
Buzz Postings to Google Buzz
45 45 degree angle bird’s-eye view
Terrain Shaded relief map
Transit Public transportation network

+ =

Fig. 13.6 The tile overlay method. A map tile on the left is overlaid with a transparent PNG file
with an opaque line. Combining the two tiles produces the display on the right

transparent tile overlays and have a particular theme such as traffic, webcams, or
photos.
Most of the layers that are offered by online mapping services are updated only
occasionally. An example of a frequently updated layer is traffic (see top map in
Fig. 13.7). This layer shows the speed of traffic for major streets in the larger cities
of the world and is updated continuously throughout the day. The maps are also
tiled at multiple levels of detail for faster download. Only those tiles are replaced
that need updating. The bottom map in Fig. 13.7 shows a bicycle path map that
completely covers the underlying street map, at least in urban areas. It is updated
only irregularly.
An example application of the overlay is the campus map for the University of
Nebraska at Omaha (see Fig. 13.8). Here, a map of the campus was first constructed
with vectors in Adobe Illustrator. Subsequently, the map was converted to the raster
PNG format and tiled through an online tiling service. Three different levels of
detail of tiles were created and combined with the Google Map as a layer. Layers
were also created for parking and the shuttle transportation network.
Figure 13.9 shows how the parking and shuttle layers are integrated within
Google Maps to provide to provide an overall view of the campus. All Google
Map functions are active, such as searching for a specific location or travel routing.
13 The Tile-Based Mapping Transition in Cartography 161

Fig. 13.7 Comparison of two different overlays. The top map showing traffic is transparent
allowing the underlying street map to be visible. The bottom map showing bicycle paths is opaque,
at least in urban areas. Both overlays are supplied in multiple levels of detail

13.4 Summary

The advantage of using a major online mapping site is that the maps represent a
common and recognizable representation of the world. Overlaying features on top
of these maps provides a frame of reference for the map user. A particular
advantage for thematic mapping is the ability to spatially reference thematic data.
For simplicity, thematic maps have limited the display of spatial reference data such
as the location of cities and transportation networks. This has made it more difficult
for map users to spatially reference thematic data.
Storing the online map represents a major expense for online map providers.
Depending upon the method of storage, the cost for simply storing the map may be
as much US $630 million. Maintenance of the database and a variety of other costs
would represent significant on-going costs. A non-profit agency or government
162 M.P. Peterson

Fig. 13.8 Campus map overlay for the University of Nebraska at Omaha. The tiled representation
is supplied at three levels of detail and overlays over a standard Google Map

Fig. 13.9 Parking and shuttle layers superimposed on a Google Map of the University of
Nebraska at Omaha campus

entity would have difficulty justifying this expenditure. Application Programmer

Interfaces represent a way to integrate information with the online map. For a
variety of reasons, this form of map delivery is the most cost-effective way of
making maps available to the online map user.
13 The Tile-Based Mapping Transition in Cartography 163

References

Batty M et al (2010) Map mashups, web 2.0 and the GIS revolution. Ann Gis 16:1–13
Peterson MP (2007) International perspectives on maps and the internet. Springer, Berlin
Peterson MP (2003) Maps and the internet. Elsevier, Amsterdam
Putz S (1994) Interactive information services using world-wide web hyper-text. Comput
Networks ISDN 27:273–280
Sample JT, Elias I (2010) Tile-based geospatial information systems: principles and practices.
Springer, New York