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.