# Leaflet — Lightweight Interactive Maps for the Web

> An open-source JavaScript library for mobile-friendly interactive maps with a simple API, broad plugin ecosystem, and excellent performance.

## Install

Save as a script file and run:

# Leaflet — Lightweight Interactive Maps for the Web

## Quick Use
```html
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
```
```js
const map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
L.marker([51.5, -0.09]).addTo(map).bindPopup('Hello');
```

## Introduction
Leaflet is the leading open-source JavaScript library for interactive maps. At around 42 KB gzipped it delivers smooth panning, zooming, markers, popups, and tile layer rendering across desktop and mobile browsers with a clean, well-documented API.

## What Leaflet Does
- Renders tile-based maps from OpenStreetMap, Mapbox, or any XYZ tile provider
- Places markers, circles, polygons, and polylines with bindable popups and tooltips
- Handles touch gestures, pinch zoom, and inertial panning on mobile devices
- Supports GeoJSON import for rendering geographic data features
- Provides layer control for toggling base maps and overlay groups

## Architecture Overview
Leaflet uses a modular class-based architecture built around the Map container, which manages Layers (tiles, markers, vectors) and Controls (zoom, attribution). Tile layers load 256x256 image tiles on demand as the viewport changes. Vector shapes render via SVG or Canvas depending on browser capability. Events bubble through a custom eventing system that keeps the public API minimal.

## Installation & Configuration
- Include via CDN link tags or install with npm/yarn for bundler workflows
- Initialize a map on any div element with L.map() specifying center and zoom
- Choose a tile provider URL template for the base layer
- Configure max zoom, bounds, and CRS for custom projections
- Works with React, Vue, and Angular via wrapper libraries like react-leaflet

## Key Features
- Mobile-first design with touch and retina display support
- Extensive plugin ecosystem with hundreds of community extensions
- Lightweight core that loads fast even on slow connections
- GeoJSON support with per-feature styling and interaction callbacks
- Layer groups and feature groups for organizing complex map content

## Comparison with Similar Tools
- **Mapbox GL JS** — WebGL-based with 3D terrain and vector tiles but requires a Mapbox token; Leaflet is free and raster-based
- **OpenLayers** — more GIS features and projections but a larger API surface; Leaflet is simpler to learn
- **Google Maps JS API** — proprietary with usage fees; Leaflet is open source and provider-agnostic
- **deck.gl** — optimized for large-scale data visualization; Leaflet is better for standard mapping use cases
- **MapLibre GL JS** — open-source fork of Mapbox GL for vector tiles; Leaflet stays with proven raster tile rendering

## FAQ
**Q: Is Leaflet free for commercial use?**
A: Yes. Leaflet is BSD-2-Clause licensed. Tile providers may have their own terms.

**Q: Can I use Leaflet with React?**
A: Yes. The react-leaflet library provides React components that wrap Leaflet classes. You can also use Leaflet directly via refs.

**Q: Does Leaflet support vector tiles?**
A: The core library uses raster tiles. Plugins like leaflet-mapbox-vector-tile add vector tile support.

**Q: How do I add custom markers?**
A: Use L.icon() to define a custom icon image and size, then pass it to L.marker() via the icon option.

## Sources
- https://github.com/Leaflet/Leaflet
- https://leafletjs.com

---
Source: https://tokrepo.com/en/workflows/a4a3e039-3ffa-11f1-9bc6-00163e2b0d79
Author: Script Depot