5.1: Elements of a Web Map
Acknowledgments: This material is a slight derivative of a course module written by Sterling Quinn of the John A. Dutton e-Education Institute, College of Earth and Mineral Sciences, The Pennsylvania State University, and was produced with permission from the author. We thank the author, and Penn State for permission to use. The material is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.
Building and using web maps is different from working with a desktop GIS for a variety of reasons:
In a web map, any information you see has to be sent “across the wire” from the server to your browser, introducing latency.
In a web map, you may be pulling in information from several different servers. Your map performance is therefore limited by the availability and speed of all the servers you're using.
In a web map, performance may be affected by other people using the server at the same time.
- In a web map, you are limited to the display technologies supported by the client application, which may be a basic web browser.
These considerations can sometimes take people by surprise. For example, if you've only used ArcMap or QGIS in the past, you may not be accustomed to thinking about broadband speeds or sharing the machine with other people.
By far, the biggest challenge for new web mappers is understanding the amount of data that is displayed in their maps and how to get all that information drawn on the screen of a web user in sub-second speeds. Many people who have worked with desktop GIS packages are accustomed to adding dozens (or even hundreds) of layers to the map and switching them on and off as needed. Your powerful desktop machine may be able to handle the drawing of this kind of map; however, performance will be unacceptably slow if you try to move the map directly to the web. The server requires precious time to iterate through all those layers, retrieve the data, draw it, and send the image back to the client.
To address this problem, most web maps break apart the layers into groups that are handled very differently. Layers whose sole purpose are to provide geographic context are grouped together and brought into the map as a single tiled basemap. In contrast, thematic layers (the layers that are the focus of the map) are brought in as one or more separate web services and placed on top of the basemap. You might additionally decide to include a set of interactive elements such as popups, charts, analysis tools, and so forth.
Let's take a closer look at these three things--basemaps, thematic layers, and interactive elements--to understand how each is created and displayed.
Basemaps
A basemap provides geographic context for your map. In other words, it is usually not the main reason people look at your map, but your map would be difficult to interpret without it. The most common basemaps you've used online are vector road maps and remotely sensed imagery (consider, for example, the basemaps when you’ve used Google Maps).
Although a basemap may consist of many sublayers (such as roads, lakes, buildings, and so forth), these are often fused together into a rasterized set of tiled images and treated as a single layer in your web map. These tiled maps consist of often thousands or millions of predrawn images that are saved on the server and passed out to web browsers as people pan around the map. (A future lesson will explain tiled maps in greater depth.)
Sometimes two tiled layers will work together to form a basemap. For example, you may have a tiled layer with aerial imagery and a second tiled layer with a vector road overlay that has been designed to go on top of the imagery. (In Google Maps, this appears when you check the Labels item). Keeping these two tilesets separate takes less disk space and makes it easier to update the imagery.
Thematic layers
Thematic layers (also known as business or operational layers) go on top of the basemap. They're the reason people are coming to visit your map. If placed on the basemap, they might not be of interest to everybody, but when placed on your focused web map, they are the main layer of interest. If your map is titled “Farmers markets in Philadelphia,” then farmers markets are your thematic layer. If your map is titled “Migration patterns of North American birds,” then the migration patterns are your thematic layer.
Like basemaps, thematic layers are sometimes displayed with tiles; however, this may not always be possible due to the rapidly changing nature of some data. For example, if you need to display the real time positions of police vans, you cannot rely on predrawn tiles and must use some other way to draw the data. Web Mapping Services (WMS) are designed to draw maps on the fly in this way. You can use these for your thematic layers. Another option is to query the server for all the data and use the browser to draw it. This approach lends itself well to interactive elements such as popups, and we’ll discuss this approach when we get to the use of Leaflet.
Thematic layers work together with basemap layers to form an effective web map. Interestingly, the thematic layer is not always the top one. Esri cartographer Charlie Frye describes a “map sandwich” approach, wherein a thematic layer (which could be tiled or not) is placed in between two tiled basemap layers that give geographic context. The bottom layer has physiographic features and the top layer has labels and boundaries. This is the “bread.” The thematic layer in the middle is the “meat.” A blog post by Charlie Frye contains a more thorough explanation and a helpful diagram. You can use this approach with FOSS software.
Your map may include several thematic layers that you allow users to toggle on and off. To accomplish this, you can use a single web service with multiple sublayers, or multiple web services that each contain a single layer. However, to keep your app usable and relatively fast-performing, you should avoid including many thematic layers in your web map.
Interactive elements
Web maps are often equipped with interactive elements that can help you learn more about the layers in the map. These can be informational popups that appear when you click a feature, charts and graphs that are drawn in a separate part of the page, slider bars that adjust the time slice of data displayed in the map, and so forth. Some web maps allow you to edit GIS data in real time, or submit a geoprocessing (e.g., analytic) job to the server and see the response drawn on the screen. Others allow you to type a series of stops and view driving directions between each.
These elements make the map come alive. The key to making an effective web map is to include the interactive elements that are most useful to your audience, without overwhelming them with options or making the tasks too complicated. Even a little bit of housekeeping, such as including user-friendly field aliases in your popups, can go a long way toward making your map approachable and useful.
Interactive elements are the part of your web map that require the most custom programming. The amount of interactivity you have the freedom to add may be strongly correlated with the amount of JavaScript programming that you know how to do. Open web mapping Application Program Interfaces (APIs; see [1] at bottom) such as OpenLayers and Leaflet provide convenient methods for doing some of the most common things, such as opening a popup.
Later in this lesson, you'll examine some web maps and discuss the interactive elements they provide. You'll also revisit this subject later in the course as you begin using the web mapping APIs to put all your layers together into a web map.
Getting some practice with identifying web map elements
Let's get some practice identifying these elements, we will walk you through several simple web maps and point out the basemap, the thematic layers, and the interactive elements.
Texas Reservoir Levels
The first map we'll look at is Texas Reservoir Levels, published in the Texas Tribune. This is a simple but useful map similar in scope to what you will be creating in this course. Take a minute to open this map and examine it.
The basemap is a tiled map hosted by Mapbox.com, a cloud-based map hosting service that offers a variety of basemaps for this purpose. The unintrusive light gray color allows any thematic layers to rise to the top of the visual hierarchy. The basemap contains roads, states, cities, and a few other feature types that appear as you zoom in. However, it doesn't contain any obscure types of features that would steal the viewer's interest away from the thematic layers.
The thematic layer consists of the circles showing reservoir levels. These are drawn by the web browser. When the map first loads, the geographic locations of the reservoirs are retrieved from a GeoJSON file (a format for encoding a variety of geographic data structures - see http://geojson.org/).
The interactive element of this map consists of an informational window in the upper right corner of the map that changes content when you hover over a feature. When you add interactive elements to your web maps, you will often add code that "listens" for particular events, such as clicking, tapping, or hovering over a feature.
Envisioning Development Toolkit - Interactive Income Map
Next, open the Envisioning Development Toolkit - Interactive Income Map of New York City. This map is made using Flash; therefore, we have a little less visibility into what's going on behind the scenes. However, the basic elements of the map are easily identifiable.
The basemap again uses a noninstrusive black and white design. Pan around enough, and you'll notice that it is brought into the web map using tiles.
The thematic layer is a vector outline of New York neighborhoods. Behind this is sitting some income data from the US Census that has been aggregated to the neighborhood boundaries. This layer is also designed to be somewhat nondescript, because the map authors really want you to look at the colored blocks representing population at the different income levels.
The interactive elements are what make this map come alive. Hovering over a neighborhood causes a subtle highlight, inviting you to click for more information. When you click, the graph adjusts itself to update the population counts (this is where the Flash animation comes in handy). Tooltips on hover and an informational window in the upper right corner provide additional information.
Northern Plains Conservation Network Interactive Web Map
To wrap up this exercise, take a look at the Northern Plains Conservation Network Interactive Web Map. Get a feel for the map by toggling on and off some of its many layers. This map appears to be created in JavaScript using elements of the Google Maps API.
- The basemap is tiled. It is the "Terrain" layer from the Google Maps API. It is up to you to decide whether this is helpful (this map does have some connection to topography since it is a map of the Northern Plains) or distracting (the map is more colorful than the previous two basemaps we've seen).
- Most, if not all, of the thematic layers also seem to be tiled. This makes sense when you consider that most of these layers are probably not changing on a regular basis; therefore they can be committed to tiles and brought into the application more rapidly than a dynamically drawn map.The tiles are being pulled from CartoDB, a cloud-based map authoring and hosting service. Sometimes it's easiest to use someone else's online services to design and host your tiles. In an upcoming lesson, you'll get a feel for the effort it takes to design and host your own tiles (which you may decide to do if you want to avoid hosting fees). The large number and variety of thematic layers in this map make it somewhat difficult to determine the purpose and audience of the map.
- The interactive elements include the ability to toggle layers, adjust layer transparency, search for a location, and take a screen capture. You must use the legend to interpret the data ranges. It appears there is a button for querying the data, but I couldn't immediately figure out how to use it.
Other maps
Here are a few other maps you can look at if you want to keep practicing. Although some of these maps have very nice elements, I am recommending them for their variety, not for their excellence in any particular realm.
From this brief exercise, you can begin to see the various approaches that can be used to put together a web map. Hopefully, you can look at a web map and immediately begin to see how the layers were broken up into basemap layers and thematic layers. Whenever you see a web map, you should also think about the interactive elements that are present and decide whether they are usable and applicable.
[1] An API (application program interface) is a set of routines, protocols, and tools for building software applications.