Leaflet (software)

Leaflet
Original author(s) Vladimir Agafonkin
Initial release May 13, 2011
Stable release 0.7.3 (May 23, 2014)
Development status Active
Written in JavaScript
Platform See Browser support
Type JavaScript library
License BSD[1]
Website leafletjs.com

Leaflet is a widely used open source JavaScript library used to build web mapping applications. First released in 2011,[2] it supports most mobile and desktop platforms, supporting HTML5 and CSS3. Along with OpenLayers, and the Google Maps API, it is one of the most popular JavaScript mapping libraries and is used by major web sites such as FourSquare, Pinterest and Flickr.

Leaflet allows developers without a GIS background to very easily display tiled web maps hosted on a public server, with optional tiled overlays. It can load feature data from GeoJSON files, style it and create interactive layers, such as markers with popups when clicked.

It is developed by Vladimir Agafonkin, who joined MapBox in 2013.[3]

Use

A basic demo using Leaflet.

A typical use of Leaflet involves binding a Leaflet "map" element to an HTML element such as a div. Layers and markers are then added to the map element.

 // create a map in the "map" div, set the view to a given place and zoom
 var map = L.map('map').setView([51.505, -0.09], 13);
 
 // add an OpenStreetMap tile layer
 L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
     attribution: '&amp;copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
 }).addTo(map);

The Leaflet library itself is accessible through the variable L.

Features

Leaflet supports Web Map Service (WMS) layers, GeoJSON layers, Vector layers and Tile layers natively. Many other types of layers are supported via plugins.

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.

Elements

The major Leaflet object types are:[4]

There are also a variety of utility classes such as interfaces for managing projections, transformations and interacting with the DOM.

Support for GIS formats

Leaflet has core support for few GIS standard formats, with others supported in plugins.

Standard Support
GeoJSON Good, core support through the geoJson function[5]
KML, CSV, WKT, TopoJSON, GPX Supported in Leaflet-Omnivore plugin[6]
WMS Core support through the TileLayer.WMS[7] subtype
WFS Not supported, although 3rd party plugins exist.[8]
GML Not supported.[9]

Browser support

Leaflet 0.7 supports Chrome, Firefox, Safari 5+, Opera 12+ and IE 7-11.[10]

Comparison with other libraries

Leaflet is directly comparable with OpenLayers, 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 230,000 as of 2015.[11] It has a smaller code footprint than OpenLayers (around 123 KB[12] vs 423 KB[13]) 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 Web Feature Service (WFS) and native support for projections other than Google Web Mercator (EPSG 3785).

It is also comparable to the proprietary, closed source Google Maps API (debuting in 2005) and Bing Maps API, both of which incorporate a significant server-side component to provide services such as geocoding, routing, search and integration with features such as Google Earth. Google Maps API provides speed and simplicity, but is 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.[14]

History

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.[15]

This release introduced Retina support and many usability and user experience improvements.[16]

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.[17]

This release focused on bug fixing, announcing that refactoring and potential backward incompatibilities would come soon.[18]

External links

References

  1. "License - Leaflet". Leaflet. Retrieved 12 February 2015.
  2. Lovelace, Robin. "Testing web map APIs - Google vs OpenLayers vs Leaflet".
  3. Macwright, Tom (2014-08-06). "Leaflet Creator Vladimir Agafonkin Joins MapBox". Mapbox.
  4. "Leaflet API".
  5. http://leafletjs.com/examples/geojson.html
  6. https://github.com/mapbox/leaflet-omnivore
  7. "Leaflet documentation".
  8. https://github.com/Georepublic/leaflet-wfs
  9. https://github.com/Leaflet/Leaflet/issues/547
  10. "Leaflet features".
  11. "OpenHub.net comparison between OpenLayers and Leaflet". OpenHub.net. Retrieved 2015-04-18.
  12. "Leaflet frontpage". Leaflet - An Open-Source JavaScript Library for Mobile-Friendly Interactive Maps. Retrieved 18 April 2015. 33 KB gzipped — that's 123 KB minified and 218 KB in the source form, with 10 KB of CSS (2 KB gzipped) and 11 KB of images.
  13. "OpenLayers 3.4.0 compressed source code". OpenLayers.org. Retrieved 18 April 2015.
  14. https://developers.google.com/maps/documentation/javascript/datalayer. Missing or empty |title= (help)
  15. "Announcing Leaflet: a Modern Open Source JavaScript Library for Interactive Maps". CloudMade. 2011-05-13. Retrieved 2014-08-07.
  16. "Leaflet 0.5 released".
  17. "Leaflet 0.6 Released, Code Sprint in DC with MapBox".
  18. "Leaflet 0.7 Release, MapBox and Plans for Future".