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 ExperienceBuilder, 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 document for our suggestions as to the order in which to work through the material. We have also provided PDF versions of the lectures with the notes included.

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. 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.

After completing this course you will be able to:

  • describe how the web works using client-server architecture.
  • produce an audience appropriate web map using ArcGIS Online.
  • publish data and maps for use in the web environment.
  • describe geospatial data formats for use on the web and when each is most appropriate.
  • solicit crowd sourced data using feature services to collect volunteered geographic information (VGI).
  • produce and publish a web map application using Web AppBuilder for ArcGIS or ArcGIS ExperienceBuilder.
  • develop multipage websites that are well styled and responsive using HTML, CSS, and Bootstrap.
  • add functionality to web pages and web maps using JavaScript and jQuery.
  • produce customized web maps using the ArcGIS API for JavaScript and the Leaflet JavaScript API.

This course was produced by West Virginia View (http://www.wvview.org/) with support from AmericaView (https://americaview.org/). 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.