0

I have been developed a legend, details are here:

Leaflet GeoJSON map legend

Now I am wondering how to take into account my custom icons, set for GeoJSON file.

var myIcon = L.icon({
  iconUrl: 'icon.png',
  iconSize: [32, 37],
  iconAnchor: [16, 37],
  popupAnchor: [0, -28]
});

Here is my GeoJSON custom icon set above.

Now the code, which I am considering as a potential to change...

function getColor(d) {
    return d === 'Company'  ? "#ff6600" :
           d === 'Church'  ? "#ffeecc" :
           d === 'Shop' ? "{icon:myIcon}" :
           d === 'Other' ? "#984ea3" :
                        "#ff7f00";

although, it washes out my color completely, so it doesn't work then...

function style(feature) {
    return {
        weight: 1.5,
        opacity: 1,
        fillOpacity: 1,
        radius: 6,
        fillColor: getColor(feature.properties.TypeOfIssue),
        color: "grey"

    };
}


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

var div = L.DomUtil.create('div', 'info legend');
labels = ['<strong>Categories</strong>'],
categories = ['Company','Church','Shop','Other'];

for (var i = 0; i < categories.length; i++) {

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

    }
    div.innerHTML = labels.join('<br>');
return div;
};
legend.addTo(map);

I was trying to make sth like "categories2" and place between

labels.push(
            '<i class="circle" style="background:' + getColor(categories[i]) 
+ '"></i> ' + <i class="icon"' + getColor(categories2[i]) + '"> +
        (categories[i] ? categories[i] : '+'));

but it doesn't work too.

Any ideas about how to customize this legend on your needs?

Is there a chance to make this legend with more than 1 style?

  • I admit I have no idea what you want to do. What do you mean by " take into account my custom icons". Take into account where? Do you want to use them as symbols in your legend? – TomazicM Aug 8 at 14:18
  • Yes indeed. I set a custom icon for a GeoJSON layer and I would like to have it implemented to my legend. – Mariusz Krukar Aug 8 at 15:29
  • But there is only one icon. There should be as much icons as there are legend items. – TomazicM Aug 8 at 17:02
  • Is only one, because I gave it as an example. Another two comes as a GeoJSON customization with the circle, radius, color, etc. – Mariusz Krukar Aug 8 at 19:27
  • Edit your question so it will be obvious what you want to achieve (with all the necessary data/code), otherwise it's all just guessing. – TomazicM Aug 8 at 19:30

Your Answer

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

Browse other questions tagged or ask your own question.