Preview this course
Introduction to WebGIS
Already a subscriber?
Introduction to WebGIS

Introduction to WebGIS

77 min
Credit: AICP CM

This course is approved for 1 AICP CM credit

This course examines various Internet technologies commonly used to build web-based visualization applications with municipal data. You will learn about APIs and how they are used as data sources for web applications. Although no prior programming experience is required, the course is specifically designed to bring out the "coder" in the "non-coder," by teaching the basics of Internet programming languages. Different web technologies will be explored, including HTML, CSS, Javascript, jQuery, Google Maps API, and Leaflet.

In This Course

  1. Instructor Yoh Kawano introduces the course.
  2. As geo-spatial technologies become more prevalent than ever, non-profit organizations and government agencies are adopting web-GIS solutions to provide spatial services to the public. The ability to engage, empower, and interact with the public has generated an appealing set of GIS publishing tools on the Internet.
  3. What Can Be Mapped?
    This chapter looks at several examples of interactive, web-based mapping solutions relevant to urban planning. Learn what technologies are used to build maps, where the data come from, and how to make user interface and design choices.
  4. What Is an API?
    So what are the mechanisms that allow interactive web maps to stream in data from external sources? This process happens by accessing several "APIs." For the purposes of this lesson, let's divide APIs into two types: (1) Mapping APIs and (2) Data APIs.
  5. Planning the App
    This chapter examines the components necessary to build a website displaying earthquakes on an interactive world map.
  6. Evaluating HTML and CSS
    The earthquake map has a visual structure comprised of two columns: the map on the left and the data on the right. The format is coded using HTML for the layout, CSS for the styling, and Javascript for the mapping.
  7. Evaluating Javascript
    Where then does the map come from? For this task we use Leaflet, an open source javascript library for building interactive maps. This chapter looks at the javascript that generates the map.
  8. Putting It All Together
    Our investigation of the earthquake map has allowed us to see how a web-based interactive map with a real-time data feed from USGS is built.

Published 2017