Published on GEOG 585: Web Mapping (https://www.e-education.psu.edu/geog585)

Home > Lessons > Lesson 2: Designing web services and web maps

Lesson 2: Designing web services and web maps

The links below provide an outline of the material for this lesson. Be sure to carefully read through the entire lesson befor returning to Canvas to submit your assignments.
Note: You can print the entire lesson by clicking on the "Print" link above.

Overview

How do you start with some raw datasets on your computer and create a beautiful interactive web map that can be enjoyed by thousands of Internet users? This lesson will give an overview of how you can approach a web mapping project. The remaining lessons will get into the step-by-step details of how you make each part happen.

Objectives

  • Identify the pieces of hardware and software architecture used in web mapping and describe the role played by each.
  • Recognize the roles of basemaps and thematic layers in a web map, and identify examples of each.
  • Critique the layer construction and architecture of a web map.
  • Log in to the GeoServer administrator page and preview layers.

Checklist

  • Read the Lesson 2 materials on this page.
  • Complete the walkthrough.
  • Complete the Lesson 2 assignment.
  • Read the term project introduction and post your initial idea for the project in the Term Project Proposal drop box.

System architecture for web mapping

It can take several different physical machines to create, serve, and use a web map. These are often depicted in diagrams as separate levels, or tiers of architecture. In this course, you'll likely use just one machine to play all these roles; however, it's important to understand how the tiers fit together.

 System architecture for GIS web services
Figure 2.1 System architecture for web mapping.
Figure 2.1 Text Description [1]
Credit: Icons by RRZEicons (Own work) [CC-BY-SA-3.0 [2]], via Wikimedia Commons

For example, you might have:

  • desktop workstations that are used by administrators and internal client applications. These machines will also be used to prepare data, author maps, and sometimes administer the other machines.

    In this course, you will be using QGIS and some command line libraries such as GDAL to accomplish these tasks. GeoServer also has a web-browser-based administrator dashboard that you would use from this machine.

    In some cases, your web map may be designed solely for the use of people within your organization and may never see the open web. In this scenario, client applications may also reside on these desktop workstation machines.
  • a database and/or file server holding all of your GIS data. This machine might be equipped with redundant storage mechanisms and regular backup scripts that prevent the loss of data.

    In this course, you'll be using folders of shapefiles for some of the exercises. If you had decided to use a database like PostgreSQL or MariaDB, it would also go on this tier.
  • a geospatial web services server that has specialized software and processing power for drawing maps, responding to feature queries, and performing GIS analysis operations.

    In this course, you will use GeoServer to host your web services.
  • a web server that acts as a web entry point into your organization's network. This is also called a proxy server. It is protected by firewalls that shield malicious traffic into your internal network. It's also a place where you can put web application code (such as HTML and JavaScript files) for your web maps.

    In this course, you will just be using GeoServer on your local machine; therefore, you will not install separate web server software. GeoServer comes with an embedded “servlet” called Jetty that gives you a simple endpoint to your web services that you can locally access for testing. In a more formal setup where you wanted to reveal your GeoServer web services to the world, you would have a web server such as Apache that would forward requests to GeoServer.

    In this course, you will put your web applications in your Jetty home folder (if the application uses GeoServer) or your Penn State personal web space using the PASS Explorer application (if your application does not use GeoServer). The Penn State IT staff has configured your PASS space to be a safe web entry point for your files.
  • many client applications that use the web map. These can be apps that run on your desktop workstation or they could be mobile apps. The clients may be based within your network, or you may allow them to come from outside your network. All clients must be able to make web requests through HTTP, and any client coming from outside your network must have an Internet connection.

    This is the tier you usually have no control over; therefore, it's important to design for different browser versions, screen sizes, ambient lighting, and so forth.

    In this course, you can use any modern web browser to test your apps and services. You can also use a mobile browser, such as Safari on the iPhone, to test the apps that you place on your personal web space.

Again, when developing and testing a web map, you can certainly use a single physical machine to play all these roles. This is a common practice that keeps things simple and more economic. When you work for a “real world” company with its own network and you are ready to deploy your web map, you will move your tested services and applications into a formal “production” environment where you have individual enterprise-grade machines for each role, as described above.

Elements of a web map

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.

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. Lesson 5 will explain tiled maps in greater depth and give you a chance to make your own.

In the past couple of years, it has become fashionable in some applications for the server to send the basemap as chunks of vector coordinates, sometimes known as "vector tiles." Displaying the basemap as vectors instead of a rasterized map allows for more flexibility in visualization, such as being able to rotate the map while the labels stay right-side-up. You can see a vector basemap in action if you look at the Google Maps app on a smartphone.

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. There are various web services such as WMS (which you will learn about in Lesson 4) that 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 is described in Lesson 6.

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.” This blog post by Mr. Frye [3] contains a more thorough explanation and a helpful diagram. FOSS definitely allows this approach.

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.

Try this

  1. Enable the Firebug plug-in (or similar developer tool) you used during the previous lesson, and visit Bing maps [4] on your computer's web browser.
  2. Pan around and switch between the basemaps (drop-down menu at the top right), and note the different web requests displayed in Firebug.
  3. Now turn on the thematic layer for Traffic.

How is Bing displaying these layers? Why are they taking this approach? Post any related questions in the forums if you're having trouble figuring this out. You can also go ahead compare their approach to that of HERE [5] (layers can be accessed at the bottom right). Do you notice any differences in their approach?

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 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 APIs 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 in Lesson 6 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. I will walk you through several simple web maps and point out the basemap, the thematic layers, and the interactive elements. Then, in this week's assignment, you'll get the chance to try it yourself using two web maps of your choosing.

Texas Reservoir Levels

The first map we'll look at is Texas Reservoir Levels [6], 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 [7] (more about this in Lesson 7).
  • 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 [8] of New York City. The map is made with Flash and you may have to install/enable the Flash plugin for your browser to see it. Because of the map being implemented with Flash, 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 practice session, take a look at the Northern Plains Conservation Network Interactive Web Map [9]. 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 Lesson 5, 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.

  • TriMet Trip Ride Planner [10]
  • Best of British Unsigned [11]
  • NIU Campus Webmap [12]
  • Lethbridge Explorer [13] (this map requires Flash)

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.

Walkthrough: Setting up GeoServer

GeoServer is free and open source software (FOSS) that exposes your data as geospatial web services. You'll be using GeoServer later in this course and possibly in your term project if you choose. This week, we'll take some time to get GeoServer installed and configured. This is a detour from our discussion of web map elements, but you'll soon revisit that topic in the weekly assignment.

Again, the lesson materials provide instructions for Windows. You are welcome to install on another platform, but you are on your own for instructions and troubleshooting.

  1. If you do not already have Java on your computer, visit the Java download page [14] and install the latest version of Java. Make note of the file system location where you install it. You will need this when you set up GeoServer. In case that a new Java version will be released during the course and your computer asks you whether it should install the update, be warned that GeoServer may stop working if you decide to do so, until you adapt the Java path in the GeoServer startup .bat file.
  2. Visit the GeoServer home page at www.geoserver.org [15] and click the Download link.
  3. Choose to download the Maintenance version (version 2.10.5 at the time of this writing) by clicking the version number. Make sure you click the link with the version number and not the link that says "Nightly builds".
    As you progress with FOSS, you may get more adventurous and want to download the latest "bleeding edge" build to get the newest features, but, for this course, we are going to play it safe.
  4. Choose the Windows Installer and run geoserver-2.x.x.exe. (Do not click "Start Download" if you see it. This is an ad.)
  5. Continue through the installer and accept the default settings on each wizard page. When prompted for the JRE (Java Runtime Environment) location, you need to browse down to the folder where you installed Java and choose the JRE subfolder. If you're using Windows, this is probably C:\Program Files (x86)\Java\jre8 or C:\Program Files (x86)\Java\jre1.8.x  or something similar. The installer will tell you whether you have selected a folder with a valid JRE.

    I am asking you to accept all the defaults in the wizard so that it is easier to help troubleshoot later if needed. Obviously, in a professional environment, you would select something other than the default administrator name and password admin/geoserver and you might install onto a port other than 8080.
  6. Once GeoServer is installed, start it by clicking Start > All Programs > GeoServer 2.x.x > Start GeoServer.

    You'll see a bunch of status messages appearing in a black and white console, like the following.
     
     Screen capture: Start GeoServer
    Figure 2.2 This is the image caption.
    Wait a second for the messages to stop appearing, then go on to the next step. (If you keep this window open, you'll see messages appear as you interact with GeoServer. This is okay, and may even help you with troubleshooting.)

    If you get a Windows Security Alert that Windows Firewall has blocked some features of the program, check the top box to allow it to run on private networks and click Allow access. Uncheck the bottom box, as public access will not be needed in this course.
  7. Click Start > All Programs > GeoServer 2.x.x > GeoServer Web Admin Page (or go to your browser and enter the address localhost:8080/geoserver/web).

    This is a web page that you can use to administer GeoServer from this or any other computer in your network. You might be wondering, "How did my machine get the ability to serve out web pages?" This is possible because GeoServer includes a servlet [16] called Jetty, which allows your machine to respond to web service and web page requests without having a full-blown web server software package installed.

    In an enterprise environment, you would install GeoServer onto your existing web server such as Apache Tomcat, and it is very possible that you will need to do this sometime in the future. The process is straightforward enough that I was able to do it following this instructional YouTube video [17] even though the video is not in English; however, for the assignments in this class, please use the Jetty server and only attempt the Tomcat install if Jetty is not working. My intent is to keep everyone on as close to the same environment as possible, so that I can be more helpful with troubleshooting if needed.
  8. Type a GeoServer username and password in the upper boxes and click Login. You may remember that the installation created an administrative user with the username admin and the password geoserver. You must use this the first time you log in.

    You will see a welcome page similar to the following:
     
     Screen capture: GeoServer Welcome page
    Figure 2.3
  9. Rather than working with files that represent an entire map, like .mxd or .qgs, GeoServer works with the concept of layers and layer groups. You define a set of datasets that you want to have exposed on your server, and then you define what characteristics they'll exhibit when brought into web maps as web service layers.
    GeoServer comes with a bunch of sample layers already loaded. Let's take a look at those.
  10. In the left-hand menu, click Layer Preview.
     
     Screen capture: Layer Preview link
    Figure 2.4
  11. Scroll down to the Tasmania state boundaries layer and click the OpenLayers link.
     
     Screen capture: OpenLayers preview link
    Figure 2.5
    This displays your map as a web service that you can navigate. The web service was delivered through the Open Geospatial Consortium (OGC) Web Map Service (WMS) specification, an openly documented way of serving web maps that you'll learn more about in Lesson 4. The map frame and navigation buttons were created through the OpenLayers JavaScript framework.

    It's important to understand that you also could have done this by clicking the dropdown list and choosing WMS > OpenLayers. Looking at this list, you get a better idea of the many different output formats supported by GeoServer.
     Screen capture: Layer preview options
    Figure 2.6
    Let's try one of these other options.
  12. Close the map preview window and return to the GeoServer layer preview list. This time, click the KML link to get the layer as KML, and XML-based open specification for geographic data, often used by Google. If you have Google Earth installed, the layer should open there. If you don't have Google Earth, you can open the layer in Notepad and just examine the raw KML.

    In addition to requesting many layer formats, you can request groups of layers together if they have been configured as a group layer. GeoServer comes with a few preconfigured group layers.
  13. In the GeoServer layer preview list, scroll down to the Tasmania group layer (symbolized by green squares). Using the techniques you have learned, preview this in OpenLayers.
     
     Screen capture: Preview group layer in OpenLayers
    Figure 2.7
    Here, you see three layers that have been delivered together as one map.
     
     Screen capture: Result of group layer preview
    Figure 2.8

You'll return to GeoServer later in this course. This walkthrough just ensures you have it up and running correctly. If technical difficulties prevented you from getting to this point, please alert your instructor.

Lesson 2 assignment: Analyze two web maps

For this week's assignment, find two web maps "in the wild" and create a post on the "Lesson 2 assignment forum" on Canvas that describes the following for each map:

  • The web address (URL) of the map and who created it.
  • The basemap, thematic layers, and interactive elements in the map.
  • The servers and display techniques used for each layer (tiles, image drawn by the server on the fly, browser-drawn vector graphics, etc.). Use your web browser's developer tools/plugins to figure this out. For example, using Firebug while you pan around the map, you might determine that your web map is pulling in a tiled basemap from CloudMade.com. This is enough for the assignment; you don't have to go into further technical details about how the tiles were made or their file structure.
  • The software and programming framework used to build the web map (if you can determine this) and whether it is proprietary or FOSS.
  • Suggestions on how the map administrator could make this map more useful or faster performing.

Please make an effort to find these maps on your own. In other words, do not choose any of the web maps previously referenced in this lesson, nor should you browse through other students' posts in order to find maps to analyze. Except for the first point (URL), please use short paragraphs to address the different points in your description similar to what you saw in this lesson, not just bullet point enumerations.

Term project introduction

This course contains many walkthroughs showing how to use FOSS, but the ultimate objective is to apply these skills toward your own web map using data that's interesting to you (or your supervisor at work!). As the course progresses, you'll be expected to complete a portion of the weekly assignments using your own datasets. By the end of the course, this will become a fully functioning "term project" web map that combines base layers, thematic layers, and some degree of interactivity through popups, filters, or queries.

Part of the final week of the course is reserved for putting the finishing touches on your term project; however, most of the major pieces will be in place by that time if you put a respectable effort into the weekly walkthroughs and assignments.

Proposing an idea for the term project

Please do the following to get started with the term project:

  • Skim through the upcoming lesson pages and titles to get an idea for the functionality that will be covered in this course. This will help you choose a project that is within scope.
  • Read the Term project submission guidelines [18] to see what you will be required to submit
  • Create a 1 - 2 paragraph writeup describing an idea for your term project. This should mention the basemaps, thematic layers, and interactive elements that you'd like to have in your project, along with an explanation of where you will get the data. Place this in the Term Project Proposal drop box on Canvas which you can find by going "Modules tab" -> "Lesson 2" -> "Term project proposal drop box". We will reply within a week, commenting on the scope and appropriateness of the project.

Source URL: https://www.e-education.psu.edu/geog585/node/683

Links
[1] https://www.e-education.psu.edu/geog585/sites/www.e-education.psu.edu.geog585/files/lesson2/Figure_2.1_LD.html
[2] http://creativecommons.org/licenses/by-sa/3.0
[3] http://blogs.esri.com/esri/arcgis/2009/07/13/the-map-sandwich/
[4] https://www.bing.com/mapspreview
[5] https://wego.here.com
[6] http://www.texastribune.org/library/data/texas-reservoir-levels/
[7] http://radiant-lake-1556.herokuapp.com/reservoirs.json
[8] http://envisioningdevelopment.net/map/
[9] http://www.npcn.net/npcnWebmap/
[10] http://ride.trimet.org/?tool=routes#/
[11] http://www.bestofbritishunsigned.com/music-map/
[12] https://www.niu.edu/visit/maps/interactivemap.shtml
[13] http://gis.lethbridge.ca/lethexplorer/
[14] http://www.java.com/en/download/index.jsp
[15] http://www.geoserver.org
[16] http://en.wikipedia.org/wiki/Servlet
[17] https://www.youtube.com/watch?v=YEOA8WWWVCw
[18] https://www.e-education.psu.edu/geog585/node/742