Leaflet Javascript Library

Embed interactive GIS maps in your web page with Leaflet

Materials:

• Slides (in printable format)

Exercise materials:

The following links provide a hands-on experience with Leaflet coding.

Clicking on the "Stackblitz project" link from you browser (Chrome recommended) opens an online development environment where you can explore example code and modify it to practice and deepen your understanding.

Note: due to a change in  MongoDB's service, the last three steps will stop working after September 2025.

We strongly recommend using the Chrome browser (you can install it here). If you prefer using Firefox, Brave or Edge, please follow these configuration instructions.

• Displaying a map (Stackblitz project)

• Managing Map Events (Stackblitz project)

• Recording Coordinates in the Interface (Stackblitz project)

• Linking Markers and Coordinates (Stackblitz project)

• Storing Coordinates in a Data Structure (Stackblitz project)

• Organizing Markers in a Separate Layer (Stackblitz project)

• Exporting Data as a GeoJSON String (Stackblitz project)

• Create a Cloud Storage for Your Data (Stackblitz project)

• Save Your Data to the Cloud Storage (Stackblitz project)

• Retrieve Your Data from the Cloud Storage (Stackblitz project)

Useful links:

• Leaflet home page

• Stackblitz online IDE