Leaflet

an open-source JavaScript library
for mobile-friendly interactive maps

← Back to the list of blog posts

Leaflet 2.0 Alpha released

After two and a half years of hard work, we’re thrilled to announce the first alpha release of Leaflet 2.0!

This release marks a major modernization of the Leaflet codebase. We’ve dropped support for Internet Explorer, removed legacy methods and polyfills, adopted modern standards like Pointer Events, and now publish Leaflet as an ESM module. The global L is no longer part of the core package (though it’s still available in the bundled version leaflet-global.js for backward compatibility).


What’s New in Leaflet 2.0


Migration

  1. Replace all factory methods with constructor calls: L.marker(latlng)new Marker(latlng)
  2. Change the <script> tag to module: <script type='module'>
    • To have global access to variables of a module-script, assign them to the window object (Not recommended): window.map = map
  3. Replace usage of L with explicit imports from the Leaflet package: import { Marker } from 'leaflet'
    • if you are not using a package manager like npm, you can use a importmap: https://leafletjs.com/examples/quick-start/
  4. Consider Leaflet V1 Polyfill if you are using outdated plugins

Old implementation

<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
	const map = L.map('map').setView([51.505, -0.09], 13);

	const tiles = L.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>

New implementation

Module

<script type="importmap">
	{
		"imports": {
			"leaflet": "https://unpkg.com/leaflet@2.0.0-alpha1/dist/leaflet.js"
		}
	}
</script>
<script type="module">
	import L, {Map, TileLayer, Marker, Circle, Polygon, Popup} from 'leaflet';

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

	const tiles = 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>

Global Script

<script src="https://unpkg.com/leaflet@2.0.0-alpha1/dist/leaflet-global.js"></script>
<script>
	const map = new L.Map('map').setView([51.505, -0.09], 13);

	const tiles = new L.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>

Major Changes & Cleanups

Modules & Browser Support

Browser

DomUtil

Util

DomEvent

Map

Layers

Class

Draggable & BoxZoom

CSS

Layers Control

PinchZoom

Factory Methods

Events

Icon.Default

Circle

GridLayer

Canvas

VideoOverlay


Want the Full Details?

You can explore all changes included in this release through the following resources:


Need Legacy Support?

Check out this polyfill package to help ease the transition for legacy apps: Leaflet V1 Polyfill


Thanks to everyone who contributed ideas, code, feedback, and testing over the years. This release is a major step forward for Leaflet, and we can’t wait to see what you build with it!

Cheers,
The Leaflet Team