Leaflet.Legend

Leaflet.Legend is a plugin for Leaflet that display legend symbols and toggle overlays.

Check out the demo.

Example

var map = L.map("map", {
        center: [29, 120],
    });
    
L.control.Legend({
    position: "bottomleft",
    legends: [{
        label: "Marker1",
        type: "image",
        url: "marker/marker-red.png",
    }]
}).addTo(map);

Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | position | String | 'topleft' | The position of the control. | | title | String | 'Legend' | The title of the control. | | opacity | Number | 1.0 | Opacity of the container. | | legends | LegendSymbol[] | [] | Array of legend symbols that will be added to the container. | | symbolWidth | Number | 24 | Symbol width of the legend, in pixels. | | symbolHeight | Number | 24 | Symbol width of the legend, in pixels. | | column | Number | 1 | The number of columns arranged in the legend. | | collapsed | Boolean | false | If true, the control will be collapsed into an icon and expanded on mouse hover or touch. |

LegendSymbol

| Option | Type | Default | Description | |--------|------|---------|-------------| | label | String | undefined | The label of the legend symbol. | | type | String | undefined | The type of the legend symbol. Possible values are 'image', 'circle', 'rectangle', 'polygon' or 'polyline' | | url | String | undefined | The url of the symbol image, only used when type is 'image' | | radius | Number | undefined | The radius of the circle, in pixels, only used when type is 'circle' | | sides | Number | undefined | The number of sides of a regular polygon, only used when type is 'polygon' | | layers | Layer|Layer[]| undefined | Legend symbol associated layers. While associating the layers, the display state of the layers can be toggled. | | inactive | Boolean | undefined | Is the legend symbol inactive | | stroke | Boolean | true | Whether to draw stroke along the path. Set it to false to disable borders on polygons or circles. | | color | String | '#3388ff' | Stroke color | | weight | Number | 3 | Stroke width in pixels | | opacity | Number | 1.0 | Stroke opacity | | lineCap | String | 'round' | A string that defines shape to be used at the end of the stroke. | | lineJoin | String | 'round' | A string that defines shape to be used at the corners of the stroke. | | dashArray | String | null | A string that defines the stroke dash pattern. Doesn't work on Canvas-powered layers in some old browsers. | | dashOffset | String | null | A string that defines the distance into the dash pattern to start the dash. Doesn't work on Canvas-powered layers in some old browsers. | | fill | Boolean | depends | Whether to fill the path with color. Set it to false to disable filling on polygons or circles. | | fillColor | String | * | Fill color. Defaults to the value of the color option | | fillOpacity | Number | 0.2 | Fill opacity. | | fillRule | String | 'evenodd' | A string that defines how the inside of a shape is determined. |