Skip to content

mikeskaug/Leaflet.Legend

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Leaflet.Legend

This is a simple legend plugin for Leaflet. It can be used to add a small popup legend to a Leaflet map

What is this?

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).

Demo

An example can be found here: OpenTrailMap

Usage

Dependencies

  • Leaflet 0.7.7

optional:

  • font-awesome 4.4.0
  • jquery 1.11.3

Install

Install with npm:

npm install leaflet-legend

or fork the github project.

Example

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>" );

License

MIT License

About

A Leaflet plugin for adding a popup legend to a map

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published