Using Leaflet plugins with MapBox.js: A Showcase
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.
