Leaflet is a lightweight, open-source JavaScript library that lets you put an interactive map on a web page with only a few dozen lines of code. Unlike a static image, a Leaflet map can be panned, zoomed, clicked and layered, and it weighs only about 42 kilobytes, so it loads fast even on mobile connections. That combination is why journalists, small businesses, researchers and hobbyists choose Leaflet for store locators, field-survey displays and story maps.

Start with three files or even one HTML file. In the head, link the Leaflet CSS and JavaScript from a CDN, for example version 1.9.4 from unpkg, and add a style rule giving your map container a height, such as #map { height: 500px; }. Without an explicit height the map collapses to zero and appears blank, which is the most common beginner error. In the body, add a div with id map, then a script that creates the map with L.map('map').setView([31.58, 74.36], 13) for a city centre, where the numbers are latitude, longitude and zoom level.

Accessibility and performance deserve the same attention as visual design on a Leaflet map. Choose marker colours with enough contrast, make popups keyboard-accessible by testing with the Tab key, and avoid relying on colour alone to convey meaning by adding labels or patterns for key categories. On the performance side, prefer vector tiles or simplified GeoJSON for large datasets, lazy-load layers that most visitors never open, and test with browser throttling set to a slow mobile connection. A map that only works on a fast office connection will fail exactly the audience — field staff, rural visitors, mobile users — who often need location information most urgently.