Leaflet is a widely used open-source JavaScript library that helps you create mobile-friendly interactive maps. It provides features that allow users to embed maps into web pages, add various types of layers, markers, popups, and handle user interactions with the map.
Map Initialization
This code initializes a new map in the 'mapid' HTML element and sets the view to a specific latitude and longitude and a zoom level.
var map = L.map('mapid').setView([51.505, -0.09], 13);Tile Layer
This code adds a tile layer to the map using OpenStreetMap tiles. It sets the maximum zoom level and adds attribution text.
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© OpenStreetMap contributors'
}).addTo(map);Markers
This code places a marker on the map at the specified latitude and longitude.
var marker = L.marker([51.5, -0.09]).addTo(map);Popups
This code binds a popup with some HTML content to the previously created marker and opens it.
marker.bindPopup('<b>Hello world!</b><br>I am a popup.').openPopup();GeoJSON
This code adds a GeoJSON layer to the map. The 'geojsonData' variable should contain valid GeoJSON.
L.geoJSON(geojsonData).addTo(map);OpenLayers is an open-source JavaScript library for displaying map data in web browsers. It provides a similar range of features to Leaflet, but it is known for being more feature-rich and customizable, which can make it more complex to use.
Mapbox GL JS is a JavaScript library that uses WebGL to render interactive maps from vector tiles and Mapbox styles. It is known for its smooth rendering capabilities and is suitable for applications that require more advanced visual effects and functionalities.
This package is a wrapper around the Google Maps API for use within React applications. It allows for the integration of Google Maps features, but it requires an API key and is not open-source like Leaflet.
Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps. Weighing just about 37 KB of gzipped JS code, it has all the mapping features most developers ever need.
Leaflet is designed with simplicity, performance and usability in mind. It works efficiently across all major desktop and mobile platforms out of the box, taking advantage of HTML5 and CSS3 on modern browsers while being accessible on older ones too. It can be extended with a huge amount of plugins, has a beautiful, easy to use and well-documented API and a simple, readable source code that is a joy to contribute to.
For more info, docs and tutorials, check out the official website.
For Leaflet downloads (including the built master version), check out the download page.
We're happy to meet new contributors. If you want to get involved with Leaflet development, check out the contribution guide. Let's make the best mapping library that will ever exist, and push the limits of what's possible with online maps!
1.1.0 (2017-06-27)
L.Mixin.Events, fixes #5358 (#5365) (by perliedman)nonBubblingEvents into a documented boolean option (#4883 by IvanSanchez)L.transformation factory, allow creation from array (#5282 by anetz89)toGeoJSON methods now default to a precision of six decimals (as recommended in the GeoJSON spec), precision is settable through a method parameter (#5544 by mattgrande)reference.html now always points to latest stable docs (#5490 by IvanSanchez, #5493 by alyhegazy)L.VideoOverlay (#4988 by IvanSanchez)ImageOverlay layer and added tests for the new (#5416 by Saulzi)className option for ImageOverlay (#5555 by perliedman)_getBoundsCenterZoom (#5157 by IvanSanchez)L.Bounds for 2 missing corners, fixes #5475 (#5488 by ghybs)Polylines with empty array of LatLngs, #5497 (#5498, by perliedman)devicePixelRatio into account for scrollwheel zoom in win10+chrome (#5480) (by IvanSanchez)Infinity (#5478, #5479 by IvanSanchez)L.Mixin.Events a simple object instead of a prototype so it doesn't have a 'constructor' property, fixes #5451 (#5453 by luiscamachopt)ctx.setLineDash in _fillStroke #5182 (#5454 by TeXitoi)toFront/toBack if needed, fixes #4050 (#5465 by perliedman)L.Popup's close button (#5461 by Mirodil)DomUtil.preventOutline (#5435 by qjas)ImageOverlay for 404 links (#5307) by APwhitehat)collapsed: false, fixes #5328 (#5348 by ghybs)LayerGroups (#5359 by Resonance1584)lastId in Util (#5349 by DenisCarriere)iframe borders on examples (#5327) (by tariqksoliman)min/maxNativeZoom from TileLayer into GridLayer, as per #5316. (#5319 by jkuebart)-webkit-tap-highlight-color, fixes #5302 (#5303 by IvanSanchez)LatLngBounds.equals method (#5071 by miguelcobain)L.Draggable options and fix docstring (#5301 by IvanSanchez)getBoundsZoom, fixes #5136 (#5137 by IvanSanchez)marker.dragging when not on the map, fixes #5293 (#5295 by danzel)L.Layers.Control in chrome>55 (#5280 by IvanSanchez)FAQs
JavaScript library for mobile-friendly interactive maps
The npm package leaflet receives a total of 1,004,218 weekly downloads. As such, leaflet popularity was classified as popular.
We found that leaflet demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 5 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.
Security News
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.