Leafletjs

Leaflet is a JavaScript library used to build web mapping applications. It allows developers without a GIS background to 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.

First released in 2011, it supports most mobile and desktop platforms, supporting HTML5 and CSS3. Among its users are FourSquare, Pinterest, Flickr, and the USGS.

Leaflet is open source, and is developed by Volodymyr Agafonkin, who joined Mapbox in 2013.

Leaflet is an open-source, JavaScript-based library for creating interactive maps. It was created in 2011 by Volodymyr Agafonkin, a Ukrainian citizen. 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. 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.

Being a lightweight (about 42 KB of JS) 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.

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.

Use

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.

In this code sample, 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:
* 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.

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.

Examples of useful features

Leaflet's 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:

let geoJson = L.geoJSON(geoJsonData, ).addTo(map);

const getFeature = (feature, layer) => ;

It is also possible to add "async" keyword to function in order to use promises such as . We can utilise properties in each object of GeoJSON to create customised jsonqueries and get, for example, city-specific information and display them using , , etc.

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 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 (WFS) and native support for projections other than Google Web Mercator (EPSG 3857).

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 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 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 the Leaflet website.

References

External links

*

Leaflet Tutorials

Maps for Leaflet TileLayer
* openstreetmap:leaflet

* {{usurped,
Free web app made with Leaflet: embedMap
}

Free GIS software
Free software programmed in JavaScript
Geographical technology
JavaScript libraries
Keyhole Markup Language
Software using the BSD license
Web mapping