Leaflet is an

open source Open source is source code that is made freely available for possible modification and redistribution. Products include permission to use the source code, design documents, or content of the product. The open-source model is a decentralized sof ...

JavaScript JavaScript (), often abbreviated as JS, is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS. As of 2022, 98% of Website, websites use JavaScript on the Client (computing), client side ...

library A library is a collection of materials, books or media that are accessible for use and not just for display purposes. A library provides physical (hard copies) or digital access (soft copies) materials, and may be a physical location or a vir ...

used to build

web mapping Web mapping or an online mapping is the process of using maps, usually created through geographic information systems (GIS), on the Internet, more specifically in the World Wide Web (WWW). A web map or an online map is both served and consumed, t ...

applications Application may refer to: Mathematics and computing * Application software, computer software designed to help the user to perform specific tasks ** Application layer, an abstraction layer that specifies protocols and interface methods used in a c ...

. First released in 2011, it supports most mobile and desktop platforms, supporting

HTML5 HTML5 is a markup language used for structuring and presenting content on the World Wide Web. It is the fifth and final major HTML version that is a World Wide Web Consortium (W3C) recommendation. The current specification is known as the HTML ...

and

CSS3 Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML or XML (including XML dialects such as Scalable Vector Graphics, SVG, MathML or XHTML). CS ...

. Among its users are

FourSquare Four square is a ball game. Four square may also refer to: Internet and entertainment * Foursquare City Guide, a local search and discovery app * ''4 Square'' (game show), a British game show * ''4 Square'' (TV series), a Canadian children's s ...

Pinterest Pinterest is an American image sharing and social media service designed to enable saving and discovery of information (specifically "ideas") on the internet using images, and on a smaller scale, animated GIFs and videos, in the form of pinboard ...

and

Flickr Flickr ( ; ) is an American image hosting and video hosting service, as well as an online community, founded in Canada and headquartered in the United States. It was created by Ludicorp in 2004 and was a popular way for amateur and professional ...

. Leaflet allows developers without a GIS background to very easily display

tiled web map A tiled web map, slippy map (in OpenStreetMap terminology) or tile map is a map displayed in a web browser by seamlessly joining dozens of individually requested image or vector data files. It is the most popular way to display and navigate maps, ...

s hosted on a public server, with optional tiled overlays. It can load feature data from

GeoJSON GeoJSON is an open standard format designed for representing simple geographical features, along with their non-spatial attributes. It is based on the JSON format. The features include points (therefore addresses and locations), line strings ( ...

files, style it and create interactive layers, such as markers with popups when clicked. It is developed by Volodymyr Agafonkin, who joined

Mapbox Mapbox is an American provider of custom online maps for websites and applications such as Foursquare, Lonely Planet, the ''Financial Times'', The Weather Channel, Instacart Inc. and Snapchat. Since 2010, it has rapidly expanded the niche of cus ...

in 2013.

Use

A typical use of Leaflet involves binding a Leaflet "map" element to an HTML element such as a

div Div or DIV may refer to: Science and technology * Division (mathematics), the mathematical operation that is the inverse of multiplication * Span and div, HTML tags that implement generic elements * div, a C mathematical function * Divergence, ...

. 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( 1.505, -0.09 13); // add an OpenStreetMap tile layer // Tile Usage Policy applies: https://operations.osmfoundation.org/policies/tiles/ L.tileLayer('http://.tile.openstreetmap.org///.png', ).addTo(map); A unique feature of leaflet is displaying maps in non-spherical Mercator projections. The Leaflet library itself is accessible through the variable L.

Features

Leaflet supports

Web Map Service A Web Map Service (WMS) is a standard protocol developed by the Open Geospatial Consortium in 1999 for serving georeferenced map images over the Internet. These images are typically produced by a map server from data provided by a GIS database. ...

(WMS) layers,

layers,

Vector Vector most often refers to: *Euclidean vector, a quantity with a magnitude and a direction *Vector (epidemiology), an agent that carries and transmits an infectious pathogen into another living organism Vector may also refer to: Mathematic ...

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: * Raster types (TileLayer and ImageOverlay) * Vector types (Path, Polygon, and specific types such as Circle) * Grouped types (LayerGroup, FeatureGroup and GeoJSON) * Controls (Zoom, Layers, etc.) There is also a variety of utility classes such as interfaces for managing projections, transformations and interacting with the

DOM Dom or DOM may refer to: People and fictional characters * Dom (given name), including fictional characters * Dom (surname) * Dom La Nena (born 1989), stage name of Brazilian-born cellist, singer and songwriter Dominique Pinto * Dom people, an et ...

Support for GIS formats

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

Browser support

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

Comparison with other libraries

Leaflet is directly comparable with

OpenLayers OpenLayers is an open-source (provided under the 2-clause BSD License) JavaScript library for displaying map data in web browsers as slippy maps. It provides an API for building rich web-based geographic applications similar to Google Maps an ...

, 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). It has a smaller code footprint than OpenLayers (around 123 KB vs 423 KB) 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 In computing, the Open Geospatial Consortium Web Feature Service (WFS) Interface Standard provides an interface allowing requests for geographical features across the web using platform-independent calls. One can think of geographical features as ...

(WFS) and native support for projections other than Google

Web Mercator Web Mercator, Google Web Mercator, Spherical Mercator, WGS 84 Web Mercator or WGS 84/Pseudo-Mercator is a variant of the Mercator map projection and is the de facto standard for Web mapping applications. It rose to prominence when Google Maps adop ...

(EPSG 3857). It is also comparable to the proprietary, closed source

Google Maps API Google Maps is a web mapping platform and consumer application offered by Google. It offers satellite imagery, aerial photography, street maps, 360° interactive panoramic views of streets ( Street View), real-time traffic conditions, and rou ...

(debuting in 2005) and

Bing Maps API Bing most often refers to: * Bing Crosby (1903–1977), American singer * Microsoft Bing, a web search engine Bing may also refer to: Food and drink * Bing (bread), a Chinese flatbread * Bing (soft drink), a UK brand * Bing cherry, a varie ...

, both of which incorporate a significant server-side component to provide services such as

geocoding Address geocoding, or simply geocoding, is the process of taking a text-based description of a location, such as an address or the name of a place, and returning geographic coordinates, frequently latitude/longitude pair, to identify a locatio ...

routing Routing is the process of selecting a path for traffic in a network or between or across multiple networks. Broadly, routing is performed in many types of networks, including circuit-switched networks, such as the public switched telephone netw ...

, search and integration with features such as Google

Earth Earth is the third planet from the Sun and the only astronomical object known to harbor life. While large volumes of water can be found throughout the Solar System, only Earth sustains liquid surface water. About 71% of Earth's surfa ...

. 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.

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. * 0.1: May 17, 2011 * 0.2: June 18, 2011 * 0.3: Feb 14, 2012 * 0.4: Jul 30, 2012 * 0.5: Jan 17, 2013 ** This release introduced

Retina The retina (from la, rete "net") is the innermost, light-sensitive layer of tissue of the eye of most vertebrates and some molluscs. The optics of the eye create a focused two-dimensional image of the visual world on the retina, which then ...

support and many usability and user experience improvements. * 0.6: Jun 26, 2013 ** 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. * 0.7: Nov 22, 2013 ** This release focused on bug fixing, announcing that refactoring and potential backward incompatibilities would come soon. * 1.0: Sep 27, 2016 ** This release contained over 400 changes compared to v0.7.7: *** Performance improvements in all aspects of the library and vector layers in particular. *** Flyover animations (zooming and panning in a curve). *** Fractional zoom level support. *** Better tile loading algorithm with less flickering. *** Custom pane management (including multiple vector layer panes and interleaving vectors and tile layers). *** Better support for non-standard projections. *** More accessibility features. *** Improved documentation. *** Stability improvements. * 1.1: Jun 27, 2017 ** This release adds video overlays and makes a transition to ECMAScript 6 modules. * 1.2: Oct 25, 2017 * 1.3: Jan 15, 2018 * 1.3.2: Jul 17, 2018 * 1.3.3: Jul 18, 2018 * 1.3.4: Aug 21, 2018 * 1.4.0: Dec 30, 2018 * 1.5.0 and 1.5.1 : May 8, 2019 * 1.6.0: Nov 17, 2019 * 1.7.1 : September 4, 2020 * 1.8 : April 18, 2022 * 1.9 : September 22, 2022 In March 2022, the developer urged action on the

Russian invasion of Ukraine On 24 February 2022, in a major escalation of the Russo-Ukrainian War, which began in 2014. The invasion has resulted in tens of thousands of deaths on both sides. It has caused Europe's largest refugee crisis since World War II. An ...

on the leafletjs website.

References

External links

*
Leaflet Tutorials

Maps for Leaflet TileLayer
* openstreetmap:leaflet {{OpenStreetMap Free GIS software Free software programmed in JavaScript Geographical technology JavaScript libraries Keyhole Markup Language Software using the BSD license Web mapping