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 some code in order to understand the anatomy of a web map powered by Leaflet. 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 — like that below — visualizing Public Art and Heritage Conservation Districts across the City of Toronto.

Because this is quite busy, you will also learn how to use Leaflet to cluster a point layer.

---

Table of contents

• 1. Developer Environment
• 2. Map Tiles
• 3. Map Boilerplate
• 4. Map Parameters
• 5. Map Data
• 6. Add Layers
• 7. Configuring Pop-ups
• 8. Clustering