Menu
Home
People
Places
Arts
History
Plants & Animals
Science
Life & Culture
Technology
Reference.org
Leaflet (software)
open-in-new
<h2 id="use">Use</h2> <p>A typical use of Leaflet involves binding a Leaflet "map" element to an HTML element such as a <a href="/facts/Span_and_div/3AI7RWLl">div</a>. Layers and markers are then added to the map element. </p> <html> <head> <title>Leaflet Map Example</title> <!-- Link to Leaflet CSS file --> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" /> <!-- Link to Leaflet JavaScript file --> <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script> <style> #map { height: 250px; width: 400px; border: 1px solid gray; } </style> </head> <body> <div id="map"></div> <script> // Initialize the map var map = 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 color var circle = L.circle([51.508, -0.11], { color: 'red', radius: 500 // Radius in meters }).addTo(map); // Add a marker with a popup var marker = L.marker([51.5, -0.09]).addTo(map) .bindPopup('<b>Hello World!</b><br/> I am a popup.'); </script> </body> </html> <p>In this code sample, the Leaflet library itself is accessible through the variable L. </p> <h2 id="features">Features</h2> <p>Leaflet supports <a href="/facts/Web_Map_Service/QY1uaIbk">Web Map Service</a> (WMS) layers, <a href="/facts/GeoJSON/IcBNDHNL">GeoJSON</a> layers, <a href="/facts/Vector_graphics/y8ok7M2P">Vector</a> layers and Tile layers natively. Many other types of layers are supported via <a href="/facts/Plug-in_(computing)/351Du3Wu">plugins</a>. </p><p>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. </p> <h3>Elements</h3> <p>The major Leaflet object types are:<a class="footnote-ref" id="fnref:9" href="#fn:9"><sup>9</sup></a> </p> <ul><li>Raster types (TileLayer and ImageOverlay)</li> <li>Vector types (Path, Polygon, and specific types such as Circle)</li> <li>Grouped types (LayerGroup, FeatureGroup and GeoJSON)</li> <li>Controls (Zoom, Layers, etc.)</li></ul> <p>There is also a variety of utility classes such as interfaces for managing projections, transformations and interacting with the <a href="/facts/Document_Object_Model/GglE6jGx">DOM</a>. </p> <h3>Support for GIS formats</h3> <p>Leaflet has core support for multiple GIS standard formats, with others supported in plugins. </p> <table><tbody><tr><th>Standard</th><th>Support</th></tr><tr><td><a href="/facts/GeoJSON/IcBNDHNL">GeoJSON</a></td><td>Good, core support through the geoJson function<a class="footnote-ref" id="fnref:10" href="#fn:10"><sup>10</sup></a></td></tr><tr><td>KML, CSV, WKT, TopoJSON, GPX</td><td>Supported in Leaflet-Omnivore plugin<a class="footnote-ref" id="fnref:11" href="#fn:11"><sup>11</sup></a></td></tr><tr><td><a href="/facts/Web_Map_Service/QY1uaIbk">WMS</a></td><td>Core support through the TileLayer.WMS<a class="footnote-ref" id="fnref:12" href="#fn:12"><sup>12</sup></a> subtype</td></tr><tr><td><a href="/facts/Web_Feature_Service/kwh86hzn">WFS</a></td><td>Not supported, although third-party plugins exist.<a class="footnote-ref" id="fnref:13" href="#fn:13"><sup>13</sup></a></td></tr><tr><td><a href="/facts/Geography_Markup_Language/IEMlqp0s">GML</a></td><td>Not supported.<a class="footnote-ref" id="fnref:14" href="#fn:14"><sup>14</sup></a></td></tr></tbody></table> <h3>Browser support</h3> <p>Leaflet 0.7 supports Chrome, Firefox, Safari 5+, Opera 12+ and IE 7–11.<a class="footnote-ref" id="fnref:15" href="#fn:15"><sup>15</sup></a> </p> <h3>Examples of useful features</h3> <p>Leaflet's onEachFeature 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. </p><p>An example in javascript is given below: </p> let geoJson = L.geoJSON(geoJsonData, {weight:2, onEachFeature: getFeature, style: getStyle }).addTo(map); const getFeature= (feature, layer) =>{ if (!feature.properties.name) return layer.bindTooltip(feature.properties.cityName); layer.bindPopup( ` <ul> <li>Name: ${feature.properties.cityName}</li> <li>Population: ${feature.properties.population}</li> </ul> ` ) <p>It is also possible to add "async" keyword to getFeature function in order to use promises such as fetch(). We can utilise properties in each object of geojson to create customised jsonqueries and get, for example, city specific information and display them using layer.bindTooltip, layer.bindPopup etc. </p> <h2 id="comparison-with-other-libraries">Comparison with other libraries</h2> <p>Leaflet is directly comparable with <a href="/facts/OpenLayers/mfAftuJ9">OpenLayers</a>, 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).<a class="footnote-ref" id="fnref:16" href="#fn:16"><sup>16</sup></a> It has a smaller code footprint than OpenLayers (around 123 KB<a class="footnote-ref" id="fnref:17" href="#fn:17"><sup>17</sup></a> vs 423 KB<a class="footnote-ref" id="fnref:18" href="#fn:18"><sup>18</sup></a>) 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 as <a href="/facts/Web_Feature_Service/kwh86hzn">Web Feature Service</a> (WFS)<a class="footnote-ref" id="fnref:19" href="#fn:19"><sup>19</sup></a> and native support for projections other than Google <a href="/facts/Web_Mercator/EzlkjEgb">Web Mercator</a> (EPSG 3857).<a class="footnote-ref" id="fnref:20" href="#fn:20"><sup>20</sup></a> </p><p>It is also comparable to the proprietary, closed source <a href="/facts/Google_Maps_API/cKQ0jaFg">Google Maps API</a> (debuting in 2005) and Bing Maps API, both of which incorporate a significant server-side component to provide services such as <a href="/facts/Geocoding/KtTELe73">geocoding</a>, <a href="/facts/Routing/Ml6MVCaC">routing</a>, search and integration with features such as Google <a href="/facts/Google_Earth/jjJmIjmb">Earth</a>. 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.<a class="footnote-ref" id="fnref:21" href="#fn:21"><sup>21</sup></a> </p> <h2 id="history">History</h2> <p>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.<a class="footnote-ref" id="fnref:22" href="#fn:22"><sup>22</sup></a> </p> <ul><li>0.1: May 17, 2011</li> <li>0.2: June 18, 2011</li> <li>0.3: Feb 14, 2012</li> <li>0.4: Jul 30, 2012</li> <li>0.5: Jan 17, 2013 <ul><li>This release introduced <a href="/facts/Retina_Display/J3zIpXba">Retina</a> support and many usability and user experience improvements.<a class="footnote-ref" id="fnref:23" href="#fn:23"><sup>23</sup></a></li></ul></li> <li>0.6: Jun 26, 2013 <ul><li>This release expanded the API's range of methods and events, improved usability, and added GeoJSON saving. It was completed in a 2-day code sprint supported by Mapbox.<a class="footnote-ref" id="fnref:24" href="#fn:24"><sup>24</sup></a></li></ul></li> <li>0.7: Nov 22, 2013 <ul><li>This release focused on bug fixing, announcing that refactoring and potential backward incompatibilities would come soon.<a class="footnote-ref" id="fnref:25" href="#fn:25"><sup>25</sup></a></li></ul></li> <li>1.0: Sep 27, 2016 <ul><li>This release contained over 400 changes compared to v0.7.7:<a class="footnote-ref" id="fnref:26" href="#fn:26"><sup>26</sup></a> <ul><li>Performance improvements in all aspects of the library and vector layers in particular.</li> <li>Flyover animations (zooming and panning in a curve).</li> <li>Fractional zoom level support.</li> <li>Better tile loading algorithm with less flickering.</li> <li>Custom pane management (including multiple vector layer panes and interleaving vectors and tile layers).</li> <li>Better support for non-standard projections.</li> <li>More accessibility features.</li> <li>Improved documentation.</li> <li>Stability improvements.</li></ul></li></ul></li> <li>1.1: Jun 27, 2017 <ul><li>This release adds video overlays and makes a transition to ECMAScript 6 modules.</li></ul></li> <li>1.2: Oct 25, 2017</li> <li>1.3: Jan 15, 2018</li> <li>1.3.2: Jul 17, 2018</li> <li>1.3.3: Jul 18, 2018</li> <li>1.3.4: Aug 21, 2018</li> <li>1.4.0: Dec 30, 2018</li> <li>1.5.0 and 1.5.1: May 8, 2019</li> <li>1.6.0: Nov 17, 2019</li> <li>1.7.1: September 4, 2020</li> <li>1.8: April 18, 2022 <a class="footnote-ref" id="fnref:27" href="#fn:27"><sup>27</sup></a></li> <li>1.9: September 22, 2022<a class="footnote-ref" id="fnref:28" href="#fn:28"><sup>28</sup></a></li></ul> <p>In March 2022, the developer urged action on the <a href="/facts/2022_Russian_invasion_of_Ukraine/TTeQCgSl">Russian invasion of Ukraine</a> on the Leaflet website.<a class="footnote-ref" id="fnref:29" href="#fn:29"><sup>29</sup></a> </p> <h2 id="external-links">External links</h2> <ul><li><a href="https://leafletjs.com">Official website</a> </li> <li><a href="https://leafletjs.com/examples.html">Leaflet Tutorials</a></li> <li><a href="https://wiki.openstreetmap.org/wiki/Tile_servers">Maps for Leaflet TileLayer</a></li> <li>openstreetmap:leaflet</li></ul> <ul><li><a href="https://web.archive.org/web/20220217213717/http://www.owlapps.net/modules/owlapps_apps/embedmap/">Free web app made with Leaflet: embedMap</a>[<i>usurped</i>]</li></ul> <h2 id="references">References</h2> <ol> <li id="fn:1"><p>Lovelace, Robin. "Testing web map APIs - Google vs OpenLayers vs Leaflet". Archived from the original on 2017-11-03. Retrieved 2018-11-03. <a href="https://web.archive.org/web/20171103225922/http://robinlovelace.net/software/2014/03/05/webmap-test.html" target="_blank">https://web.archive.org/web/20171103225922/http://robinlovelace.net/software/2014/03/05/webmap-test.html</a> <a href="#fnref:1" class="footnote-back-ref">↩</a></p></li> <li id="fn:2"><p>MacWright, Tom (2014-08-06). "Leaflet Creator Vladimir Agafonkin Joins MapBox". Retrieved 2018-11-03. <a href="https://www.mapbox.com/blog/vladimir-agafonkin-joins-mapbox/" target="_blank">https://www.mapbox.com/blog/vladimir-agafonkin-joins-mapbox/</a> <a href="#fnref:2" class="footnote-back-ref">↩</a></p></li> <li id="fn:3"><p>Agafonkin, V. (2024, July 28). An open-source JavaScript library for mobile-friendly interactive maps. https://leafletjs.com/index.html <a href="https://leafletjs.com/index.html" target="_blank">https://leafletjs.com/index.html</a> <a href="#fnref:3" class="footnote-back-ref">↩</a></p></li> <li id="fn:4"><p>Agafonkin, V. (2024, July 28). An open-source JavaScript library for mobile-friendly interactive maps. https://leafletjs.com/index.html <a href="https://leafletjs.com/index.html" target="_blank">https://leafletjs.com/index.html</a> <a href="#fnref:4" class="footnote-back-ref">↩</a></p></li> <li id="fn:5"><p>Agafonkin, V. (2024, July 28). An open-source JavaScript library for mobile-friendly interactive maps. https://leafletjs.com/index.html <a href="https://leafletjs.com/index.html" target="_blank">https://leafletjs.com/index.html</a> <a href="#fnref:5" class="footnote-back-ref">↩</a></p></li> <li id="fn:6"><p>Agafonkin, V. (2024, July 28). An open-source JavaScript library for mobile-friendly interactive maps. https://leafletjs.com/index.html <a href="https://leafletjs.com/index.html" target="_blank">https://leafletjs.com/index.html</a> <a href="#fnref:6" class="footnote-back-ref">↩</a></p></li> <li id="fn:7"><p>Agafonkin, V. (2024, July 28). An open-source JavaScript library for mobile-friendly interactive maps. https://leafletjs.com/index.html <a href="https://leafletjs.com/index.html" target="_blank">https://leafletjs.com/index.html</a> <a href="#fnref:7" class="footnote-back-ref">↩</a></p></li> <li id="fn:8"><p>MacWright, Tom (2014-08-06). "Leaflet Creator Vladimir Agafonkin Joins MapBox". Retrieved 2018-11-03. <a href="https://www.mapbox.com/blog/vladimir-agafonkin-joins-mapbox/" target="_blank">https://www.mapbox.com/blog/vladimir-agafonkin-joins-mapbox/</a> <a href="#fnref:8" class="footnote-back-ref">↩</a></p></li> <li id="fn:9"><p>"Leaflet API reference". Retrieved 2018-11-03. <a href="https://leafletjs.com/reference-1.3.4.html" target="_blank">https://leafletjs.com/reference-1.3.4.html</a> <a href="#fnref:9" class="footnote-back-ref">↩</a></p></li> <li id="fn:10"><p>"Using GeoJSON with Leaflet". Retrieved 2018-11-03. <a href="https://leafletjs.com/examples/geojson/" target="_blank">https://leafletjs.com/examples/geojson/</a> <a href="#fnref:10" class="footnote-back-ref">↩</a></p></li> <li id="fn:11"><p>"leaflet-omnivore". October 5, 2021 – via GitHub. <a href="https://github.com/mapbox/leaflet-omnivore" target="_blank">https://github.com/mapbox/leaflet-omnivore</a> <a href="#fnref:11" class="footnote-back-ref">↩</a></p></li> <li id="fn:12"><p>"TileLayer.WMS". Retrieved 2018-11-03. <a href="https://leafletjs.com/reference-1.3.4.html#tilelayer-wms" target="_blank">https://leafletjs.com/reference-1.3.4.html#tilelayer-wms</a> <a href="#fnref:12" class="footnote-back-ref">↩</a></p></li> <li id="fn:13"><p>"Leaflet with WFS Example". July 19, 2019 – via GitHub. <a href="https://github.com/Georepublic/leaflet-wfs" target="_blank">https://github.com/Georepublic/leaflet-wfs</a> <a href="#fnref:13" class="footnote-back-ref">↩</a></p></li> <li id="fn:14"><p>"Support for GML". GitHub. 2012-06-23. Retrieved 2018-11-03. <a href="https://github.com/Leaflet/Leaflet/issues/547" target="_blank">https://github.com/Leaflet/Leaflet/issues/547</a> <a href="#fnref:14" class="footnote-back-ref">↩</a></p></li> <li id="fn:15"><p>"Features". Retrieved 2018-11-03. <a href="https://leafletjs.com/#features" target="_blank">https://leafletjs.com/#features</a> <a href="#fnref:15" class="footnote-back-ref">↩</a></p></li> <li id="fn:16"><p>"OpenHub.net comparison between OpenLayers and Leaflet". OpenHub.net. Archived from the original on 2014-08-08. Retrieved 2018-11-03. <a href="https://web.archive.org/web/20140808124119/https://www.openhub.net/p/compare?project_0=OpenLayers&project_1=Leaflet" target="_blank">https://web.archive.org/web/20140808124119/https://www.openhub.net/p/compare?project_0=OpenLayers&project_1=Leaflet</a> <a href="#fnref:16" class="footnote-back-ref">↩</a></p></li> <li id="fn:17"><p>"Leaflet frontpage". Leaflet - An Open-Source JavaScript Library for Mobile-Friendly Interactive Maps. Retrieved 2018-11-03. <a href="https://leafletjs.com/" target="_blank">https://leafletjs.com/</a> <a href="#fnref:17" class="footnote-back-ref">↩</a></p></li> <li id="fn:18"><p>"OpenLayers 3.4.0 compressed source code". OpenLayers.org. Archived from the original on 2016-11-29. Retrieved 2018-11-03. <a href="https://web.archive.org/web/20161129010528/http://openlayers.org/en/v3.4.0/build/ol.js" target="_blank">https://web.archive.org/web/20161129010528/http://openlayers.org/en/v3.4.0/build/ol.js</a> <a href="#fnref:18" class="footnote-back-ref">↩</a></p></li> <li id="fn:19"><p>Various plugins providing WFS-support are listed on https://leafletjs.com/plugins.html <a href="https://leafletjs.com/plugins.html" target="_blank">https://leafletjs.com/plugins.html</a> <a href="#fnref:19" class="footnote-back-ref">↩</a></p></li> <li id="fn:20"><p>"Projection". Retrieved 2018-11-03. <a href="https://leafletjs.com/reference-1.3.4.html#projection" target="_blank">https://leafletjs.com/reference-1.3.4.html#projection</a> <a href="#fnref:20" class="footnote-back-ref">↩</a></p></li> <li id="fn:21"><p>"Data Layer". Google Maps Platform. Google Inc. Retrieved 2018-11-03. <a href="https://developers.google.com/maps/documentation/javascript/datalayer" target="_blank">https://developers.google.com/maps/documentation/javascript/datalayer</a> <a href="#fnref:21" class="footnote-back-ref">↩</a></p></li> <li id="fn:22"><p>"Announcing Leaflet: a Modern Open Source JavaScript Library for Interactive Maps". CloudMade. 2011-05-13. Archived from the original on 2014-08-11. Retrieved 2018-11-03. <a href="https://archive.today/20140811222442/http://blog.cloudmade.com/2011/05/13/announcing-leaflet-a-modern-open-source-javascript-library-for-interactive-maps/" target="_blank">https://archive.today/20140811222442/http://blog.cloudmade.com/2011/05/13/announcing-leaflet-a-modern-open-source-javascript-library-for-interactive-maps/</a> <a href="#fnref:22" class="footnote-back-ref">↩</a></p></li> <li id="fn:23"><p>Agafonkin, Vladimir (2013-01-17). "Leaflet 0.5 Released". Retrieved 2018-11-03. <a href="https://leafletjs.com/2013/01/17/leaflet-0-5-released.html" target="_blank">https://leafletjs.com/2013/01/17/leaflet-0-5-released.html</a> <a href="#fnref:23" class="footnote-back-ref">↩</a></p></li> <li id="fn:24"><p>Agafonkin, Vladimir (2013-06-26). "Leaflet 0.6 Released, Code Sprint in DC with MapBox". Retrieved 2018-11-03. <a href="https://leafletjs.com/2013/06/26/leaflet-0-6-released-dc-code-sprint-mapbox.html" target="_blank">https://leafletjs.com/2013/06/26/leaflet-0-6-released-dc-code-sprint-mapbox.html</a> <a href="#fnref:24" class="footnote-back-ref">↩</a></p></li> <li id="fn:25"><p>Agafonkin, Vladimir (2013-11-18). "Leaflet 0.7 Release, MapBox and Plans for Future". Retrieved 2018-11-03. <a href="https://leafletjs.com/2013/11/18/leaflet-0-7-released-plans-for-future.html" target="_blank">https://leafletjs.com/2013/11/18/leaflet-0-7-released-plans-for-future.html</a> <a href="#fnref:25" class="footnote-back-ref">↩</a></p></li> <li id="fn:26"><p>Agafonkin, Vladimir (2016-09-27). "Meet Leaflet 1.0". Retrieved 2018-11-03. <a href="https://leafletjs.com/2016/09/27/leaflet-1.0-final.html" target="_blank">https://leafletjs.com/2016/09/27/leaflet-1.0-final.html</a> <a href="#fnref:26" class="footnote-back-ref">↩</a></p></li> <li id="fn:27"><p>Leaflet 1.8 released in the middle of war <a href="#fnref:27" class="footnote-back-ref">↩</a></p></li> <li id="fn:28"><p>v1.9.0 <a href="https://github.com/Leaflet/Leaflet/releases/tag/v1.9.0" target="_blank">https://github.com/Leaflet/Leaflet/releases/tag/v1.9.0</a> <a href="#fnref:28" class="footnote-back-ref">↩</a></p></li> <li id="fn:29"><p>"Leaflet - a JavaScript library for interactive maps". 2022-03-21. Archived from the original on 21 March 2022. Retrieved 2022-03-22. <a href="https://web.archive.org/web/20220321033923/https://leafletjs.com/" target="_blank">https://web.archive.org/web/20220321033923/https://leafletjs.com/</a> <a href="#fnref:29" class="footnote-back-ref">↩</a></p></li> </ol>