Leaflet.HtmlLegend

A simple Leaflet plugin for creating legends with HTML.

Tested with Leaflet 1.3.x

Install

From NPM:

npm install leaflet-html-legend

Usage

Include the CSS:

<link rel="stylesheet" href="L.Control.HtmlLegend.css" />

Include the JavaScript:

<script src="L.Control.HtmlLegend.min.js"></script>

Options:

Each entry in legends array can have the following keys:

• name
• array of elements

Each element has:

• label (optional)
• html (optional): string representaiton of an HTML elemnt that goes into the legend block
• style (optional): an object containing css styling of the legend block

You can use addLegend method to add legends to existing instances of HtmlLegend:

var htmlLegend = L.control.htmllegend({...});
htmlLegend.addLegend({
        name: 'Layer name',
        layer: layerInstance,
        elements: [{
            html: '<div>Legend description</div>'
        }]
    })

An existing entry in a legend control instance can be removed using removeLegend. This method needs id of the entry, which can be obtained from htmllegend._entries (see the example for usage).

See the example for usage details.

Contributors:

• Kaveh Karimi