Introduction to Web Mapping

This is a beginner-level workshop intended for anyone interested in making interactive maps. Participants will first be introduced to the concept of a web map and the various tools and platforms available for web mapping. A hands-on section will follow, in which participants will explore the code that powers a web map, customizing it to make a web map of their very own. Upon completion of this workshop, participants will

  • Understand the anatomy of a web map, that is, the various components that work together to power an interactive and dynamic map hosted on the web;
  • Become familiar with the different tools and platforms available for web mapping, including the advantages and disadvantages of each; and
  • Be equipped with the fundamental knowledge and skills to begin web mapping on their own.

Below is an example of the map we will build, showing parks and points of interest across Vancouver.


Pre-Workshop Setup

All of the data for this workshop is free and openly available. However, to get started you’ll need to download and save it to your physical computer (in Desktop or Downloads, not OneDrive). During the hands-on portion of this workshop, you’ll work with this data in a code editor. Click on the ‘Download Data’ button below to start the download. Once complete, extract the contents of the .zip file.

Download Data

Required Software

Additional Preparation

Making maps is hard. And, without practice, working in the web is hard too. While there are no prerequisites for this workshop, familiarity with cartographic principles and a basic understanding of what code is and does will make diving into web mapping easier. Refer to these resources at any time:


GIS Resources at UBC:

This workshop was authored by Lily Demet.


Table of contents


View workshop content in GitHub

Loading last updated date...