Add legend for species colors

[damianooldoni]

This is a sub- issue for solving #209.

I want to add a legend with colors.

I added it with:

// Add legend to the map
        var legend = L.control({position: 'bottomright'});

        legend.onAdd = function(map) {
            var div = L.DomUtil.create('div', 'legend');
            var labels = ['<strong>Species</strong>'];
            for (var species in speciesColors) {
                labels.push(
                    '<i style="background:' + speciesColors[species] + '"></i> ' +
                    species
                );
            }
            div.innerHTML = labels.join('<br>');
            return div;
        };

        legend.addTo(map);

But I need to add the background color and some other style features I think. Examples I got from tutorials are all referring to a <style> section. Something like this:

<style>
  #map {
    height: 600px;
    width: 100%;
  }
  .legend {
    background: white;
    line-height: 1.5em;
    padding: 10px;
    margin: 10px;
    border-radius: 5px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
  }
  .legend i {
    width: 18px;
    height: 18px;
    float: left;
    margin-right: 8px;
    opacity: 0.7;
  }
</style>

@peterdesmet: Is this