Legends

The map legend should be positioned at the bottom left corner of the map container. If the map layers listed in the legend can be toggled (show/hide display), then they should also appear in the layer control after the list of base layers (street, satellite, terrain).

Example & Code

Map Legend
	Residential Broadband of at least 50 Mbps/5 Mbps
	Residential Broadband of at least 100 Mbps/5 Mbps
	Tribal land
	Urban area

<div id="map-container">
    <div id="legend" class="map-legend" aria-expanded="true">
        <table class="table-legend">
            <thead>
                <tr>
                    <th colspan="3">
                        <span class="icon icon-list"></span> <span class="map-legend-name">Map Legend</span>
                        <button class="btn-closeLegend btn btn-xs">
                            <span class="icon icon-remove"></span> <span class="sr-only">Hide legend</span>
                        </button>
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <div class="symbol" style="background-color: #3182bd;"></div>
                    </td>
                    <td> Residential Broadband of at least 50 Mbps/5 Mbps</td>
                </tr>
                <tr>
                    <td>
                        <div class="symbol" style="background-color: #08306b;"></div>
                    </td>
                    <td> Residential Broadband of at least 100 Mbps/5 Mbps</td>
                </tr>
                <tr class="divider">
                    <td>
                        <div class="symbol" style="background-image: url(/design-standards/1.x/images/legend-thumb-slash.png);"></div>
                    </td>
                    <td> Tribal land</td>
                </tr>
                <tr>
                    <td>
                        <div class="symbol" style="background-image: url(/design-standards/1.x/images/legend-thumb-dot.png);"></div>
                    </td>
                    <td> Urban area</td>
                </tr>
            </tbody>
        </table>
    </div>
    <button id="btn-openLegend" class="btn-openLegend leaflet-control-layers">
        <span class="icon icon-list"></span>
        <span class="sr-only">Map Legend</span>
    </button>
</div>

.map-legend {   
   background-color: #fff; 
   border: solid 1px #999; 
   bottom: 10px; 
   left: 10px; 
   position: absolute; 
   z-index: 2;
}

.table-legend {
    margin: 5px;
}

.table-legend tbody td {
    padding: 3px;
}

.table-legend tbody td:first-child {
    padding-left: 0;
}

.table-legend .symbol {
    background-color: #fff;
    border: solid 1px #999;
    height: 20px;
    width: 20px;
}

/* Add layer control */
L.control.layers({
    'Street': baseStreet,
    'Satellite': baseSatellite,
    'Terrain': baseTerrain
}, 
{
   '50 Mbps/5 Mbps': bpr_50,
   '100 Mbps/5 Mbps': bpr_100,
   'Tribal land': bpr_tribal,
   'Urban area': bpr_county_layer_urban 
},         
{
    position: 'topleft'
}
).addTo(map);

/* Buttons to open/close legend */
$('.btn-closeLegend').on("click", function(e) {
    $('#legend')
        .hide('fast')
        .attr('aria-expanded', false);
});

$('#btn-openLegend').on("click", function(e) {
    $('#legend')
        .show('fast')
        .attr('aria-expanded', true);
});