Leaflet Plugins database
While Leaflet is meant to be as lightweight as possible, and focuses on a core set of features, an easy way to extend its functionality is to use third-party plugins. Thanks to the awesome community behind Leaflet, there are literally hundreds of nice plugins to choose from.
Tile & image layers
Overlay data
Overlay Display
Overlay interaction
Map interaction
Tile & image layers
The following plugins allow loading different maps and provide functionality to tile and image layers.
Basemap providers
Ready-to-go basemaps, with little or no configuration at all.
Plugin | Description | Demo | Maintainer |
---|---|---|---|
Azure Maps Leaflet plugin |
A leafletjs plugin that makes it easy to overlay all the different tile layers available from the Azure Maps. Supports using an Azure Maps subscription key or Azure Active Directory for authentication. |
Demo | Ricky Brundritt |
Bing Maps Layer |
Add Bing Maps tiles to your Leaflet Map. Requires Leaflet v1.0.0.beta.2 or later. |
Demo | Gregor MacLennan |
Esri Leaflet |
A set of tools for using ArcGIS services with Leaflet. Support for map services, feature layers, ArcGIS Online tiles and more. |
Patrick Arlt | |
L.GridLayer.GoogleMutant |
Displays Google maps (with minimal artifacts thanks to a DOM mutation observer technique). |
Demo | Iván Sánchez |
L.MapkitMutant |
Displays Apple’s MapkitJS basemaps. |
Iván Sánchez | |
L.TileLayer.HERE |
Displays map tiles from HERE maps. |
Demo | Iván Sánchez |
L.TileLayer.Kartverket |
Provides easy setup of the tile layers from Kartverket (The Norwegian Mapping Authority) |
Kultur og naturreise | |
Leaflet.ChineseTmsProviders |
Contains configurations for various Chinese tile providers — TianDiTu, MapABC, GaoDe, etc. |
Demo | Tao Huang |
Leaflet.GIBS |
NASA EOSDIS GIBS imagery integration. The plugin provides 96 daily updated layers with satellite imagery and science parameters. |
Demo | Alexander Parshin |
Leaflet.KoreanTmsProviders |
Contains configurations for various (South) Korean tile providers — Daum, Naver, VWorld, etc. |
Seong Choi | |
Leaflet.Spain.WMS |
Provides easy setup for several Web Map Services (WMS) layers for Spain (PNOA, IGN base, Catastro, etc), from Spanish mapping agencies. |
Patricio Soriano | |
Leaflet.TileLayer.HERE |
Displays tiles from HERE maps. |
Wanderson Souza | |
Leaflet-Tilelayer-Hong-Kong |
Displays Hong Kong map tiles from Hong Kong GeoData Store provider. |
spaceflighter | |
Leaflet.TileLayer.Mierune |
Displays tiles from Mierune map. |
Demo | Mierune |
Leaflet.TileLayer.Swiss |
Displays national maps of Switzerland using map tiles from Swisstopo. |
Demo | Roman Karavia |
leaflet-providers |
Contains configurations for various free tile providers — OSM, OpenCycleMap, Stamen, Esri, etc. |
Demo | leaflet-extras members |
PolarMap.js |
JavaScript library for displaying tiles from ArcticWebMap, a free tile provider with OSM data in multiple Arctic polar projections. Includes lower-level API for deeper integration with other Leaflet plugins. |
GeoSensorWeb Lab | |
SuperMap Leaflet |
SuperMap Leaflet is a Leaflet plugins for working with SuperMap service types. Support for SuperMap services, tiles and more. |
Demo | SuperMap |
Basemap formats
Plugins for loading basemaps or GIS raster layers in common (albeit non-default) formats.
Plugin | Description | Demo | Maintainer |
---|---|---|---|
azgs-leaflet |
A set of small plugins for Leaflet, including WFS-GeoJSON layer with filtering, a hover control for GeoJSON, and an Esri tile layer. |
AZGS | |
cartodb-leaflet |
Official CartoDB plugin for Leaflet. |
Vizzuality | |
GeoRasterLayer |
Display small and large GeoTIFF files with configurable resolution. Built for simplicity and performance. Integrates with GeoBlaze, a JavaScript raster analysis library. |
Demo | Daniel J. Dufour |
L.TileLayer.WMTS |
A simple WMTS Tile Layer plugin for Leaflet. |
Demo | Alexandru Calin |
Leaflet.bpg |
TileLayer with .bpg image format decoding. |
Andrzej Zaborowski | |
Leaflet.CanvasLayer.Field |
Loads and styles raster files (geotiff & asciigrid formats). It includes a |
Demo | Víctor Velarde |
Leaflet GeoJSON Encoded |
Extends the L.GeoJSON layer using Google polyline encoding algorithm, allowing an optimized data transfer. |
Geobricks | |
Leaflet.ImageOverlay.OGCAPI |
A client for the (untiled) OGC API Maps draft specification. |
Demo | Iván Sánchez Ortega |
Leaflet.NonTiledLayer.WCS |
Display raster data from Web Coverage Services. Rasters can be styled and queried in the client. |
Demo | Stuart Matthews |
Leaflet.projwmts |
Adding WMTS services (GUGiK Poland). |
Demo | Geoportal Poland |
Leaflet.TileLayer.MBTiles |
Loads |
Demo | Iván Sánchez |
leaflet.TileLayer.WMTS |
Add WMTS (IGN) layering for leaflet. |
Alexandre Melard | |
leaflet.wms |
Enhanced WMS support for Leaflet, including single-tile/untiled layers, shared WMS sources, and layer identify via GetFeatureInfo. |
Demo | S. Andrew Sheppard |
Leaflet-2gis |
Adds support for 2GIS tile layer |
Demo | Eugene Mikhalev |
leaflet-geotiff |
Display raster data from geoTIFF files as images or direction arrows. Rasters can be styled and queried in the client. An optional clipping mask can be applied, e.g. to restrict DEMs to land areas. |
Demo | Stuart Matthews |
leaflet-tilejson |
Adds support for the TileJSON specification to Leaflet. |
Per Liedman | |
TileLayer.GeoJSON |
A TileLayer for GeoJSON tiles. |
Glen Robertson |
Non-map base layers
Sometimes you don’t want to load a map, just big custom images. Really big ones.
Plugin | Description | Demo | Maintainer |
---|---|---|---|
Leaflet.TileLayer.IIP |
Add support for IIPImage layers in Leaflet. |
Demo | Emmanuel Bertin |
leaflet-fractal |
Renders some fractals (Mandelbrot set, Julia set and some others) using 2D canvas |
Demo | Alexander Parshin |
Leaflet-IIIF |
A IIIF (International Image Interoperability Framework) viewer for Leaflet. |
Demo | Jack Reed |
leaflet-rastercoords |
Renders large tiled images generated with gdal2tiles-leaflet. Image raster coordinates can be used to set markers, etc. |
Demo | Commenthol |
TileLayer.DeepZoom |
A TileLayer for DeepZoom images. |
Al Farisi | |
TileLayer.Gigapan |
A TileLayer for Gigapan images. |
Dan Sherman | |
TileLayer.Zoomify |
A TileLayer for Zoomify images. |
Demo | Bjørn Sandvik |
Tile/image display
The following plugins change the way that tile or image layers are displayed in the map.
Plugin | Description | Demo | Maintainer |
---|---|---|---|
Leaflet.Control.DetailLevel |
Display tiles at higher-than-retina (hdpi) resolutions, by real-time modification of the zoomOffset. Useful for mapping sources which drastically change map style between different zoom levels. Increasing the zoomOffset by too much does slow down the browser, as the number of displayed tiles grows exponentially with the zoomOffset. |
Demo | Wessel Valkenburg |
Leaflet.Control.Opacity |
Make multiple tile layers transparent. |
Demo | Yasunori Kirimoto |
Leaflet.Control.SideBySide |
A Leaflet control to add a split screen to compare two map overlays. |
Demo | Digital Democracy |
Leaflet.DistortableImage |
Enable users to scale, rotate, and distort images on Leaflet maps. |
Demo | Public Lab |
Leaflet.DistortableVideo |
Enable users to scale, rotate, and distort videos on Leaflet maps. |
Demo | Roni Karilkar |
Leaflet.ImageOverlay.Arrugator |
Displays reprojected ImageOverlays, given four control points and a proj4js projection function. |
Demo | Iván Sánchez Ortega |
Leaflet.ImageOverlay.Rotate |
Displays rotated, scaled and skewed (but not rubbersheeted) ImageOverlays, given three control points. |
Demo | Iván Sánchez Ortega |
Leaflet.Multispectral |
Provides multispectral channel manipulation and processing tools (such as NDVI or other remote sensing methods) for Leaflet image layers using pure client-side JavaScript. It uses |
Demo | Public Lab |
Leaflet.NonTiledLayers |
A Leaflet layer for non-tiled overlays. |
Demo | PTV Logistics |
Leaflet.OpacityControls |
Simple Leaflet controls to adjust the opacity of a map layer. |
Demo | Jared Dominguez |
leaflet-rotate |
Adds rotation functionality to leaflet map panes |
Demo | Raruto |
Leaflet.TileLayer.Canvas |
Render tiles as canvas elements. |
GIAP | |
Leaflet.TileLayer.ColorFilter |
A simple and lightweight Leaflet plugin to apply CSS filters on map tiles. |
Demo | Cláudio Kawakani |
Leaflet.TileLayer.Colorizr |
A Leaflet TileLayer which can modify colors by RGBA code. |
Hinrich Riedel | |
Leaflet.TileLayer.ColorPicker |
A Leaflet TileLayer with getColor(latLng). |
Demo | Yuzo Matsuzawa |
Leaflet.TileLayer.GL |
Applies custom WebGL shaders to each tile in a tilelayer. |
Demo | Iván Sánchez |
Leaflet.TileLayer.GLColorScale |
TileLayer that uses WebGL to colorize floating-point pixels according to a specified color scale. |
Demo | David Schneider |
Leaflet.TileLayer.GLOperations |
WebGL TileLayer: Colorize floating-point pixels, mouse event handlers for pixel values, hillshading, contours, transitions, filter and do calculations on multiple layers. |
Demo | Thorbjørn Horgen |
Leaflet.TileLayer.Mask |
A TileLayer with mask effect. |
Demo | Yuzo Matsuzawa |
Leaflet.TileLayer.PixelFilter |
A TileLayer which can filter and replace pixels by RGB code. |
Demo | GreenInfo Network |
TileLayer.BoundaryCanvas |
Allows you to draw tile layers with arbitrary polygonal boundary. HTML Canvas is used for rendering. |
Alexander Parshin | |
TileLayer.Grayscale |
A regular TileLayer with grayscale makeover. |
Ilya Zverev |
Tile Load
The following plugins change the way that tile layers are loaded into the map.
Plugin | Description | Demo | Maintainer |
---|---|---|---|
Leaflet.EdgeBuffer |
Buffer tiles beyond the edge of the viewport, for Leaflet 1.0. |
Demo | Alex Paterson |
Leaflet.FeatureGroup.LoadEvents |
|
Demo | G. Lathoud |
Leaflet.FunctionalTileLayer |
Allows you to define tile layer URLs using a function. Even works with asynchronous sources, using promises. |
Ishmael Smyrnow | |
Leaflet.GridLayer.FadeOut |
Fades out grid layers and tilelayers when they are removed, making basemap changes smoother (for 1.0.0). |
Demo | Iván Sánchez |
Leaflet.loading |
A simple control that adds a loading indicator as tiles and other data are loaded. |
Demo | Eric Brelsford |
Leaflet.MultiTileLayer |
Allows to compose a TileLayer from several tile sources. Each source is active only on a defined set of zoomlevels. |
Mattias Bengtsson | |
leaflet.offline |
Allow tiles to be stored in an database for offline access. |
Demo | Allart Kooiman |
Leaflet.TileCorrection |
Allow tiles to be loaded in an different crs from map’s and start at a custom zoom. |
Allart Kooiman | |
Leaflet.TileLayer.Fallback |
Replaces missing Tiles (HTTP 404 Not Found Error) by scaled up equivalent Tiles from lower zooms. |
Demo | ghybs |
TileLayer.Cordova |
For use with Cordova/Phonegap, adds tile caching onto local device storage, switching between offline and online mode. |
Greg Allensworth | |
TileLayer.PouchDBCached |
Allows all Leaflet TileLayers to cache into PouchDB for offline use. |
Demo | Iván Sánchez Ortega |
Vector tiles
Plugins to display vector tiles.
Plugin | Description | Demo | Maintainer |
---|---|---|---|
Basemaps with Vector Tiles |
Vector Tiles plugin for Leaflet. Use the power of the MapTiler SDK to access their catalog of professionally created multi-lingual vector tile basemaps. You can also use it for vector tile data overlays. |
Demo | J. Lurie | MapTiler |
geojson-vt |
Efficient library for slicing GeoJSON data into vector tiles on the fly. |
Mapbox | |
Hoverboard |
Render vector tiles on canvas with leaflet (geojson, topojson, and protobuf). Compatible with Leaflet 0.7.x only. |
Demo | Tristan Davies |
Leaflet.MapboxVectorTile |
A Leaflet Plugin that renders Mapbox Vector Tiles on canvas. Compatible with Leaflet 0.7.x only. |
Demo | SpatialDev |
maplibre-gl-leaflet |
Loads a maplibre-gl-js map as a Leaflet layer |
MapLibre | |
Leaflet.VectorGrid |
Display gridded vector data (GeoJSON or TopoJSON sliced with geojson-vt, or protobuf vector tiles) in Leaflet 1.0.0. |
Demo | Iván Sánchez |
Leaflet.VectorTileLayer |
A Leaflet layer for displaying vector tiles. Very similar to Leaflet.VectorGrid except for styling: a single style can be specified for all layers while VectorGrid requires knowing layer names in advance. For Leaflet 1.0.0. |
Joachim Kuebart | |
leaflet-geojson-vt |
Displaying the vector tiles of GeoJSON data on the fly on leaflet |
Demo | Tek Kshetri |
protomaps-leaflet |
Lightweight vector map rendering + labeling and symbology for Leaflet (supporting pmtiles and pbf format) |
Demo | Protomaps |
Overlay data
The following plugins provide new ways of loading overlay data (GIS vector data): points, lines and polygons.
Overlay data formats
Load your own data from various GIS formats.
Plugin | Description | Demo | Maintainer |
---|---|---|---|
Leaflet.BetterFileLayer |
The definitive plugin to load your spatialized files into leaflet. |
Demo | Gabriel Russo |
Leaflet.encoded |
Use encoded polylines in Leaflet. |
Jieter | |
Leaflet.FileGDB |
Put an ESRI File GeoDatabase onto your map as a layer. |
Calvin Metcalf | |
Leaflet.FileLayer |
Loads files (GeoJSON, GPX, KML) into the map using the HTML FileReader API (i.e. locally without server). |
Mathieu Leplatre | |
Leaflet.geoCSV |
Leaflet plugin for loading a CSV file as geoJSON layer. |
Iván Eixarch | |
Leaflet GPX |
GPX layer, targeted at sporting activities by providing access to information such as distance, moving time, pace, elevation, heart rate, etc. |
Demo | Maxime Petazzoni |
Leaflet LayerJSON |
Simple way for transform any JSON data source in a Leaflet Layer, load JSON data in layer and minimize remote requests with caching system. |
Demo | Stefano Cudini |
Leaflet.MultiMarkers |
A Leaflet plugin for displaying a large number of highly customizable markers, such as those from a CSV file read using Papa Parse. |
Demo | mfhsieh |
Leaflet.Shapefile |
Put a shapefile onto your map as a layer. |
Demo | Calvin Metcalf |
Leaflet-BetterScale |
A new, more GIS-like scalebar with alternating black/white bars. |
Demo | Dan Brown |
Leaflet-CsvTiles |
Load points from tiled csv files, using the amazing PapaParse library. |
Demo | Gherardo Varando |
Leaflet-GeoPackage |
Load GeoPackage Tile and Feature Layers. |
Demo | Daniel Barela |
leaflet-kml |
Loads & displays KML |
Demo | Windyx |
leaflet-omnivore |
Loads & converts CSV, KML, GPX, TopoJSON, WKT formats for Leaflet. |
Demo | Mapbox |
Leaflet-WFST |
WFS client layer with transaction support |
Flexberry | |
qgis2web |
A QGIS plugin to make webmaps without coding. |
Tom Chadwin | |
Wicket |
A modest library for translating between Well-Known Text (WKT) and Leaflet geometry objects (e.g. between L.marker() instances and “POINT()” strings). |
Demo | K. Arthur Endsley |
Dynamic/custom data loading
Load dynamic data which is updated in the map, or load GIS vector data in non-standard ways.
Plugin | Description | Demo | Maintainer |
---|---|---|---|
Leaflet Ajax |
Add GeoJSON data via ajax or jsonp. |
Calvin Metcalf | |
Leaflet GeoSSE |
Add realtime data to a Leaflet map using server sent events. |
An Tran | |
Leaflet.Indoor |
Create indoor maps. |
Demo | Christopher Baines |
Leaflet.Liveupdate |
Periodically (‘live’) update something on a map. |
Demo | Martijn Grendelman |
Leaflet.mytrack |
Track my way on a map and download it. |
Demo | DJ |
Leaflet.Pouch |
Use PouchDB to sync CouchDB data to local storage (indexedDB), to just add couchDB data or as just a less confusing implementation of indexedDB. |
Calvin Metcalf | |
Leaflet Realtime |
Put realtime data on a Leaflet map: live tracking GPS units, sensor data or just about anything. |
Per Liedman | |
Leaflet uGeoJSON |
Add an auto updating GeoJSON data Layer via ajax post requests. |
Benjamin VADANT |
Synthetic overlays
These plugins create useful overlays from scratch, no loading required.
Plugin | Description | Demo | Maintainer |
---|---|---|---|
L.OS.Graticule |
Overlays UK Ordinance Survey (OS) 1km grid squares and labels. |
Jon Shutt | |
Leaflet.AutoGraticule |
Draws a grid of latitude and longitude lines, automatically adjusting the scale to the current zoom level. |
Demo | Candid Dauth |
Leaflet.EdgeScaleBar |
Creates scale bars along top and right edge of a map in the Web Mercator projection. |
Dražen Tutić, Ana Kuveždić Divjak | |
Leaflet.Graticule |
Draws a grid of latitude and longitude lines. |
Bjørn Sandvik | |
leaflet.latlng-graticule |
Create a Canvas as ImageOverlay to draw the Lat/Lon Graticule, and show the grid tick label at the edges of the map. |
Demo | CloudyBay |
Leaflet.Maidenhead |
An implementation of the Maidenhead Locator System grid. |
Demo | Iván Sánchez Ortega |
Leaflet.MetricGrid |
A general purpose Metric Grid overlay for Leaflet with ready defined UTM, British and Irish Grids. |
Bill Chadwick | |
Leaflet.PolarGraticule |
Draws a projection aware grid of latitude and longitude lines, with labels on the lines and options to set the extent of and interval between the lines. |
Demo | Anton Steketee |
Leaflet.SimpleGraticule |
Draws a grid lines for L.CRS.Simple coordinate system. |
Andrew Blakey | |
Leaflet.Sun |
Get sunset or sunrise at map click. |
Demo | DJ |
Leaflet.Terminator |
Overlay day and night regions on a map. |
Jörg Dietrich | |
Leaflet.timezones |
Overlay timezones on a Leaflet Earth map. |
Demo | DJ |
Data providers
Load overlay data from third-party-services. See also basemap providers and plugin collections.
Plugin | Description | Demo | Maintainer |
---|---|---|---|
Leaflet.dbpediaLayer |
A layer with Points of interest from Wikipedia - loaded via ajax from DBpedia’s SPARQL endpoint. |
Kr1 | |
Leaflet.FreieTonne |
An overlay with nautical features from FreieTonne. |
Demo | Candid Dauth |
Leaflet.GeographPhotos |
Display Geographical-Photos from Geograph Britain and Ireland in an interactive overlay, using their API. |
Demo | Barry Hunter |
leaflet.osmdatapicker |
Simple and fast way to get any Open Street Map (OSM) data in your drawn zone. Data from overpass-turbo. |
Demo | Amr Hamadeh |
Leaflet Overpass Layer |
Easily include data from the overpass api. |
Demo | Guillaume AMAT |
Leaflet.Rainviewer |
Plugin for RainViewer radar data API. |
Demo | Marcin Wasilewski |
Leaflet Vector Layers |
Allows to easily create vector layers from a number of geo web services, such as ArcGIS Server, Arc2Earth, GeoIQ, CartoDB and GIS Cloud. |
Jason Sanford | |
leaflet-environmental-layers |
Collection of different environmental map layers in an easy to use Leaflet library. |
Demo | Public Lab |
leaflet-radar |
Animated satellite weather radar overlays for Leaflet. |
Demo | rwev |
Leaflet-Wikipedia |
A leaflet plugin to display Wikipedia API entries on a map layer. |
Demo | Matthew Barker |
Windy-Leaflet-plugin |
Displays animated weather map on your page using Windy’s free API. |
Demo | Windy.com |
Overlay display
The following plugins provide new ways of displaying overlay data information.
Markers & renderers
These plugins provide new markers or news ways of converting abstract data into images in your screen. Leaflet users versed in GIS also know these as symbolizers.
Plugin | Description | Demo | Maintainer |
---|---|---|---|
L.Donut |
Extension of L.Circle which allows to define a outer and inner radius. |
Demo | Falke-Design |
Leaflet.Arc |
This plugin adds L.Polyline.Arc function which wraps arc.js functionality for creation of Great Cirlce arcs. |
Demo | Alexey Gusev |
Leaflet.ArrowCircle |
A Marker extension to display circles with directional arrows. |
Demo | R.A. Porter |
Leaflet.Awesome-Markers |
Colorful, iconic & retina-proof markers based on the Font Awesome icons/Twitter Bootstrap icons |
Demo | Lennard Voogdt |
Leaflet.BeautifyMarkers |
Lightweight plugin that adds colorful iconic markers without image and gives full control of style to end user (i.e. Unlimited colors and CSS styling). |
Demo | Muhammad Arslan Sajid |
Leaflet.bezier |
Draws a Bézier line between two points with an animated flight object. |
Demo | Supun Praneeth |
Leaflet.BoatMarker |
A boat marker using HTML Canvas for displaying yachts and sailboats with heading and optional wind information. |
Demo | Thomas Brüggemann |
Leaflet.Canvas-Markers |
Displays markers on canvas instead of DOM. |
Demo | Evgeniy Voynov |
Leaflet.CenterMarker |
Marker that is kept fixed to the center of the map when the map is panned by dragging. Can be seen in action on What is my address? |
Jonatan Heyman | |
Leaflet.ColorIcon |
Overwrite color of the icon with CSS filters and make it possible to add same icon-image in different colors. |
Demo | Maxence Martin (shevek) |
Leaflet.curve |
A Leaflet plugin for drawing Bézier curves and other complex shapes. |
Demo | elfalem |
Leaflet.CustomLayer |
A Leaflet plugin L.CustomLayer - fully custom Layer. |
Derek Li | |
Leaflet.EdgeMarker |
Plugin to indicate the existence of Features outside of the current view. |
Demo | Gerald Pape |
Leaflet.ellipse |
Leaflet.ellipse place ellipses on map by specifying center point, semi-major axis, semi-minor axis, and tilt degrees from west. |
Demo | JD Fergason |
Leaflet.Extra-Markers |
Shameless copy of Awesome-Markers with more shapes, colors and semantic-ui support |
Demo | Cory Silva |
Leaflet.Geodesic |
Draw geodesic lines and circles. A geodesic line is the shortest path between two given points on the earth surface. It uses Vincenty’s formulae for highest precision and distance calculation. Written in TypeScript and available via CDN. |
Demo | Henry Thasler |
Leaflet.geojsonCSS |
Geojson CSS implementation for Leaflet. |
Demo | Alexander Burtsev |
Leaflet.GeotagPhoto |
Plugin for photo geotagging, with two modes: camera and crosshair. |
Demo | Bert Spaan |
Leaflet.GLMarkers |
Display thousands of markers with custom WebGL shaders, optionally animated. |
Demo | Iván Sánchez Ortega |
Leaflet.greatCircle |
A wrapper class for the Leaflet.js Polygon object that draws true “great circles” (showing true geodesic, spherical paths) that wrap around the Earth. |
Demo | Alex Wellerstein |
Leaflet.HighlightableLayers |
Highlight Leaflet lines and polygons by adding a border and raising them above others. Add a transparent border to increase the tolerance for mouse/touch interactions. |
Demo | Candid Dauth |
Leaflet.Icon.Glyph |
Use icon font glyphs in your markers (from Font Awesome, Material Design Icons, Glyphicons, Metro UI icons, Elusive, and other icon fonts). |
Demo | Iván Sánchez Ortega |
Leaflet.IconEx |
A Leaflet plugin that creates a DivIcon with three customizable layers. |
Demo | mfhsieh |
Leaflet.label |
Adds text labels to map markers and vector layers. |
Jacob Toye | |
Leaflet.LabelTextCollision |
Displays labels on paths (polylines, polygons, circles) avoiding label collision. |
Demo | Kenta Hakoishi |
Leaflet.LineExtremities |
Show symbols at the extremities of polylines, using SVG markers. |
Demo | Frédéric Bonifas |
Leaflet.magicMarker |
Adding magical animation effect to a marker while loading. |
Sylvenas | |
Leaflet.MakiMarkers |
Create markers using Maki Icons from MapBox. |
James Seppi | |
leaflet-mapwithlabels |
Extends L.Map with automatic labeling. Labels layers if the label option is present. Labels are dynamically generalized to avoid overlaps. |
Demo | Mátyás Gede |
Leaflet.Marker.Highlight |
Adding highlight performance for L.marker. |
Demo | Brandon Xiang |
Leaflet.Marker.Stack |
A pure Leaflet implementation of CartoDB’s “stacked chips” symbolizer. |
Demo | Iván Sánchez |
Leaflet.orientedMarker |
Allows to manage orientation of markers dynamically. |
jekuno | |
Leaflet.ParallaxMarker |
Add markers that moves with a parallax-effect relative to the map when panning. |
Demo | Dag Jomar Mersland |
Leaflet.pattern |
Add support for pattern fills on Paths. |
Tyler Eastman | |
Leaflet.Photo |
Plugin to show geotagged photos on a Leaflet map. |
Demo | Bjørn Sandvik |
Leaflet-polygon-fillPattern-canvas |
Extend the Polygon Object to fill canvas element with an image pattern. Performance is better than svg rendering. Can improve the rendering performance of big data. |
bgx1012 | |
Leaflet.Polyline.Arrugator |
Reprojects polylines from a source CRS (Coordinate Reference System) so that they look like curves. Meant to better display bounding boxes of raster images in arbitrary CRSs. |
Demo | Iván Sánchez |
Leaflet Polyline Offset |
Adds to |
Demo | Benjamin Becquet |
Leaflet.PolylineDecorator |
Allows you to draw patterns (like dashes, arrows or evenly spaced Markers) along Polylines or coordinate paths. |
Demo | Benjamin Becquet |
Leaflet.RepeatedMarkers |
Displays markers when wrapping around the globe, once every 360 degrees of longitude. |
Demo | Iván Sánchez |
Leaflet.River |
Draw lines with different width (like rivers) on a map. Useful when you want to show how rivers ‘flow’ on the map. |
Demo | Grigory Golikov |
Leaflet Rotated Marker |
Enables rotation of marker icons in Leaflet. |
Demo | Benjamin Becquet |
Leaflet.RoughCanvas |
Leaflet.RoughCanvas renders hand-drawn, sketch style vector map (polyline, polygon, geojson). |
Demo | haoming |
Leaflet.SpeechBubble |
Popup a speech bubble with the arrow that follow points, layer, markers, etc. |
Demo | Sylvain BRISSY |
leaflet-spline |
Built on Leaflet.Curve, leaflet-spline draws quadratic bezier spline based on a series of geographic coordinates. |
Demo | Seth Lutske |
Leaflet.Sprite |
Use sprite based icons in your markers. |
Calvin Metcalf | |
Leaflet.StarCircle |
Drawing triangle, square, star(n-corner) in leaflet. |
Demo | Haelue |
Leaflet.streetlabels |
A Leaflet plugin to show labels following the paths of polylines. An extension of yakitoritabetai Leaflet.LabelTextCollision. |
Demo | 3Maps |
Leaflet.SvgShapeMarkers |
Adds support for additional SVG marker types such as triangles, diamonds and squares. |
Demo | Rowan Winsemius |
Leaflet Swoopy |
A plugin for creating customizable swoopy arrow annotations. |
Demo | webkid |
Leaflet.TextPath |
Allows you to draw text along Polylines. |
Demo | Mathieu Leplatre |
leaflet-tracksymbol2 |
A plugin for showing tracks (triangular symbol) and AIS contacts on the map. This is an updated version of: |
Demo | ARL |
Leaflet Truesize |
A plugin for creating projection aware draggable polygons and polylines. |
Demo | webkid |
Leaflet.VectorMarkers |
Vector SVG markers for Leaflet, with an option for Font Awesome/Twitter Bootstrap icons. |
Mathias Schneider | |
Leaflet.Viewpoint |
Displays circleMarker with multiple directions. Useful to show photos taken from one point. |
Demo | Grigory Golikov |
leaflet-ais-tracksymbol |
AIS Extension for leaflet-tracksymbol It displays AIS Contacts on the Map. |
Johannes Rudolph | |
leaflet-ais-tracksymbol-search |
Adds a Search Box for your Leaflet Map and Your leaflet-ais-trackymbol |
Johannes Rudolph | |
Leaflet-arrowheads |
Allows user to quickly draw arrowheads on polylines for vector visualization. |
Demo | Slutske22 |
leaflet-choropleth |
Extends L.geoJson to add a choropleth visualization (color scale based on value). |
Demo | Tim Wisniewski |
leaflet-corridor |
Renders a polyline with width fixed in meters, not in pixels. Adjusts width depending on zoom level. |
Demo | Mikhail Shilkov |
leaflet-distance-markers |
Allows displaying markers along a route (L.Polyline) at equivalent distances (eg. one per mile). |
Demo | Doroszlai, Attila |
leaflet-icon-pulse |
Renders pulsing icon using CSS. It can be used for location marker. |
Demo | mapshakers |
leaflet-labeled-circle |
Special type of SVG marker with a label inside and draggable around the anchor point. |
Demo | Alexander Milevski |
leaflet-layervisibility |
Extends L.Layer and L.LayerGroup with methods to hide/show layers without removing/re-adding them. |
Demo | Philipp Loose |
leaflet-mapkey-icon |
Set of cartographic font icons based on mapkeyicons. |
Demo | mapshakers |
leaflet-marker-direction |
display the path and the direction of the marker. |
Demo | Jack Zou |
leaflet-place-groups-picker |
Plugin for the Leaflet maps that allows grouping places in groups whose visibility can be toggled. |
damianc | |
leaflet-polycolor |
Color each polyline segment. |
Demo | Olivier Gasc |
leaflet-polygon.fillPattern |
Extend the Polygon Object to fill SVG Path element with an image pattern. |
Demo | CloudyBay |
Leaflet-semicircle |
Adds functionality to |
Jieter | |
leaflet-simplestyle |
Extends L.geoJSON to support the simple style spec. |
Demo | Rowan Winsemius |
Leaflet-SVGIcon |
A simple and customizable SVG icon with no external dependencies. Also included is a convenience Marker class and two example subclasses. |
Demo | Ilya Atkin |
leaflet-usermarker |
Plugin for plotting a marker representing a user - or multiple users - on a map, with support for drawing an accuracy circle. Can be seen in action on Longitude.me. |
Jonatan Heyman | |
OSM Buildings |
Amazing JS library for visualizing 3D OSM building geometry on top of Leaflet. |
Demo | Jan Marsch |
Overlay animations
These plugins animate markers or some geometries. See also geometries with time or elevation.
Plugin | Description | Demo | Maintainer |
---|---|---|---|
Leaflet.AnimatedMarker |
Animate a marker along a polyline. |
Aaron Ogle | |
Leaflet.AntPath |
Leaflet.AntPath put a flux animation (like ants walking) into a Polyline. |
Demo | Rubens Pinheiro |
Leaflet.BounceMarker |
Make a marker bounce when you add it to a map. |
Demo | Maxime Hadjinlian |
Leaflet.Marker.SlideTo |
Smoothly move (slide) markers to a new location. |
Demo | Iván Sánchez Ortega |
Leaflet.MarkerPlayer |
A plug-in for animating marker along polyline with ability to get/set progress. |
Demo | 0n3byt3 |
leaflet.motion |
Adds simple motion to your polyline with marker in a head on line. |
Demo | Igor Vladyka |
Leaflet.MoveMarker |
Used to create moving marker animation and also trail polyline animation. |
Demo | I Kadek Teguh Mahesa |
Leaflet.MovingMarker |
Allow to move markers along a polyline with custom durations. |
Demo | Ewoken |
Leaflet.Path.DashFlow |
Animates the dashArray of lines and circles, creating a basic flow effect. |
Demo | Iván Sánchez Ortega |
Leaflet.Polyline.SnakeAnim |
Animates (poly)lines into existence, as if they were being slowly drawn from start to end. |
Iván Sánchez Ortega | |
Leaflet.Radar |
Radar sector scan animation |
Demo | cygis2011 |
Leaflet.Rain |
Customizable WebGL rain animation for Leaflet. Useful for weather maps. |
Demo | Grigory Golikov |
Leaflet.SmoothMarkerBouncing |
Smooth animation of marker bouncing for Leaflet. |
Demo | Alexei KLENIN |
Leaflet.Snow |
Customizable WebGL snow animation for Leaflet. Useful for weather maps. |
Demo | Grigory Golikov |
Leaflet.TrackPlayer |
A Leaflet trajectory playback plugin that automatically rotates the marker icon based on the actual direction of travel and dynamically adjusts the colors of the traveled and untraveled distances to clearly indicate the current progress. It also supports custom settings such as driving speed, among other features. |
Demo | Jun Wei |
Leaflet.TransitionedIcon |
Transition in/out markers with CSS transitions. It supports jitter for staggering markers into view to prevent visual overload. |
Demo | Brian Reavis |
leaflet-point-animator |
Animate a large number of GeoJSON points. |
Demo | danwild |
leaflet-temporal-geojson |
Flexible animation of GeoJSON features. |
Demo | danwild |
Clustering/Decluttering
When you are displaying a lot of data, these plugins will make your map look cleaner.
Plugin | Description | Demo | Maintainer |
---|---|---|---|
Leaflet.ConditionalLayer |
A FeatureGroup that does not show any more than a certain amount of markers visible in the viewport. |
Demo | EPP |
Leaflet.Deflate |
Deflates lines and polygons to a marker when their screen size becomes too small in lower zoom levels. |
Oliver Roick | |
Leaflet.DonutCluster |
A lightweight standalone Leaflet plugin to display donut charts instead of circles in map when using Leaflet marker cluster. |
Demo | Kalisio contributors |
Leaflet.FeatureGroup.SubGroup |
A simple plugin to create Feature Groups that add their child layers into a parent group. Typical usage is to switch them through L.Control.Layers to dynamically add/remove groups of markers from Leaflet.markercluster. |
Demo | ghybs |
Leaflet.GridCluster |
Create grid-based clusters in realtime. |
Demo | Andreas Kiefer |
Leaflet.inflatable-markers-group |
An alternative to the most excellent Leaflet marker cluster plugin. This plugin gives markers two states : an inflated, normal, state and a deflated state which shows less information, takes up less space and is used to declutter the map. |
Demo | Laurent Georget |
Leaflet.LayerGroup.Collision |
Provides collision detection for groups of markers. Unlike clustering, this takes into account the shape & size of the markers. |
Demo | Iván Sánchez Ortega |
Leaflet.LayerGroup.Conditional |
Control which layers in a group to show based on any condition. E.g. heatmap on low zoom levels, markers on higher levels. |
Demo | Solfisk / Jørgen Elgaard Larsen |
Leaflet.markercluster |
Beautiful, sophisticated, high performance marker clustering solution with smooth animations and lots of great features. Recommended! |
Demo | Dave Leaver |
leaflet-tooltip-layout |
A plugin to avoid tooltips overlapping and make it easier to find out the relationship between each tooltip and marker. |
Demo | Zijing Peng |
Overlapping Marker Spiderfier |
Deals with overlapping markers in a Google Earth-inspired way by gracefully springing them apart on click. |
Demo | George MacKerron |
PruneCluster |
Fast and realtime marker clustering library. |
Demo | Antoine Pultier |
q-cluster |
Quick point clustering library with D3 categorization. |
Demo | Nicholas Hallahan |
Heatmaps
These plugins create heatmaps and heatmap-like visualizations from vector data.
Plugin | Description | Demo | Maintainer |
---|---|---|---|
HeatCanvas |
Simple heatmap api based on HTML canvas. |
Demo | Sun Ning |
heatmap.js |
JavaScript Library for HTML canvas based heatmaps. Its Leaflet layer implementation supports large datasets because it is tile based and uses a quadtree index to store the data. |
Demo | Patrick Wied |
Leaflet divHeatmap |
Lightweight and versatile heatmap layer based on CSS and divIcons |
Daniele Piccone | |
Leaflet.heat |
A tiny, simple and fast Leaflet heatmap plugin. Uses simpleheat under the hood, additionally clustering points into a grid for performance. |
Demo | Vladimir Agafonkin |
Leaflet.SmoothPolygons |
Uses paperJS under the hood to draw paths on canvas. |
Demo | Sanchez Weezer |
Leaflet-Solr-Heatmap |
A Leaflet plugin for rendering heatmaps and clusters from Solr’s Heatmap Faceting. High performance for millions of points or polygons. |
Jack Reed | |
MaskCanvas |
Canvas layer that can be used to visualize coverage. |
Demo | Dominik Moritz |
WebGL Heatmap |
High performance Javascript heatmap plugin using WebGL. |
Demo | Benjamin J DeLong |
DataViz
Powerful multi-purpose libraries for data visualization.
Plugin | Description | Demo | Maintainer |
---|---|---|---|
geogrid.js |
Displays data aggregated by the ISEA3H discrete global grid system. The data can, e.g., be delivered by using Measures REST (a framework to deliver data aggregated by the grid) or geogrid (a library for handling the grid in case that you want to aggregate data manually). |
F.-B. Mocnik, | |
jquery-storymap |
A jQuery plugin to display several map locations as the user scrolls through paragraphs. |
Demo | Atle Frenvik Sveen |
Leaflet.Canvas-Flowmap-Layer |
A LeafletJS custom map layer for mapping the flow of objects, ideas, people, etc. with Bezier curves rendered on the HTML canvas. |
Demo | Jacob Wasilkowski |
Leaflet.D3SvgOverlay |
SVG overlay class for using with D3 library. Supports zoom animation and scaling without need to redraw the layer. |
Demo | Kirill Zhuravlev |
Leaflet Data Visualization Framework |
New markers, layers, and utility classes for easy thematic mapping and data visualization. |
Scott Fairgrieve | |
leaflet-dataclassification |
Single-step data classification, symbology and legend creation for GeoJSON data powered thematic maps. |
Demo | Dániel Balla |
Leaflet for R |
Allows using Leaflet from within R programs, a programming language popular for statistical analysis and data mining. |
Demo | RStudio team |
Leaflet.Gleo |
Embed a Gleo renderer as a Leaflet layer. Gleo is a general-purpose object-oriented WebGL cartographic rendering library. |
Demo | Iván Sánchez Ortega |
Leaflet.glify.layer |
Add-on for the Leaflet.glify plugin to provide more leaflet-idiomatic bindings. Provides fast webgl rendering for GeoJSON FeatureCollections (currently limited to polygons, lines and points). |
Demo | onaci |
Leaflet.glify |
Fast rendering for large (+100MB) GeoJSON datasets with WebGL. |
Demo | robertleeplummerjr |
antv/l7-leaflet |
Use L7 Large-scale WebGL-powered Geospatial data visualization analysis engine, Enhance Leaflet Large Scale Geospatial data visualization |
Demo | lzxue |
leaflet.migration |
This plugin add layer to leaflet which show migration, flylines. User can customize marker, line, popover ext. |
Demo | Kakaka Hou |
leaflet.migrationLayer |
leaflet.migrationLayer is used to show migration data such as population, flight, vehicle, traffic and so on. Data visualization on map. |
Demo | Sylvenas |
Leaflet.PixiOverlay |
A Leaflet overlay class for drawing and animating with Pixi.js. |
Demo | Manuel Baclet |
Leaflet.Quadtree |
Leaflet.Quadtree is used to retrieve visible data inside given bounds |
Demo | ibesora |
leaflet-echarts |
A plugin for Leaflet to load echarts map and make big data visualization easier. |
Demo | wandergis |
leaflet-partition |
Divide the area into parts in different ways such as voronoi(triangulation) and hexagonal tiling. |
Demo | locknono |
leaflet-velocity |
Visualise velocity layers with leaflet. |
Demo | Dan Wild |
mapbox-gl-leaflet |
Binding from Mapbox GL JS to the Leaflet API |
Demo | Tom MacWright |
Mapstats |
A Leaflet plugin for display and monitoring (wireless) network on the map. |
Demo | Jirka Klír |
RaphaelLayer |
Allows you to use Raphael as a layer on a Leaflet map for advanced animations and visualizations. |
Dynamic Methods |
Interaction with geometries/features
The following plugins enable users to interact with overlay data: edit geometries, select areas or features, interact with the time dimension, search features and display information about them.
Edit geometries
Allows users to create, draw, edit and/or delete points, lines and polygons.
Plugin | Description | Demo | Maintainer |
---|---|---|---|
Leaflet-Geoman |
Geometry Management for Leaflet 1.0 and higher. Draw, Edit, Drag, Cut, Rotate, Split, Scale, Measure, Snap and Pin Layers like Markers, CircleMarkers, Polylines, Polygons, Circles, Rectangles, ImageOverlays, LayerGroups, GeoJSON, MultiLineStrings and MultiPolygons. Supports holes in polygons, canvas mode and more. |
Demo | Sumit Kumar |
Leaflet.Clipper |
Allows Union, Difference, Xor, and Intersection operations on two polygons. |
Demo | will Farrell |
L.Control.PaintPolygon |
Draw yours polygons with a circle brush like Paint[brush]. Includes turf.js dependencies. |
Thibault Coupin | |
Leaflet.DraggableLines |
Add/move/remove points on routes, lines and polygons by drag&drop. |
Demo | Candid Dauth |
Leaflet.draw.svg |
Plugin to Leaflet.Draw to allow adding/moving/removing custom SVG files on a leaflet map. It allows to define a SVG as XML text, and converts it into an SVG object that can be displayed by leaflet as an editable feature. |
Demo | Robin Massink |
Leaflet.draw |
Enables drawing features like polylines, polygons, rectangles, circles and markers through a very nice user-friendly interface with icons and hints. |
Jacob Toye | |
Leaflet.Editable.Polyline |
Editable polylines: move existing points, add new points and split polylines. |
Demo | Tomo Krajina |
Leaflet.Editable |
Lightweight fully customisable and controllable drawing/editing plugin. |
Demo | Yohan Boniface |
Leaflet.EditableHandlers |
A set of plugins that includes circle editing, measuring tool, and label for polygon sides. |
Kartena | |
Leaflet.FreeDraw |
Zoopla inspired freehand polygon creation using Leaflet.js and D3. |
Demo | Wildhoney |
Leaflet.Illustrate |
Extension for Leaflet.draw enabling users to type annotations directly on maps. |
Demo | Justin Manley |
Leaflet.MapPaint |
Bitmap painting plugin designed for touch devices. |
Demo | Antoine Pultier |
Leaflet.Path.Drag |
Drag handler and interaction for polygons and polylines. |
Demo | Alexander Milevski |
Leaflet.Path.Transform |
Scale & rotate handler and interaction for polygons and polylines. |
Demo | Alexander Milevski |
Leaflet.Pather |
L.Pather is a freehand polyline creator that simplifies the polyline for mutability. Requires D3 support. |
Demo | Wildhoney |
Leaflet.Pin |
Enable attaching of markers to other layers during draw or edit features with Leaflet.Draw. |
Demo | Konrad Klimczak |
Leaflet.plotter |
leaflet-plotter allows you to create routes using a leaflet powered map. You can click on the mid-points to create a new, draggable point. |
Demo | Nathan Mahdavi |
Leaflet.SegmentEdit |
An extension to Leaflet.draw to allow editing large polylines one chunk at the time. |
Demo | Lemaf |
Leaflet.SimpleMarkers |
A light-weight Leaflet plugin for adding and deleting markers. |
Jared Dominguez | |
Leaflet.Snap |
Enables snapping of draggable markers to polylines and other layers. |
Demo | Mathieu Leplatre |
Leaflet.Storage |
Create/update/delete Map, Marker, Polygon, Polyline… and expose them for backend storage with an API. |
Yohan Boniface | |
Leaflet.StyleEditor |
Enables editing the styles of features (lines, polygons, etc) and markers with a GUI. |
Demo | Dennis Wilhelm |
Leaflet.trace |
Extends Leaflet.draw to add a new set of tools which allow the user to select a L.geoJSON line to trace or snap a marker to. |
Demo | Alex Gilvarry |
Leaflet-Craft |
Extends Leaflet.FreeDraw and gives extended features like Undo-Redo, deleting markers,dynamic area calculation of polygons ,various hooks/events and in-build control bars, etc. |
Demo | Sagarpreet Chadha |
Terra Draw |
Terra Draw’s TerraDrawLeafletAdapter allows users to create, select and edit a variety of geometry types (points, lines polygons etc) on a Leaflet map. |
Demo | James Milner |
Time & elevation
Most data is two-dimensional (latitude and longitude), but some data has more dimensions (altitude and/or time). The following plugins help users navigate these extra dimensions.
Plugin | Description | Demo | Maintainer |
---|---|---|---|
LeafletSlider-LocalTimeV2 |
LeafletSlider-LocalTimeV2 enables you to dynamically add and remove Markers (without lag) on a map, and show the daterange in localtime by using a JQuery UI slider |
Demo | Carlos Charletti |
leaflet-calendar |
leaflet-calendar allows you to add a calendar picker and trigger a custom function when a date is selected. |
Demo | Antonio Vida |
Leaflet.Elevation |
A Leaflet plugin to view interactive height profiles of GeoJSON lines using d3. |
Demo | Felix Bache |
Leaflet.Heightgraph |
Inspired by Leaflet.Elevation this Leaflet plugin allows you to view interactive height profiles stored as GeoJSON featuring the handy ability to visualize arbitrary segments (e.g. surface types or steepness categories) with customized colors stored as properties within the GeoJSON itself. |
Demo | Robin Boldt |
Leaflet Hex Time Slider |
Minimalistic time slider using leaflet + d3.js and nouislider for displaying time series data using a geoJSON file. |
Demo | Albert Kochaphum |
Leaflet.hotline |
A Leaflet plugin for drawing gradients along polylines. |
Demo | iosphere |
Leaflet.TimeDimension |
Add time dimension capabilities on a Leaflet map. |
Demo | ICTS SOCIB |
Leaflet Timeline Control |
Unopinionated timeline control that helps you display time series data. |
Demo | Michal Zimmermann |
Leaflet.timeline |
Display arbitrary GeoJSON on a map with a timeline slider and play button. |
Demo | Jonathan Skeate |
Leaflet.timelineSlider |
Leaflet plugin that creates a customizable timeline slider with user designed functionality. |
Demo | Sol Vitkin |
Leaflet Time-Slider |
The Leaflet Time-Slider enables you to dynamically add and remove Markers on a map by using a JQuery UI slider |
Demo | Dennis Wilhelm |
Leaflet Topography |
A set of tools for calculating and visualizing topographic data (elevation, slope, aspect) at lightning speed. Based on Mapbox RGB Encoded DEM tiles. |
Demo | Seth Lutske |
leaflet.TrackPlayBack |
A leaflet track-playback plugin, can display and dynamically play tracks. |
Demo | linghuam |
LeafletPlayback |
Play back time-stamped GPS Tracks synchronized to a clock. |
Demo | Nicholas Hallahan |
Search & popups
Plugins that search for overlays and enhance how to display information about them.
Plugin | Description | Demo | Maintainer |
---|---|---|---|
L.tagFilterButton |
LeafLet marker filtering by tags |
Demo | Mehmet Aydemir |
Leaflet.AnimatedSearchBox |
A simple Leaflet plugin that provides a collapsible search box. |
Demo | Luka Steinbach |
Leaflet.GeoJSONAutocomplete |
Leaflet Autocomplete For Remote Searching with GeoJSON Services. |
Demo | Yunus Emre Özkaya |
Leaflet PinSearch |
A leaflet plugin for a configurable search bar component with autocomplete on all existing pins on the map. |
Demo | Ahmad El Mokahal |
Leaflet.PopupMovable |
This plug-in makes L.Popup movable by user drag and automatically draws leads. |
Demo | Yasuhiro Suzuki |
Leaflet.RevealOSM |
Very simple but extendable Leaflet plugin to display OSM POIs data on map click. |
Yohan Boniface | |
Leaflet.Rrose |
A Leaflet Plugin for Edge Cases. For use when you want popups on mouseover, not click, and you need popup tips to reorient as you get close to the edges of your map. |
Demo | Eric Theise |
Leaflet Search |
A control for search Markers/Features location by custom property in LayerGroup/GeoJSON. Support AJAX/JSONP, Autocompletion and 3rd party service |
Demo | Stefano Cudini |
Leaflet Underneath |
Find interesting features near a location using Mapbox Vector Tiles data, to add interactive functionality to a tile layer with speed and limited bandwidth. |
Per Liedman | |
Leaflet.utfgrid |
Provides a utfgrid interaction handler for leaflet a very small footprint. support for Leaflet >= 1.0. Includes basic mouseover support plus ability to highlight feature from UTFGrid on hover. |
Dave Leaver | |
leaflet-custom-searchbox |
A google map style search box which includes a side panel slider control. |
Demo | A.D |
leaflet-fusesearch |
A control that provides a panel to search features in a GeoJSON layer using the lightweight fuzzy search Fuse.js |
Demo | Antoine Riche |
Leaflet-gplaces-autocomplete |
Add google places search into map |
Michal Haták | |
leaflet-popup-modifier |
Allows user to edit the contents of a popup, or use the popup to remove its source marker. |
Slutske22 | |
leaflet-responsive-popup |
Removes the need to move the map to be able to see the content of the popup. |
Demo | YaFred |
Area/overlay selection
These plugins help users select either overlays or areas in the map.
Plugin | Description | Demo | Maintainer |
---|---|---|---|
Leaflet-Area-Selection |
leaflet-area-selection allows to easily select a polygonal area on the map. |
Demo | B-Open |
L.Control.LineStringSelect |
Fast LineString(polyline) partial selection tool: select a stretch between two points in a complex path. |
Demo | Alexander Milevski |
Leaflet.AreaSelect |
A fixed positioned, resizable rectangle for selecting an area on the map. |
Demo | Jonatan Heyman |
Leaflet.CheapLayerAt |
Allows querying which layer is under a screen coordinate. |
Demo | Iván Sánchez Ortega |
Leaflet.FeatureSelect |
Use a configurable centerpoint marker to select any geometry type from a GeoJSON layer. |
Demo | Aaron Ogle |
Leaflet GeoJSON Selector |
Leaflet Control for selection from GeoJSON feature in an interactive list and map. |
Demo | Stefano Cudini |
Leaflet.SelectAreaFeature |
Selecting feature layers on a map by drawing an area. |
Demo | Sandro Pibia |
leaflet-lasso |
Lasso selection plugin. |
Demo | Jan Zak |
Leaflet-Select-Polygons |
Leaflet-Select-Polygons allows the selection of several polygons and also adjusts the base map view. |
Demo | Erick S Escalante Olano |
Leaflet-Shades |
A draggable and resizable rectangle for selecting an area on a map and creating a gray overlay in unselected areas. |
Demo | Mandy Kong |
Map interaction
New ways to interact with the map itself.
- Layer switching controls
- Interactive pan/zoom
- Bookmarked pan/zoom
- Fullscreen
- Minimaps & synced maps
- Measurement
- Mouse coordinates
- Events
- User interface
- Print/export
- Geolocation
Layer switching controls
The following plugins enhance or extend L.Control.Layers
.
Plugin | Description | Demo | Maintainer |
---|---|---|---|
L.switchBasemap |
An easy leaflet plugin to switch basemap. |
Demo | clavijojuan |
Leaflet.ActiveLayers |
Adds new L.Control.ActiveLayers with functionality to get currently active layers on the map. |
vogdb | |
Leaflet.AutoLayers |
Automatically pull layers from multiple mapservers and organize/search them with user controlled overlay zIndex management. |
Alex Ebadirad | |
Leaflet.Basemaps |
A basemap chooser with a preview image from the tile stack. Example |
Demo | Brendan Ward |
Leaflet Categorized Layers |
Leaflet Control Layers extended for groups of categorized layers |
Robbie Trencheny | |
Leaflet.Control.Appearance |
Extend of Control.Layers, can control Appearances of Layers - color, opacity and able to remove a overlay layer. |
Kanahiro Iguchi | |
Leaflet.Control.Layers.Tree |
L.Control.Layers extension that supports a Tree structure, both for base and overlay layers. Simple and highly configurable. |
Demo | Javier Jimenez Shaw |
Leaflet Control Order Layers |
Adds the ability to change overlay order in the layers control. |
Michael Salgado | |
Leaflet.GroupedLayerControl |
Leaflet layer control with support for grouping overlays together. |
Demo | Ishmael Smyrnow |
Leaflet.LayerTreeControl |
A leaflet plugin to group multiple types of layers in a tree structure. |
Demo | Ignacio Fagian |
Leaflet.LayerTreePlugin |
Leaflet control allows to switch layers on and off, display them in a tree-like way. |
Demo | Alexander Arakelyan |
Leaflet Panel Layers |
Leaflet Control Layers extended for group of layers and icons legend |
Stefano Cudini | |
Leaflet.SelectLayers |
a Leaflet plugin which adds new control to switch between different layers on the map. New control replaces L.Control.Layers radio button panel with select tag. |
vogdb | |
Leaflet.StyledLayerControl |
A Leaflet plugin that implements the management and control of layers by organization into categories or groups. |
Demo | Davi Custodio |
Leaflet.UniformControl |
Leaflet layer control with stylable checkboxes and radio buttons. |
Demo | Chris Calip |
Leaflet-IconLayers |
Leaflet control that displays base layers as small icons. |
Demo | Alexander Zverev |
Interactive pan/zoom
Change the way the user can interactively move around the map.
Plugin | Description | Demo | Maintainer |
---|---|---|---|
Leaflet.SyncView |
A sync view control for Leaflet. Design for Drupal Leaflet Module integration. |
Demo | Wong Hoi Sing Edison |
L.Control.ZoomBar |
An extended version of Leaflet’s native Zoom control with Home and Zoom-to-Area buttons. |
Demo | Elijah Robison |
Leaflet.BorderPan |
A Leaflet plugin to pan by clicking on map borders. |
Sebastián Lara | |
Leaflet.BoxZoom |
A visible, clickable control to perform a box zoom. |
Demo | Greg Allensworth |
Leaflet.DoubleRightClickZoom |
Interaction handler enabling zooming out with double right click. |
Demo | Mike O'Toole |
Leaflet.DoubleTouchDragZoom |
Plugin for one finger zoom. |
Demo | Peter C |
Leaflet GameController |
Interaction handler providing support for gamepads. |
Antoine Pultier | |
Leaflet LimitZoom |
Plugins to limit available zoom levels to a given list, either by restricting zooming or by interpolating tiles. |
Demo | Ilya Zverev |
Leaflet.Pancontrol |
A simple panning control. |
Kartena | |
Leaflet.twofingerZoom |
Interaction handler for touch devices enabling zooming out with a two finger tap. |
Adam Ratcliffe | |
Leaflet.ZoomBox |
A lightweight zoom box control: draw a box around the area you want to zoom to. |
Demo | Brendan Ward |
Leaflet.ZoomEx |
A Leaflet plugin that displays a zoom control on the map, with a customizable appearance and position using CSS. |
Demo | mfhsieh |
Leaflet.zoominfo |
A zoom control which displays the current zoom level. |
Demo | Flávio Carmo |
Leaflet.ZoomLabel |
A simple zoom label control. |
Demo | Masashi Takeshita |
Leaflet.ZoomPanel |
A Zoom Control Panel Of Leaflet. |
Demo | Shuhua Huang |
Leaflet.zoomslider |
A zoom slider control. |
Demo | Kartena |
Bookmarked pan/zoom
Change the way the user is moved around the map, by jumping to predefined/stored places.
Plugin | Description | Demo | Maintainer |
---|---|---|---|
Leaflet.ResetView |
A reset view control for Leaflet. Design for Drupal Leaflet Module integration. |
Demo | Wong Hoi Sing Edison |
Leaflet.Bookmarks |
Control for adding and navigating between user-created bookmarks on the map. |
Demo | Alexander Milevski |
Leaflet.defaultextent |
A control that returns to the original start extent of the map. Similar to the HomeButton widget. |
Alex Nguyen | |
Leaflet Locationlist |
A control to jump between predefined locations and zooms. |
Ivan Ignatyev | |
Leaflet Navigation Toolbar |
Leaflet control for simple back, forward and home navigation. |
Demo | David C |
Leaflet.RestoreView |
Stores and restores map view using localStorage. |
Demo | Mathieu Leplatre |
Leaflet.ShowAll |
A control that can show a predefined extent while saving the current one so it can be jumped back to. |
Demo | Mor Yariv |
Leaflet.viewcenter |
A simple control that adds a button to change view and zoom to predefined values in options. |
Demo | Dariusz Pawlak |
Leaflet.zoomhome |
Zoom control with a home button for resetting the view. |
Demo | Florian Brucker |
leaflet-hash |
Plugin for persisting map state and browsing history through the URL hash. |
Demo | Michael Lawrence Evans |
Leaflet-History |
Track history of map movements and zoom locations similar to a browser. |
Demo | Chris Scott |
leaflet-view-meta |
Plugin control that displays and persists map view meta-data, center and boundary coordinates to URL for precise sharing and view reconstruction. |
Demo | rwev |
leaflet-zoom-min |
Adds a button to the zoom control that allows you to zoom to the map minimum zoom level in a single click. |
Alan Shaw |
Fullscreen controls
Allows display of the map in full-screen mode.
Plugin | Description | Demo | Maintainer |
---|---|---|---|
leaflet.fullscreen |
Another fullscreen button control but for modern browsers, using HTML Fullscreen API. |
Demo | Bruno B |
Leaflet.fullscreen |
A fullscreen button control using the Fullscreen API. |
Demo | jfirebaugh |
leaflet.zoomfs |
A fullscreen button control. |
Eli Dupuis |
Minimaps & synced maps
Display two maps at once. One of them might be a different size and zoom level, usable as a minimap to aid with navigation.
Plugin | Description | Demo | Maintainer |
---|---|---|---|
leaflet.WorldMiniMap |
A small minimap showing the map-view on a world-mini-map to aid navigation. |
Demo | M. Friedl |
Leaflet.GlobeMiniMap |
Simple minimap control that places a 3D Globe in the corner of your map, centered on the same location as the main map. |
Demo | Chris Whong |
Leaflet.layerscontrol-minimap |
Extends the default Leaflet layers control with synced minimaps. |
Jieter | |
Leaflet.MagnifyingGlass |
Allows you to display a small portion of the map at another zoom level, either at a fixed position or linked to the mouse movement, for a magnifying glass effect. |
Benjamin Becquet | |
Leaflet.MiniMap |
A small minimap showing the map at a different scale to aid navigation. |
Demo | Robert Nordan |
Leaflet.Sync |
Synchronized view of two maps. |
Demo | Bjørn Sandvik |
leaflet-clonelayer |
Clone Leaflet layers to allow reuse across different maps in the same runtime. |
Jieter |
Measurement
Allow the user to measure distances or areas.
Plugin | Description | Demo | Maintainer |
---|---|---|---|
Leaflet.LinearMeasurement |
Leaflet Linear Measurement plugin that creates polylines with incremental measures along the path. |
Demo | New Light Technologies |
Leaflet Measure Path |
Show measurements on paths; polylines, polygons and circles currently supported. |
Demo | Per Liedman |
Leaflet.MeasurePolygon |
MeasurePolygon allows you to calculate the area and perimeter of a polygon when drawing, very visible and didactics. |
Demo | Erick S. Escalante Olano |
Leaflet.MeasureAreaControl |
Control for measuring element’s area. |
Demo | Ondrej Zvara |
Leaflet.MeasureControl |
A simple tool to measure distances on maps (relies on Leaflet.Draw). |
Demo | Makina Corpus |
Leaflet.nauticscale |
Display a Nauticscale on Leaflet maps |
Johannes Rudolph | |
Leaflet.PolylineMeasure |
Measure great-circle distances of simple lines as well as of complex polylines. |
Demo | PPete |
Leaflet.QgsMeasure |
Leaflet control to measure segment distances on the map like Qgis Ruler. |
Demo | Gabriel Russo |
Leaflet.ScaleFactor |
Display a Scale Factor (e.g. 1:50,000) for Leaflet maps. |
Demo | Marc Chasse |
leaflet-graphicscale |
Configurable and animated graphic scale control. |
Demo | Kalisio contributors, Erik Escoffier |
leaflet-measure |
Coordinate, linear, and area measure control for Leaflet maps |
LJA GIS | |
leaflet-reticle |
Leaflet control adding a centering reticle consisting of independently calculated latitude and longitude scales. |
Demo | rwev |
leaflet-ruler |
A simple leaflet plugin to measure true bearing and distance between clicked points. |
Demo | Goker Tanrisever |
Mouse coordinates
Show the geographical coordinates under the mouse cursor in different ways.
Plugin | Description | Demo | Maintainer |
---|---|---|---|
Leaflet Coordinates Control |
Captures mouseclick and displays its coordinates with easy way to copy them. |
Demo | Michal Zimmermann |
Leaflet.Coordinates |
A simple Leaflet plugin viewing the mouse LatLng-coordinates. Also views a marker with coordinate popup on userinput. |
Demo | Felix Bache |
Leaflet.CoordProjection |
Shows coordinates on mouse move and displays it based on given projection. |
Demo | Edi Hasaj |
Leaflet Copy Coordinates Control |
Works with Leaflet to capture mouseclicks on a map and display the associated coordinates with an easy way to copy them. (Derived from original work by zimmicz. Forked mainly to provide npm functionality.) |
Demo | Chaim Krause |
Leaflet Location Picker |
Simple location picker with mini Leaflet map. |
Demo | Stefano Cudini |
Leaflet.MapCenterCoord |
A Leaflet control to display the coordinates of the map center, especially useful on touch/mobile devices. |
Demo | Xisco Guaita |
Leaflet.Mapcodes |
Displays the Mapcode of the mouse pointer on mouse move. |
Demo | Martin Atukunda |
Leaflet.mouseCoordinates |
Displays the mouse coordinate in a box. Multiple formats are possible: GPS, UTM, UTMREF / MGRS, QTH |
Johannes Rudolph | |
Leaflet.MousePosition.ts |
A fully custmizable coordinate viewer written in TypeScript. You can change how this plugin looks by creating a custom component with JSX. |
Demo | Yuuki Toriyama |
Leaflet.MousePosition |
A simple MousePosition control that displays geographic coordinates of the mouse pointer, as it is moved about the map |
Ardhi Lukianto | |
Leaflet.NACCoordinates |
Displays NAC coordinate of the mouse pointer on mouse move. |
Mahmood Dehghan |
Events
These plugins extend Leaflet event handling.
Plugin | Description | Demo | Maintainer |
---|---|---|---|
L.DraggableEnhancer |
Modify the default L.Draggable handler (responsible for map panning, …) to make it work properly if one of the map container’s parents has predefined handlers like “event.stopPropagation()’ attached to a “mousemove” event for example. |
Vincent Dechandon | |
L.Sleep |
Avoid unwanted scroll capturing. |
Demo | atstp |
L.Spotlight |
Dynamically highlight features near the mouse cursor with a customizable shape |
Isaac Boates | |
Leaflet.AlmostOver |
Trigger mouse events when cursor is “almost” over a layer. |
Demo | Mathieu Leplatre |
Leaflet.ClickTolerance |
This plugin allows you to increase the click tolerance of canvas powered layers, making it possible to increase the clickable area of vector layers beyond their visible extent. Useful when your features are difficult to click otherwise. |
Geoloep | |
Leaflet.ControlledBounds |
Inspired by Leaflet-active-area, automatically detects the largest area of the map not covered by any map controls and applies setView, fitBounds, setZoom, getBounds to that area. |
Iván Sánchez Ortega | |
Leaflet.Freezy |
Avoid unwanted scroll capture using hover-to-activate or click-to-activate. |
Demo | Martin Rubli |
Leaflet.GestureHandling |
Brings the basic functionality of Google Maps Gesture Handling into Leaflet. Prevents users from getting trapped on the map when scrolling a long page. |
Demo | Andy Marquis |
Leaflet.OverIntent |
Adds a new event |
Demo | Mathieu Leplatre |
Leaflet Touch Helper |
Makes it easy to touch vector overlays with thick fingers on a small display by adding a transparent, larger touch surface |
Demo | Per Liedman |
Leaflet.VisualClick |
Adds visual feedback when user clicks/taps the map. Useful when further action is delayed by server requests, or implementation of Leaflet.singleclick. Only tested with Leaflet 1.0.0-beta1. |
Demo | Dag Jomar Mersland |
Leaflet-active-area |
This plugin allows you to use a smaller portion of the map as an active area. All positioning methods (setView, fitBounds, setZoom) will be applied on this portion instead of the all map. |
Demo | Mappy |
singleclick |
Extend |
Demo | Iván Sánchez Ortega |
User interface
Buttons, sliders, toolbars, sidebars, and panels.
Plugin | Description | Demo | Maintainer |
---|---|---|---|
leaflet-multicontrol |
Leaflet plugin to implements layers control with multiple functionality such as opacity, color, bringToFront, bringToBack, zoomToLayer, delete and legend. |
Demo | Juan Camilo Clavijo Sandoval |
L.cascadeButtons |
A leaflet plugin to create cascade buttons. |
Demo | clavijojuan |
L.Credits |
A simple, attractive, interactive control to put your logo and link in the corner of your map. |
Demo | Greg Allensworth |
L.EasyButton |
In one line, add a Font Awesome control button with attached click events. |
Demo | atstp |
Leaflet.BootstrapDropdowns |
A Leaflet plugin to show bootstrap dropdowns. |
Demo | mfhsieh |
Leaflet.BootstrapZoom |
Overrides default zoom control buttons with Twitter Bootstrap styled ones |
Demo | Alexey Gusev |
Leaflet.CondensedAttribution |
An attribution plugin that makes long attributes visible on hover |
Demo | Targomo GmbH |
Leaflet.contextmenu |
A context menu for Leaflet. |
Demo | Adam Ratcliffe |
Leaflet.Control.Custom |
Fully customizable Leaflet control panel with HTML element. |
Demo | Yiğit Yüce |
Leaflet.Control.Resizer |
Control to resize your map on the right or bottom side. |
Demo | Javier Jimenez Shaw |
Leaflet.Control.Select |
Customisable menu-style control. |
Demo | Adam Mertel |
Leaflet.CoordinatedImagePreview |
Displays coordinated images in map bounds. |
Demo | Yunus Emre Özkaya |
Leaflet.CountrySelect |
Control with menu of all countries, and an event listener that returns the selected country as a GeoJSON feature. |
Demo | Anika Halota |
Leaflet.Dialog |
A simple resizable, movable, customizable dialog box. |
Demo | NBT Solutions |
Leaflet.GeojsonLayerSwitcher |
Allows to navigate between GeoJSON layers, select some, and return selection. |
Demo | Easy-Mountain |
Leaflet.HtmlLegend |
A simple Leaflet plugin for creating legends using HTML elements. |
Demo | Kaveh Karimi |
Leaflet.Legend |
Display legend symbols and toggle overlays. |
Demo | JJ Jin |
Leaflet.Messagebox |
Display a temporary text message on a map. |
Demo | Martijn Grendelman |
Leaflet.Notifications |
Spawn toast notifications inside your map |
Demo | Manuel Richter |
Leaflet ResizableControl |
A Leaflet plugin to add a resizable and scrollable control to the map. |
Demo | David Albrecht |
leaflet-sidepanel |
Sidepanel with tabs. Keep it short and check out the plugin guide. |
Demo | Maxwell Ilai |
Leaflet.Signposts |
Guides users to points outside the current map view with directional arrows and a count of points in each given direction. |
Demo | William Low |
Leaflet.SlideMenu |
A simple slide menu for Leaflet. |
Demo | Masashi Takeshita |
Leaflet.Slider |
Adds a |
Demo | EPP |
Leaflet.Spin |
Shows a nice spinner on the map using Spin.js, for asynchronous data load, like with Leaflet Ajax. |
Demo | Mathieu Leplatre |
Leaflet.TileLegend |
Create illustrated and interactive legends for your background layers. |
Demo | Yohan Boniface |
Leaflet.toolbar |
Flexible, extensible toolbars for Leaflet maps. |
Demo | Justin Manley |
Leaflet Weather |
A Leaflet plugin for adding a weather widget to the map using OpenWeatherMap API. |
Demo | Osk |
leaflet-blurred-location |
A Leaflet-based interface for selecting a “blurred” or low-resolution location, to preserve privacy. |
Demo | Public Lab |
leaflet-blurred-location-display |
Cleverly displays “blurred” locations using color-coded heatmap and color-coded markers while fetching data from remote API. |
Demo | Public Lab |
leaflet-control-window |
Creates modal/modeless, draggable, responsive, customisable window in your map. |
Demo | mapshakers |
leaflet-sidebar |
A responsive sidebar plugin. |
Demo | Tobias Bieniek |
leaflet-sidebar-v2 |
A responsive, tabbed sidebar with HTML & JS API. Compatible with old (0.7) and current leaflet. |
Demo | Norwin Roosen |
sidebar-v2 |
Another responsive sidebar plugin. This time with tabs! |
Demo | Tobias Bieniek |
Print/export
Print or export your map.
Plugin | Description | Demo | Maintainer |
---|---|---|---|
Leaflet.BigImage |
Allows users to download an image with a scaled-up version of the visible map. |
Demo | Vasyl Pasichnyk (Oswald) |
leaflet.browser.print |
Allows users to print full page map directly from the browser. |
Demo | Igor Vladyka |
Leaflet.print |
Implements the Mapfish print protocol allowing a Leaflet map to be printed using either the Mapfish or GeoServer print module. |
Adam Ratcliffe | |
Leaflet-easyPrint |
A simple plugin which adds an icon to print your Leaflet map. |
Demo | Rowan Winsemius |
Leaflet-image |
Export images out of Leaflet maps without a server component, by using Canvas and CORS. |
Demo | Tom MacWright |
leaflet-route-print |
Automatic PDF printing of routes (i.e. polylines) with custom scale, paper size and margin by covering the route with a sequence of identical rectangles. |
Demo | Herman Sletmoen |
Geolocation
Plugins that extend Leaflet’s geolocation capabilities.
Plugin | Description | Demo | Maintainer |
---|---|---|---|
Geolet |
A simple but highly customizable geolocation plugin for Leaflet |
Demo | Ruben Holthuijsen |
L.LocationShare |
Allow users to send and receive a marker with a message. |
Demo | atstp |
Leaflet.AccuratePosition |
Leaflet.AccuratePosition aims to provide a desired device location accuracy. |
Demo | Michael Schmidt-Voigt |
Leaflet Control Compass |
A leaflet control plugin to build a simple rotating compass |
Demo | Stefano Cudini |
Leaflet.Locate |
A customizable locate control. |
Demo | Dominik Moritz |
Leaflet.SimpleLocate |
A Leaflet plugin displaying device location and orientation on the map, with orientation adjusted according to screen rotation. |
Demo | mfhsieh |
Miscellaneous
Geoprocessing
The following plugins perform several sorts of geoprocessing (mathematical and topological operations on points, lines and polygons).
Plugin | Description | Demo | Maintainer |
---|---|---|---|
arc.js |
A JS library for drawing great circle routes that can be used with Leaflet. |
Dane Springmeyer | |
Greiner-Hormann |
Greiner-Hormann algorithm for polygon clipping and binary operations, adapted for use with Leaflet. |
Demo | Alexander Milevski |
Leaflet.Antimeridian |
A plugin to allow polygons and polylines to naturally draw across the Antimeridian (or the International Date Line) instead of always wrapping across the Greenwich meridian. |
Demo | Brianna Landon |
Leaflet.buffer |
Enables buffering of shapes drawn with Leaflet.draw. |
Jonathan Skeate | |
Leaflet.GeometryUtil |
A collection of utilities for Leaflet geometries (linear referencing, etc.) |
Benjamin Becquet | |
Leaflet.LayerIndex |
An efficient spatial index for features and layers, using RTree.js. |
Demo | Mathieu Leplatre |
Leaflet.UTM |
A simple way to convert L.LatLng into UTM (WGS84) and vice versa. UTM string format easily configurable. It does not depend on any other plugin or 3rd party. |
Demo | Javier Jimenez Shaw |
Leaflet-pip |
Simple point in polygon calculation using point-in-polygon. |
Demo | Tom MacWright |
leaflet-spatial-prefix-tree |
Leaflet plugin for visualizing spatial prefix trees, quadtree and geohash. |
Demo | Mapzen |
Proj4Leaflet |
Proj4js integration plugin, allowing you to use all kinds of weird projections in Leaflet. |
Demo | Kartena |
Routing
The following plugins use external services to calculate driving or walking routes.
Plugin | Description | Demo | Maintainer |
---|---|---|---|
Leaflet.Reachability |
Show areas of reachability based on time or distance for different modes of travel using the openrouteservice isochrones API. |
Demo | Trafford Data Lab |
Leaflet RouteBoxer |
This is a Leaflet implementation of the RouteBoxer Class from Google. The Leaflet RouteBoxer class generates a set of L.LatLngBounds objects that are guaranteed to cover every point within a specified distance of a path. |
Demo | Stephan Georg |
Leaflet RouteToAddress |
Control for route search from a custom address to a fixed address.The Plugin integrates a simple geocoder that uses OpenstreetMap Nominatim to locate places by address. Ideal for the description of the directions “Find your way to us” on a website. Uses OSRM by default, but also supportsMapbox Directions API. |
Demo | Astrid Günther |
Leaflet.Routing.Amap |
Control for route search using AMap(高德地图) as a backend. Supports the Chinese BD09 and GCJ02 coordinate systems, colourful lines, and turn-by-turn popups. |
Demo | Jack Good |
Leaflet Routing Machine |
Control for route search with via points, displaying itinerary and alternative routes. Uses OSRM by default, but also supports GraphHopper, Mapbox Directions API and more. |
Demo | Per Liedman |
Leaflet.Routing |
Leaflet controller and interface for routing paths between waypoints using any user provided routing service. |
Norwegian Trekking Association | |
leaflet.TravelNotes |
Standalone app with editable markers and routing engine for leaflet. The routing engine have plugins for Mapbox, GraphHopper and OSRM and can be used for car, bike or pedestrian route. |
Demo | Christian Guyette |
Leaflet TripGo routing |
The TripGo mobility platform lets you create apps providing seamless and personalised door-to-door trips using any public, private or commercial mode of transport. TripGo Leaflet’s plugin motivation is to provide an easy way to include its functionality in an external platform. |
Demo | SkedGo |
Targomo JS |
Targomo visualizes the area which is reachable from a set of starting points in a given time and gives detailed routing information (walk, bike, car and public transportation) to targets. |
Demo | Targomo GmbH |
Geocoding
External services that transform an address or the name of a place into latitude and longitude (or vice versa).
Plugin | Description | Demo | Maintainer |
---|---|---|---|
Esri Leaflet Geocoder |
A geocoding control with suggestions powered by the ArcGIS Online geocoder. |
Demo | Patrick Arlt |
Geocoding from MapTiler |
A geocoding and reverse geocoding plugin for Leaflet utilizing the MapTiler Geocoding API, which includes identification of states, cities, streets, down to the addresses and POIs level. It supports search results in various languages, per-country limiting, fuzzy matching, autocomplete, etc. |
Demo | M. Ždila | MapTiler |
L.Highlight |
A plugin that adds the ability to quick highlighting streets and areas using Nominatim. |
Demo | Maciej Kowalski |
Leaflet.Autocomplete |
Leaflet.Autocomplete is to expand the autosugestion plugin with the ability to geocode and show data on the map in the way you think you need. The DEMO is based on the use of OpenstreetMap Nominatim to locate places by address. Accessible, with full support for ARIA attributes and keyboard interactions. |
Demo | Grzegorz Tomicki |
Leaflet Control Bing Geocoder |
A simple geocoder control that uses Bing to locate places. You may be also interested in its fork Leaflet Control Geocoder. |
Demo | Samuel Piquet |
Leaflet Control Geocoder |
A clean and extensible control for both geocoding and reverse geocoding. Builtin support for Nominatim, Bing, MapQuest, Mapbox, What3Words, Google and Photon. Easy to extend to other providers. |
Per Liedman | |
Leaflet Control OSM Geocoder |
A simple geocoder that uses OpenstreetMap Nominatim to locate places by address. |
Demo | Karsten Hinz |
Leaflet Geoapify Address Search |
Adds an Address Autocomplete field to the map, powered by Geoapify. |
Demo | Geoapify |
Leaflet GeoIP Locator |
A simple plugin that allows finding the approximate location of IP addresses and map centering on said location. |
Jakub Dostal | |
Leaflet.Geonames |
A lightweight geocoding control powered by GeoNames. |
Demo | Brendan Ward |
Leaflet GeoSearch |
Small geocoding plugin that brings address searching/lookup (aka geosearching) to Leaflet. |
Demo | Stephan Meijer |
Leaflet LocationIQ Geocoder |
A plugin that adds the ability to search (geocode) a Leaflet-powered map using LocationIQ. |
Demo | LocationIQ |
Leaflet.OpenCage.Geocoding |
A plugin plugin that uses OpenCage’s geocoding API for forward or reverse geocoding. |
Demo | OpenCage |
Leaflet.OpenCage.Geosearch |
A plugin that uses OpenCage’s geosearch for location autosuggest. |
Demo | OpenCage |
Leaflet-search |
A Search Control with autocomplete/suggest capabilities. Supports Nominatim, GeoNames, Here, TomTom, and Kadaster (Netherlands). |
Demo | Sjaak Priester |
Pelias Leaflet Plugin |
A geocoding control using Geocode Earth or any hosted service powered by the Pelias Geocoder API. |
Demo | Lou Huang |
Plugin collections
Sets of plugins that span several categories.
Plugin developers: please keep future plugins in individual repositories.
Plugin | Description | Demo | Maintainer |
---|---|---|---|
MapBBCode-related leaflet plugins |
Seven plugins for various features, independent of the MapBBCode library. From circular and popup icons to buttons, layer switcher, better search and attribution. |
Ilya Zverev | |
Plugins by Pavel Shramov |
A set of plugins for: GPX, KML, TOPOJSON layers; Bing tile layer; Yandex layers (implemented with their APIs), and permalink control. |
Pavel Shramov | |
Spectrum4Leaflet |
Tools for using Spectrum Spatial Server services with leaflet. This plugin supports: map service, tile service, feature service. It has layers, legend and feature controls. |
SVoyt |
Integration
Frameworks & build systems
Ease your development integrating Leaflet into a development framework or automating some of the javascript/CSS work for complex applications.
Plugin | Description | Demo | Maintainer |
---|---|---|---|
Angular Leaflet directive |
Integrate Leaflet in applications made with the AngularJS web framework. |
Demo | David Rubert |
Django Leaflet |
Use Leaflet in your Django projects. Includes admin integration, form widget, template tags, and much more! |
Makina Corpus | |
ember-leaflet |
Easy and declarative mapping for Ember.js using Leaflet. |
Miguel Andrade | |
gwty-leaflet |
A Java/GWT JsInterop wrapper for Leaflet. It allows using Leaflet in Java the same way as from a javascript script. |
Zakaria Amine | |
JSF2Leaf |
A JavaServer Faces wrapper for Leaflet. |
Leonardo Ciocari | |
L.Control.BootstrapModal |
Trigger a Bootstrap modal using an on-map control. |
Greg Allensworth | |
L.Control.jQueryDialog |
Trigger a jQuery UI dialog/modal using an on-map control. |
Demo | Greg Allensworth |
Leaflet.a11y |
An accessibility and localization/translation plugin for Leaflet. |
Demo | Nick Freear |
Leaflet Control Angular |
Insert and use Angularized HTML code in your Leaflet map as a Leaflet control. |
Grant Harris | |
Leaflet.CSS |
Add the main Leaflet CSS files (or any css) from within JavaScript, be gone conditional comments. |
Demo | Calvin Metcalf |
Leaflet.i18n |
Internationalization for Leaflet plugins. |
Yohan Boniface | |
Leaflet.jsf |
Comprehensive Java Server Faces(JSF) Component/Wrapper for Leaflet. |
Terra SI LLC. | |
Leaflet LayerConfig |
Provide a json file or service response with a configuration of layers and markers to automatically set up a Leaflet client. |
Alexander Nossum | |
Leaflet Map Builder |
It populates a leaflet map from a configuration object, can also creates zoom, layers, attribution draw controls. |
Demo | Gherardo Varando |
Leaflet map component |
Integrate Leaflet in applications made with the Polymer 0.5 web framework. |
Demo | Prateek Saxena |
Leaflet Popup Angular |
Use AngularJS in your Leaflet popups. Extends the built-in L.popup. |
Demo | Grant Harris |
Leaflet.translate |
A localization/ translation plugin for Leaflet core and plugins. The plugin contains both translations/ language pack files, and code to load them. |
Demo | Nick Freear |
Leaflet Yeoman Generator |
Yeoman generator that scaffolds out a basic Leaflet map application. |
Demo | Moritz Klack |
Leaflet ZoomLevel CSS Class |
Add zoom level css class to map element for easy style updates based on zoom levels |
Dag Jomar Mersland | |
leaflet-defaulticon-compatibility |
Retrieve all Leaflet Default Icon options from CSS, in particular all icon images URL’s, to improve compatibility with bundlers and frameworks that modify URL’s in CSS. In particular for webpack (with style-, css-, file- and url-loader’s), Rails Asset Pipeline and Django pipeline. Should solve all use cases linked to issue Leaflet/Leaflet #4968. Demo with webpack (and without this plugin). |
Demo | ghybs |
leaflet-geoserver-request |
Basic geoserver requests in leaflet. Currently supports wms, wfs, legend, wmsImage request on the leaflet. |
Demo | Iamtekson |
leaflet-map |
Integrate Leaflet in applications made with the Polymer >= 1.0 web component framework. |
Demo | Hendrik Brummermann |
leaflet-rails gem |
This gem provides the leaflet.js map display library for your Rails 5 application. leaflet-rails on RubyGems |
Akshay Joshi | |
meteor-leaflet |
Provides a Meteor package to quickly build real-time cross-platform map apps. |
Bevan Hunt | |
ngx-leaflet |
Leaflet components and extensions for Angular.io. |
Asymmetrik, Ltd. | |
react-leaflet |
React components for Leaflet maps. |
Demo | Paul Le Cam |
Tiny Leaflet Directive |
Tiny LeafletJS map directive for your AngularJS apps. |
Martin Tesař | |
V-Leaflet |
Use Leaflet as a component for the Vaadin Java/HTML framework. |
Matti Tahvonen | |
Vue2Leaflet |
Vue2Leaflet is a JavaScript library for the Vue.js framework that wraps Leaflet, making it easy to create reactive maps. |
Demo | Mickaël KoRiGaN |
YAGA leaflet-ng2 |
Granular integration into Angular2/4. |
YAGA Development Team |
3rd party integration
The following plugins integrate Leaflet into third party services or websites.
Plugin | Description | Demo | Maintainer |
---|---|---|---|
ABP Usermap MyBB |
A plugin for MyBB creating a map of users based on Open Street Map and Leaflet, with customisable popup and markers |
CrazyCat | |
HA Map Card |
A Home Assistant map-card based on Leaflet, it contains more advanced features then the stock map-card (also based on Leaflet). |
Nathan Bijnens | |
Joomla! (3.x) |
|
Astrid Günther | |
Leaflet Easymap |
Include a map in your HTML page without one line of programming. A data-driven Javascript module. |
Demo | Klaus Stein |
Leaflet.EditInOSM |
Add a control with links to open the current map view on main OSM editors. |
Demo | Yohan Boniface |
Leaflet.Facebook |
Simple plugin for adding Facebook like button as a control. |
Marcin Wasilewski | |
Leaflet for Drupal |
A Drupal (7.x and 8.x) module to integrate Leaflet maps in your Drupal site. Contains a field formatter to show a map for fields containing geospatial data, Views integration to plot data on a map, and a lightweight and easy to use API. Currently used by over 10.000 sites. |
Marzee Labs | |
Map Block Leaflet |
A Block for the New WordPress Block Editor based on Leaflet, it allow add and custom maps from a visual interface. |
Jesús Olazagoitia | |
Maps Marker Pro |
A WordPress plugin / comprehensive geo-content management system that allows users to pin, organize and share their favorite places and tracks as well as elevation charts. Also integrates several leaflet plugins like leaflet-bing-layer, leaflet-edgebuffer, leaflet-fullscreen, leaflet-gesture-handling, leaflet-minimap, leaflet.gridlayer.googlemutant, leaflet.locatecontrol, leaflet.markercluster and leaflet-geoman-free. |
Demo | Robert Harm |
Maptiks |
Analytics platform for web maps. Track map activities, layer load times, marker clicks, and more! |
Sparkgeo | |
WordPress Leaflet Map |
Interactive and flexible shortcode to create multiple maps in posts and pages, and to add multiple markers on those maps. |
Benjamin J DeLong | |
Locations and Areas |
WordPress plugin to showcase widely distributed locations on a single map with additional navigation tabs for regions. The map is based on Leaflet JS and offers you several free map styles. Gutenberg Block included. |
100plugins | |
WP MapIt |
Easy to use, WordPress Map plugin based on Open Street Map and Leaflet with custom markers images, descriptions and links. |
Chandni Patel | |
Open User Map |
WordPress plugin to let your visitors add locations directly from the frontend - without registration. They drop a marker on the map and provide some location details. After submit the location proposal will be “pending” and wait for your review approval to get published. |
Demo | 100plugins |
WP-Trip-Summary |
A WordPress trip summary plugin to help travel bloggers manage and display structured information about their train rides and biking or hiking trips. |
Demo | Alexandru Boia |
Yii2-locator |
Leaflet widget for Yii2 PHP Framework. Geographical data stored in an ActiveRecord can be displayed and updated on interactive maps. |
Demo | Sjaak Priester |
Develop your own
Leaflet keeps it simple. If you can think of a feature that is not required by all Leaflet users, and you can write the JavaScript code in a reusable way, you’ve got yourself a Leaflet plugin already.
There are no hard requirements on how to create your own plugin, but all developers are encouraged to read the recommendations in the plugin guide.
Once your plugin is ready, you can submit it: just send a pull request with a new plugin file in /docs/_plugins/to our GitHub repository.