 | |
| Original author(s) | Volodymyr Agafonkin |
|---|---|
| Initial release | May 13, 2011 (2011-05-13) |
| Stable release | |
| Repository | |
| Written in | JavaScript |
| Platform | SeeBrowser support |
| Type | JavaScript library |
| License | BSD-2-Clause[2] |
| Website | leafletjs |
Leaflet is aJavaScriptlibrary used to buildweb mappingapplications. It allows developers without a GIS background to displaytiled web maps hosted on a public server, with optional tiled overlays. It can load feature data fromGeoJSON files, style it and create interactive layers, such as markers with popups when clicked.
First released in 2011,[3] it supports most mobile and desktop platforms, supportingHTML5 andCSS3. Among its users areFourSquare,Pinterest,Flickr, and theUSGS.
Leaflet isopen source, and is developed by Volodymyr Agafonkin, who joinedMapbox in 2013.[4]
Leaflet is an open-source, JavaScript-based library for creating interactive maps. It was created in 2011 by Volodymyr Agafonkin, a Ukrainian citizen.[5] It covers a wide range of features a developer would need in creating interactive maps. It is supported by many browsers such as Chrome, Firefox, Safari 5+, Opera 12+, Internet Explorer 9 or later versions, and Edge.[6] It supports many third-party plugins, thus enabling the developer to integrate different kinds of features, such as Tile and image layering, Overlay displays, and various interactions into the map; these plugins help the developer create excellent maps.[7]
Being a lightweight (about 42 KB of JS)[8] as intended, Leaflet enjoys a fantastic community of contributors helping to maintain it. It is built with simplicity; one good thing about Leaflet is its readable, easy-to-follow source code with rich API documentation. The Leaflet is still new; more effort could focused on providing detailed source code examples, such as step-by-step guidance for implementing third-party plugins. Most of its resources are docked in GitHub and can easily be downloaded and modified however you wish, and the source codes are entirely open source.[9]
So far, three versions of Leaflet have been released, with its most stable version (Leaflet 1.9.4) released on May 18, 2023. The previous version (Leaflet 1.8.0) was released on April 18, 2022. A new version (Leaflet 2.0) is being developed, and its release date is yet to be set.[10]
A typical use of Leaflet involves binding a Leaflet "map" element to an HTML element such as adiv. Layers and markers are then added to the map element.
<html><head><title>Leaflet Map Example</title><!-- Link to Leaflet CSS file --><linkrel="stylesheet"href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"/><!-- Link to Leaflet JavaScript file --><scriptsrc="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script><style>#map{height:250px;width:400px;border:1pxsolidgray;}</style></head><body><divid="map"></div><script>// Initialize the mapvarmap=L.map('map').setView([51.505,-0.09],13);// Add the tile layer (you can choose a different map style by changing the URL)L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{attribution:'© <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);// Add a circle overlay with a specific radius and colorvarcircle=L.circle([51.508,-0.11],{color:'red',radius:500// Radius in meters}).addTo(map);// Add a marker with a popupvarmarker=L.marker([51.5,-0.09]).addTo(map).bindPopup('<b>Hello World!</b><br/> I am a popup.');</script></body></html>
In this code sample, the Leaflet library itself is accessible through the variableL.
Leaflet supportsWeb Map Service (WMS) layers,GeoJSON layers,Vector layers and Tile layers natively. Many other types of layers are supported viaplugins.
Like other web map libraries, the basic display model implemented by Leaflet is one basemap, plus zero or more translucent overlays, with zero or more vector objects displayed on top.
The major Leaflet object types are:[11]
There is also a variety of utility classes such as interfaces for managing projections, transformations and interacting with theDOM.
Leaflet has core support for multiple GIS standard formats, with others supported in plugins.
| Standard | Support |
|---|---|
| GeoJSON | Good, core support through thegeoJson function[12] |
| KML, CSV, WKT, TopoJSON, GPX | Supported in Leaflet-Omnivore plugin[13] |
| WMS | Core support through theTileLayer.WMS[14] subtype |
| WFS | Not supported, although third-party plugins exist.[15] |
| GML | Not supported.[16] |
Leaflet 0.7 supports Chrome, Firefox, Safari 5+, Opera 12+ and IE 7–11.[17]
 | Theneutrality of this article isdisputed. Relevant discussion may be found on thetalk page. Please do not remove this message untilconditions to do so are met.(September 2024) (Learn how and when to remove this message) |
Leaflet'sonEachFeature is quite handy when dealing with, for example, GeoJSON data. The function contains two parameters: "feature" and "layer". "feature" allows us to access each object inside the GeoJSON and "layer" allows us to add popups, tooltips etc.
An example in JavaScript is given below:
letgeoJson=L.geoJSON(geoJsonData,{weight:2,onEachFeature:getFeature,style:getStyle}).addTo(map);constgetFeature=(feature,layer)=>{if(!feature.properties.name)returnlayer.bindTooltip(feature.properties.cityName);layer.bindPopup(`<ul> <li>Name:${feature.properties.cityName}</li> <li>Population:${feature.properties.population}</li> </ul>`)};
It is also possible to add "async" keyword togetFeature function in order to use promises such asfetch(). We can utilise properties in each object of GeoJSON to create customised jsonqueries and get, for example, city-specific information and display them usinglayer.bindTooltip,layer.bindPopup, etc.
Leaflet is directly comparable withOpenLayers, as both are open source, client-side only JavaScript libraries. The library as a whole is much smaller, around 7,000 lines of code compared to OpenLayers' 230,000 (as of 2015).[18] It has a smaller code footprint than OpenLayers (around 123 KB[19] vs 423 KB[20]) due partly to its modular structure. The code base is newer, and takes advantage of recent features of JavaScript, plus HTML5 and CSS3. However, Leaflet lacks features OpenLayers supports, such asWeb Feature Service (WFS)[21] and native support for projections other than GoogleWeb Mercator (EPSG 3857).[22]
It is also comparable to the proprietary, closed sourceGoogle Maps API (debuting in 2005) andBing Maps API, both of which incorporate a significant server-side component to provide services such asgeocoding,routing, search and integration with features such as GoogleEarth.[citation needed] Google Maps API provides speed and simplicity, but is not flexible, and can only be used to access Google Maps services. The new DataLayer part of Google's API does allow external data sources to be displayed, however.[23]
Leaflet began life in 2010 as "Web Maps API", a JavaScript library for the CloudMade mapping provider, where Agafonkin worked at the time. In May 2011, CloudMade announced the first release of Leaflet, built from scratch but using parts of the old API code.[24]
In March 2022, the developer urged action on theRussian invasion of Ukraine on the Leaflet website.[31]
| Organisations |  | ||||||
|---|---|---|---|---|---|---|---|
| Software |
| ||||||
| Derivations | |||||||
| People | |||||||
