¿Cómo puedo crear un control de leyenda personalizado usando íconos de L.ExtraMarkers.icon en Leaflet?

Question

¿Existe alguna forma de agregar Leaflet Extramarkers a mi leyenda? Por lo que encontré en Google, parece que tendré que agregar una imagen de los marcadores... sin embargo, esperaba poder utilizar los que creé.

var Icon = L.ExtraMarkers.icon({
                        icon: 'fa-graduation-cap',
                        markerColor: theIcon,
                        shape: 'circle',
                        prefix: 'fa'
});

function theIcon(ct){
    if (ct == "Public"){
        Icon.options.markerColor = "orange"
    }
    else if (ct == "Private"){
        Icon.options.markerColor = "cyan"
    }
    else{
        Icon.options.markerColor = "red"
    }
    return Icon
}

function style(feature, latlng){

    switch (feature.properties.Sector){
                case 'Public'  : return L.marker(latlng,{icon: theIcon("Public")}).addTo(map); 
                case 'Private' : return L.marker(latlng,{icon: theIcon("Private")}).addTo(map);
    }
}

var univ = new L.WFST(
        {
            url: 'http://localhost:8080/geoserver/HEC/wfs',
            typeNS: 'HEC',
            typeName: 'Unis',
            crs: L.CRS.EPSG4326,
            geometryField: 'the_geom',
            showExisting: true,
            maxFeatures: 500,
        },
    new L.Format.GeoJSON({
        pointToLayer: style,     
    })
);

Editar:

El código para la leyenda que estoy intentando crear es:

var leyenda = L.control({position: 'bottomright'});

leyenda.onAdd = function (map) {

    var div = L.DomUtil.create('div', 'info legend'),
        grades = ['Publico', 'Privado', 'Seleccionado'];

    for (var i = 0; i < grades.length; i++) {
        div.innerHTML += 
            ' ' +  grades[i] +  '';
    }

    return div;
};

leyenda.addTo(map);

Answer 1

L.ExtraMarkers.icon es una extensión del estándar Leaflet L.icon, lo que significa que el código HTML real del icono se crea solo después de que se agrega el marcador al mapa, y aún así, el código HTML del icono solo es accesible a través de la propiedad interna ._icon.

Pero el código HTML del icono también se puede crear independientemente de los marcadores del mapa con el método .createIcon(). Para usar el icono fuera del contexto del marcador, su estilo CSS debe modificarse un poco, por lo que en tu caso el código podría verse algo como esto:

CSS

.legend-icon {
  display: inline-block;
}
.legend-icon .leaflet-marker-icon {
  position: relative !important;
  margin-left: 0px !important;
  margin-top: 0px !important;
}

JS

var markerColor = {
  "Public": "orange",
  "Private": "cyan",
  "Selected": "red"
};

function theIcon(ct){
  var icon = L.ExtraMarkers.icon({
    icon: 'fa-graduation-cap',
    markerColor: markerColor[ct],
    shape: 'circle',
    prefix: 'fa'
  });
  return icon;
}

var legend = L.control({position: 'bottomright'});
legend.onAdd = function (map) {     
  var div = L.DomUtil.create('div', 'info legend');
  var grades = ['Public', 'Private', 'Selected'];
  div.innerHTML = '';
  for (var i = 0; i < grades.length; i++) {
     var icon = theIcon(grades[i]).createIcon();
     div.innerHTML += '' + icon.outerHTML + '' + grades[i] + '';
  }
  return div;
};      
legend.addTo(map);

Así es como se verá entonces: