Hands On

This section will guide you through building an interactive web map powered by Leaflet. To begin, we will look at the boilerplate code that loads a basemap in order to understand what each element does. Then, we will add data to create an interactive map visualizing UBC-V campus buildings.

There are 4 basic component to a Leaflet web map: Tiles, Data, Style, and Interaction. These work in concert to power a functioning web map. Over the course of the Hands-On activities that follow, you will have a chance to experiment with each component.

---

Table of contents

• 1. Map Tiles
• 2. Open Data Folder
• 3. Map Boilerplate
• 4. Map Parameters
• 5. Map Data
• 6. Add Data
• 7. Configure Popups