2012-07-18 05:41:26 +08:00
---
layout: default
title: Plugins
---
2012-07-24 06:41:55 +08:00
## Notable Leaflet Plugins
2012-07-19 00:12:01 +08:00
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 lots of nice plugins to choose from.
2012-07-24 06:41:55 +08:00
---
2012-07-19 06:55:21 +08:00
2012-07-24 06:41:55 +08:00
### Layers and Overlays
2012-07-19 00:12:01 +08:00
< table class = "plugins" >
< tr >
< th > Plugin< / th >
< th > Description< / th >
< th > Maintainer< / th >
< / tr >
< tr >
< td >
2013-01-12 05:28:43 +08:00
< a href = "https://github.com/Leaflet/Leaflet.markercluster" > Leaflet.markercluster< / a >
2012-07-19 00:12:01 +08:00
< / td > < td >
2012-07-24 16:34:54 +08:00
Beautiful, sophisticated, high performance marker clustering solution with smooth animations and lots of great features. < em > Recommended!< / em >
2012-07-19 00:12:01 +08:00
< / td > < td >
2012-07-19 06:55:21 +08:00
< a href = "https://github.com/danzel" > Dave Leaver< / a >
< / td >
< / tr >
< tr >
< td >
2013-01-22 08:55:40 +08:00
< a href = "https://github.com/Leaflet/Leaflet.label" > Leaflet.label< / a >
2012-07-19 06:55:21 +08:00
< / td > < td >
2012-09-25 07:53:11 +08:00
Adds text labels to map markers and vector layers.
2012-07-19 06:55:21 +08:00
< / td > < td >
< a href = "https://github.com/jacobtoye" > Jacob Toye< / a >
< / td >
< / tr >
< tr >
< td >
2012-07-24 06:41:55 +08:00
< a href = "http://dynmeth.github.com/RaphaelLayer/" > RaphaelLayer< / a >
2012-07-19 06:55:21 +08:00
< / td > < td >
2012-07-24 06:41:55 +08:00
Allows you to use < a href = "http://raphaeljs.com/" > Raphael< / a > as a layer on a Leaflet map for advanced animations and visualizations.
2012-07-19 06:55:21 +08:00
< / td > < td >
2012-07-24 06:41:55 +08:00
< a href = "https://github.com/dynmeth" > Dynamic Methods< / a >
2012-07-19 00:12:01 +08:00
< / td >
< / tr >
2012-07-19 06:55:21 +08:00
< tr >
< td >
2012-07-24 06:41:55 +08:00
< a href = "https://github.com/jawj/OverlappingMarkerSpiderfier-Leaflet" > Overlapping Marker Spiderfier< / a >
2012-07-19 06:55:21 +08:00
< / td > < td >
2012-07-24 06:41:55 +08:00
Deals with overlapping markers in a Google Earth-inspired way by gracefully springing them apart on click.
2012-07-19 06:55:21 +08:00
< / td > < td >
2012-07-24 06:41:55 +08:00
< a href = "http://mackerron.com" > George MacKerron< / a >
2012-07-19 06:55:21 +08:00
< / td >
< / tr >
2012-11-09 22:43:33 +08:00
< tr >
2012-08-16 23:31:55 +08:00
< td >
2012-08-17 00:06:58 +08:00
< a href = "https://github.com/aparshin/leaflet-boundary-canvas" > TileLayer.BoundaryCanvas< / a >
2012-08-16 23:31:55 +08:00
< / td > < td >
2012-08-17 00:06:58 +08:00
Allows you to draw tile layers with arbitrary polygonal boundary. HTML5 Canvas is used for rendering.
2012-08-16 23:31:55 +08:00
< / td > < td >
< a href = "https://github.com/aparshin" > Alexander Parshin< / a >
< / td >
< / tr >
2012-11-12 00:26:09 +08:00
< tr >
< td >
< a href = "https://github.com/domoritz/leaflet-maskcanvas" > MaskCanvas< / a >
< / td > < td >
Canvas layer that can be used to visualize coverage.
< / td > < td >
< a href = "https://github.com/domoritz" > Dominik Moritz< / a >
< / td >
< / tr >
2012-11-09 22:43:33 +08:00
< tr >
2012-07-30 07:50:44 +08:00
< td >
2012-08-17 00:06:58 +08:00
< a href = "https://github.com/sunng87/heatcanvas" > HeatCanvas< / a >
2012-07-30 07:50:44 +08:00
< / td > < td >
2012-08-17 00:06:58 +08:00
Simple heatmap api based on HTML5 canvas.
2012-07-30 07:50:44 +08:00
< / td > < td >
2012-08-16 23:31:55 +08:00
< a href = "https://github.com/sunng87" > Sun Ning< / a >
2012-07-30 07:50:44 +08:00
< / td >
< / tr >
2013-02-22 22:11:56 +08:00
< tr >
< td >
< a href = "http://www.patrick-wied.at/static/heatmapjs/" > heatmap.js< / a >
< / td > < td >
JavaScript Library for HTML5 canvas based heatmaps
< / td > < td >
< a href = "https://github.com/pa7" > Patrick Wied< / a >
< / td >
< / tr >
2012-11-30 14:54:45 +08:00
< tr >
< td >
< a href = "http://moonlite.github.com/Leaflet.MultiTileLayer/" > Leaflet.MultiTileLayer< / a >
< / td > < td >
Allows to compose a TileLayer from several tile sources. Each source is active only on a defined set of zoomlevels.
< / td > < td >
< a href = "https://github.com/moonlite" > Mattias Bengtsson< / a >
2012-07-30 07:50:44 +08:00
< / td >
< / tr >
2012-11-09 22:43:33 +08:00
< tr >
< td >
< a href = "https://github.com/openplans/Leaflet.AnimatedMarker" > Leaflet.AnimatedMarker< / a >
< / td > < td >
Animate a marker along a polyline.
< / td > < td >
< a href = "https://github.com/atogle" > Aaron Ogle< / a >
< / td >
< / tr >
2012-12-01 01:02:14 +08:00
< tr >
< td >
< a href = "https://github.com/jieter/Leaflet-semicircle" > Leaflet-semicircle< / a >
< / td > < td >
2013-01-16 23:17:03 +08:00
Adds functionality to < code > L.Circle< / code > to draw semicircles.
2012-12-01 01:02:14 +08:00
< / td > < td >
< a href = "https://github.com/jieter" > Jieter< / a >
< / td >
< / tr >
2013-01-01 05:22:38 +08:00
< tr >
< td >
< a href = "https://github.com/ismyrnow/Leaflet.functionaltilelayer" > Leaflet.FunctionalTileLayer< / a >
< / td > < td >
Allows you to define tile layer URLs using a function, with support for jQuery deferreds.
< / td > < td >
< a href = "https://github.com/ismyrnow" > Ishmael Smyrnow< / a >
< / td >
< / tr >
2013-01-03 18:01:43 +08:00
< tr >
< td >
< a href = "https://github.com/joker-x/Leaflet.geoCSV" > Leaflet.geoCSV< / a >
< / td > < td >
Leaflet plugin for loading a CSV file as geoJSON layer.
< / td > < td >
< a href = "https://github.com/joker-x" > Iván Eixarch< / a >
< / td >
< / tr >
2013-01-15 06:46:40 +08:00
< tr >
< td >
< a href = "https://github.com/bbecquet/Leaflet.PolylineDecorator" > Leaflet.PolylineDecorator< / a >
< / td > < td >
2013-01-15 06:53:07 +08:00
Allows you to draw patterns (like dashes, arrows or evenly spaced Markers) along Polylines or coordinate paths.
2013-01-15 06:46:40 +08:00
< / td > < td >
< a href = "https://github.com/bbecquet" > Benjamin Becquet< / a >
< / td >
< / tr >
2013-01-19 09:04:36 +08:00
< tr >
< td >
< a href = "https://github.com/calvinmetcalf/leaflet.sprite" > Leaflet.Sprite< / a >
< / td > < td >
2013-01-19 09:07:21 +08:00
Use sprite based icons in your markers.
2013-01-19 09:04:36 +08:00
< / td > < td >
< a href = "https://github.com/calvinmetcalf" > Calvin Metcalf< / a >
< / td >
< / tr >
2013-02-26 04:22:08 +08:00
< tr >
< td >
< a href = "https://github.com/maximeh/leaflet.bouncemarker" > Leaflet.BounceMarker< / a >
< / td > < td >
Make a marker bounce when you add it to a map.
< / td > < td >
< a href = "https://github.com/maximeh" > Maxime Hadjinlian< / a >
< / td >
< / tr >
2012-07-19 06:55:21 +08:00
< / table >
2012-07-24 06:41:55 +08:00
### Services, Providers and Formats
2012-07-19 06:55:21 +08:00
< table class = "plugins" >
< tr >
< th > Plugin< / th >
< th > Description< / th >
< th > Maintainer< / th >
< / tr >
2012-07-19 00:12:01 +08:00
< tr >
< td >
< a href = "https://github.com/kartena/Proj4Leaflet" > Proj4Leaflet< / a >
< / td > < td >
< a href = "http://trac.osgeo.org/proj4js/" > Proj4js< / a > integration plugin, allowing you to use all kinds of weird projections in Leaflet.
< / td > < td >
< a href = "http://www.kartena.se/" > Kartena< / a >
< / td >
< / tr >
2012-07-19 06:55:21 +08:00
< tr >
< td >
< a href = "https://github.com/shramov/leaflet-plugins" > Plugins by Pavel Shramov< / a >
< / td > < td >
A set of plugins for: GPX, KML layers; Bing tile layer; Google and Yandex layers (implemented with their APIs), Permalink and alternative Scale controls.
< / td > < td >
< a href = "https://github.com/shramov" > Pavel Shramov< / a >
< / td >
< / tr >
< tr >
< td >
< a href = "http://vizzuality.github.com/cartodb-leaflet/" > cartodb-leaflet< / a >
< / td > < td >
Official < a href = "http://cartodb.com/" > CartoDB< / a > plugin for Leaflet.
< / td > < td >
< a href = "http://vizzuality.com/" > Vizzuality< / a >
< / td >
< / tr >
2012-07-19 00:12:01 +08:00
< tr >
< td >
< a href = "http://geojason.info/leaflet-vector-layers/" > Leaflet Vector Layers< / a >
< / td > < td >
2012-07-19 06:55:21 +08:00
Allows to easily create vector layers from a number of geo web services, such as ArcGIS Server, Arc2Earth, GeoIQ, CartoDB and GIS Cloud.
2012-07-19 00:12:01 +08:00
< / td > < td >
< a href = "http://geojason.info" > Jason Sanford< / a >
< / td >
< / tr >
< tr >
< td >
< a href = "https://github.com/perliedman/leaflet-tilejson" > leaflet-tilejson< / a >
< / td > < td >
Adds support for the < a href = "https://github.com/mapbox/TileJSON" > TileJSON< / a > specification to Leaflet.
< / td > < td >
< a href = "https://github.com/perliedman" > Per Liedman< / a > , < a href = "http://www.kartena.se/" > Kartena< / a >
< / td >
< / tr >
< tr >
< td >
2013-02-24 05:46:52 +08:00
< a href = "https://github.com/leaflet-extras/leaflet-providers" > leaflet-providers< / a >
2012-07-19 00:12:01 +08:00
< / td > < td >
2012-07-19 06:55:21 +08:00
Contains configurations for various free tile providers — OSM, OpenCycleMap, MapQuest, Mapbox Streets, Stamen, Esri, etc.
2012-07-19 00:12:01 +08:00
< / td > < td >
< a href = "https://github.com/seelmann" > Stefan Seelmann< / a >
< / td >
< / tr >
2012-07-19 06:55:21 +08:00
< tr >
< td >
< a href = "https://github.com/azgs/azgs-leaflet" > azgs-leaflet< / a >
< / td > < td >
A set of small plugins for Leaflet, including WFS-GeoJSON layer with filtering, a hover control for GeoJSON, and an Esri tile layer.
< / td > < td >
< a href = "https://github.com/azgs" > AZGS< / a >
< / td >
< / tr >
< tr >
< td >
< a href = "https://github.com/sa3m/leaflet-control-bing-geocoder" > Leaflet Control Bing Geocoder< / a >
< / td > < td >
A simple geocoder control that uses Bing to locate places.
< / td > < td >
< a href = "https://github.com/sa3m" > Samuel Piquet< / a >
< / td >
< / tr >
2012-11-02 03:20:32 +08:00
< tr >
< td >
< a href = "https://github.com/jieter/Leaflet.encoded" > Leaflet.encoded< / a >
< / td > < td >
Use encoded polylines in Leaflet.
< / td > < td >
< a href = "https://github.com/jieter" > Jieter< / a >
< / td >
< / tr >
2012-11-25 06:25:39 +08:00
< tr >
< td >
< a href = "https://github.com/calvinmetcalf/leaflet.pouch" > Leaflet.Pouch< / a >
< / td > < td >
Use PouchDB to sync CouchDB data to local storage (indexedDB), to just add couchDB data or as just a less confusing implementation of indexedDB.
< / td > < td >
< a href = "https://github.com/calvinmetcalf/" > Calvin Metcalf< / a >
< / td >
< / tr >
2013-01-16 23:17:03 +08:00
< tr >
< td >
< a href = "https://github.com/calvinmetcalf/leaflet-ajax" > Leaflet Ajax< / a >
< / td > < td >
Add GeoJSON data via ajax or jsonp.
< / td > < td >
< a href = "https://github.com/calvinmetcalf/" > Calvin Metcalf< / a >
< / td >
< / tr >
2013-01-19 00:58:17 +08:00
< tr >
< td >
< a href = "https://github.com/mpetazzoni/leaflet-gpx" > Leaflet GPX< / a >
< / td > < td >
GPX layer, targeted at sporting activities by providing access to information such as distance, moving time, pace, elevation, heart rate, etc.
< / td > < td >
< a href = "https://github.com/mpetazzoni/" > Maxime Petazzoni< / a >
< / td >
< / tr >
2012-07-19 00:12:01 +08:00
< / table >
2012-07-24 06:41:55 +08:00
### Controls and Interaction
2012-07-19 00:12:01 +08:00
2012-07-19 06:55:21 +08:00
< table class = "plugins" >
< tr >
< th > Plugin< / th >
< th > Description< / th >
< th > Maintainer< / th >
< / tr >
< tr >
< td >
2013-01-14 05:04:10 +08:00
< a href = "https://github.com/Leaflet/Leaflet.draw" > Leaflet.draw< / a >
2012-07-19 06:55:21 +08:00
< / td > < td >
2012-07-24 16:34:54 +08:00
Enables drawing features like polylines, polygons, rectangles, circles and markers through a very nice user-friendly interface with icons and hints. < em > Recommended!< / em >
2012-07-19 06:55:21 +08:00
< / td > < td >
< a href = "https://github.com/jacobtoye" > Jacob Toye< / a >
< / td >
< / tr >
2012-11-27 12:05:47 +08:00
< tr >
< td >
< a href = "https://github.com/danzel/Leaflet.utfgrid" > Leaflet.utfgrid< / a >
< / td > < td >
Provides a utfgrid interaction handler for leaflet a very small footprint.
< / td > < td >
< a href = "https://github.com/danzel" > Dave Leaver< / a >
< / td >
< / tr >
2012-07-19 06:55:21 +08:00
< tr >
< td >
< a href = "https://github.com/kartena/Leaflet.EditableHandlers" > Leaflet.EditableHandlers< / a >
< / td > < td >
A set of plugins that includes circle editing, measuring tool, and label for polygon sides.
< / td > < td >
< a href = "http://www.kartena.se/" > Kartena< / a >
< / td >
< / tr >
< tr >
< td >
2012-12-06 17:04:04 +08:00
< a href = "http://kartena.github.com/Leaflet.Pancontrol/" > Leaflet.Pancontrol< / a >
2012-07-19 06:55:21 +08:00
< / td > < td >
A simple panning control.
< / td > < td >
< a href = "http://www.kartena.se/" > Kartena< / a >
< / td >
< / tr >
< tr >
< td >
2012-12-06 17:04:04 +08:00
< a href = "http://kartena.github.com/Leaflet.zoomslider/" > Leaflet.zoomslider< / a >
2012-07-19 06:55:21 +08:00
< / td > < td >
A zoom slider control.
< / td > < td >
< a href = "http://www.kartena.se/" > Kartena< / a >
< / td >
< / tr >
2012-11-04 22:11:27 +08:00
< tr >
< td >
< a href = "https://github.com/domoritz/leaflet-locatecontrol" > Leaflet.Locate< / a >
< / td > < td >
A customizable locate control.
< / td > < td >
2012-11-12 00:26:09 +08:00
< a href = "https://github.com/domoritz" > Dominik Moritz< / a >
2012-11-04 22:11:27 +08:00
< / td >
< / tr >
2012-07-19 06:55:21 +08:00
< tr >
< td >
< a href = "http://elidupuis.github.com/leaflet.zoomfs" > leaflet.zoomfs< / a >
< / td > < td >
A fullscreen button control.
< / td > < td >
< a href = "https://github.com/elidupuis" > Eli Dupuis< / a >
< / td >
< / tr >
< tr >
< td >
< a href = "http://brunob.github.com/leaflet.fullscreen" > leaflet.fullscreen< / a >
< / td > < td >
Another fullscreen button control but for modern browsers, using HTML5 Fullscreen API.
< / td > < td >
< a href = "https://github.com/brunob/" > Bruno B< / a >
< / td >
< / tr >
2013-01-19 10:31:30 +08:00
< tr >
< td >
< a href = "https://github.com/smeijer/L.GeoSearch" > Leaflet GeoSearch< / a >
< / td > < td >
Small plugin that brings address searching/lookup (aka geosearching) to Leaflet.< br / >
Comes with support for Google, Bing, Esri and Openlayers. (easy extendible)
< / td > < td >
< a href = "https://github.com/smeijer" > Stephan Meijer< / a >
< / td >
< / tr >
2012-09-03 01:02:50 +08:00
< tr >
< td >
< a href = "https://github.com/stefanocudini/leaflet-search" > leaflet-search< / a >
< / td > < td >
Simple Leaflet Control for searching markers by attribute.
< / td > < td >
< a href = "https://github.com/stefanocudini/" > Stefano Cudini< / a >
< / td >
< / tr >
2012-10-18 00:11:17 +08:00
< tr >
< td >
2013-01-13 23:48:00 +08:00
< a href = "https://github.com/kajic/leaflet-locationfilter/" > leaflet-locationfilter< / a >
2012-10-18 00:11:17 +08:00
< / td > < td >
A draggable/resizable rectangle for selecting an area on the map.
< / td > < td >
< a href = "https://github.com/kajic" > Robert Kajic< / a >
< / td >
< / tr >
2012-11-14 22:59:04 +08:00
< tr >
< td >
< a href = "https://github.com/Norkart/Leaflet-MiniMap" > Leaflet.MiniMap< / a >
< / td > < td >
A small minimap showing the map at a different scale to aid navigation.
< / td > < td >
< a href = "https://github.com/robpvn" > Robert Nordan< / a >
< / td >
< / tr >
2012-12-12 04:15:56 +08:00
< tr >
< td >
< a href = "http://erictheise.github.com/rrose" > Leaflet.Rrose< / a >
< / td > < td >
2013-01-16 23:17:03 +08:00
A Leaflet Plugin for Edge Cases. For use when you want popups on < em > mouseover< / em > , not < em > click< / em > , and
you need popup tips to reorient as you get close to the edges of your map.
2012-12-12 04:15:56 +08:00
< / td > < td >
< a href = "http://www.linkedin.com/in/erictheise" > Eric Theise< / a >
< / td >
< / tr >
2013-01-27 00:37:01 +08:00
< tr >
< td >
< a href = "https://github.com/yohanboniface/Leaflet.EditInOSM" > Leaflet.EditInOSM< / a >
< / td > < td >
Add a control with links to open the current map view on main OSM editors.
< / td > < td >
< a href = "http://yohanboniface.me" > Yohan Boniface< / a >
< / td >
< / tr >
2012-07-19 06:55:21 +08:00
< / table >
2012-07-19 00:12:01 +08:00
2012-07-24 06:41:55 +08:00
### Other Plugins and Libraries
2012-07-19 00:12:01 +08:00
2012-07-19 06:55:21 +08:00
< table class = "plugins" >
< tr >
< th > Plugin< / th >
< th > Description< / th >
< th > Maintainer< / th >
< / tr >
< tr >
< td >
< a href = "http://flyjs.com/buildings/" > OSM Buildings< / a >
< / td > < td >
2012-07-24 06:41:55 +08:00
Amazing JS library for visualizing 3D OSM building data on top of Leaflet.
2012-07-19 06:55:21 +08:00
< / td > < td >
< a href = "http://flyjs.com/buildings/about.php" > Jan Marsch< / a >
< / td >
< / tr >
2012-07-30 21:58:58 +08:00
< tr >
< td >
< a href = "http://www.mapsmarker.com/" > Leaflet Maps Marker< / a >
< / td > < td >
A Wordpress plugin that uses Leaflet and a set of its plugins for adding maps to your posts through a nice admin interface.
< / td > < td >
< a href = "http://www.harm.co.at/" > Robert Harm< / a >
< / td >
< / tr >
2012-07-19 06:55:21 +08:00
< tr >
< td >
< a href = "https://github.com/mlevans/leaflet-hash" > leaflet-hash< / a >
< / td > < td >
Plugin for persisting map state and browsing history through the URL hash.
< / td > < td >
< a href = "https://github.com/mlevans" > Michael Lawrence Evans< / a >
< / td >
< / tr >
2012-07-24 06:41:55 +08:00
< tr >
< td >
< a href = "https://github.com/springmeyer/arc.js" > arc.js< / a >
< / td > < td >
A JS library for drawing great circle routes that can be used with Leaflet.
< / td > < td >
< a href = "https://github.com/springmeyer" > Dane Springmeyer< / a >
< / td >
< / tr >
2012-12-23 01:09:37 +08:00
< tr >
< td >
< a href = "https://github.com/yohanboniface/Leaflet.Storage" > Leaflet.Storage< / a >
< / td > < td >
Create/update/delete Map, Marker, Polygon, Polyline... and expose them for backend storage with an API.
< / td > < td >
< a href = "http://yohanboniface.me/" > Yohan Boniface< / a >
< / td >
< / tr >
2013-01-19 09:04:36 +08:00
< tr >
< td >
< a href = "https://github.com/calvinmetcalf/leaflet.css" > Leaflet.CSS< / a >
< / td > < td >
Add the main Leaflet CSS files (or any css) from within JavaScript, be gone conditional comments.
< / td > < td >
< a href = "https://github.com/calvinmetcalf" > Calvin Metcalf< / a >
< / td >
< / tr >
2012-07-19 06:55:21 +08:00
< / table >
2012-07-19 00:12:01 +08:00
2013-01-18 18:29:19 +08:00
To submit your own Leaflet plugin to this list, just send a pull request with the addition to Leaflet repo's [gh-pages branch ](https://github.com/Leaflet/Leaflet/tree/gh-pages ) (`plugins.md` file).
2012-07-19 06:55:21 +08:00
<!--
2012-07-19 00:12:01 +08:00
- Saving a Leaflet Map to a PNG Example using Javascript and PHP https://github.com/tegansnyder/Leaflet-Save-Map-to-PNG
- Get a PNG from a Leaflet map and export it in PDF https://github.com/chrissom/leaflet-pdf
-->