D3 Examples - Mapbox Legend

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title></title>
    <meta name='robots' content='noindex, nofollow'>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.4.1/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.4.1/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        h2, h3 {
            margin: 10px;
            font-size: 1.2em;
        }
        h3 {
            font-size: 1em;
        }
        p {
            font-size: 0.85em;
            margin: 10px;
            text-align: left;
        }
        .map-overlay {
            position: absolute;
            bottom: 0;
            right: 0;
            background: rgba(255, 255, 255, 0.8);
            margin-right: 20px;
            font-family: Arial, sans-serif;
            overflow: auto;
            border-radius: 3px;
        }
        #map {
            position:absolute;
            top:0;
            bottom:0;
            width:100%;
        }
        #features {
            top: 0;
            height: 100px;
            margin-top: 20px;
            width: 250px;
        }
        #legend {
            padding: 10px;
            box-shadow: 0 1px 2px rgba(0,0,0,0.10);
            line-height: 18px;
            height: 150px;
            margin-bottom: 40px;
            width: 100px;
        }
        .legend-key {
            display:inline-block;
            border-radius: 20%;
            width: 10px;
            height: 10px;
            margin-right: 5px;
        }
​
    </style>
</head>
<body>
​
<div id='map'></div>
<div class='map-overlay' id='features'><h2>US population density</h2><div id='pd'><p>Hover over a state!</p></div></div>
<div class='map-overlay' id='legend'></div>
​
<script>
​
// define access token
mapboxgl.accessToken = 'pk.eyJ1IjoiZXhhbXBsZXMiLCJhIjoiY2p0MG01MXRqMW45cjQzb2R6b2ptc3J4MSJ9.zA2W0IkI0c6KaAhJfk9bWg';
​
//create map
var map = new mapboxgl.Map({
    container: 'map', // container id
    style: 'mapbox://styles/examples/cjgioozof002u2sr5k7t14dim' // map style URL from Mapbox Studio
});
​
// wait for map to load before adjusting it
map.on('load', function() {
​
    // make a pointer cursor
    map.getCanvas().style.cursor = 'default';
​
    // define layer names
    var layers = ['0-10', '10-20', '20-50', '50-100', '100-200', '200-500', '500-1000', '1000+'];
    var colors = ['#FFEDA0', '#FED976', '#FEB24C', '#FD8D3C', '#FC4E2A', '#E31A1C', '#BD0026', '#800026'];
​
    // create legend
    for (i=0; i<layers.length; i++) {
        var layer = layers[i];
        var color = colors[i];
        var item = document.createElement('div');
        var key = document.createElement('span');
        key.className = 'legend-key';
        key.style.backgroundColor = color;
​
        var value = document.createElement('span');
        value.innerHTML = layer;
        item.appendChild(key);
        item.appendChild(value);
        legend.appendChild(item);
    }
​
});
​
</script>
​
</body>
</html>
​
    