leaflet

What is leaflet?

Leaflet is a widely used open-source JavaScript library that helps you create mobile-friendly interactive maps. It provides features that allow users to embed maps into web pages, add various types of layers, markers, popups, and handle user interactions with the map.

What are leaflet's main functionalities?

Map Initialization

This code initializes a new map in the 'mapid' HTML element and sets the view to a specific latitude and longitude and a zoom level.

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

Tile Layer

This code adds a tile layer to the map using OpenStreetMap tiles. It sets the maximum zoom level and adds attribution text.

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  maxZoom: 19,
  attribution: '© OpenStreetMap contributors'
}).addTo(map);

Markers

This code places a marker on the map at the specified latitude and longitude.

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

Popups

This code binds a popup with some HTML content to the previously created marker and opens it.

marker.bindPopup('<b>Hello world!</b><br>I am a popup.').openPopup();

GeoJSON

This code adds a GeoJSON layer to the map. The 'geojsonData' variable should contain valid GeoJSON.

L.geoJSON(geojsonData).addTo(map);

Other packages similar to leaflet

openlayers

OpenLayers is an open-source JavaScript library for displaying map data in web browsers. It provides a similar range of features to Leaflet, but it is known for being more feature-rich and customizable, which can make it more complex to use.

mapbox-gl

Mapbox GL JS is a JavaScript library that uses WebGL to render interactive maps from vector tiles and Mapbox styles. It is known for its smooth rendering capabilities and is suitable for applications that require more advanced visual effects and functionalities.

google-maps-react

This package is a wrapper around the Google Maps API for use within React applications. It allows for the integration of Google Maps features, but it requires an API key and is not open-source like Leaflet.

README

Leaflet was created 11 years ago by Volodymyr Agafonkin, a Ukrainian citizen living in Kyiv.

Russian bombs are now falling over Volodymyr's hometown. His family, his friends, his neighbours, thousands and thousands of absolutely wonderful people, are either seeking refuge or fighting for their lives.

The Russian soldiers have already killed tens of thousands of civilians, including women and children, and are committing mass war crimes like gang rapes, executions, looting, and targeted bombings of civilian shelters and places of cultural significance. The death toll keeps rising, and Ukraine needs your help.

As Volodymyr expressed a few days before the invasion:

If you want to help, educate yourself and others on the Russian threat, follow reputable journalists, demand severe Russian sanctions and Ukrainian support from your leaders, protest war, reach out to Ukrainian friends, donate to Ukrainian charities. Just don't be silent.

Ukrainians are recommending the Come Back Alive charity. For other options, see StandWithUkraine.

If an appeal to humanity doesn't work for you, I'll appeal to your egoism: the future of Ukrainian citizens is the future of Leaflet.

It is chilling to see Leaflet being used for documenting Russia's war crimes, factual reporting of the war and for coordination of humanitarian efforts in Romania and in Poland. We commend these uses of Leaflet.

If you support the actions of the Russian government (even after reading all this), do everyone else a favour and carry some seeds in your pocket.

Yours truly,
Leaflet maintainers.

---

Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps. Weighing just about 39 KB of gzipped JS plus 4 KB of gzipped CSS code, it has all the mapping 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 out of the box, taking advantage of HTML5 and CSS3 on modern browsers while being accessible on older ones too. It can be extended with a huge amount of plugins, has a beautiful, easy to use and well-documented API and a simple, readable source code that is a joy to contribute to.

For more info, docs and tutorials, check out the official website.
For Leaflet downloads (including the built main version), check out the download page.

We're happy to meet new contributors. If you want to get involved with Leaflet development, check out the contribution guide. Let's make the best mapping library that will ever exist, and push the limits of what's possible with online maps!

Changelog

1.9.4 (2023-05-18)

🐞 Bug fixes

• Fix tile gaps in Chromium-based browsers (#8891 by @IvanSanchez)
• Fix vector drifts when zoomAnimation is false and zooming via flyTo or pinch (#8794 by @plainheart)
• Ensure toGeoJSON() still works with an empty array (#8737 by @Falke-Design)
• Ensure LineUtil and PolyUtil only iterate over array values and not properties (#8840 by @Falke-Design)
• Fix rounding errors in center calculation of LineUtil and PolyUtil for small layers (#8784 by @Falke-Design)
• Prevent unwanted layer toggle while expanding the Layers control on mobile (#8910 by @Falke-Design)
• Fix an error when a focusing on a Tooltip-bound FeatureGroup that contains a layer without a getElement method (#8890 by @Falke-Design)
• Fix Tooltip is not showing when loaded dynamically while moving the map (#8672 by @theGOTOguy)
• Fix noMoveStart option not applying to fitBounds (#8911 by @AbdullahSohail-SE)
• Fix outlines showing up when interacting with the map on Safari 16.4+ (#8917 by @jonkoops)