leaflet/docs/download.md

layout, title, bodyclass

layout	title	bodyclass
v2	Download	download-page

Download Leaflet

Version	Description
Leaflet 1.9.4	Stable version, released on May 18, 2023.
Leaflet 1.8.0	Previous stable version, released on April 18, 2022.
Leaflet 2.0-dev	In-progress version, developed on the main branch.

View Changelog

Note that the main version can contain incompatible changes, so please read the changelog carefully when upgrading to it.

Using a Hosted Version of Leaflet

The latest stable Leaflet release is available on several CDNs. To start using it with an importmap, place the following in the head of your HTML code:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@{{ site.latest_leaflet_version }}/dist/leaflet.css" integrity="{{site.integrity_hash_css}}" crossorigin="anonymous" />

<script type="importmap">
{
	"imports": {
		"leaflet": "https://cdn.jsdelivr.net/npm/leaflet@{{ site.latest_leaflet_version }}/dist/leaflet.js"
	},
	"integrity": {
		"https://cdn.jsdelivr.net/npm/leaflet@{{ site.latest_leaflet_version }}/dist/leaflet.js": "{{site.integrity_hash_uglified}}"
	}
}
</script>

A importmap allows defining module specifiers (import paths) in the browser without relying on a bundler. It enables the use of named imports directly from a CDN or local files, making module resolution more flexible and readable.

Then, in your script, import the needed Leaflet Classes as follows:

<script type="module">
	import {Map, TileLayer} from 'leaflet';

	const map = new Map('map').setView([51.505, -0.09], 13);
	
	new TileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
		maxZoom: 19,
		attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
	}).addTo(map);
</script>

Including Leaflet with a Global Scope

The old (and no longer recommended) way to include Leaflet in your project without using modules is by relying on the global variable L.

<script src="https://unpkg.com/leaflet@{{ site.latest_leaflet_version}}/dist/leaflet-global.js" integrity="{{site.integrity_hash_global_uglified}}" crossorigin=""></script>

Note that the integrity hashes are included for security when using Leaflet from a CDN.

Leaflet is available on the following free CDNs: jsDelivr, cdnjs, unpkg.

Disclaimer: These services are external to Leaflet; for questions or support, please contact them directly.

Using a Downloaded Version of Leaflet

Inside the archives downloaded from the above links, you will see four things:

• leaflet.js - This is the minified Leaflet JavaScript code.
• leaflet.js.map - This is a source map file for leaflet.js, allowing browser developer tools to map minified code back to the original source for easier debugging.
• leaflet-src.js - This is the readable, unminified Leaflet JavaScript, which is sometimes helpful for debugging. (integrity="{{site.integrity_hash_source}}")
• leaflet-src.js.map - This is a source map file for leaflet-src.js, providing debugging support for the unminified version of Leaflet.
• leaflet.css - This is the stylesheet for Leaflet.
• images - This is a folder that contains images referenced by leaflet.css. It must be in the same directory as leaflet.css.

Unzip the downloaded archive to your website's directory and add this to the head of your HTML code:

<link rel="stylesheet" href="/path/to/leaflet.css" />
<script type="importmap">
{
  "imports": {
    "leaflet": "/path/to/leaflet.js"
  }
}
</script>

Then, import Leaflet in your JavaScript file:

import {Map, TileLayer} from 'leaflet';

const map = new Map('map').setView([51.505, -0.09], 13);

new TileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
	maxZoom: 19,
	attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);

Using a JavaScript Package Manager

If you use the npm package manager, you can fetch a local copy of Leaflet by running:

npm install leaflet

Then, import Leaflet in your JavaScript file:

import {Map, TileLayer} from 'leaflet';

const map = new Map('map').setView([51.505, -0.09], 13);

new TileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
	maxZoom: 19,
	attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);

You will find a copy of the Leaflet release files in node_modules/leaflet/dist.

Leaflet Source Code

These download packages above only contain the library itself. If you want to download the full source code, including unit tests, files for debugging, build scripts, etc., you can download it from the GitHub repository.

Building Leaflet from the Source

Leaflet's build system is powered by the Node.js platform, which installs easily and works well across all major platforms. Here are the steps to set it up:

1. Download and install Node
2. Run the following command in the command line:

npm install

Now that you have everything installed, run npm run build inside the Leaflet directory. This will combine and compress the Leaflet source files, saving the build to the dist folder.