One of the reasons we built MapBox.js v1 on top of Leaflet was its robust plugin ecosystem. The Leaflet plugins page lists dozens of plugins, and more are being added every week. In fact, MapBox.js itself is structured as a Leaflet plugin, unlocking a world of interesting possibilities for map interaction and enhancement. Here are a few of our favorites.

Leaflet.draw

MapBox.js supports displaying vector layers out of the box thanks to Leaflet – it’s what drives GitHub’s new GeoJSON preview. With Leaflet.draw, these layers become editable: you can draw new lines, circles, or polygons, edit existing ones, and delete what you no longer need. When you’re finished, use L.LayerGroup#toGeoJSON to get the data back as GeoJSON and complete the loop. It’s your own lightweight map editor.

Example: Using the Leaflet.draw plugin

Leaflet.markercluster

Sometimes you have a lot of markers to display, and plotting them all on the map would be overwhelming. Leaflet.markercluster is the solution. It automatically groups markers that are close to each other into a single group. When you zoom in, the groups are recalculated, and when there’s enough room, individual markers are shown. USA Today used this plugin to great effect in a visualization of images from the Civil Air Patrol following the Moore, OK, tornado.

Example: Using the Leaflet.markercluster plugin

Leaflet-MiniMap

If you are showing a detailed, large-scale map, it can be helpful to orient the viewer with a secondary map at a smaller scale. This is exactly what Leaflet-MiniMap does. The mini-map tracks pan and zoom events in the main map, and can be configured to use a different tile set – for example, you could show MapBox Streets in the main map and MapBox terrain in the mini-map.

Example: Using the Leaflet-MiniMap plugin

Leaflet-hash and Leaflet.fullscreen

Leaflet-hash and Leaflet.fullscreen are two ways to enhance your map UI quickly and unobtrusively. Leaflet-hash provides permalinks for easily bookmarking and sharing map locations. And our own Leaflet.fullscreen adds a button that goes fullscreen with the HTML5 API when it’s available and falls back to an alternate implementation when not.

Example: Hash and Fullscreen UI elements

Using Leaflet plugins

In order to use these or other Leaflet plugins, you’ll want to familiarize yourself with their documentation, which is typically provided in a README.md on GitHub. In most cases, you’ll need to include a <script> tag linking to the plugin’s JavaScript source file and a <link> tag for its CSS. You’ll need to host these assets on your server – unlike MapBox.js, they aren’t hosted on MapBox’s CDN. From there, it’s usually just a couple lines of JavaScript to configure and initialize a plugin – check out the examples above for details.