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;8 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 an open source JavaScript library used to build web mapping applications. First released in 2011, [3] it supports most mobile and desktop platforms, supporting HTML5 and CSS3. Among its users are FourSquare, Pinterest and Flickr.

Contents

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 Volodymyr Agafonkin, who joined Mapbox in 2013. [4]

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: [5]

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 [6]
KML, CSV, WKT, TopoJSON, GPXSupported in Leaflet-Omnivore plugin [7]
WMS Core support through the TileLayer.WMS [8] subtype
WFS Not supported, although third-party plugins exist. [9]
GML Not supported. [10]

Browser support

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

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). [12] It has a smaller code footprint than OpenLayers (around 123 KB [13] vs 423 KB [14] ) 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) [15] and native support for projections other than Google Web Mercator (EPSG 3857). [16]

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

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

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

Related Research Articles

<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 common data format with diverse uses in electronic data interchange, including that of web applications with servers.

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.

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

MapServer is an open-source development environment for building spatially enabled internet applications, built in the C language, and is widely known as one of the fastest Web mapping engines available. It can run as a CGI program or via MapScript which supports several programming languages. MapServer can access hundreds of data formats, any raster or vector format supported by GDAL, and reprojections on-the-fly are handled by PROJ. MapServer was originally developed by Steve Lime, then working at the University of Minnesota — so, it was previously referred to as "UMN MapServer", to distinguish it from commercial "map servers"; today it is commonly referred to as just "MapServer", and is maintained by the MapServer Project Steering Committee (PSC). MapServer was originally developed with support from NASA, which needed a way to make its satellite imagery available to the public.

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

OpenLayers is an open-source 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.

<span class="mw-page-title-main">JavaFX</span> Java software platform for GUI

JavaFX is a software platform for creating and delivering desktop applications, as well as rich web applications that can run across a wide variety of devices. JavaFX has support for desktop computers and web browsers on Microsoft Windows, Linux, and macOS, as well as mobile devices running iOS and Android, through Gluon Mobile.

This is a comparison of web frameworks for front-end web development that are heavily reliant on JavaScript code for their behavior.

<span class="mw-page-title-main">WebGL</span> JavaScript bindings for OpenGL in web browsers

WebGL is a JavaScript API for rendering interactive 2D and 3D graphics within any compatible web browser without the use of plug-ins. WebGL is fully integrated with other web standards, allowing GPU-accelerated usage of physics, image processing, and effects in the HTML canvas. WebGL elements can be mixed with other HTML elements and composited with other parts of the page or page background.

<span class="mw-page-title-main">Three.js</span> JavaScript library for 3D graphics

Three.js is a cross-browser JavaScript library and application programming interface (API) used to create and display animated 3D computer graphics in a web browser using WebGL. The source code is hosted in a repository on GitHub.

<span class="mw-page-title-main">Apache Drill</span> Open-source software framework

Apache Drill is an open-source software framework that supports data-intensive distributed applications for interactive analysis of large-scale datasets. Built chiefly by contributions from developers from MapR, Drill is inspired by Google's Dremel system. Drill is an Apache top-level project. Tom Shiran is the founder of the Apache Drill Project. It was designated an Apache Software Foundation top-level project in December 2016.

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 the role of showcasing and experimenting latest open-source web-based technologies, such as JavaScript, HTML5, WebGL, Canvas, SVG, CSS, and some others. All the projects on Chrome experiments are user submitted and are made using open source technologies. As of February 24, 2015, there were 1,000 different Chrome projects posted on the website.

<span class="mw-page-title-main">Ember.js</span>

Ember.js is an open-source JavaScript web framework that utilizes a component-service pattern. It allows developers to create scalable single-page web applications by incorporating common idioms, best practices, and patterns from other single-page-app ecosystem patterns into the framework.

<span class="mw-page-title-main">Tiled web map</span> Map displayed with adjoining small images

A tiled web map,slippy map 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, replacing other methods such as Web Map Service (WMS) which typically display a single large image, with arrow buttons to navigate to nearby areas. Google Maps was one of the first major mapping sites to use this technique. The first tiled web maps used raster tiles, before the emergence of vector tiles.

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.

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

Flutter is an open-source UI software development kit created by Google. It is used to develop cross platform applications from a single codebase for any web browser, Fuchsia, Android, iOS, Linux, macOS, and Windows. First described in 2015, Flutter was released in May 2017.

<span class="mw-page-title-main">Deno (software)</span> Secure JavaScript and TypeScript runtime

Deno is a runtime for JavaScript, TypeScript, and WebAssembly that is based on the V8 JavaScript engine and the Rust programming language. Deno was co-created by Ryan Dahl, who also created Node.js.

<span class="mw-page-title-main">Lottie (file format)</span> File format for vector graphics animations

Lottie is a file format for vector graphics animation, and is named after Charlotte "Lotte" Reiniger, a German pioneer of silhouette animation.

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. ↑ "Leaflet API reference" . Retrieved 2018-11-03.
  6. ↑ "Using GeoJSON with Leaflet" . Retrieved 2018-11-03.
  7. ↑ "leaflet-omnivore". October 5, 2021 – via GitHub.
  8. ↑ "TileLayer.WMS" . Retrieved 2018-11-03.
  9. ↑ "Leaflet with WFS Example". July 19, 2019 – via GitHub.
  10. ↑ "Support for GML". 2012-06-23. Retrieved 2018-11-03.
  11. ↑ "Features" . Retrieved 2018-11-03.
  12. ↑ "OpenHub.net comparison between OpenLayers and Leaflet". OpenHub.net. Archived from the original on 2014-08-08. Retrieved 2018-11-03.
  13. ↑ "Leaflet frontpage". Leaflet - An Open-Source JavaScript Library for Mobile-Friendly Interactive Maps. Retrieved 2018-11-03.
  14. ↑ "OpenLayers 3.4.0 compressed source code". OpenLayers.org. Archived from the original on 2016-11-29. Retrieved 2018-11-03.
  15. ↑ Various plugins providing WFS-support are listed on https://leafletjs.com/plugins.html
  16. ↑ "Projection" . Retrieved 2018-11-03.
  17. ↑ "Data Layer". Google Maps Platform. Google Inc. Retrieved 2018-11-03.
  18. ↑ "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.
  19. ↑ Agafonkin, Vladimir (2013-01-17). "Leaflet 0.5 Released" . Retrieved 2018-11-03.
  20. ↑ Agafonkin, Vladimir (2013-06-26). "Leaflet 0.6 Released, Code Sprint in DC with MapBox" . Retrieved 2018-11-03.
  21. ↑ Agafonkin, Vladimir (2013-11-18). "Leaflet 0.7 Release, MapBox and Plans for Future" . Retrieved 2018-11-03.
  22. ↑ Agafonkin, Vladimir (2016-09-27). "Meet Leaflet 1.0" . Retrieved 2018-11-03.
  23. ↑ Leaflet 1.8 released in the middle of war
  24. ↑ v1.9.0
  25. ↑ "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.