Hands On with Leaflet

There are 4 basic component to a web map: Tiles, Data, Style, and Interaction. These work in concert to power a functioning web map. The remainder of this workshop will introduce you to each component through hands-on experimentation. First, we’ll look at the code a web map powered by Leaflet in order to understand the anatomy of a web map. Then, you will learn to add and style data, as well as configure the interactivity of your web map. In the end, you will create an interactive map visualizing parks and points of interest across Vancouver. No prior knowledge of code is necessary.

---

Table of contents

• 1. Open Data Folder
• 2. Map Tiles
• 3. Map Boilerplate
• 4. Map Parameters
• 5. Map Data
• 6. Adding Data
• 7. Configuring Popups
• Hosting your web map