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.
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);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 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.
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.
Leaflet is a modern open-source JavaScript library for mobile-friendly interactive maps. It is developed by Vladimir Agafonkin with a team of dedicated contributors. Weighing just about 27 KB of gzipped JS code, it has all the features most developers ever need for online maps.
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 also be extended with many 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 information, check out the official website.
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 open-source library for maps that can possibly exist!
0.5.1 (2013-02-06)
GeoJSON not accepting arrays of FeatureCollection (by @snkashis). #1299 #1298CirleMarker setRadius not working if called before adding the layer to the map (by @danzel). #1342 #1297Be sure to read through these changes to avoid any issues when upgrading from older versions:
LatLng wrapping/clamping of coordinates (-180, -90 to 180, 90), wrapping moved to an explicit method (LatLng wrap).Map worldCopyJump option by default (jumping back to the original world copy when panning out of it). Enable it explicitly if you need it.Icon iconRetinaUrl and shadowRetinaUrl options) (by @danzel). #1048 #1174L.Transition with a much better and simpler L.PosAnimation.Class addInitHook method for adding constructor hooks to any classes (great extension point for plugin authors). #1123Map whenReady method (by @jfirebaugh). #1063delta argument to Map zoomIn and zoomOut (1 by default).isValid method to LatLngBounds and Bounds (by @domoritz). #972Point equals method.Bounds getSize method.Path unbindPopup and closePopup methods.Path add and remove event.Marker riseOnHover and riseOffset options (for bringing markers to front on hover, disabled by default) (by jacobtoye). #914 #920Marker move and remove events.Marker contextmenu event. #223Popup zoomAnimation option (useful to disable when displaying flash content inside popups #999).FeatureGroup layeradd and layerremove events (by @jacobtoye). #1122Control.Layers baselayerchange event (by @jfirebaugh). #1064Control.Layers to support HTML in layer names (by @aparshin). #1055 #1099CRS.Simple to the list of built-in CRS and improved it to be more usable out of the box (it has different default scaling and transformation now), see debug/map/simple-proj.html for an example.Browser ua, gecko, opera properties (no longer needed).L.extend, L.bind, L.stamp, L.setOptions shortcuts for corresponding L.Util methods.L.Util.isArray function (by @oslek). #1279mouseover and mouseout events to canvas-based vector layers (by @snkashis). #1403Map eachLayer to iterate over all layers added to the map (by @jfirebaugh). #1457TileLayer bounds option to limit tile loading to a specific region (by @adimitrov). #991panBy wouldn't round the offset values (so it was possible to make the map blurry with it). #1085TileLayer bringToBack didn't work properly in some cases (by @danzel). #963 #959Map load event happened too late (after moveend, etc.) (by @jfirebaugh). #1027Circle getBounds to return correct bounds and work without adding the circle to a map. #1068Popup on viewreset throwed an error (by fnicollet and @danzel). #1098 #1094TileLayer.Canvas drawTile didn't receive tile zoom level in arguments.GeoJSON resetStyle would not fully reset a layer to its default style. #1112latLngBounds factory with coordinates as string values. #933Marker setIcon, setZIndexOffset, update methods. #1176FeatureGroup bindPopup didn't take options into account.CircleMarker setStyle didn't take radius into account (by @fdlk). #1012 #1013layer event property on click (by @snkashis). #1215 #1243TileLayer.WMS didn't work correctly if the base URL contained query parameters (by @snkashis). #973 #1231GeoJSON features with GeometryCollection didn't pass properties to pointToLayer function (by @calvinmetcalf). #1097FeatureGroup eachLayer chaining. #1452TileLayer bringToFront/Back() throwed an error in IE6-8. #1168- key not working in Firefox 15+ (thanks to @mattesCZ). #869FAQs
JavaScript library for mobile-friendly interactive maps
The npm package leaflet receives a total of 1,030,911 weekly downloads. As such, leaflet popularity was classified as popular.
We found that leaflet demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 5 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.
Security News
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.