UNPKG

leaflet

Version:

JavaScript library for mobile-friendly interactive maps

1,450 lines (1,371 loc) 127 kB
--- layout: v2 title: Plugins bodyclass: plugins-page --- ## Leaflet Plugins 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. --- <div id="toc" class="clearfix"> <div class="toc-col"> <h4>Tile &amp; image layers</h4> <ul> <li> <a href='#basemap-providers'>Basemap providers</a></li> <li> <a href='#basemap-formats'>Basemap formats</a></li> <li> <a href='#non-map-base-layers'>Non-map base layers</a></li> <li> <a href='#tileimage-display'>Tile/image display</a></li> <li> <a href='#tile-load'>Tile load</a></li> <li> <a href='#vector-tiles'>Vector tiles</a></li> </ul> <h4>Overlay data</h4> <ul> <li> <a href='#overlay-data-formats'>Overlay data formats</a></li> <li> <a href='#dynamiccustom-data-loading'>Dynamic data loading</a></li> <li> <a href='#synthetic-overlays'>Synthetic overlays</a></li> <li> <a href='#data-providers'>Data providers</a></li> </ul> </div> <div class="toc-col"> <h4>Overlay Display</h4> <ul> <li><a href="#markers--renderers">Markers &amp; renderers</a></li> <li><a href="#overlay-animations">Overlay animations</a></li> <li><a href="#clusteringdecluttering">Clustering/decluttering</a></li> <li><a href="#heatmaps">Heatmaps</a></li> <li><a href="#dataviz">DataViz</a></li> </ul> <h4>Overlay interaction</h4> <ul> <li><a href="#edit-geometries">Edit geometries</a></li> <li><a href="#time--elevation">Time &amp; elevation</a></li> <li><a href="#search--popups">Search &amp; popups</a></li> <li><a href="#areaoverlay-selection">Area/overlay selection</a></li> </ul> </div> <div class="toc-col"> <h4>Map interaction</h4> <ul> <li><a href="#layer-switching-controls">Layer switching controls</a></li> <li><a href="#interactive-panzoom">Interactive pan/zoom</a></li> <li><a href="#bookmarked-panzoom">Bookmarked pan/zoom</a></li> <li><a href="#fullscreen-controls">Fullscreen</a></li> <li><a href="#minimaps--synced-maps">Minimaps &amp; synced maps</a></li> <li><a href="#measurement">Measurement</a></li> <li><a href="#mouse-coordinates">Mouse coordinates</a></li> <li><a href="#events">Events</a></li> <li><a href="#user-interface">User interface</a></li> <li><a href="#printexport">Print/export</a></li> <li><a href="#geolocation">Geolocation</a></li> </ul> </div> <div class="toc-col"> <h4>Miscellaneous</h4> <ul> <li><a href="#geoprocessing">Geoprocessing</a></li> <li><a href="#routing">Routing</a></li> <li><a href="#geocoding">Geocoding</a></li> <li><a href="#plugin-collections">Plugin collections</a></li> </ul> <h4>Integration</h4> <ul> <li><a href="#frameworks--build-systems">Frameworks &amp; build systems</a></li> <li><a href="#3rd-party-integration">3<sup>rd</sup> party</a></li> </ul> <hr> <a href="#develop-your-own">Develop your own</a> </div> </div> ## Tile & image layers The following plugins allow loading different maps and provide functionality to tile and image layers. * [Basemap providers](#basemap-providers) * [Basemap formats](#basemap-formats) * [Non-map base layers](#non-map-base-layers) * [Tile/image display](#tileimage-display) * [Tile load](#tile-load) * [Vector tiles](#vector-tiles) ### Basemap providers Ready-to-go basemaps, with little or no configuration at all. <table class="plugins"><tr><th>Plugin</th><th>Description</th><th>Maintainer</th></tr> <tr> <td> <a href="https://github.com/leaflet-extras/leaflet-providers">leaflet-providers</a> </td><td> Contains configurations for various free tile providers &mdash; OSM, OpenCycleMap, Stamen, Esri, etc. </td><td> <a href="https://github.com/leaflet-extras">leaflet-extras members</a> </td> </tr> <tr> <td> <a href="https://github.com/tontita/Leaflet.KoreanTmsProviders">Leaflet.KoreanTmsProviders</a> </td><td> Contains configurations for various (South) Korean tile providers — Daum, Naver, VWorld, etc. </td><td> <a href="https://github.com/tontita/">Seong Choi</a> </td> </tr> <tr> <td> <a href="https://github.com/htoooth/Leaflet.ChineseTmsProviders">Leaflet.ChineseTmsProviders</a> </td><td> Contains configurations for various Chinese tile providers — TianDiTu, MapABC, GaoDe, etc. </td><td> <a href="https://github.com/htoooth/">Tao Huang</a> </td> </tr> <tr> <td> <a href="http://esri.github.io/esri-leaflet">Esri Leaflet</a> </td><td> A set of tools for using ArcGIS services with Leaflet. Support for map services, feature layers, ArcGIS Online tiles and more. </td><td> <a href="https://github.com/patrickarlt/">Patrick Arlt</a> </td> </tr> <tr> <td> <a href="https://github.com/aparshin/leaflet-GIBS">Leaflet.GIBS</a> </td><td> <a href="https://earthdata.nasa.gov/gibs">NASA EOSDIS GIBS</a> imagery integration. The plugin provides <a href="https://wiki.earthdata.nasa.gov/display/GIBS/GIBS+Available+Imagery+Products">96 daily updated layers</a> with satellite imagery and science parameters. <a href="http://aparshin.github.io/leaflet-GIBS/examples/">Demo</a>. </td><td> <a href="https://github.com/aparshin">Alexander Parshin</a> </td> </tr> <tr> <td> <a href="https://github.com/knreise/L.TileLayer.Kartverket">L.TileLayer.Kartverket</a> </td><td> Provides easy setup of the tile layers from <a href="http://kartverket.no/Kart/Gratis-kartdata/Cache-tjenester/">Kartverket</a> (The Norwegian Mapping Authority) </td><td> <a href="https://github.com/knreise">Kultur og naturreise</a> / <a href="https://github.com/atlefren">Atle Frenvik Sveen</a> </td> </tr> <tr> <td> <a href="https://github.com/sigdeletras/Leaflet.Spain.WMS">Leaflet.Spain.WMS</a> </td><td> Provides easy setup for several Web Map Services (WMS) layers for Spain (PNOA, IGN base, Catastro, etc), from Spanish mapping agencies. </td><td> <a href="https://github.com/sigdeletras">Patricio Soriano</a> </td> </tr> <tr> <td> <a href="https://github.com/GeoSensorWebLab/polarmap.js">PolarMap.js</a> </td><td> JavaScript library for displaying tiles from <a href="http://webmap.arcticconnect.org">ArcticWebMap</a>, a free tile provider with OSM data in multiple Arctic polar projections. Includes lower-level API for deeper integration with other Leaflet plugins. </td><td> <a href="https://github.com/geosensorweblab">GeoSensorWeb Lab</a> </td> </tr> <tr> <td> <a href="https://github.com/gmaclennan/leaflet-bing-layer">Bing Maps Layer</a> </td><td> Add <a href="https://msdn.microsoft.com/en-us/library/ff701721.aspx">Bing Maps tiles</a> to your Leaflet Map. Requires Leaflet v1.0.0.beta.2 or later. </td><td> <a href="https://github.com/gmaclennan">Gregor MacLennan</a> </td> </tr> <tr> <td> <a href="https://gitlab.com/IvanSanchez/Leaflet.TileLayer.HERE">L.TileLayer.HERE</a> </td><td> Displays map tiles from HERE maps (<a href="https://ivansanchez.gitlab.io/Leaflet.TileLayer.HERE/demo.html">demo</a>). </td><td> <a href="https://github.com/IvanSanchez">Iván Sánchez</a> </td> </tr> <tr> <td> <a href="https://gitlab.com/IvanSanchez/Leaflet.GridLayer.GoogleMutant">L.GridLayer.GoogleMutant</a> </td><td> Displays Google maps (with minimal artifacts thanks to a <a href='https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver'>DOM mutation observer</a> technique) (<a href="http://ivansanchez.gitlab.io/Leaflet.GridLayer.GoogleMutant/demo.html">demo</a>). </td><td> <a href="https://github.com/IvanSanchez">Iván Sánchez</a> </td> </tr> </table> ### Basemap formats Plugins for loading basemaps or GIS raster layers in common (albeit non-default) formats. <table class="plugins"><tr><th>Plugin</th><th>Description</th><th>Maintainer</th></tr> <tr> <td> <a href="https://github.com/mylen/leaflet.TileLayer.WMTS">leaflet.TileLayer.WMTS</a> </td><td>Add WMTS (IGN) layering for leaflet. </td><td> <a href="https://github.com/mylen">Alexandre Melard</a> </td> </tr> <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/heigeo/leaflet.wms">leaflet.wms</a> </td><td> Enhanced WMS support for Leaflet, including single-tile/untiled layers, shared WMS sources, and layer identify via GetFeatureInfo. </td><td> <a href="https://github.com/sheppard/">S. Andrew Sheppard</a><br>(<a href="https://github.com/heigeo/">HEI Geo</a>) </td> </tr> <tr> <td> <a href="https://github.com/stuartmatthews/Leaflet.NonTiledLayer.WCS">Leaflet.NonTiledLayer.WCS</a> </td><td> Display raster data from Web Coverage Services. Rasters can be styled and queried in the client. See the <a href="https://stuartmatthews.github.io/Leaflet.NonTiledLayer.WCS/">demo</a>. </td><td> <a href="https://github.com/stuartmatthews">Stuart Matthews</a> </td> </tr> <tr> <td> <a href="https://github.com/balrog-kun/Leaflet.bpg">Leaflet.bpg</a> </td><td> TileLayer with <a href="http://bellard.org/bpg/">.bpg</a> image format decoding. </td><td> <a href="https://github.com/balrog-kun/">Andrzej Zaborowski</a> </td> </tr> <tr> <td> <a href="https://github.com/glenrobertson/leaflet-tilelayer-geojson/">TileLayer.GeoJSON</a> </td><td> A TileLayer for GeoJSON tiles. </td><td> <a href="https://github.com/glenrobertson">Glen Robertson</a> </td> </tr> <tr> <td> <a href="https://github.com/kartena/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> <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> <tr> <td> <a href="https://github.com/emikhalev/leaflet-2gis">Leaflet-2gis</a> </td><td> Adds support for 2GIS tile layer </td><td> <a href="https://github.com/emikhalev/">Eugene Mikhalev</a> </td> </tr> <tr> <td> <a href="https://github.com/geobricks/Leaflet.GeoJSON.Encoded">Leaflet GeoJSON Encoded</a> </td><td> Extends the L.GeoJSON layer using Google polyline encoding algorithm, allowing an optimized data transfer. </td><td> <a href="https://github.com/geobricks/">Geobricks</a> </td> </tr> <tr> <td> <a href="https://gitlab.com/IvanSanchez/Leaflet.TileLayer.MBTiles">Leaflet.TileLayer.MBTiles</a> </td><td> Loads <a href="https://github.com/mapbox/mbtiles-spec"><code>.mbtiles</code></a> tilesets. </td><td> <a href="https://github.com/IvanSanchez/">Iván Sánchez</a> </td> </tr> <tr> <td> <a href="https://github.com/IHCantabria/Leaflet.CanvasLayer.Field">Leaflet.CanvasLayer.Field</a> </td><td> Loads and styles raster files (geotiff & asciigrid formats). It includes a <code>ScalarField</code> layer (for DTM, temperature...) and <code>VectorFieldAnim</code> (an animated layer for wind, currents...). See the <a href="https://ihcantabria.github.io/Leaflet.CanvasLayer.Field/">examples</a> </td><td> <a href="https://github.com/VictorVelarde">Víctor Velarde</a> </td> </tr> <tr> <td> <a href="https://github.com/stuartmatthews/leaflet-geotiff">leaflet-geotiff</a> </td><td> 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. See the <a href="https://stuartmatthews.github.io/leaflet-geotiff/">demo</a>. </td><td> <a href="https://github.com/stuartmatthews">Stuart Matthews</a> </td> </tr> </table> ### Non-map base layers Sometimes you don't want to load a map, just big custom images. **Really** big ones. <table class="plugins"><tr><th>Plugin</th><th>Description</th><th>Maintainer</th></tr> <tr> <td> <a href="https://github.com/turban/Leaflet.Zoomify">TileLayer.Zoomify</a> </td><td> A TileLayer for Zoomify images. </td><td> <a href="https://github.com/turban">Bjørn Sandvik</a> </td> </tr> <tr> <td> <a href="https://github.com/alfarisi/leaflet-deepzoom">TileLayer.DeepZoom</a> </td><td> A TileLayer for DeepZoom images. </td><td> <a href="https://github.com/alfarisi">Al Farisi</a>, <a href="http://indokreatif.net">Indokreatif Teknologi</a> </td> </tr> <tr> <td> <a href="https://github.com/namrehs/Leaflet.Gigapan">TileLayer.Gigapan</a> </td><td> A TileLayer for Gigapan images. </td><td> <a href="https://github.com/namrehs">Dan Sherman</a> </td> </tr> <tr> <td> <a href="https://github.com/astromatic/Leaflet.TileLayer.IIP">Leaflet.TileLayer.IIP</a> </td><td>Add support for <a href="http://iipimage.sourceforge.net/">IIPImage</a> layers in Leaflet. </td><td> <a href="https://github.com/ebertin">Emmanuel Bertin</a> </td> </tr> <tr> <td> <a href="https://github.com/mejackreed/Leaflet-IIIF">Leaflet-IIIF</a> </td><td> A <a href="http://iiif.io/">IIIF</a> (International Image Interoperability Framework) viewer for Leaflet. See the <a href="http://mejackreed.github.io/Leaflet-IIIF/examples/example.html">demo</a>. </td><td> <a href="https://github.com/mejackreed">Jack Reed</a> </td> </tr> <tr> <td> <a href="https://github.com/aparshin/leaflet-fractal">leaflet-fractal</a> </td><td> Renders some fractals (Mandelbrot set, Julia set and some others) using 2D canvas (<a href="http://aparshin.github.io/leaflet-fractal/">demo</a>). </td><td> <a href="https://github.com/aparshin">Alexander Parshin</a> </td> </tr> <tr> <td> <a href="https://github.com/commenthol/leaflet-rastercoords">leaflet-rastercoords</a> </td><td> Renders large tiled images generated with <a href="http://github.com/commenthol/gdal2tiles-leaflet">gdal2tiles-leaflet</a>. Image raster coordinates can be used to set markers, etc. (<a href="http://commenthol.github.io/leaflet-rastercoords">demo</a>). </td><td> <a href="https://github.com/commenthol">Commenthol</a> </td> </tr> </table> ### Tile/image display The following plugins change the way that tile or image layers are displayed in the map. <table class="plugins"><tr><th>Plugin</th><th>Description</th><th>Maintainer</th></tr> <tr> <td> <a href="https://github.com/aparshin/leaflet-boundary-canvas">TileLayer.BoundaryCanvas</a> </td><td> Allows you to draw tile layers with arbitrary polygonal boundary. HTML5 Canvas is used for rendering. </td><td> <a href="https://github.com/aparshin">Alexander Parshin</a> </td> </tr> <tr> <td> <a href="https://github.com/Zverik/leaflet-grayscale/">TileLayer.Grayscale</a> </td><td> A regular TileLayer with grayscale makeover. </td><td> <a href="https://github.com/Zverik">Ilya Zverev</a> </td> </tr> <tr> <td> <a href="https://github.com/ScanEx/Leaflet.imageTransform">Leaflet.ImageTransform</a> </td><td>Add support of image overlays with arbitrary perspective transformation. </td><td> <a href="https://github.com/aparshin">Alexander Parshin</a>, <a href="https://github.com/OriginalSin">Sergey Alekseev</a> </td> </tr> <tr> <td> <a href="https://github.com/lizardtechblog/Leaflet.OpacityControls">Leaflet.OpacityControls</a> </td><td> Simple Leaflet controls to adjust the opacity of a map layer. </td><td> <a href="https://github.com/lizardtechblog/">Jared Dominguez</a> </td> </tr> <tr> <td> <a href="https://github.com/publiclab/Leaflet.DistortableImage">Leaflet.DistortableImage</a> </td><td> Enable users to <a href="https://publiclab.github.io/Leaflet.DistortableImage/examples/">scale, rotate, and distort images</a> on Leaflet maps. </td><td> <a href="https://github.com/publiclab">Public Lab</a> </td> </tr> <tr> <td> <a href="https://github.com/IvanSanchez/Leaflet.ImageOverlay.Rotated">Leaflet.ImageOverlay.Rotate</a> </td><td> Displays rotated, scaled and skewed (but not rubbersheeted) ImageOverlays, given three control points. (<a href='http://ivansanchez.github.io/Leaflet.ImageOverlay.Rotated/demo.html'>demo</a>). </td><td> <a href="https://github.com/IvanSanchez">Iván Sánchez Ortega</a> </td> </tr> <tr> <td> <a href="https://github.com/frogcat/leaflet-tilelayer-mask">Leaflet.TileLayer.Mask</a> </td><td> A TileLayer with mask effect (<a href="http://frogcat.github.io/leaflet-tilelayer-mask/default/">demo</a>) </td><td> <a href="https://github.com/frogcat">Yuzo Matsuzawa</a> </td> </tr> <tr> <td> <a href="https://github.com/GreenInfo-Network/L.TileLayer.PixelFilter/">Leaflet.TileLayer.PixelFilter</a> </td><td> A TileLayer which can filter and replace pixels by RGB code. <br/> <a href="http://greeninfo-network.github.io/L.TileLayer.PixelFilter/demo1.html">demo 1</a> &bull; <a href="http://greeninfo-network.github.io/L.TileLayer.PixelFilter/demo2.html">demo 2</a> </td><td> <a href="https://github.com/GreenInfo-Network/">GreenInfo Network</a> </td> </tr> <tr> <td> <a href="https://github.com/digidem/leaflet-side-by-side">Leaflet.Control.SideBySide</a> </td><td> A Leaflet control to add a split screen to compare two map overlays (<a href="http://lab.digital-democracy.org/leaflet-side-by-side/">demo</a>). </td><td> <a href="http://www.digital-democracy.org">Digital Democracy</a> </td> </tr> <tr> <td> <a href="https://gitlab.com/IvanSanchez/Leaflet.TileLayer.GL">Leaflet.TileLayer.GL</a> </td><td> Applies custom WebGL shaders to each tile in a tilelayer. Demos: <a href="http://ivansanchez.gitlab.io/Leaflet.TileLayer.GL/demo/demo-mandelbrot.html">Mandelbrot set</a>, <a href="http://ivansanchez.gitlab.io/Leaflet.TileLayer.GL/demo/demo-antitoner.html">manipulate tile colours</a>, <a href="http://ivansanchez.gitlab.io/Leaflet.TileLayer.GL/demo/demo-floow.html">elevation with terrain-RBG tiles</a>. </td><td> <a href="https://github.com/IvanSanchez">Iván Sánchez</a> </td> </tr> <tr> <td> <a href="https://github.com/frogcat/leaflet-tilelayer-colorpicker">Leaflet.TileLayer.ColorPicker</a> </td><td> A Leaflet TileLayer with getColor(latLng). Demos: <a href="https://frogcat.github.io/leaflet-tilelayer-colorpicker/">color picker</a>, <a href="https://frogcat.github.io/leaflet-tilelayer-colorpicker/mapbox-terrain-rgb.html">elevation picker with mapbox terrain-RGB</a> </td><td> <a href="https://github.com/frogcat">Yuzo Matsuzawa</a> </td> </tr> <tr> <td> <a href="https://github.com/hnrchrdl/leaflet-tilelayer-colorizr">Leaflet.TileLayer.Colorizr</a> </td><td> A Leaflet TileLayer which can modify colors by RGBA code. Demos: coming soon. </td><td> <a href="https://github.com/hnrchrdl">Hinrich Riedel</a> </td> </tr> </table> ### Tile Load The following plugins change the way that tile layers are loaded into the map. <table class="plugins"><tr><th>Plugin</th><th>Description</th><th>Maintainer</th></tr> <tr> <td> <a href="https://github.com/mattiasb/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/mattiasb">Mattias Bengtsson</a> </td> </tr> <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. Even works with asynchronous sources, using promises. </td><td> <a href="https://github.com/ismyrnow">Ishmael Smyrnow</a> </td> </tr> <tr> <td> <a href="https://github.com/gregallensworth/L.TileLayer.Cordova">TileLayer.Cordova</a> </td><td> For use with Cordova/Phonegap, adds tile caching onto local device storage, switching between offline and online mode. </td><td> <a href="https://github.com/gregallensworth">Greg Allensworth</a> </td> </tr> <tr> <td> <a href="https://github.com/MazeMap/Leaflet.TileLayer.PouchDBCached">TileLayer.PouchDBCached</a> </td><td> Allows all Leaflet TileLayers to cache into PouchDB for offline use. </td><td> <a href="https://github.com/IvanSanchez">Iván Sánchez Ortega</a>, <a href="https://github.com/MazeMap">MazeMap</a> </td> </tr> <tr> <td> <a href="https://github.com/ebrelsford/Leaflet.loading">Leaflet.loading</a> </td><td> A simple control that adds a loading indicator as tiles and other data are loaded. </td><td> <a href="https://github.com/ebrelsford/">Eric Brelsford</a> </td> </tr> <tr> <td> <a href="https://github.com/TolonUK/Leaflet.EdgeBuffer">Leaflet.EdgeBuffer</a> </td><td> Buffer tiles beyond the edge of the viewport, for Leaflet 1.0. <a href="http://www.tolon.co.uk/Leaflet.EdgeBuffer/comparison.html">Demo</a>. </td><td> <a href="https://github.com/TolonUK">Alex Paterson</a> </td> </tr> <tr> <td> <a href="https://github.com/ghybs/Leaflet.TileLayer.Fallback">Leaflet.TileLayer.Fallback</a> </td><td> Replaces missing Tiles (HTTP 404 Not Found Error) by scaled up equivalent Tiles from lower zooms. </td><td> <a href="https://github.com/ghybs">ghybs</a> </td> </tr> <tr> <td> <a href="https://github.com/Outdooractive/Leaflet.FeatureGroup.LoadEvents">Leaflet.FeatureGroup.LoadEvents</a> </td><td> `FeatureGroup` that supports the `"loading"` and `"load"` events (for v0.7.*). </td><td> <a href="http://glat.info">G. Lathoud</a>, <a href="http://www.outdooractive.com">Outdooractive</a>. </td> </tr> <tr> <td> <a href="https://gitlab.com/IvanSanchez/Leaflet.GridLayer.FadeOut">Leaflet.GridLayer.FadeOut</a> </td><td> Fades out grid layers and tilelayers when they are removed, making basemap changes smoother (for 1.0.0). <a href="http://ivansanchez.gitlab.io/Leaflet.GridLayer.FadeOut/demo.html">Demo</a>. </td><td> <a href="https://github.com/IvanSanchez">Iván Sánchez</a> </td> </tr> </table> ### Vector tiles Plugins to display <a href="https://github.com/mapbox/vector-tile-spec">vector tiles</a>. <table class="plugins"><tr><th>Plugin</th><th>Description</th><th>Maintainer</th></tr> <tr> <td> <a href="https://github.com/SpatialServer/Leaflet.MapboxVectorTile">Leaflet.MapboxVectorTile</a> </td><td> A Leaflet Plugin that renders Mapbox Vector Tiles on canvas. See <a href="http://spatialserver.github.io/Leaflet.MapboxVectorTile/examples/confetti.html">demo</a>. Compatible with Leaflet 0.7.x only. </td><td> <a href="http://spatialdev.com/">SpatialDev</a> </td> </tr> <tr> <td> <a href="https://github.com/devTristan/hoverboard">Hoverboard</a> </td><td> Render vector tiles on canvas with leaflet (geojson, topojson, and protobuf). See <a href="http://tristan.io/hoverboard/">demo</a>. Compatible with Leaflet 0.7.x only. </td><td> <a href="http://tristan.io/">Tristan Davies</a> </td> </tr> <tr> <td> <a href="https://github.com/mapbox/geojson-vt">geojson-vt</a> </td><td> Efficient library for slicing GeoJSON data into vector tiles on the fly. </td><td> <a href="https://www.mapbox.com/">Mapbox</a> </td> </tr> <tr> <td> <a href="https://github.com/IvanSanchez/Leaflet.VectorGrid">Leaflet.VectorGrid</a> </td><td> Display gridded vector data (GeoJSON or TopoJSON sliced with geojson-vt, or protobuf vector tiles) in Leaflet 1.0.0. See <a href="https://github.com/IvanSanchez/Leaflet.VectorGrid#demo">demos</a>. Not compatible with 0.7.x. </td><td> <a href="https://github.com/IvanSanchez">Iván Sánchez</a> </td> </tr> </table> ## Overlay data The following plugins provide new ways of loading overlay data (GIS vector data): points, lines and polygons. * [Overlay data formats](#overlay-data-formats) * [Dynamic data loading](#dynamiccustom-data-loading) * [Synthetic overlays](#synthetic-overlays) * [Data providers](#data-providers) ### Overlay data formats Load your own data from various GIS formats. <table class="plugins"><tr><th>Plugin</th><th>Description</th><th>Maintainer</th></tr> <tr> <td> <a href="https://github.com/mapbox/leaflet-omnivore">leaflet-omnivore</a> </td><td> Loads &amp; converts CSV, KML, GPX, TopoJSON, WKT formats for Leaflet. </td><td> <a href="https://github.com/mapbox">Mapbox</a> </td> </tr> <tr> <td> <a href="https://github.com/makinacorpus/Leaflet.FileLayer">Leaflet.FileLayer</a> </td><td> Loads files (GeoJSON, GPX, KML) into the map using the HTML5 FileReader API (i.e. locally without server). </td><td> <a href="https://github.com/leplatrem">Mathieu Leplatre</a> </td> </tr> <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> <tr> <td> <a href="https://github.com/calvinmetcalf/leaflet.shapefile">Leaflet.Shapefile</a> </td><td> Put a shapefile onto your map as a layer. </td><td> <a href="https://github.com/calvinmetcalf">Calvin Metcalf</a> </td> </tr> <tr> <td> <a href="https://github.com/calvinmetcalf/leaflet.filegdb">Leaflet.FileGDB</a> </td><td> Put an ESRI File GeoDatabase onto your map as a layer. </td><td> <a href="https://github.com/calvinmetcalf">Calvin Metcalf</a> </td> </tr> <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> <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> <tr> <td> <a href="http://arthur-e.github.com/Wicket/">Wicket</a> </td><td> A modest library for translating between Well-Known Text (WKT) and Leaflet geometry objects (e.g. between L.marker() instances and "POINT()" strings). </td><td> <a href="https://github.com/arthur-e/">K. Arthur Endsley</a> </td> </tr> <tr> <td> <a href="https://github.com/tomchadwin/qgis2web">qgis2web</a> </td><td> A <a href="http://qgis.org/">QGIS</a> plugin to make webmaps without coding. </td><td> <a href="https://github.com/tomchadwin">Tom Chadwin</a> </td> </tr> <tr> <td> <a href="https://github.com/Flexberry/Leaflet-WFST">Leaflet-WFST</a> </td><td> <a href="http://www.opengeospatial.org/standards/wfs">WFS</a> client layer with transaction support </td><td> <a href="https://github.com/Flexberry/">Flexberry</a> </td> </tr> <tr> <td> <a href="https://github.com/daniellsu/leaflet-betterscale">Leaflet-BetterScale</a> </td><td> A new, more GIS-like scalebar with alternating black/white bars. </td><td> <a href="https://github.com/daniellsu/">Dan Brown</a> </td> </tr> <tr> <td> <a href="https://github.com/ngageoint/geopackage-js/tree/master/leaflet">Leaflet-GeoPackage</a> </td><td> Load <a href="http://www.geopackage.org/">GeoPackage</a> Tile and Feature Layers. </td><td> <a href="https://github.com/danielbarela">Daniel Barela</a>, <a href="https://github.com/ngageoint">NGA</a> </td> </tr> </table> ### Dynamic/custom data loading Load dynamic data which is updated in the map, or load GIS vector data in non-standard ways. <table class="plugins"><tr><th>Plugin</th><th>Description</th><th>Maintainer</th></tr> <tr> <td> <a href="https://github.com/perliedman/leaflet-realtime">Leaflet Realtime</a> </td><td> Put realtime data on a Leaflet map: live tracking GPS units, sensor data or just about anything. </td><td> <a href="https://github.com/perliedman/">Per Liedman</a> </td> </tr> <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> <tr> <td> <a href="https://github.com/tinuzz/leaflet-liveupdate">Leaflet.Liveupdate</a> </td> <td> Periodically ('live') update something on a map (<a href="https://www.grendelman.net/leaflet/">Demo</a>) </td> <td> <a href="https://github.com/tinuzz/">Martijn Grendelman</a> </td> </tr> <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> <tr> <td> <a href="https://github.com/cbaines/leaflet-indoor">Leaflet.Indoor</a> </td><td> Create indoor maps. </td><td> <a href="https://github.com/cbaines">Christopher Baines</a> </td> </tr> <tr> <td> <a href="https://github.com/BenjaminVadant/leaflet-ugeojson">Leaflet uGeoJSON</a> </td><td> Add an auto updating GeoJSON data Layer via ajax post requests. </td><td> <a href="https://github.com/BenjaminVadant/">Benjamin VADANT</a> </td> </tr> </table> ### Synthetic overlays These plugins create useful overlays from scratch, no loading required. <table class="plugins"><tr><th>Plugin</th><th>Description</th><th>Maintainer</th></tr> <tr> <td> <a href="https://github.com/turban/Leaflet.Graticule">Leaflet.Graticule</a> </td><td> Draws a grid of latitude and longitude lines. </td><td> <a href="https://github.com/turban">Bjørn Sandvik</a> </td> </tr> <tr> <td> <a href="https://github.com/ablakey/Leaflet.SimpleGraticule">Leaflet.SimpleGraticule</a> </td><td> Draws a grid lines for L.CRS.Simple coordinate system. </td><td> <a href="https://github.com/ablakey">Andrew Blakey</a> </td> </tr> <tr> <td> <a href="https://github.com/jonshutt/Leaflet.OS.Graticule">L.OS.Graticule</a> </td><td> Overlays UK Ordinance Survey (OS) 1km grid sqaures and labels. </td><td> <a href="https://github.com/jonshutt">Jon Shutt</a> </td> </tr> <tr> <td> <a href="https://github.com/joergdietrich/Leaflet.Terminator">Leaflet.Terminator</a> </td><td>Overlay day and night regions on a map. </td><td> <a href="https://github.com/joergdietrich">J&ouml;rg Dietrich</a> </td> </tr> <tr> <td> <a href="https://github.com/cloudybay/leaflet.latlng-graticule">leaflet.latlng-graticule</a> </td> <td> Create a Canvas as ImageOverlay to draw the Lat/Lon Graticule, and show the grid tick label at the edges of the map.<a href="https://cloudybay.github.io/leaflet.latlng-graticule/example/">Demo</a>. </td> <td> <a href="https://github.com/cloudybay/">CloudyBay</a> </td> </tr> </table> ### Data providers Load overlay data from third-party-services. See also [basemap providers](#basemap-providers) and [plugin collections](#collections). <table class="plugins"><tr><th>Plugin</th><th>Description</th><th>Maintainer</th></tr> <tr> <td> <a href="http://geojason.info/leaflet-vector-layers/">Leaflet Vector Layers</a> </td><td> Allows to easily create vector layers from a number of geo web services, such as ArcGIS Server, Arc2Earth, GeoIQ, CartoDB and GIS Cloud. </td><td> <a href="http://geojason.info">Jason Sanford</a> </td> </tr> <tr> <td> <a href="https://github.com/kartenkarsten/leaflet-layer-overpass/">Leaflet Layer Overpass</a> </td><td> Easily include data from the <a href="http://overpass-api.de">overpass api</a>. </td><td> <a href="https://github.com/kartenkarsten">kartenkarsten</a> </td> </tr> <tr> <td> <a href="https://github.com/kr1/Leaflet.dbpediaLayer/">Leaflet.dbpediaLayer</a> </td><td> A layer with Points of interest from Wikipedia - loaded via ajax from DBpedia's SPARQL endpoint. </td><td> <a href="https://github.com/kr1/">Kr1</a> </td> </tr> <tr> <td> <a href="https://github.com/MatthewBarker/leaflet-wikipedia">Leaflet-Wikipedia</a> </td> <td> A leaflet plugin to display Wikipedia API entries on a map layer. </td> <td> <a href="https://github.com/MatthewBarker">Matthew Barker</a> </td> </tr> </table> ## Overlay display The following plugins provide new ways of displaying overlay data information. * [Markers & renderers](#markers--renderers) * [Overlay animations](#overlay-animations) * [Clustering/decluttering](#clusteringdecluttering) * [Heatmaps](#heatmaps) * [DataViz](#dataviz) ### 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. <table class="plugins"><tr><th>Plugin</th><th>Description</th><th>Maintainer</th></tr> <tr> <td> <a href="https://github.com/jdfergason/Leaflet.Ellipse">Leaflet.ellipse</a> </td><td> Leaflet.ellipse place ellipses on map by specifying center point, semi-major axis, semi-minor axis, and tilt degrees from west. </td><td> <a href="https://github.com/jdfergason">JD Fergason</a> </td> </tr> <tr> <td> <a href="https://github.com/Leaflet/Leaflet.label">Leaflet.label</a> </td><td> Adds text labels to map markers and vector layers. </td><td> <a href="https://github.com/jacobtoye">Jacob Toye</a> </td> </tr> <tr> <td> <a href="https://github.com/jieter/Leaflet-semicircle">Leaflet-semicircle</a> </td><td> Adds functionality to <code>L.Circle</code> to draw semicircles. </td><td> <a href="https://github.com/jieter">Jieter</a> </td> </tr> <tr> <td> <a href="https://github.com/bbecquet/Leaflet.PolylineDecorator">Leaflet.PolylineDecorator</a> </td><td> Allows you to draw patterns (like dashes, arrows or evenly spaced Markers) along Polylines or coordinate paths. </td><td> <a href="https://github.com/bbecquet">Benjamin Becquet</a> </td> </tr> <tr> <td> <a href="https://github.com/leaflet-extras/leaflet.sprite">Leaflet.Sprite</a> </td><td> Use sprite based icons in your markers. </td><td> <a href="https://github.com/calvinmetcalf">Calvin Metcalf</a> </td> </tr> <tr> <td> <a href="https://github.com/makinacorpus/Leaflet.TextPath">Leaflet.TextPath</a> </td><td> Allows you to draw text along Polylines. </td><td> <a href="https://github.com/leplatrem">Mathieu Leplatre</a> </td> </tr> <tr> <td> <a href="https://github.com/iatkin/leaflet-svgicon">Leaflet-SVGIcon</a> </td><td> A simple and customizable SVG icon with no external dependencies. Also included is a convenience Marker class and two example subclasses. <a href="http://iatkin.github.io/leaflet-svgicon/">Customizable demo with example subclasses</a> </td><td> <a href="https://github.com/iatkin">Ilya Atkin</a> </td> </tr> <tr> <td> <a href="https://github.com/marslan390/BeautifyMarker">Leaflet.BeautifyMarkers</a> </td><td> 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). </td><td> <a href="https://github.com/marslan390">Muhammad Arslan Sajid</a> </td> </tr> <tr> <td> <a href="https://github.com/lvoogdt/Leaflet.awesome-markers">Leaflet.Awesome-Markers</a> </td><td> Colorful, iconic &amp; retina-proof markers based on the Font Awesome icons/Twitter Bootstrap icons </td><td> <a href="http://www.lennardvoogdt.nl">Lennard Voogdt</a> </td> </tr> <tr> <td> <a href="https://github.com/coryasilva/Leaflet.ExtraMarkers">Leaflet.Extra-Markers</a> </td><td> Shameless copy of Awesome-Markers with more shapes, colors and semantic-ui support </td><td> <a href="http://www.corysilva.com">Cory Silva</a> </td> </tr> <tr> <td> <a href="https://github.com/jseppi/Leaflet.MakiMarkers">Leaflet.MakiMarkers</a> </td><td>Create markers using <a href="https://www.mapbox.com/maki/">Maki Icons</a> from MapBox. </td><td> <a href="https://github.com/jseppi">James Seppi</a> </td> </tr> <tr> <td> <a href="https://github.com/IvanSanchez/Leaflet.Icon.Glyph">Leaflet.Icon.Glyph</a> </td><td> Use icon font glyphs in your markers (from Font Awesome, Material Design Icons, Glyphicons, Metro UI icons, Elusive, and other icon fonts). (<a href='https://ivansanchez.github.io/Leaflet.Icon.Glyph/demo.html'>demo</a>) </td><td> <a href="https://github.com/IvanSanchez">Iván Sánchez Ortega</a> </td> </tr> <tr> <td> <a href="https://github.com/makinacorpus/Leaflet.LineExtremities">Leaflet.LineExtremities</a> </td><td> Show symbols at the extremities of polylines, using SVG markers. </td><td> <a href="https://github.com/fredericbonifas">Frédéric Bonifas</a> </td> </tr> <tr> <td> <a href="https://github.com/hiasinho/Leaflet.vector-markers">Leaflet.VectorMarkers</a> </td><td> Vector SVG markers for Leaflet, with an option for Font Awesome/Twitter Bootstrap icons. </td><td> <a href="https://github.com/hiasinho">Mathias Schneider</a> </td> </tr> <tr> <td> <a href="https://github.com/teastman/Leaflet.pattern">Leaflet.pattern</a> </td><td> Add support for pattern fills on Paths. </td><td> <a href="https://github.com/teastman">Tyler Eastman</a> </td> </tr> <tr> <td> <a href="https://github.com/thomasbrueggemann/leaflet.boatmarker">Leaflet.BoatMarker</a> </td><td> A boat marker using HTML Canvas for displaying yachts and sailboats with heading and optional wind information. <a href="http://thomasbrueggemann.github.io/leaflet.boatmarker/">Demo</a>. </td><td> <a href="https://github.com/thomasbrueggemann">Thomas Brüggemann</a> </td> </tr> <tr> <td> <a href="https://github.com/heyman/leaflet-usermarker">leaflet-usermarker</a> </td><td> Plugin for plotting a marker representing a user - or multiple users - on a map, with support for drawing an accuraccy circle. Can be seen in action on <a href="http://longitude.me">Longitude.me</a>. </td><td> <a href="http://heyman.info">Jonatan Heyman</a> </td> </tr> <tr> <td> <a href="https://github.com/albburtsev/Leaflet.geojsonCSS">Leaflet.geojsonCSS</a> </td><td> <a href="http://wiki.openstreetmap.org/wiki/Geojson_CSS">Geojson CSS</a> implementation for Leaflet. </td><td> <a href="https://github.com/albburtsev/">Alexander Burtsev</a> </td> </tr> <tr> <td> <a href="http://osmbuildings.org/">OSM Buildings</a> </td><td> Amazing JS library for visualizing 3D OSM building geometry on top of Leaflet. </td><td> <a href="https://github.com/kekscom/">Jan Marsch</a> </td> </tr> <tr> <td> <a href="https://github.com/ubergesundheit/Leaflet.EdgeMarker">Leaflet.EdgeMarker</a> </td><td> Plugin to indicate the existence of Features outside of the current view. </td><td> <a href="https://github.com/ubergesundheit">Gerald Pape</a> </td> </tr> <tr> <td> <a href="https://github.com/gismartwaredev/leaflet.orientedMarker">Leaflet.orientedMarker</a> </td><td> Allows to manage orientation of markers dynamically. </td><td> <a href="https://github.com/gismartwaredev">Gismartwaredev</a> </td> </tr> <tr> <td> <a href="https://github.com/mapshakers/leaflet-icon-pulse">leaflet-icon-pulse</a> </td><td> Renders pulsing icon using CSS3. It can be used for location marker. </td><td> <a href="https://github.com/mapshakers">mapshakers</a>/ <a href="https://github.com/filipzava">Filip Zavadil</a> </td> </tr> <tr> <td> <a href="https://github.com/mapshakers/leaflet-mapkey-icon">leaflet-mapkey-icon</a> </td><td> Set of cartographic font icons based on <a href="http://www.mapkeyicons.com">mapkeyicons</a>. </td><td> <a href="https://github.com/mapshakers">mapshakers</a>/ <a href="https://github.com/filipzava">Filip Zavadil</a> </td> </tr> <tr> <td> <a href="https://github.com/turban/Leaflet.Photo">Leaflet.Photo</a> </td><td> Plugin to show geotagged photos on a Leaflet map. <a href="http://turban.github.io/Leaflet.Photo/examples/picasa.html">Demo</a>. </td><td> <a href="https://github.com/turban">Bjørn Sandvik</a> </td> </tr> <tr> <td> <a href="https://github.com/elfalem/Leaflet.curve">Leaflet.curve</a> </td><td> A Leaflet plugin for drawing Bézier curves and other complex shapes. <a href="http://elfalem.github.io/Leaflet.curve/">Demo</a>. </td><td> <a href="https://github.com/elfalem">elfalem</a> </td> </tr> <tr> <td> <a href="https://github.com/MAD-GooZe/Leaflet.Arc">Leaflet.Arc</a> </td><td> This plugin adds L.Polyline.Arc function which wraps arc.js functionality for creation of Great Cirlce arcs. </td><td> <a href="https://github.com/MAD-GooZe">Alexey Gusev</a> </td> </tr> <tr> <td> <a href="https://github.com/timwis/leaflet-choropleth">leaflet-choropleth</a> </td><td> Extends L.geoJson to add a choropleth visualization (color scale based on value). <a href="http://timwis.com/leaflet-choropleth/examples/basic">Demo</a>. </td><td> <a href="http://timwis.com">Tim Wisniewski</a> </td> </tr> <tr> <td> <a href="https://github.com/lethexa/leaflet-tracksymbol">leaflet-tracksymbol</a> </td><td> This marker provides a tracksymbol with orientation, velocity-vector and configurable shape. </td><td> <a href="https://github.com/lethexa">Tim Leerhoff</a> </td> </tr> <tr> <td> <a href="https://github.com/PowerPan/leaflet-ais-tracksymbol">leaflet-ais-tracksymbol</a> </td><td> AIS Extension for leaflet-tracksymbol It displays AIS Contacts on the Map. </td><td> <a href="https://github.com/powerpan">Johannes Rudolph</a> </td> </tr> <tr> <td> <a href="https://github.com/PowerPan/leaflet-ais-tracksymbol-search">leaflet-ais-tracksymbol-search</a> </td><td> Adds a Seach Box for your Leaflet Map and Your [leaflet-ais-trackymbol](https://github.com/PowerPan/leaflet-ais-tracksymbol) </td><td> <a href="https://github.com/powerpan">Johannes Rudolph</a> </td> </tr> <tr> <td> <a href="https://github.com/wwwouaiebe/leaflet.marker.pin">leaflet.marker.pin</a> </td> <td> Pins are markers that can be added and edited on the map by the end user. <a href="http://wwwouaiebe.github.io/leaflet.marker.pin/">Demo</a>. </td> <td> <a href="https://github.com/wwwouaiebe">Christian Guyette</a> </td> </tr> <tr> <td> <a href="https://github.com/IvanSanchez/Leaflet.Marker.Stack">Leaflet.Marker.Stack</a> </td> <td> A pure Leaflet implementation of CartoDB's "<a href="http://blog.cartodb.com/stacking-chips-a-map-hack/">stacked chips</a>" symbolizer. <a href="http://ivansanchez.github.io/Leaflet.Marker.Stack/demos/color_ramps.html">Demo</a>. </td> <td> <a href="https://github.com/IvanSanchez">Iván Sánchez</a> </td> </tr> <tr> <td> <a href="https://github.com/cloudybay/leaflet-polygon-fillPattern">leaflet-polygon.fillPattern</a> </td> <td> Extend the Polygon Object to fill SVG Path element with an image pattern.<a href="http://lwsu.github.io/leaflet-polygon-fillPattern/example/">Demo</a>. </td> <td> <a href="https://github.com/cloudybay/">CloudyBay</a> </td> </tr> <tr> <td> <a href="https://github.com/bbecquet/Leaflet.PolylineOffset">Leaflet Polyline Offset</a> </td> <td> Adds to <code>L.Polyline</code> the ability to be shifted with a relative pixel offset, without modifying its actual <code>LatLng</code>s. The offset value can be either negative or positive, for left- or right-side offset, and remains constant across zoom levels (<a href="http://bbecquet.github.io/Leaflet.PolylineOffset/examples/example.html">basic demo</a>). </td> <td> <a href="https://github.com/bbecquet">Benjamin Becquet</a> </td> </tr> <tr> <td> <a href="https://github.com/w8r/leaflet-labeled-circle">leaflet-labeled-circle</a> </td> <td> Special type of SVG marker with a label inside and draggable around the anchor point (<a href="https://w8r.github.io/leaflet-labeled-circle/demo/">demo</a>). </td> <td> <a href="https://github.com/w8r/">Alexander Milevski</a> </td> </tr> <tr> <td> <a href="https://github.com/dagjomar/Leaflet.ParallaxMarker">Leaflet.ParallaxMarker</a> </td> <td> Add markers that moves with a parallax-effect relative to the map when panning (<a href="https://dagjomar.github.io/Leaflet.ParallaxMarker/">demos / examples</a>). </td> <td> <a href="https://github.com/dagjomar/">Dag Jomar Mersland</a> </td> </tr> <tr> <td> <a href="https://github.com/adoroszlai/leaflet-distance-markers">leaflet-distance-markers</a> </td> <td> Allows displaying markers along a route (L.Polyline) at equivalent distances (eg. one per mile) (<a href="http://adoroszlai.github.io/leaflet-distance-markers/">demo</a>). </td> <td> <a href="https://github.com/adoroszlai">Doroszlai, Attila</a> </td> </tr> <tr> <td> <a href="https://github.com/mikhailshilkov/leaflet-corridor">leaflet-corridor</a> </td> <td> Renders a polyline with width fixed in meters, not in pixels; adjusts width depending on zoom level (<a href="http://mikhail.io/demos/leaflet-corridor/">demo</a>). </td> <td> <a href="https://github.com/mikhailshilkov">Mikhail Shilkov</a> </td> </tr> <tr> <td> <a href="https://github.com/yakitoritabetai/Leaflet.LabelTextCollision">Leaflet.LabelTextCollision</a> </td> <td> Displays labels on paths (polylines, polygons, circles) avoiding label collision. (<a href="https://yakitoritabetai.github.io/Leaflet.LabelTextCollision/">demo</a>). </td> <td> <a href="https://github.com/yakitoritabetai">Kenta Hakoishi</a> </td> </tr> <tr> <td> <a href="https://github.com/ggolikov/Leaflet.Viewpoint">Leaflet.Viewpoint</a> </td> <td> Displays circleMarker with multiple directions. Useful to show photos taken from one point. (<a href="https://ggolikov.github.io/Leaflet.Viewpoint/example/">demo</a>). </td> <td> <a href="https://github.com/ggolikov">Grigory Golikov</a> </td> </tr> <tr> <td> <a href="https://github.com/react-map/leaflet.magicMarker">Leaflet.magicMarker</a> </td> <td> Adding magical animation effect to a marker while loading.(<a href="https://react-map.github.io/leaflet.magicMarker/">Demo</a>). </td> <td> <a href="https://github.com/react-map">Sylvenas</a> </td> </tr> <tr> <td> <a href="https://github.com/brandonxiang/leaflet.marker.highlight">Leaflet.Marker.Highlight</a> </td> <td> Adding highlight performance for L.marker.(<a href="https://brandonxiang.github.io/leaflet.marker.highlight/examples/">Demo</a>). </td> <td> <a href="https://github.com/brandonxiang">Brandon Xiang</a> </td> </tr> <tr> <td> <a href="https://github.com/nypl-spacetime/Leaflet.GeotagPhoto">Leaflet.GeotagPhoto</a> </td> <td> Plugin for photo geotagging, with two modes: camera and crosshair (<a href="http://spacetime.nypl.org/Leaflet.GeotagPhoto/examples/camera.html">Demo</a>). </td> <td> <a href="https://github.com/bertspaan">Bert Spaan</a> </td> </tr> <tr> <td> <a href="https://gitlab.com/IvanSanchez/Leaflet.GLMarkers">Leaflet.GLMarkers</a> </td><td> Display thousands of markers with custom WebGL shaders, optionally animated. (<a href='http://https://ivansanchez.gitlab.io/Leaflet.GLMarkers/demo/repl.html'>demo</a>) </td><td> <a href="https://gitlab.com/IvanSanchez">Iván Sánchez Ortega</a> </td> </tr> </table> ### Overlay animations These plugins animate markers or some geometries. See also [geometries with time or elevation](#geometryinteraction-time). <table class="plugins"><tr><th>Plugin</th><th>Description</th><th>Maintainer</th></tr> <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> <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> <tr> <td> <a href="https://github.com/hosuaby/Leaflet.SmoothMarkerBouncing">Leaflet.SmoothMarkerBouncing</a> </td><td> Smooth animation of marker bouncing for Leaflet. </td><td> <a href="https://github.com/hosuaby">Alexei KLENIN</a> </td> </tr> <tr> <td> <a href="https://github.com/ewoken/Leaflet.MovingMarker">Leaflet.MovingMarker</a> </td><td> Allow to move markers along a polyline with custom durations. </td><td> <a href="https://github.com/ewoken">Ewoken</a> </td> </tr> <tr> <td>