Leaflet

~42kb gzipped (JS) + ~4kb CSS

Mobile-friendly interactive maps in ~42kb -- pan, zoom, and drop markers with a few lines of code.

01

See It in Action

Each demo loads a real-world tile map and adds markers, popups, or routes. Drag to pan, scroll to zoom, click markers to open popups.

A real-world tile map zoomed on Cairo with a single marker and an open popup -- the classic "Find us" widget for a business contact page.

Preview
02

What is Leaflet?

Leaflet is a JavaScript library for interactive maps. You drop a <div> on the page, point Leaflet at it, pick a tile provider, and you have a pannable, zoomable, mobile-friendly map -- no API key, no build step.

Created in 2011 by Volodymyr Agafonkin, Leaflet has stayed simple on purpose: ~42kb gzipped, zero npm dependencies, and a small API focused on tiles, markers, popups, and shapes. It is the default choice for store locators, travel maps, and most "show this address on a map" use cases on the web.

🗺️
Real-World Tile Maps
Drop in any tile provider (OpenStreetMap, CartoDB, Stadia, Mapbox) and Leaflet streams + caches the right tiles for the user's pan and zoom. No GIS knowledge required.
📍
Markers, Popups, Shapes
Add markers, circles, polygons, and polylines with one line each. Bind interactive popups and tooltips directly to any feature -- great for store locators and route maps.
📱
Mobile-First by Default
Touch pinch-zoom, drag-pan, and tap interactions work out of the box. ~42kb gzipped with zero npm dependencies, so it loads fast on phones.
03

When to Use Leaflet

Use when
✓ Store locator on a business contact page
✓ Travel destination map with points of interest
✓ Real estate or property listings with map view
✓ Event venue map with directions
✓ Data visualization with markers placed by latitude/longitude
Avoid when
✕ 3D terrain, fly-to camera, or smooth vector zoom -- use MapLibre GL JS instead
✕ Vector tile styling at runtime (changing colors, fonts, layers) -- MapLibre or Mapbox GL JS handle this natively
✕ Heavy GIS analysis (projections, spatial joins, large datasets) -- OpenLayers is the better fit
04

How Leaflet Compares

Leaflet vs MapLibre GL JS

MapLibre is the modern WebGL choice for vector tiles, smooth zoom, 3D terrain, and runtime styling. Leaflet is the simpler, lighter raster-tile choice that just works without GPU dependencies. Pick Leaflet for marker-on-a-map use cases; pick MapLibre when you need vector styling or 3D.

Leaflet wins at
5x more weekly downloads, ~5x smaller bundle (42kb vs ~200kb gzipped), zero deps, simpler API, works on older browsers without WebGL
MapLibre GL JS wins at
Vector tiles, smooth continuous zoom, 3D terrain + buildings, runtime style changes, GPU rendering for 100k+ features
Leaflet vs Mapbox GL JS

Mapbox GL JS v2+ uses a proprietary license that bills per map load -- a non-starter for many commercial projects. Leaflet is BSD-2-Clause and free with OpenStreetMap or CartoDB tiles. Use Mapbox only if you already pay for their tile service.

Leaflet wins at
Free + open source license, free OSM and CartoDB tile providers, no API key required, smaller bundle
Mapbox GL JS wins at
Polished default styles, Mapbox Studio for tile design, vector + 3D rendering, geocoding bundled in
Leaflet vs Google Maps Platform

Google Maps charges per map load after a small free tier and requires an API key on a billing account. Leaflet + free OSM tiles costs zero forever. Use Google Maps if you specifically need Street View, Places search, or branded Google tiles.

Leaflet wins at
Free with OSM/CartoDB tiles, no API key, no vendor lock-in, fully open source, faster initial load
Google Maps Platform wins at
Street View, Places autocomplete, Google's tile quality, integrated routing and traffic data
Leaflet vs OpenLayers

OpenLayers is the heavier, GIS-grade option -- supports more projections, formats, and analysis features. Leaflet is the lighter, beginner-friendly pick for typical website maps. Choose OpenLayers for GIS apps; choose Leaflet for store locators and travel maps.

Leaflet wins at
Smaller bundle, simpler API, gentler learning curve, faster to ship a basic map
OpenLayers wins at
Full GIS feature set, more projections (EPSG codes), WMS/WMTS/WFS support, vector tiles, government data formats
05

Get Started with Leaflet

Terminal 
npm install leaflet
Terminal 
yarn add leaflet
HTML 
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet.js"></script>
Quick Start 
<!-- In your <head> -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet.css">

<!-- In your <body> -->
<div id="map" style="height: 400px;"></div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet.js"></script>
<script>
  // Center the map on a city, zoom level 13
  const map = L.map("map").setView([30.0444, 31.2357], 13);

  // Pick a tile provider (OpenStreetMap is free + needs no key)
  L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
    attribution: "&copy; OpenStreetMap contributors"
  }).addTo(map);

  // Drop a marker with a popup
  L.marker([30.0444, 31.2357])
    .addTo(map)
    .bindPopup("Hello from Cairo!")
    .openPopup();
</script>
06

Related Libraries

MapLibre GL JS
WebGL-powered vector maps with 3D pitch, smooth zoom, and runtime styling -- the open-source Mapbox GL fork.
JsVectorMap
Stylized SVG country maps for data viz -- the fastest way to render a "sales by country" choropleth.