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.6.1 (2013-06-27)
Object.prototype (luckily it's a thing of the past nowadays).Map invalidateSize no longer fires move and moveend events if the map size didn't change. #1819Control.Layers icon (designed by Volker Kinkelin), added retina version and SVG source. #1739TileLayer zoom animation to eliminate flickering in case one tile layer on top of another or when zooming several times quickly (by @mourner with lots of fixes from @danzel). #1140 #1437 #52map.attributionControl.setPrefix('') if you need.Marker popups to close on marker click if opened (by @popox). #1761toGeoJSON method to various layer types, allowing you to save your Leaflet layers as GeoJSON. (by @jfirebaugh). #1462 #712 #1779GeoJSON coordsToLatLng option for dealing with GeoJSON that has non-WGS84 coords (thanks to @moonlite). #888 #886Marker to reuse icon DOM elements when changing icons on the fly (e.g. fixes problems when changing icon on mouse hover) (by @robpvn & @danzel). #1726 #561 #1753 #1754latlng property to Marker mouse event data. #1613LayerGroup hasLayer method (by @rvlasveld). #1282 #1300LayerGroup getLayers method (by @tmcw). #1469LayerGroup getLayer method (by @gumballhead). #1650LayerGroup removeLayer method to also accept layer id (by @gumballhead). #1642Path pointerEvents option for setting pointer-events on SVG-powered vector layers (by @inpursuit). #1053Polygon to filter out last point if it's equal to the first one (to fix GeoJSON polygon issues) (by @snkashis). #1153 #1135clickable: false to allow mouse events to pass through to objects underneath (by @snkashis). #1384 #1281L.Util.template (and correspondingly url-related TileLayer options) to support functions for data values (by @olegsmith). #1554TileLayer getContainer method (by @tmcw). #1433TileLayer.Canvas redraw method chaining (by @jieter). #1287TileLayer.WMS crs option to be able to use WMS of CRS other than the map CRS (by @kengu). #942 #945popupopen and popupclose events to various layers (by @Koc). #738Popup keepInView option (thanks to @lapo-luchini) that prevents the popup from going off-screen while it's opened. #1308 #1052Marker togglePopup method (by @popox). #1761Popup closeOnClick option that overrides the same Map option for specific popups (by @jfirebaugh). #1669Marker and Path bindPopup method to also accept Popup objects (by @snkashis). #1385 #1208 #1402Marker setPopupContent method (by @snkashis). #1373Map (setView, panTo, setZoom, fitBounds, etc.) to accept an options object, including the ability to precisely control zoom/pan animations they cause (force disable/enable, etc.). #1617 #1616 #340 #483 #1164 #1420Map fitBounds method to accept padding (or paddingTopLeft and paddingBottomRight) options, allowing you to zoom to an area with a certain padding in pixels (usually left for controls). #859Map invalidateSize to accept options object (animate and pan, the latter controls if it pans the map on size change). (by @jacobtoye and @mourner). #1766 #1767Map setZoomAround method for zooming while keeping a certain point fixed (used by scroll and double-click zooming). #1157Map remove method to properly destroy the map and clean up all events, and added corresponding unload event (by @jfirebaugh and @mourner). #1434 #1101 #1621Map tap handler that now contains all mobile hacks for enabling quick taps and long holds and tapTolerance option specifying the number of pixels you can shift your finger for click to still fire.Map zoomAnimationThreshold for setting the max zoom difference with which zoom animation can occur. #1377Map openPopup method to also accept (content, latlng) signature as a shortcut.Map closePopup method to optionally accept a popup object to close. #1641Map stopLocate method to abort resetting map view if calling locate with setView option. #747Map to throw exception if the specified container id is not found (by @tmcw). #1574Map locationfound event to pass all location data (heading, speed, etc.). #984 #584 #987 #1028Map resize event. #1564Map zoomlevelschange event that triggers when the current zoom range (min/max) changes (by @moonlite). #1376Map baselayerchange, overlayadd and overlayremove events fired by Control.Layers (by @calvinmetcalf and @Xelio). #1286 #1634Control getContainer method. #1409cleanAllEventListeners method (aliased to off without arguments) to all events-enabled objects (by @iirvine). #1599addOneTimeEventListener method (aliased to once) to all events-enabled objects (by @iirvine). #473 #1596{lat: 50, lon: 30} or {lat: 50, lng: 30}). #1412LatLngBounds getNorth, getEast, getSouth, getWest methods (by @yohanboniface). #1318AMD support (Leaflet now registers itself as a leaflet AMD module) (with fixes from @sheppard). #1364 #1778L.Util.trim function (by @kristerkari). #1607Map maxBounds. #1491 #1475 #1194 #900 #1333contextmenu events on popups falling through to map (by @snkashis). #1730 #1732404 tile loading errors when browsing the map off the world bounds.TileLayer opacity didn't work in IE 7-8 (by @javisantana & [@danzel](https://gi
.com/danzel)). #1084 #1396 #1371L.point and L.latLng factories weren't passing null and undefined values through.DomEvent removeListener function chaining (by @pagameba).removeEventListener would throw an error if no events are registered on the object (by @tjoekbezoer). #1632 #1631Point equals and contains methods didn't accept points in array form.LatLngBounds extend of an undefined object would cause an error (by @korzhyk). #1688Control.Attribution removeAttribution of inexistant attribution corrupted the attribution text. #1410setView on an invisible map caused an error (by @jfire). #1707TileLayer.WMS param values weren't escaped in URLs (by @yohanboniface). #1317TileLayer.WMS tileSize option was ignored (by @brianhatchl). #1080Polyline constructor could overwrite the source array (by @snkashis and @danzel). #1439 #1092 #1246 #1426TileLayer to prevent incorrect subdomain in case of negative tile coordinates (by @malexeev). #1532DivIcon html option to accept 0 as a value (by @stuporglue). #1633mousemove in certain conditions. #1615TileLayer bounds (by @ansis). #1618TileLayer load event wouldn't always fire correctly. #1565TileLayer.WMS compatibility with some old servers that only accepted request parameters in uppercase. #1751L.Icon.Default.imagePath detection in some cases. #1657onRemove was still called even if it was never added (by @jfirebaugh). #1729setRadius on a Canvas-powered CircleMarker would cause an infinite loop (by @snkashis). #1712 #1713 #1728marker-icon@2x.png to marker-icon-2x.png to fix compatibility with Google AppEngine. #1552 #1553popupclose and popupopen events weren't fired for multipolygons and multipolylines (by @tmcw). #1681Map fitBounds wouldn't work correctly with large bounds (thanks to @MaZderMind). #1069Map hasLayer wasn't handling null objects (by @rvlasveld). #1282 #1302Map moveend fired before dragend on drag (by @oslek). #1374Map movestart event on inertia start (by @oslek). #1374Map moveend fired repeatedly on window resize even if the actual map size didn't change (by @oslek). #1374Map moveend sometimes wasn't fired after drag (particularly often when dragging with a trackpad).Map load event listener. #962Map autopanstart event back (it was removed occasionally in previous version). #1375Map maxBounds (by @jec006). #1749 #1750FAQs
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.