Leaflet-Tutorial

An introduction to web-mapping using LeafletJS.

Leaflet is a leading, open-source JavaScript library for creating mobile-friendly interactive maps that work efficiently accross all major desktop and mobile platforms. It has been designed with an eye towards providing simplicity, performance, and usability with a number of out-of-the-box features, as well as supported plugins for additional functionality.

About this tutorial:

This tutorial provides a basic introduction to Leaflet as a tool for creating mobile-friendly interactive maps. Upon completion, the learner will be able to set up a simple Leaflet map, define tile layers, markers, and interactive popups.

This tutorial was originally created as instructional material for the 2022 Digital Scholarship Summer Fellowship program (DSSF) at Bryn Mawr College and assumes some rudimentary knowledge of HTML.

Contents:

1. About Leaflet
2. Setting up the map
3. Modifying the base map
4. Adding objects
5. Working with popups
6. Ensuring web-accessibility

Helpful links:

• Leaflet designed tutorials
• Leaflet documentation
• Introduction to Web Mapping by Michael Dorman
  • An excellent introduction to web-mapping tools and methods, including Leaflet, with robust bibliography

---

Start tutorial >