javascript - Leaflet GeoJSON map legend

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('
color="red">'+feature.properties.Title+'
Address: 
'+feature.properties.Head+'
'+feature.properties.Description+'
 
Website:'+feature.properties.URL+'
');
}

    }).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('
color="red">'+feature.properties.Title+'
Address: 
'+feature.properties.Head+'
'+feature.properties.Description+'
 
'+feature.properties.URL+'');

}

    }).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('
'+feature.properties.Title+'
 
Address: '+feature.properties.Head+'
 
'+feature.properties.Description+'
 

'+feature.properties.URL+''); 
}
}).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 = ['Categories'],
categories = ['Company','Church','Shop','Other'];

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

        div.innerHTML += 
        labels.push(
            ' ' +
        (categories[i] ? categories[i] : '+'));


    }
    div.innerHTML = labels.join('
');
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?