🏳️Leaflet - a JavaScript library for interactive maps

Website faviconleafletjs.com

×

May 18, 2023 — [Leaflet 1.9.4](/2022/09/21/leaflet-1.9.0.html) has been released!

Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps. Weighing just about 42 KB of JS, it has all the mapping [features](#features) most developers ever need.

Leaflet is designed with _simplicity_, _performance_ and _usability_ in mind. It works efficiently across all major desktop and mobile platforms, can be extended with lots of [plugins](plugins.html), has a beautiful, easy to use and [well-documented API](reference.html "Leaflet API reference") and a simple, readable [source code](https://github.com/Leaflet/Leaflet "Leaflet source code repository on GitHub") that is a joy to [contribute](https://github.com/Leaflet/Leaflet/blob/main/CONTRIBUTING.md "A guide to contributing to Leaflet") to.

A pretty CSS popup.  

Easily customizable.

[×](#close)

[+](# "Zoom in")[−](# "Zoom out")

[Leaflet](https://leafletjs.com "A JavaScript library for interactive maps") | © [OpenStreetMap](https://www.openstreetmap.org/copyright) contributors

Here we create a map in the `'map'` div, add tiles of our choice, and then add a marker with some text in a popup:

    var map = L.map('map').setView([51.505, -0.09], 13);

    L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {

        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'

    }).addTo(map);

    L.marker([51.5, -0.09]).addTo(map)

        .bindPopup('A pretty CSS popup.<br> Easily customizable.')

        .openPopup();

Learn more with the [quick start guide](examples/quick-start/), check out [other tutorials](examples.html), or head straight to the [API documentation](reference.html). If you have any questions, take a look at the [FAQ](https://github.com/Leaflet/Leaflet/blob/main/FAQ.md) first.

Trusted by the best

-------------------

[GitHub](https://github.com) [foursquare](http://foursquare.com) [Pinterest](https://www.pinterest.com) [Facebook](https://www.facebook.com/) [Evernote](https://evernote.com) [Etsy](https://www.etsy.com/) [Flickr](https://www.flickr.com/) [500px](https://500px.com) [Data.gov](http://www.data.gov/) [European Commission](http://ec.europa.eu/) [The Washington Post](https://www.washingtonpost.com) [Financial Times](http://www.ft.com) [NPR](http://www.npr.org) [USA Today](http://www.usatoday.com) [National Park Service](http://www.nps.gov/) [IGN.com](http://ign.com) [OpenStreetMap](https://www.openstreetmap.org/)

Features

--------

Leaflet doesn't try to do everything for everyone. Instead it focuses on making _the basic things work perfectly_.

### Layers Out of the Box

*   Tile layers, WMS

*   Markers, Popups

*   Vector layers: polylines, polygons, circles, rectangles

*   Image overlays

*   GeoJSON

### Interaction Features

*   Drag panning with inertia

*   Scroll wheel zoom

*   Pinch-zoom on mobile

*   Double click zoom

*   Zoom to area (shift-drag)

*   Keyboard navigation

*   Events: click, mouseover, etc.

*   Marker dragging

### Visual Features

*   Zoom and pan animation

*   Tile and popup fade animation

*   Very nice default design for markers, popups and map controls

*   Retina resolution support

### Customization Features

*   Pure CSS popups and controls for easy restyling

*   Image- and HTML-based markers

*   A simple interface for custom map layers and controls

*   Custom map projections (with `EPSG:3857/4326/3395` out of the box)

*   Powerful OOP facilities for extending existing classes

### Performance Features

*   Hardware acceleration on mobile makes it feel as smooth as native apps

*   Utilizing CSS features to make panning and zooming really smooth

*   Smart polyline/polygon rendering with dynamic clipping and simplification makes it very fast

*   Modular build system for leaving out features you don't need

*   Tap delay elimination on mobile

### Map Controls

*   Zoom buttons

*   Attribution

*   Layer switcher

*   Scale

### Browser Support

#### Desktop

*   Chrome

*   Firefox

*   Safari 5+

*   Opera 12+

*   IE 9–11

*   Edge

#### Mobile

*   Safari for iOS 7+

*   Chrome for mobile

*   Firefox for mobile

*   IE10+ for Win8 devices

### Misc

*   Extremely lightweight

*   No external dependencies

If you find some feature really missing in Leaflet, first check if there's a [plugin for it](plugins.html) and if it's been discussed before already on [GitHub issues](https://github.com/Leaflet/Leaflet/issues). If not, please open a new GitHub issue.

Getting Involved

----------------

Let's create the best mapping library in the world! Leaflet was originally created by [Volodymyr Agafonkin](https://agafonkin.com), but is now developed by a big community of [contributors](https://github.com/Leaflet/Leaflet/graphs/contributors). [Pull requests](https://github.com/Leaflet/Leaflet) are always welcome. However, there are many more ways to get involved with the development of Leaflet.

You can help the project tremendously by discovering and [reporting bugs](https://github.com/Leaflet/Leaflet/blob/main/CONTRIBUTING.md#reporting-bugs), [improving documentation](https://github.com/Leaflet/Leaflet/blob/main/CONTRIBUTING.md#improving-documentation), helping others on [Stack Overflow](https://stackoverflow.com/questions/tagged/leaflet), [GIS Stack Exchange](https://gis.stackexchange.com/questions/tagged/leaflet) and [GitHub issues](https://github.com/Leaflet/Leaflet/issues), X to [@LeafletJS](https://twitter.com/LeafletJS) and spreading the word about Leaflet among your colleagues and friends.

Check out the [contribution guide](https://github.com/Leaflet/Leaflet/blob/main/CONTRIBUTING.md) for more information on getting involved with Leaflet development.