This is a simple legend plugin for Leaflet. It can be used to add a small popup legend to a Leaflet map
This plugin allows you to add a simple popup legend to a Leaflet map. It extends the Leaflet Control class: creating and positioning the necessary container elements. The actual legend content is defined separately as a legend element in the html and appended to the legend container (see Usage).
An example can be found here: OpenTrailMap
- Leaflet 0.7.7
optional:
- font-awesome 4.4.0
- jquery 1.11.3
Install with npm:
npm install leaflet-legend
or fork the github project.
After including leaflet-legend.js and leaflet-legend.css in your project, you can add a legend to your map with the following:
var Legend = new L.Control.Legend({
position: 'topleft',
collapsed: true,
controlButton: {
title: "Legend"
}
});
map.addControl( Legend );
$(".legend-container").append( $("#legend") );
$(".legend-toggle").append( "<i class='legend-toggle-icon fa fa-info fa-2x' style='color: #000'></i>" );The options listed above are the defaults. The command map.addControl( Legend ); adds the legend container to the map, but we still need to add the legend content. The legend content should be specified separately in the html document with id="legend" . For example (from the demo):
<div id="legend">
<svg width="120" height="80">
<line x1="10" y1="20" x2="40" y2="20" class="path" />
<text x="40" y="20" transform="translate(8,4)">Trail</text>
<line x1="10" y1="40" x2="40" y2="40" class="cycleway" />
<text x="40" y="40"transform="translate(8,4)">Bike Path</text>
<line x1="10" y1="60" x2="40" y2="60" class="track" />
<text x="40" y="60" transform="translate(8,4)">Dirt Road</text>
</svg>
</div>
We then use JQuery to append the legend div to our legend container:
$(".legend-container").append( $("#legend") );To add an icon to the toggle button, we can either specify an icon image in leaflet-legend.css or append a font-awesome icon:
$(".legend-toggle").append( "<i class='legend-toggle-icon fa fa-info fa-2x' style='color: #000'></i>" );