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:

| Option | Type | Default | Description | | :--- | :--- | :--- | :--- | | position | String | 'topright' | Map position of element | | legend | Array | - | Array of legend entries (see below for the structure) | | collapseSimple | bool | false | Whether to use compact presentation for legend entries that are from a simple renderer | | detectStreched | bool | false | Test to see if legend entries look stretched (these are usually in sets of 3 with the middle element having no label) | | collapsedOnInit | bool | false | Whether to initialize instance in collapsed mode | | disableVisibilityControls | bool | false | Whether to add visibility toggle button and opacity sliders | | updateOpacity | function | null | If set, this function is used to update opacity of the attached layer (it receives the layer and opacity as arguments) | | defaultOpacity | number | 1 | Default opacity for layers in specified in legends | | visibleIcon | String | 'leaflet-html-legend-icon-eye' | css class for the visible icon on opacity slider | | hiddenIcon | String | 'leaflet-html-legend-icon-eye-slash' | css class for the hidden icon on opacity slider | | toggleIcon | String | 'leaflet-html-legend-icon-eye-slash' | css class for the icon on visibility toggle button |

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