title: Create a legend in MapBox GL/JavaScript for both points and polygons
body: <p>I am making my first map with MapBox GL by closely following their <a href="https://www.mapbox.com/help/choropleth-studio-gl-pt-2/" rel="nofollow noreferrer">choropleth example</a>. In my data I have a polygon and some points and I would like to have a legend for both with different shapes (a line and a point) and colors. I am stuck with the color part because polygon color is given by 'line-color' while for points is 'circle-color'. Do you know how to add this differentiation in the code below?</p>
  
  <pre><code>map.on('load', function() {
  
    // the rest of the code will go in here
    var layers = ['torpigna', 'bar'];
  
    layers.forEach(function(layer) {
  
    var color = map.getPaintProperty(layer, 'circle-color');
    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);
  });
  });
  </code></pre>
  
  <p>Thanks,
  Jacopo </p>