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.
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
Sometimes you have a lot of markers to display, and plotting them all on the
map would be overwhelming.
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.
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.
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.
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
to host these assets on your server – unlike MapBox.js, they aren’t hosted on
configure and initialize a plugin – check out the examples above for details.