Leaflet GeoJSON map legend

Question

I am struggling with creation of the map legend adequate to my GeoJSON stylization.

The code looks like below:

var geojsonMarkerOptions = {
radius: 8,
fillColor: "#ff7800",
color: "#000",
weight: 1,
opacity: 1,
fillOpacity: 0.8
};

var sitis = L.geoJSON(sitec, {
pointToLayer: function (feature, latlng) {
feature.properties.myKey = feature.properties.Title + ', ' + 
feature.properties.Head
    return L.circleMarker(latlng, geojsonMarkerOptions);
},
    onEachFeature: function (feature, layer) {
        layer.bindPopup('<h1><u><font 
color="red">'+feature.properties.Title+'</h1></u></font><h2>Address: 
'+feature.properties.Head+'</h2><p>'+feature.properties.Description+'</p><p> 
Website:'+feature.properties.URL+'</p>');
}

    }).addTo(map);

2nd layer

var geojsonMarkerOptions2 = {
radius: 5,
fillColor: "#ffc34d",
color: "#1a1100",
weight: 1,
opacity: 1,
fillOpacity: 0.4
};

var church = L.geoJSON(test, {
pointToLayer: function (feature, latlng) {
feature.properties.myKey = feature.properties.Title + ', ' + 
feature.properties.Head
    return L.circleMarker(latlng, geojsonMarkerOptions2);
},
    onEachFeature: function (feature, layer) {
        layer.bindPopup('<h1><u><font 
color="red">'+feature.properties.Title+'</h1></u></font><h2>Address: 
'+feature.properties.Head+'</h2><p>'+feature.properties.Description+'</p> 
<a>'+feature.properties.URL+'</a>');
}

    }).addTo(map);

And 3rd one with custom icon...

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

L.geoJson(tesco, {
  pointToLayer: function (feature, latlng) {
return L.marker(latlng, {icon: myIcon});
  },
  onEachFeature: function(feature, layer) {  
layer.bindPopup('<h1><u><font color="red">'+feature.properties.Title+'</h1> 
</u></font><h2>Address: '+feature.properties.Head+'</h2> 
<p>'+feature.properties.Description+'</p> 
<a>'+feature.properties.URL+'</a>'); 
}
}).addTo(map);  

There are ready GeoJSON layers implemented to the map.

Now the legend code

function getColor(d) {
    return d === 'Company'  ? "#de2d26" :
           d === 'Church'  ? "#377eb8" :
           d === 'Shop' ? "#4daf4a" :
           d === 'Other' ? "#984ea3" :
                        "#ff7f00";
    }

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

with CSS file...

.info
 {
        padding: 6px 8px;
        font: 14px/16px Verdana, Geneva, sans-serif;
        background: white;
        background: rgba(255,255,255,0.8);
        box-shadow: 0 0 15px rgba(0,0,0,0.2);
        border-radius: 5px;
 }

.legend {
        line-height: 18px;
        color: #555;
    }

.legend i {
        width: 15px;
        height: 15px;
        float: left;
        margin-right: 8px;
        opacity: 0.7;
    }

I tried to replace

fillColor: getColor(feature.properties.TypeOfIssue),

with

fillColor: getColor(feature.properties.geojsonMarkerOptions),

but no effect at all,

Is there some solution to make this legend compatible with the style of single GeoJSON layer provided?

Answer 1

It looks like I partially solved it. At least I am able to sort the problem on the general way.

In order to match the color values I needed to literally copy the color values from my GeoJSON marker colors set above:

var geojsonMarkerOptions2 = {
radius: 5,
fillColor: "#ffc34d",
color: "#1a1100",
weight: 1,
opacity: 1,
fillOpacity: 0.4
};

Where the most important is "FillColor".

And then focus on the CSS file, where the .circle class is needed:

.circle
{
float: left;
border: 1px solid #222;
border-radius: 50%;
}

As per as:

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

In

Answer 2

you are adding the array to div.innerHTML, instead of HTML. try this

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

}
div.innerHTML = labels.join('<br>');