1

Is there any way I can add Leaflet Extramarkers to my legend? From what I googled, it seems I'll have to add an image of markers... however I was hoping I could use the ones I created.

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,     
    })
);

Edit:

Code for the legend that I am trying to create is:

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

legend.onAdd = function (map) {

    var div = L.DomUtil.create('div', 'info legend'),
        grades = ['Public', 'Private', 'Selected'];

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

    return div;
};

legend.addTo(map);
3
  • What is "my legend"? Please edit your question with additional info about what are you trying to do.
    – TomazicM
    Jun 27 at 12:45
  • It's also not clear how you expect markerColor option to work, since you specified theIcon function. It should be character string, specifying marker color, and this only if svg option is se to true.
    – TomazicM
    Jun 27 at 12:53
  • My legend - I meant the legend that I am creating. It’s not a library!
    – Aneeqa
    Jun 29 at 9:19

1 Answer 1

2

L.ExtraMarkers.icon is an extension of standard Leaflet L.icon, which means actual icon HTML code is created only after marker is added to the map, and even then icon HTML code is accessible only through internal ._icon property.

But icon HTML code can be created also independently of map markers with the .createIcon() method. To use the icon outside marker context, its CSS style has to be modified a bit, so in your case code could look something like this:

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 += '<div class="legend-icon">' + icon.outerHTML + '</div><div class="legend-icon">' + grades[i] + '</div></br>';
  }
  return div;
};      
legend.addTo(map);

That's how it looks like then:

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.