Intro to Webmapping

This workshop explores web maps (aka webmaps) and web mapping (aka webmapping). Web maps are a means of dynamically and interactively visualizing geospatial data. Today, you will learn how to create web maps in 2 different manners:

1. online, using browser-based platforms such as uMap and Google MyMaps, and
2. with coding, powered by Leaflet.

Each of these methods of web mapping has its advantages and disadvantages which we will discuss. Moreover, while we emphasize that web mapping can be done entirely online without any coding necessary, we believe it important to have a basic understanding of how web maps work. To this end, we will break down the “anatomy” of a web map in a code editor in order to understand how the various components of a web map work together. By the end of the workshop, you will be equipped with the fundamental knowledge and skills to begin web mapping on your own.

---

Before the Workshop

1. Download and unzip the workshop data folder to a location on your physical computer, such as Desktop or Downloads. Download Data

2. To make your life easier while viewing or editing code, it’s good to use a source code editor. This workshop will use Visual Studio Code.

3. Create a uMap account. If you don’t already have a Google account, creating one for the purposes of using MyMaps is optional.

Data

Inside the unzipped webmapping-workshop data folder you will see today’s data further organized into 2 subfolders relevant to webmapping online and webmapping with Leaflet respectively. We will webmap using two datasets from the City of Toronto’s open data portal.

• Public Art
• Heritage Conservation Districts

This data is licensed under the Open Government Licence - Toronto. This allows us to modify and adapt the data! The following datasets are from the City of Toronto. They have been reformatted to be legible to the various tools and platforms we will work with today. Take a moment to browse the datasets online.

What we will create

Below are examples of web maps made with uMap, Google MyMaps, and Leaflet.

_{View in Full Screen}

_{View in Full Screen}

_{View in Full Screen}

---

GIS Resources at UBC:

• General Informational website for all things UBC GIS: gis.ubc.ca
• Archive of all Research Commons workshops
• Research Commons Events Calender
• Contact UBC Library’s Geospatial team: library.gis@ubc.ca
• Schedule a 1:1 consult with the geospatial team here

This workshop was authored by Lily Demet and reviewed by Alex Alisauskas.