The links below provide an outline of the material for this lesson. Be sure to carefully read through the entire lesson before returning to Canvas to submit your assignments.
Note: You can print the entire lesson by clicking on the "Print" link above.
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.
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.
For example, you might have:
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 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.
Building and using web maps is different from working with a desktop GIS for a variety of reasons:
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.
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 (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. In a 2009 blog post (no longer online), Esri cartographer Charlie Frye described 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.” The Esri "Light Gray Canvas" basemap in ArcMap and ArcGIS Online uses this technique. FOSS technology definitely allows this approach as well.
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
How is Bing displaying these layers? Why are they taking this approach? At the end of this class, you will have a good understanding of the different options that exist and their advantages and disadvantages. Feel free to go ahead and check out HERE WeGo [4] in the same way (layer options can be accessed at the bottom right). You should notice a couple of similarities between the two web maps.
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.
Let's get some practice identifying these elements. I will walk you through two 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.
The first map we'll look at is www.gdacs.org/ [7], published by the Global Disaster Alert and Coordination System (GDACS), a cooperation framework between the United Nations, the European Commission, and others to share disaster information and alerts. The web map on the main page showing alerts for the last four days is relatively simple in terms of interactive elements, focusing on displaying disaster related information and providing links to more detailed reports. This map has been created with OpenLayers. It is similar in scope to what you will be creating in this course. Take a minute to open this map and examine it.
https://gisco-services.ec.europa.eu/maps/tiles/NaturalEarth/EPSG3857/2/0/3.png
https://www.gdacs.org/arcgis/rest/services/GDACS/daily_rain/MapServer/export?F=image&FORMAT=PNG32&TRANSPARENT=true&SIZE=256%2C256&BBOX=-180%2C-90%2C-90%2C0&BBOXSR=4326&IMAGESR=4326&DPI=90In contrast, to the previous URL for the basemap tiles, which used nested folders for zoom level, x and y coordinates of the tiles, we here find bounding box coordinates and other information encoded as arguments following the '?' which are then decoded by the server and used to produce the requested tile image. How about the other thematic layers? It turns out these do not come as images but fortunately, they can still be identified relatively easily in the network log because the URLs for the requests contain abbreviations for the event types, like this:
https://www.gdacs.org/gdacsapi/api/events/geteventlist/MAP?eventtypes=EQThese requests are sent out immediately when the map is loaded, and the response from the GDACS server always is a GeoJSON file with a text specification of the vector features and their geometries. These vector features are then drawn by the web browser. You will learn more about client-side rendering of data from GeoJSON files in Lesson 7.
The second map is a web map at https://maps.nyc.gov/crime/ [8] showing the concentration of crimes of different types for New York City. The map is entirely based on services provided by ESRI. The map is created in Javascript using ESRI's ArcGIS Javascript API and some other Javascript libraries for the general layout of the page such as Dojo..
https://tiles.arcgis.com/tiles/yG5s3afENB5iO9fj/arcgis/rest/services/NYC_Basemap/VectorTileServer/tile/14/6161/4830.pbfSimilar to the previous web map example, the tiles are stored on the server in some folder/file organization with numbers referring to the zoom level (.../14/...), x grid coordinate (.../6161/...), and y grid coordiante (.../4830.pbf). However, one important difference is that these are not image tiles. They are vector tiles using the .pbf vector tile format in which the content of the tile is specified as vector data that then still needs to be rendered by the web map application running in the browser when the .pbf file is received. Therefore, we don't get to see an image in the Preview of the browser's Developer Tools but rather some cryptic text because the .pbf file stores the vector data in binary format. Looking at the map itself, we can see that these basemap vector tiles are rendred using a light non-intrusive design.
https://services6.arcgis.com/yG5s3afENB5iO9fj/arcgis/rest/services/NYC_Crime_Locations_PROD_view/FeatureServer/0/query?f=pbf&cacheHint=true&maxRecordCountFactor=4&resultOffset=8000&resultRecordCount=8000&where=1%3D1&orderByFields=OBJECTID&outFields=OBJECTID&outSR=102100&spatialRel=esriSpatialRelIntersectsWe see that the data is coming from arcgis.com as well. We don't have to worry about the details of these requests for now but note how the details of what exactly is requested are encoded in the URL using different parameters separated by & symbols.
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.
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.
set GEOSERVER_HOME=C:\Users\jow\GeoServer 2.19.6 set GEOSERVER_DATA_DIR=%GEOSERVER_HOME%\data_dirNow do the same for the file called "shutdown.bat".
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.
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:
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.
If you are having difficulties analyzing your web map, please refer back to the section "Elements of a web map" and the examples and techniques using your browser's developer tool described there. If you check out the requests in the Network log, requests for images drawn by a server will be relatively easy to identify because the individual images sent back to the browser as a response will be image files in one of the typical image formats (.png, .jpg, etc.). You will be able to see images under 'Preview' of the Network tab. Looking at the preview images will allow you to identify which layers are included, e.g. is it just the basemap, just one thematic layer, or maybe basemap and thematic layer combined. Then the last question is whether these images are tiles, so are multiple images requested and then put together to cover the entire area of the map you are seeing, or is it always just a single image covering the entire map area (something that, for instance, you can experience with a WMS service where the browser tells the server the extent of the area covered by the map, the server then renders an image for that area and sends it back to the browser).
With requests for vector data that that is then rendered by the browser, things are more difficult. The vector data sent by the browser can come in a variety of formats (.json and .pbf are common ones) and is often in a binary format or in some other way compressed, in which case there is no direct way to check out what exactly the files contain. So if you come to the conclusion that some of the data for your map is not coming in as images, that's goood enough for this assignment. If you are able to identify some candidate requests in the network, you should mention that and the server these are going to, but in some cases even that can be difficult, e.g. when the vector data is just stored in a local file on the same web server that is hosting the page with the map.
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.
Please do the following to get started with the term project:
Links
[1] http://creativecommons.org/licenses/by-sa/3.0
[2] https://www.bing.com/mapspreview
[3] https://t.ssl.ak.dynamic.tiles.virtualearth.net
[4] https://wego.here.com
[5] http://www.texastribune.org/library/data/texas-reservoir-levels/
[6] https://apps.texastribune.org/reservoirs/assets/data/reservoirs.json
[7] https://www.gdacs.org/
[8] https://maps.nyc.gov/crime/
[9] https://npcn.net/npcnWebmap/index.html
[10] http://ride.trimet.org/?tool=routes#/
[11] https://www.downtownny.com/map
[12] https://www.niu.edu/visit/maps/interactivemap.shtml
[13] http://www.java.com/en/download/index.jsp
[14] https://geoserver.org/
[15] https://sourceforge.net/projects/geoserver/files/GeoServer/2.19.6/geoserver-2.19.6-bin.zip/download
[16] http://geoserver.org/release/2.14.2
[17] http://en.wikipedia.org/wiki/Servlet
[18] https://www.youtube.com/watch?v=YEOA8WWWVCw
[19] https://www.e-education.psu.edu/geog585/node/742