Cómo crear una leyenda de folleto para los puntos

Question

He puntos como este en un folleto con un mapa.

Los puntos vienen originalmente de un archivo GeoJSON y yo solía L.circleMarker a convertir a los círculos. ¿Cómo puedo crear una leyenda para estos puntos? Basado en el Interactivo Choropleth Mapa Ejemplo yo era capaz de generar una leyenda como esta:

El código que he usado es este:

var legend = L.control({position: 'bottomleft'});

legend.onAdd = function (map) {

  var div = L.DomUtil.create('div', 'info legend');



    categories = ['STX','HHX','HF','STX/HF'];

    for (var i = 0; i < categories.length; i++) {
        div.innerHTML +=
            '<i style="background:' + getColor(categories[i]) + '"></i> ' +
             (categories[i] ? categories[i] + '<br>' : '+');
    }

    return div;

Pero me gusta también coincide con la forma (círculos) a la leyenda, y no sólo el color.

Answer 1

Puede usar CSS border-radius para crear círculos.

Por ejemplo, ponga esto en su etiqueta de estilo / hoja de estilo:

 .legend .circle {
  border-radius: 50%;
  width: 10px;
  height: 10px;
  margin-top: 8px;
}
 

Luego, agregue la clase del círculo al bloque de colores cuando cree el marcador:

     div.innerHTML +=
        '<i class="circle" style="background:' + getColor(categories[i]) + '"></i> ' +
         (categories[i] ? categories[i] + '<br>' : '+');