Leaflet.js
Leaflet.js is the leading open-source JavaScript library for interactive maps. It’s lightweight (~42KB), mobile-friendly, and works across all major browsers with a simple API and excellent performance.
Pages in this section
Leaflet.js Basics — Setup, Map Creation & Tile Layers
Learn Leaflet.js from scratch: what Leaflet is, CDN setup, creating a map, tile layers, coordinates, zoom levels, and viewport controls explained step by step.
✓ LiveLeaflet.js Markers — Custom Icons, Popups & Clustering
Master Leaflet markers: standard markers, custom L.icon and DivIcon, popups with rich HTML, tooltips, clustering with MarkerCluster, and draggable markers.
✓ LiveLeaflet.js Shapes & GeoJSON — Circles, Polylines, Polygons
Master Leaflet vector layers: circles and circleMarkers, polylines, polygons, rectangles, GeoJSON data loading, styling, and choropleth maps explained.
✓ LiveLeaflet.js Layers & Controls — Layer Management, Overlays & Custom Controls
Master Leaflet layers control: layer groups vs feature groups, image and video overlays, zoom/scale controls, custom control creation, and layer management patterns.
✓ LiveLeaflet.js Events — Click Handling, Map Interactions & Event Propagation
Master Leaflet events: map events like click and zoom, layer events like mouseover and drag, event objects, propagation control, and custom events for interactive maps.
✓ LiveLeaflet.js Advanced — Plugins, Heatmaps, Routing & Performance
Master advanced Leaflet: popular plugins (heatmap, routing, draw, fullscreen), performance optimization for large datasets with clustering and canvas, and custom CRS.
✓ LiveLeaflet.js API Reference & Cheatsheet
Complete Leaflet.js v1.9 API reference: map configuration, tile layers, markers, popups, vector layers, GeoJSON, controls, events, utilities, and plugin CDN links.
✓ Live