Link Search Menu Expand Document

Introduction to Web Maps with Leaflet

Leaflet Logo


This beginner-level workshop is intended for anyone interested in getting started with creating web maps. There are two main sections: an introduction to web maps, and a hands-on where we will copy/paste code to make an interactive map of UBC-V Campus powered by Leaflet. This workshop aims to develop the fundamental knowledge and skills to begin web mapping while providing opportunities to ask questions. Upon completion of this workshop you will have a boilerplate code which you can build upon and tinker with on your own.

Pre-Workshop Setup

Workshop Data

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 computer. During the hands-on portion you’ll work with this data in your 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.

Download Data

Software Used


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:

What you will build

All set? Let’s begin web mapping!

Geospatial Information Resources at UBC:

Table of contents