Duration: approx. 9-12 hours (divided into 6 sessions)
Program :
- Introduction to Leaflet online
- – Installation, basic map structure
- – Adding map backgrounds (OSM, third-party basemaps)
- Layers and interactivity (online 25 /04/2025)
- – Points, polylines, polygons
- – Customization, events, interactions
- GeoJSON layers and external data (online 30 /04/2025)
- – Loading GeoJSON data
- – Conditional display, dynamic symbols
- Interface controls and tools (online 07 /05/2025)
- – Tooltips, popups, legends, layer groups
- – Layer control and simple filters
- User events and interactivity (online 14 /05/2025)
- – Reacting to clicks, hovers, element selection
- – Creating a simple interactive map
- Custom web map mini-project (online 16 /05/2025)
- – Creating a mini-project
- – Putting it online (GitHub Pages or other free solution)
Expected result
By the end of the course, you’ll be able to create a working Leaflet map with your own data and put it online to share with the world!
Submit your individual project – Session 6
In the last session of this module, you will have produced an individual project incorporating the main elements studied (layers, styles, interactions, controls, etc.).
We invite you to share your project with us, so as to benefit from personalized feedback and, if you wish, to be featured in future publications
How to proceed?
Publish your project (code and map) on GitHub or an equivalent service (the method will be described in session 6), then send us the link to your repository via a form made available to you.
Projects will be examined according to the following criteria:
- Good use of the Leaflet API
- Readability and organization of the code
- Visual and functional quality of the map
- Relevance of the subject and data chosen
To follow the course exercises, you can download a starter kit in zip format from this link.
Unzip the contents into a directory of your choice where you can store all the files for this course.
Teaching method for the Leaflet course
This introductory course to Leaflet.js, the JavaScript library for interactive mapping, is designed to guide you progressively through the learning process, with an active, visual and guided approach.
Each session follows a simple, effective teaching structure:
1-Introductory slide show
Each session begins with a summary slide show outlining the essential notions to remember:
- concepts illustrated with concrete examples,
- commented code extracts,
- diagrams or screenshots,
- icons and visual cues to aid memorization.
The aim: to quickly understand Leaflet’s functions and possibilities..
2-Detailed explanatory text
Each slide is accompanied by a pedagogical explanatory text, which:
- develops the content of the slide show,
- explains the “why” and “how” behind each function,
- suggests code variants or additional tips,
- introduces best practices and common mistakes to avoid.
This text is intended as a stand-alone reading aid, to be consulted before or after the session.ce.
3-Practical exercise at the end of each session
At the end of each session, you’ll find a practical exercise to complete:
- direct application of the concepts covered,
- realistic scenario: map of a location, addition of markers, dynamic style, etc.
- clear instructions, with guided steps if necessary.
Exercises are an essential step in anchoring what you’ve learned and testing your understanding.votre compréhension.
4. Answer key available… but after the effort!
A link at the end of the article takes you to the answer key for the exercise, with:
- a commented solution,
- functional code to copy and paste or adapt,
- sometimes variants or areas for improvement.
We strongly recommend that you perform the exercise yourself before consulting the solution.
This is the best way to progress independently, reinforce your memory and make the concepts your own.
In a nutshell
Each session of the course is based on:
- a visual slide show to help you understand quickly,
- a clear explanatory text to help you go deeper,
- a practical exercise to help you experiment,
- a guided answer sheet to help you correct yourself and go further.
This method allows you to learn Leaflet step by step, at your own pace, whether you’re a beginner or already have some basic knowledge of HTML/JavaScript.