Introduction to WebGIS

53 min

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

Introduction

Instructor Yoh Kawano introduces the course.

3 min
Not Just for the Experts

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.

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

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

12 min
Planning the App

This chapter examines the components necessary to build a website displaying earthquakes on an interactive world map.

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

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

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

3 min

Published 2017

Yoh Kawano

Instructor

Yoh Kawano works at the UCLA GIS and Visualization Sandbox as a member of the Research Technology Group for the Institute for Digital Research and Education (IDRE), serving as the Campus GIS Coordinator.

Credit: