Leaflet (software)

Last updated
Leaflet
Original author(s) Volodymyr Agafonkin
Initial releaseMay 13, 2011 (2011-05-13)
Stable release
1.9.4 [1] OOjs UI icon edit-ltr-progressive.svg / 18 May 2023;16 months ago (18 May 2023)
Repository
Written in JavaScript
Platform See Browser support
Type JavaScript library
License BSD-2-Clause [2]
Website leafletjs.com

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.

Contents

First released in 2011, [3] 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. [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 42KB 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]


Use

A basic demo using Leaflet. Leaflet example 2.png
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.

<html><head><title>LeafletMapExample</title><!--LinktoLeafletCSSfile--><linkrel="stylesheet"href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"/><!--LinktoLeafletJavaScriptfile--><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:'&copy; <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 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: [11]

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.

StandardSupport
GeoJSON Good, core support through the geoJson function [12]
KML, CSV, WKT, TopoJSON, GPXSupported in Leaflet-Omnivore plugin [13]
WMS Core support through the TileLayer.WMS [14] subtype
WFS Not supported, although third-party plugins exist. [15]
GML Not supported. [16]

Browser support

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

Examples of useful features

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.

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

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). [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 as Web Feature Service (WFS) [21] and native support for projections other than Google Web Mercator (EPSG 3857). [22]

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

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

In March 2022, the developer urged action on the Russian invasion of Ukraine on the Leaflet website. [31]

Related Research Articles

<span class="mw-page-title-main">Adobe ColdFusion</span> Rapid Web app development platform

Adobe ColdFusion is a commercial rapid web-application development computing platform created by J. J. Allaire in 1995. ColdFusion was originally designed to make it easier to connect simple HTML pages to a database. By version 2 (1996) it had become a full platform that included an IDE in addition to a full scripting language.

<span class="mw-page-title-main">NASA WorldWind</span> Open-source virtual globe

NASA WorldWind is an open-source virtual globe. According to the website, "WorldWind is an open source virtual globe API. WorldWind allows developers to quickly and easily create interactive visualizations of 3D globe, map and geographical information. Organizations around the world use WorldWind to monitor weather patterns, visualize cities and terrain, track vehicle movement, analyze geospatial data and educate humanity about the Earth." It was first developed by NASA in 2003 for use on personal computers and then further developed in concert with the open source community since 2004. As of 2017, a web-based version of WorldWind is available online. An Android version is also available.

In computing, GeoServer is an open-source server written in Java that allows users to share, process and edit geospatial data. Designed for interoperability, it publishes data from any major spatial data source using open standards. GeoServer has evolved to become an easy method of connecting existing information to virtual globes such as Google Earth and NASA World Wind as well as to web-based maps such as OpenLayers, Leaflet, Google Maps and Bing Maps. GeoServer functions as the reference implementation of the Open Geospatial Consortium Web Feature Service standard, and also implements the Web Map Service, Web Coverage Service and Web Processing Service specifications.

<span class="mw-page-title-main">JSON</span> Open standard file format and data interchange

JSON is an open standard file format and data interchange format that uses human-readable text to store and transmit data objects consisting of attribute–value pairs and arrays. It is a commonly used data format with diverse uses in electronic data interchange, including that of web applications with servers.

Netscape Plugin Application Programming Interface (NPAPI) is a deprecated application programming interface (API) for web browser plugins, initially developed for Netscape Navigator 2.0 in 1995 and subsequently adopted by other browsers.

A GIS software program is a computer program to support the use of a geographic information system, providing the ability to create, store, manage, query, analyze, and visualize geographic data, that is, data representing phenomena for which location is important. The GIS software industry encompasses a broad range of commercial and open-source products that provide some or all of these capabilities within various information technology architectures.

Comet is a web application model in which a long-held HTTPS request allows a web server to push data to a browser, without the browser explicitly requesting it. Comet is an umbrella term, encompassing multiple techniques for achieving this interaction. All these methods rely on features included by default in browsers, such as JavaScript, rather than on non-default plugins. The Comet approach differs from the original model of the web, in which a browser requests a complete web page at a time.

The Open Source Geospatial Foundation (OSGeo), is a non-profit non-governmental organization whose mission is to support and promote the collaborative development of open geospatial technologies and data. The foundation was formed in February 2006 to provide financial, organizational and legal support to the broader Libre/Free and open-source geospatial community. It also serves as an independent legal entity to which community members can contribute code, funding and other resources.

Google Developers is Google's site for software development tools and platforms, application programming interfaces (APIs), and technical resources. The site contains documentation on using Google developer tools and APIs—including discussion groups and blogs for developers using Google's developer products.

<span class="mw-page-title-main">Aptana</span> Text editor

Aptana, Inc. is a company that makes web application development tools for use with a variety of programming languages. Aptana's main products include Aptana Studio, Aptana Cloud and Aptana Jaxer.

<span class="mw-page-title-main">YUI Library</span>

The Yahoo! User Interface Library (YUI) is a discontinued open-source JavaScript library for building richly interactive web applications using techniques such as Ajax, DHTML, and DOM scripting. YUI includes several cores CSS resources. It is available under a BSD License. Development on YUI began in 2005 and Yahoo! properties such as My Yahoo! and the Yahoo! front page began using YUI in the summer of that year. YUI was released for public use in February 2006. It was actively developed by a core team of Yahoo! engineers.

jQuery is a JavaScript library designed to simplify HTML DOM tree traversal and manipulation, as well as event handling, CSS animations, and Ajax. It is free, open-source software using the permissive MIT License. As of August 2022, jQuery is used by 77% of the 10 million most popular websites. Web analysis indicates that it is the most widely deployed JavaScript library by a large margin, having at least three to four times more usage than any other JavaScript library.

<span class="mw-page-title-main">OpenLayers</span> JavaScript library for displaying map data in web browsers

OpenLayers is a 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 and Bing Maps.

Web2py is an open-source web application framework written in the Python programming language. Web2py allows web developers to program dynamic web content using Python. Web2py is designed to help reduce tedious web development tasks, such as developing web forms from scratch, although a web developer may build a form from scratch if required.

<span class="mw-page-title-main">Google Plugin for Eclipse</span> Set of Java development tools

Google Plugin for Eclipse (GPE) was a set of development tools that enabled Java developers to design, build, optimize, and deploy cloud computing applications. developers in creating complex user interfaces, generating Ajax code using the GWT Web Toolkit, and deploying applications to Google App Engine. GPE installed into the Eclipse integrated development environment (IDE) using the extensible plugin system. GPE was available under the Eclipse Public License 1.0.

Google Chrome Experiments Online showroom of web browser based experiments

Google Chrome Experiments is an online showroom of web browser-based experiments, interactive programs, and artistic projects. Launched on March 1, 2009, Google Chrome Experiments is an official Google website that was originally meant to test the limits of JavaScript and the Google Chrome browser's performance and abilities. As the project progressed, it took on the role of showcasing and experimenting with the latest open-source web-based technologies, such as JavaScript, HTML, WebGL, Canvas, SVG, and CSS. All the projects on Chrome Experiments are user-submitted and are made using open-source technologies. As of 2024, the website continues to host a growing number of experiments, featuring over 1,500 projects.

Vector tiles, tiled vectors or vectiles are packets of geographic data, packaged into pre-defined roughly-square shaped "tiles" for transfer over the web. This is an emerging method for delivering styled web maps, combining certain benefits of pre-rendered raster map tiles with vector map data. As with the widely used raster tiled web maps, map data is requested by a client as a set of "tiles" corresponding to square areas of land of a pre-defined size and location. Unlike raster tiled web maps, however, the server returns vector map data, which has been clipped to the boundaries of each tile, instead of a pre-rendered map image.

ContentTools is an open-source WYSIWYG editor for HTML content written in JavaScript/CoffeeScript by Anthony Blackshaw of Getme Limited.

NativeScript provides platform APIs directly to the JavaScript runtime for a rich TypeScript development experience. As an open-source framework to develop apps for iOS, visionOS and Android platforms combining a best of all worlds approach marrying familiar Web approaches like CSS and view templating with common platform languages it delivers a liberating toolset for developers. It was originally conceived and developed by Bulgarian company Telerik, later acquired by Progress Software. At the end of 2019 responsibility for the NativeScript project was taken over by long-time Progress partner, nStudio. In December 2020, nStudio also oversaw the induction of NativeScript into OpenJS Foundation as an Incubating Project. NativeScript apps are built using JavaScript, or by using any programming language that transpiles to JavaScript, such as TypeScript. NativeScript supports the Angular and Vue JavaScript frameworks. Mobile applications built with NativeScript result in fully native apps, which use the same APIs as if they were developed in Xcode or Android Studio. Additionally, software developers can re-purpose third-party libraries from CocoaPods, Maven, and npm.js in their mobile applications without the need for wrappers.

This is a list of articles related to the JavaScript programming language.

References

  1. ↑ "v1.9.4 Latest". 18 May 2023. Retrieved 20 May 2023.
  2. ↑ "License - Leaflet". Leaflet. Retrieved 2018-11-03.
  3. ↑ Lovelace, Robin. "Testing web map APIs - Google vs OpenLayers vs Leaflet". Archived from the original on 2017-11-03. Retrieved 2018-11-03.
  4. ↑ MacWright, Tom (2014-08-06). "Leaflet Creator Vladimir Agafonkin Joins MapBox" . Retrieved 2018-11-03.
  5. ↑ Agafonkin, V. (2024, July 28). An open-source JavaScript library for mobile-friendly interactive maps. https://leafletjs.com/index.html
  6. ↑ Agafonkin, V. (2024, July 28). An open-source JavaScript library for mobile-friendly interactive maps. https://leafletjs.com/index.html
  7. ↑ Agafonkin, V. (2024, July 28). An open-source JavaScript library for mobile-friendly interactive maps. https://leafletjs.com/index.html
  8. ↑ Agafonkin, V. (2024, July 28). An open-source JavaScript library for mobile-friendly interactive maps. https://leafletjs.com/index.html
  9. ↑ Agafonkin, V. (2024, July 28). An open-source JavaScript library for mobile-friendly interactive maps. https://leafletjs.com/index.html
  10. ↑ MacWright, Tom (2014-08-06). "Leaflet Creator Vladimir Agafonkin Joins MapBox" . Retrieved 2018-11-03.
  11. ↑ "Leaflet API reference" . Retrieved 2018-11-03.
  12. ↑ "Using GeoJSON with Leaflet" . Retrieved 2018-11-03.
  13. ↑ "leaflet-omnivore". October 5, 2021 – via GitHub.
  14. ↑ "TileLayer.WMS" . Retrieved 2018-11-03.
  15. ↑ "Leaflet with WFS Example". July 19, 2019 – via GitHub.
  16. ↑ "Support for GML". GitHub . 2012-06-23. Retrieved 2018-11-03.
  17. ↑ "Features" . Retrieved 2018-11-03.
  18. ↑ "OpenHub.net comparison between OpenLayers and Leaflet". OpenHub.net. Archived from the original on 2014-08-08. Retrieved 2018-11-03.
  19. ↑ "Leaflet frontpage". Leaflet - An Open-Source JavaScript Library for Mobile-Friendly Interactive Maps. Retrieved 2018-11-03.
  20. ↑ "OpenLayers 3.4.0 compressed source code". OpenLayers.org. Archived from the original on 2016-11-29. Retrieved 2018-11-03.
  21. ↑ Various plugins providing WFS-support are listed on https://leafletjs.com/plugins.html
  22. ↑ "Projection" . Retrieved 2018-11-03.
  23. ↑ "Data Layer". Google Maps Platform. Google Inc. Retrieved 2018-11-03.
  24. ↑ "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.
  25. ↑ Agafonkin, Vladimir (2013-01-17). "Leaflet 0.5 Released" . Retrieved 2018-11-03.
  26. ↑ Agafonkin, Vladimir (2013-06-26). "Leaflet 0.6 Released, Code Sprint in DC with MapBox" . Retrieved 2018-11-03.
  27. ↑ Agafonkin, Vladimir (2013-11-18). "Leaflet 0.7 Release, MapBox and Plans for Future" . Retrieved 2018-11-03.
  28. ↑ Agafonkin, Vladimir (2016-09-27). "Meet Leaflet 1.0" . Retrieved 2018-11-03.
  29. ↑ Leaflet 1.8 released in the middle of war
  30. ↑ v1.9.0
  31. ↑ "Leaflet - a JavaScript library for interactive maps". 2022-03-21. Archived from the original on 21 March 2022. Retrieved 2022-03-22.
This page is based on this Wikipedia article
Text is available under the CC BY-SA 4.0 license; additional terms may apply.
Images, videos and audio are available under their respective licenses.