Client-Side Web GIS

The World Wide Web has become a valuable means to display, collect, and share geospatial data and maps. This course will explore the use of web technologies for developing web map applications. Students will learn to produce audience appropriate maps in the web environment using a variety of technologies and methods.

This class will specifically focus on client-side technologies and is broken into three broad components. First, you will learn to design maps and apps using the tools made available by the Environmental Systems Research Institute (ESRI) including ArcGIS Online, ArcGIS Web AppBuilder, ArcGIS AppStudio, and ArcGIS Pro. Next, you will explore client-side web programming technologies and languages. You will learn to define web content using hypertext markup language (HTML), style web content using cascading style sheets (CSS) and Bootstrap, and add functionality to a website using JavaScript and jQuery. Lastly, you will learn to produce web maps using the ESRI ArcGIS API for JavaScript and the free and open-source Leaflet JavaScript API. Through exploring these topics, you will also learn how the web works and how geospatial data are stored for use in the web environment. You will also develop some coding skills specific to HTML, CSS, and JavaScript. By the end of this course, you will be able to design a multipage website that includes web maps.

You will be asked to work through a series of modules that present information relating to a specific topic. You will also complete a series of projects. Please see the Sequencing and Resources section for our suggestions as to the order in which to work through the material.

This course makes use of the ArcGIS Pro software package from the Environmental Systems Research Institute (ESRI). Directions for installing the software have been provided under the Sequencing and Resources section. If you are not a West Virginia University student, you can still complete the exercises but you will need to obtain access to the software on your own.

If you have any questions or suggestions, feel free to contact us. We hope to continue to update and improve this course.

If you would like an introductory text on Web GIS in the ESRI environment, we would suggest Getting to Know Web GIS by Fu. We will also make extensive use of w3school.com, the ArcGIS API for JavaScript documentation and examples, and the Leaflet JavaScript API documentation and examples.

This course was created by Aaron Maxwell and Shobha Yadav. This material is based upon work supported by the U.S. Geological Survey under Grant/Cooperative Agreement No. G18AP00077. The views and conclusions contained in this document are those of the authors and should not be interpreted as representing the opinions or policies of the U.S. Geological Survey. Mention of trade names or commercial products does not constitute their endorsement by the U.S. Geological Survey.

After completing this course you will be able to:

  1. describe how the web works using client-server architecture.
  2. produce an audience appropriate web map using ArcGIS Online.
  3. publish data and maps for use in the web environment.
  4. describe geospatial data formats for use on the web and when each is most appropriate.
  5. solicit crowd sourced data using feature services to collect volunteered geographic information (VGI).
  6. produce and publish a web map application using Web AppBuilder for ArcGIS and mobile apps using AppStudio for ArcGIS.
  7. develop multipage websites that are well styled and responsive using HTML, CSS, and Bootstrap.
  8. add functionality to web pages and web maps using JavaScript and jQuery.
  9. produce customized web maps using the ArcGIS API for JavaScript and the Leaflet JavaScript API.
  1. Introduction to Web GIS
  2. Using Templates
  3. VGI
  4. Web Data and Apps
  5. Web Scenes
  6. HTML
  7. CSS
  8. Bootstrap
  9. JavaScript
  10. jQuery
  11. ArcGIS API for JavaScript
  12. Leaflet JavaScript API
  1. Sequencing and Resources
  2. ArcGIS Online Guided Labs
  3. Project 1: Using Templates
  4. Project 2: VGI
  5. Project 3: Web AppBuilder
  6. Project 4: HTML
  7. Project 5: CSS
  8. Project 6: Bootstrap
  9. Project 7: JavaScript/jQuery
  10. Project 8: ArcGIS JS API I
  11. Project 9: ArcGIS JS API II
  12. Project 10: Leaflet JS API I
  13. Project 11: Leaflet JS API II
  14. Term Project