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 shown 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 and customize it to make a web map of their 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, you’ll work with this data in a source-code editor by copy/pasting the code provided to you. Click on the ‘Download Data’ button below to start the download. Once complete, extract the contents of the .zip file.
Required Software
- Internet browser (and an internet connection). The most recent version of Google Chrome or Mozilla Firefox are recommended.
- Source code editor. 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, but other editors like Notepad++ and Sublime Text will work similarly.
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:
- Intro level knowledge of computer programming. Matt Adesanya’s A Gentler Introduction to Programming is a great starting point, and will be more than you need for this workshop.
- Intro level knowledge of HTML, CSS and JavaScript. Sololearn.com offers several courses on these topics and more, but there are several other educational resources to choose from on the web if you prefer something different. You’re not expected to be a pro for this workshop, but understanding these concepts will provide some very useful perspective.
- Understanding of basic cartographic design concepts. What is map making without a consideration of cartography? Axis Maps has written a phenomenal short guide to cartography, and the web map module is especially relevant.
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.
Table of contents
View workshop content in GitHub
Loading last updated date...