Home / Tutorials

Web Mapping

Web Mapping is the process of designing, implementing, generating, and delivering maps on the World Wide Web (Neumann 2008).

The provision of maps via the Internet is a rapidly evolving area of development and investment. While classical cartographic concepts still apply in how geospatial information can best be presented, the interactive nature of the Internet has offered (and continues to offer) novel ways to capture and communicate geospatial information.

Web mapping is conceptually fairly straightforward, but the myriad techniques for actually implementing maps on the web can become quite detailed and technical, which reflects the actual complexity hidden underneath the deceptively simple interactions we have with web maps on a daily basis. Beyond the most simple maps, computer programming skills are needed to develop and support web maps, with the most complex maps requiring teams of programmers and designers, each with specialized skills and duties.

Nevertheless, having some general understanding of how web maps are implemented is vital to anyone working with geospatial technology. This simplified introduction is provided with the caveat that since there are a large number of technologies that are evolving on a daily basis, this overview is outdated and incomplete. However, this page can be a starting point for further investigation of contemporary web mapping practices.

The Internet

A computer network is a set of computers with electronic interconnections that allow them to communicate with each other.

The Internet a global network of computer networks that has become fundamentally important to contemporary communication, including the communication of geospatial data.

Devices on the Internet are uniquely identified by 32-bit internet protocol (IP) addresses. These addresses are commonly written as four digits (each representing one 8-bit byte) separated by periods. For example, this is the IP address of the web server for the University of Denver web site (http://du.edu):

130.253.2.7

The World Wide Web

The World Wide Web (WWW) is a vast, open repository of information resources located on web servers interconnected using the Internet. The web was proposed and initially developed by Tim Berners-Lee in 1989.

Servers are large computers or groups of computers that respond to clients.

Clients are devices like desktop computers, laptop computers and mobile phones.

Resources on the web are uniquely identified by Uniform Resource Locators (URLs). A Uniform Resource Locator has multiple parts. For example with:

http://www.michaelminn.net/geography/

This is the basic process of how an Internet client gets information from a server on the web:

  1. A person on a client types a URL or clicks on a link
  2. The domain name separated from URL
  3. Message sent to a domain name server which returns an IP address to the client (All the Internet knows is numeric IP addresses)
  4. Client sends request to IP address via a router
  5. Routers pass to higher level routers until find a router that knows the network that contains the IP address
  6. Request is routed to server
  7. The server responds to the request
  8. Response packet(s) make their way back to the client through the routers
  9. The packets of information are received by client, reassembled and provided to the client's application (such as a web browser) for use
  10. Repeat as necessary

At a more-detailed level, these are the different hardware and software components of that process:

Web Pages

The content in a web page is specified with three different languages:

For web mapping, the HTML, CSS and JavaScript code in a web page often bring other image content into the web page and make requests to servers as users interact with those web pages.

All three of these languages are rich areas for study, and if you are interested in learning more, a good place to start is to work through the free tutorials at the World Wide Web Consortium's (W3C) W3Schools.

Below is a simple example HTML file containing an IFRAME that brings a Google Map onto the page:


Types of Web Maps

Static Maps

The simplest form of map on the web is the Static Map where the map content is fixed and unchanging. These are images generated with GIS software or scanned from paper maps in order to tell a story.

Static maps can be dynamically-generated where the server runs software that generates a map image based on changing conditions or specific user requests. An example of this type of map are radar images from the National Weather Service that are based on radar data this is periodically updated and changes over time.

Interactive Maps

Of much greater contemporary interest is the Interactive Web Map, where users can interact with the map - zooming, panning and/or changing the types of data displayed on the map.

While rudimentary interactive maps were made available on the web starting in the early 1990s, a radical transformation occurred with the debut of Google Maps in 2005.

Google Maps draws maps using 256-pixel by 256-pixel Raster Tiles that are stitched together in the browser with JavaScript code. As the user pans around or zooms in, additional tiles are downloaded from the server only as they are needed, such as when panning past the edge of a map or zooming in for closer detail.

The use of tiles makes it possible to move around the map without having to load a completely new image - which would make such interaction impossibly slow and very taxing on both the browser client and the server.

Because you can zoom into and out of most web maps, the amount of area covered by a single tile varies. Accordingly, tiles must be made available at a number of different Zoom Levels. Zoom level zero covers the whole world at around 156,400 meters per pixel, while zoom level 19 covers around 1/4 meter per pixel.

Real-time and Animated Maps

For representation of highly dynamic data, animated real-time maps can be created. These require complex, custom programming.

How Do People Use Web Maps?

Wayfinding and Navigation: How do I get to a place?

Businesses and other organizations commonly use web maps to permit customers or patrons to find them. These can range from Google Maps with single placemarks to maps that interactively provide specific information on store, like addresses, hours and driving directions.

IKEA Store Locator

Search: What is nearby?

Web maps are commonly used to find businesses or services in your vacinity. This relates to a larger use of geospatial data called Location-Based Services, although that term is more-commonly associated with mobile applications than web maps.

Chinese restaurants in Spokane

Location Information: What are the characteristics of a location?

Users commonly need information from an organization or governmental entity on specific locations, and web maps are excellent ways of providing an interactive way of accessing that information. For example, the governments in many counties permit access to property parcel information via web maps, usually via ESRI software.

Spokane County SCOUT Map

News: Where is something happening?

Static maps have long been used in print media to give geographic context and explain spatial relationships in news stories. This tradition has continued with the use of both static and dynamic web maps as part of a panoply of data visualizations used on news websites.

2016 Republican primary victories

Collaboration and Advocacy: How can I help?

Data flow with most interactive maps is largely unidirectional. Users make requests to map servers, the data displayed comes from the mapping service and users do not directly make changes to that data.

Collaborative web mapping not only provides data to users, but allows users to modify and augment the data on the server. To some extent, Google Maps could be considered collaborative in that users can submit reviews of restaurants, although users cannot directly change Google data.

However, projects like OpenStreetMap are based on volunteered geographic information supplied by users and are truly collaborative.

OpenStreetMap

Collaboration through web maps has been especially valuable for disaster relief in developing countries where commercial mapping providers often do not have a financial incentive to create commercial data. For example, below is a product from the Humanitarian OpenStreetMap Team aiding Red Cross work in the Philippines following Typhoon Haiyan in 2013.

Aereal damage overview after Typhone Haiyan in the Philippines in 2013

Analysis: Why are things where they are?

Perhaps the most sophisticated level of web mapping provides the capability to do complex analysis of geospatial data. This begins to cross the line into cloud Software as a Service (SaaS) and web applications.

One such service is ArcGIS Online, which not only facilitates the creation of simple, embeddable web maps, but also provides tools for spatial analysis.

ArcGIS Online

A somewhat more experimental approach is CyberGIS, a web interface into a supercomputing infrastructure that allows sharing and collaboration on data-intensive and computationally-intensive research projects.

Exploration and Amusement

Many people find wandering the web to be an enjoyable activity in and of itself, even if there is no specific objective to the exploration. Nathan Francis has a list of the Coolest Uses of the Google Maps API.

Literary Road Trips

Who Creates Web Maps?

A number of different types of jobs are associated with the creation and dissemination of web maps:

As with GIS in general, web mapping is another skill in the toolbox of a GIS professional, and that skill usually compliments other skills in facilitating communication of geospatial information.

The Technologies Behind Web Maps

Web map data flow

Data

All maps start with some kind of geospatial data, real or imagined. Vast amounts of geospatial data are constantly being generated by a variety of private and public entities. Governments, especially in the USA, are rich sources of freely-accessible geospatial data. Some notable governemntal sources include:

Geospatial data usually exists in files at some point in its lifecycle. Common geospatial data file formats used to store and upload data for web maps include:

Geospatial data must usually be edited and "cleaned up" before it can be used. Common tools include Micro$oft Excel and ESRI's ArcMap, although the open-source and freely-available desktop GIS software QGIS can be an attractive option if you do not have to work in an enterprise environment.

Map and Web Servers

Web data is accessed from Web Servers. Web servers run software that receives requests from web clients, accesses data from files and databases, and then returns that data. Common web server software includes:

Individuals, organizations or companies that do not have the means or interest in buying and maintaining their own physical web servers will contract with Web Hosting companies to provide web servers. There are dozens of hosting companies large and small, but some well-regarded web hosting companies include:

Web hosting companies and internet-based companies like Google maintain massive Server Farms that can have thousands of servers and consume as much electricity as medium-sized towns.

For web mapping, a Map Server is additional software on the server that converts geospatial data into a format that can be visualized on a client.

Organizations with anything but the simplest web presence need a Software Framework for managing content.

Languages commonly used for server-side development include:

Organizations also often rely on Content Management Systems (CMS) that run on their servers and work along with the core web server software. A CMS simplifies the process of maintaining web content among different developers and over time. Common open-source CMSs suitable for small and mid-sized organizations include:

Third-Party Web Services

Acquiring, maintaining, and serving the data used in an ordinary web map requires a significant amount of money and resources. Accordingly, most organizations rely on third parties that specialize in mapping services, especially for the tiles used as base maps in almost all web maps.

Google and Micro$oft's Bing both make their tiles available to web map developers for free. In the open-source world, OpenStreetMap provides tiles.

A number of companies also provide map services at a sliding fee scale depending on the amount of resources needed, and free for a limited amount of private development. These services also generally provide a web interface for developing maps that are intuitive for non-programmers and provide features to create attractive maps with a high level of visual design quality. Some of these services include:

Client-Side Languages and Software

Web maps are displayed in a web browser. The most common desktop browsers in terms of market share as of July 2016 include:

While simple, preformatted web maps can be brought in with HTML IFRAME elements (as in the example above), Most serious web maps involve some JavaScript code included in the web page that accesses JavaScript Libraries and interacts with the map server using an Application Programming Interface.

Aside from the JavaScript libraries provided by third-party map providers like Google or MapBox for specific use with their services, two commonly-used open-source libraries that can be used with multiple mapping services include:

Integrated Platforms

For many organizations, information technology in general and GIS in particular is needed in support of the core mission rather than being the core mission itself. For example, a county assessors office is primarily concerned with keeping track of property valuations and taxes rather than innovative web mapping.

For such organizations, the easiest course of action is to use standard, integrated software platforms, like ArcGIS, which provide seamless interconnection between desktops, databases, mobile devices and web maps. This also permits an organization to rely on a community of trained professionals who can join the organization without an extensive learning curve. While such software is expensive, the Total Cost of Ownership is likely less than the expense and trouble of hiring developers to reinvent the wheel.

While there is a large and growing body of non-ESRI shops, if your career interest is working in enterprise GIS, you should gain a working familiarity with the ESRI suite of products.