Original author(s) | Volodymyr Agafonkin |
---|---|
Initial release | May 13, 2011 |
Stable release | 1.9.4 [1] / 18 May 2023 |
Repository | |
Written in | JavaScript |
Platform | See Browser support |
Type | JavaScript library |
License | BSD-2-Clause [2] |
Website | 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, [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]
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:'© <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
.
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.
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.
Leaflet has core support for multiple GIS standard formats, with others supported in plugins.
Standard | Support |
---|---|
GeoJSON | Good, core support through the geoJson function [6] |
KML, CSV, WKT, TopoJSON, GPX | Supported 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] |
Leaflet 0.7 supports Chrome, Firefox, Safari 5+, Opera 12+ and IE 7–11. [11]
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.
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]
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]
This is a comparison of both historical and current web browsers based on developer, engine, platform(s), releases, license, and cost.
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.
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.
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 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.
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.
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.
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.
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.
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.
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.
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.
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.
Ember.js is an open-source JavaScript web framework that utilizes a component-service pattern. It is designed with the aim of allowing 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.
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 can be used to develop cross platform applications from a single codebase for the web, Fuchsia, Android, iOS, Linux, macOS, and Windows. First described in 2015, Flutter was released in May 2017. Flutter is used internally by Google in apps such as Google Pay and Google Earth as well as by other software developers including ByteDance and Alibaba.
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.