Intro to Webmapping

This 2-part workshop series explores web maps (aka webmaps) and web mapping (aka webmapping) as a means of dynamically and interactively visualizing geospatial data.

  1. Part 1 of this workshop series focuses on free and straightforward online platforms for web mapping. You will learn how to make webmaps you can share with others via a link using the platforms uMap and Google MyMaps.
  2. Part 2 of this workshop series provides a gentle introduction to web mapping with code — specifically, you will learn how to use the free and open-source code library, Leaflet, to power dynamic and interactive maps. You will also learn how to host these maps on the web. No prior experience necessary!

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 series, 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. uMap is a free and open-source platform that allows you to create web maps using OpenStreetMap (OSM) data. Additionally, if you don’t already have a Google account, go ahead and create one if you want to have the option of using Google MyMaps.

  4. Create a GitHub GitHub is an internet hosting service that allows you to upload files into a repository, or project folder, where they can be shared and collaboratively tracked and edited by a team. This makes it quite popular amongst code developers. We will use GitHub to host our web maps!

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.

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 make

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

See full screen


View in Full Screen


View in Full Screen

GIS Resources at UBC:

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

View in GitHub

Loading last updated date...