index.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Leaflet HTML Legend</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" />
    <link rel="stylesheet" href="dist/L.Control.HtmlLegend.css" />

    <style>
        @font-face {
            font-family: 'icon';
            src: url(data:font/ttf;base64,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);
            font-weight: normal;
            font-style: normal;
        }

        [class^="icon-"], [class*=" icon-"] {
            font-family: 'icon' !important;
            speak: none;
            font-style: normal;
            font-weight: normal;
            font-variant: normal;
            text-transform: none;
            line-height: 1;

            /* Better Font Rendering =========== */
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        .icon-eye-slash:before {
            content: "\e903";
        }

        .icon-eye:before {
            content: "\e904";
        }

        .hexagon {
            position: relative;
            width: 13px;
            height: 7.51px;
            background-color: #64C7CC;
            margin: 3.75px 0;
        }

        .hexagon:before,
        .hexagon:after {
            content: "";
            position: absolute;
            width: 0;
            border-left: 6.5px solid transparent;
            border-right: 6.5px solid transparent;
        }

        .hexagon:before {
            bottom: 100%;
            border-bottom: 3.75px solid #64C7CC;
        }

        .hexagon:after {
            top: 100%;
            width: 0;
            border-top: 3.75px solid #64C7CC;
        }
    </style>
</head>
<body>
<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"></script>
<script src="dist/L.Control.HtmlLegend.js"></script>
<div id="map" style="position: absolute; top: 0; left:0; bottom:0; right: 0;"></div>

<div id="Pentagon" style="display: none">
    <svg viewBox="0 0 12.071004 11.879879"
         height="3.3527658mm"
         width="3.4067056mm">
        <g transform="translate(-178.44332,-260.41101)">
            <path d="m 179.93895,268.87298 c -0.81429,-1.87985 -1.48727,-3.43568 -1.49552,-3.4574 -0.0109,-0.0288 0.74744,-0.71211 2.8028,-2.52538 1.54978,-1.36724 2.82584,-2.48287 2.83568,-2.47918 0.0352,0.0132 6.38478,3.76865 6.42481,3.79994 0.037,0.0289 -0.0368,0.37955 -0.77648,3.69055 -0.44954,2.01224 -0.82089,3.66216 -0.82522,3.6665 -0.004,0.004 -1.63277,0.16196 -3.61875,0.35028 -1.98598,0.18831 -3.66845,0.34919 -3.73883,0.3575 l -0.12797,0.0151 -1.48052,-3.41791 z"
                  style="fill:#ffa500;fill-opacity:1"></path>
        </g>
    </svg>

</div>

<script>
    var map = L.map('map').setView([28.707, -109], 8)

    L.tileLayer('//stamen-tiles-{s}.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}.png', {
        attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
        subdomains: 'abcd',
        maxZoom: 10,
        minZoom: 2
    }).addTo(map)

    var layer1GeoJSON = {
        'type': 'FeatureCollection',
        'features': [
            {
                'type': 'Feature',
                'properties': {
                    'color': 'red'
                },
                'geometry': {
                    'type': 'Polygon',
                    'coordinates': [
                        [
                            [
                                -109.58862304687499,
                                28.091366281406945
                            ],
                            [
                                -109.00634765625,
                                28.091366281406945
                            ],
                            [
                                -109.00634765625,
                                28.526622418648127
                            ],
                            [
                                -109.58862304687499,
                                28.526622418648127
                            ],
                            [
                                -109.58862304687499,
                                28.091366281406945
                            ]
                        ]
                    ]
                }
            },
            {
                'type': 'Feature',
                'properties': {
                    'color': 'green'
                },
                'geometry': {
                    'type': 'Polygon',
                    'coordinates': [
                        [
                            [
                                -109.86328125,
                                28.374485465612306
                            ],
                            [
                                -109.962158203125,
                                28.2027676859484
                            ],
                            [
                                -109.742431640625,
                                28.200347149003644
                            ],
                            [
                                -109.86328125,
                                28.374485465612306
                            ]
                        ]
                    ]
                }
            }
        ]
    }

    var layer2GeoJSON = {
        'type': 'FeatureCollection',
        'features': [
            {
                'type': 'Feature',
                'properties': {},
                'geometry': {
                    'type': 'Polygon',
                    'coordinates': [
                        [
                            [
                                -107.4462890625,
                                28.806173508854776
                            ],
                            [
                                -107.90771484375,
                                28.526622418648127
                            ],
                            [
                                -107.40234375,
                                28.275358281817105
                            ],
                            [
                                -107.4462890625,
                                28.806173508854776
                            ]
                        ]
                    ]
                }
            }
        ]
    }

    var layer3GeoJSON = {
        'type': 'Feature',
        'properties': {},
        'geometry': {
            'type': 'Polygon',
            'coordinates': [
                [
                    [
                        -107.3968505859375,
                        29.036960648558267
                    ],
                    [
                        -107.49298095703125,
                        28.96489485992114
                    ],
                    [
                        -107.48199462890625,
                        28.86872905602898
                    ],
                    [
                        -107.35565185546875,
                        28.86632376895912
                    ],
                    [
                        -107.30621337890625,
                        28.943265329407495
                    ],
                    [
                        -107.3968505859375,
                        29.036960648558267
                    ]
                ]
            ]
        }
    }

    var layer4GeoJSON = {
        'type': 'FeatureCollection',
        'features': [
            {
                'type': 'Feature',
                'properties': {},
                'geometry': {
                    'type': 'Polygon',
                    'coordinates': [
                        [
                            [
                                -108.25653076171875,
                                29.188135030802496
                            ],
                            [
                                -108.28262329101562,
                                29.10897615145302
                            ],
                            [
                                -108.22769165039062,
                                29.059771002186196
                            ],
                            [
                                -108.13980102539062,
                                29.054969241647125
                            ],
                            [
                                -108.09036254882812,
                                29.123373210819224
                            ],
                            [
                                -108.12606811523438,
                                29.185737173254434
                            ],
                            [
                                -108.25653076171875,
                                29.188135030802496
                            ]
                        ]
                    ]
                }
            }
        ]
    }

    var layer1 = L.geoJSON(layer1GeoJSON, {
        style: function (feature) {
            return { color: feature.properties.color, fill: false }
        }
    }).addTo(map)

    var layer2 = L.geoJSON(layer2GeoJSON, {
        style: { color: 'blue', fill: false }
    })

    var layer3 = L.geoJSON(layer3GeoJSON, {
        style: { color: 'orange', fill: false }
    }).addTo(map)

    var layer4 = L.geoJSON(layer4GeoJSON, {
        style: { stroke: false, fillColor: '#64C7CC', fill: true }
    }).addTo(map)

    var overlays = {
        'Layer 1': layer1,
        'Layer 2': layer2,
        'Layer 3': layer3,
        'Layer 4': layer4
    }

    L.control.layers(null, overlays, { collapsed: false }).addTo(map)

    var htmlLegend1and2 = L.control.htmllegend({
        position: 'bottomright',
        legends: [{
            name: 'Layer 1',
            layer: layer1,
            disableVisibilityControls: true,
            elements: [{
                label: 'Rectangle',
                html: '',
                style: {
                    'background-color': 'red',
                    'width': '10px',
                    'height': '10px'
                }
            }, {
                label: 'Triangle',
                html: '',
                style: {
                    'background-color': 'green',
                    'width': '10px',
                    'height': '10px'
                }
            }]
        }],
        collapseSimple: true,
        detectStretched: true,
        collapsedOnInit: true,
        defaultOpacity: 0.7,
        visibleIcon: 'icon icon-eye',
        hiddenIcon: 'icon icon-eye-slash'
    })
    map.addControl(htmlLegend1and2)

    htmlLegend1and2.addLegend({
        name: 'Layer 2',
        layer: layer2,
        opacity: 0.5,
        elements: [{
            html: '',
            style: {
                'background-color': 'blue',
                'width': '10px',
                'height': '10px'
            }
        }]
    })

    var htmlLegend3 = L.control.htmllegend({
        position: 'bottomright',
        legends: [{
            name: 'Layer 3',
            elements: [{
                label: 'Pentagon',
                html: document.querySelector('#Pentagon').innerHTML
            }]
        }],
        collapseSimple: true,
        detectStretched: true,
        visibleIcon: 'icon icon-eye',
        hiddenIcon: 'icon icon-eye-slash'
    })

    map.addControl(htmlLegend3)

    var htmlLegend4 = L.control.htmllegend({
        position: 'bottomright',
        legends: [{
            name: 'Layer 4',
            layer: layer4,
            allowRemove: true,
            elements: [{
                label: 'Hexagon',
                html: '<div class="hexagon"></div>'
            }]
        }],
        defaultOpacity: 0.8,
        collapseSimple: true,
        detectStretched: true,
        visibleIcon: 'icon icon-eye',
        hiddenIcon: 'icon icon-eye-slash',
        updateOpacity: function (layer, opacity) {
            layer.setStyle({ stroke: false, fillColor: '#64C7CC', fill: true, fillOpacity: opacity })
        }
    })

    map.addControl(htmlLegend4)

    var DeleteControl  = L.Control.extend({
        options: {
            position: 'topright'
        },
        onAdd: function(m) {
            var btn = L.DomUtil.create('button')
            btn.innerText = 'Delete layer 1'
            L.DomEvent.on(btn, 'click', function() {
                // Remove legend uses entry id, which can be accessed through `htmllegend._entries`
                htmlLegend1and2.removeLegend(1)
                m.removeControl(this)
            })
            return btn
        }
    })
    map.addControl(new DeleteControl())
</script>
</body>
</html>