0

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? My legend pattern, not suitable with GeoJSON layer stylization

  • And you left getColor function as it is? – TomazicM Aug 7 at 18:38
  • Everything as you see in the code. Any ideas for this? – Mariusz Krukar Aug 8 at 8:34
  • I am goingf to answer this query on my own, because I have partially solved it. I still don't know how to switch between color and icon in the GetColor function. Any ideas? – Mariusz Krukar Aug 8 at 11:37
  • If you have new question, publish it as new question. – TomazicM Aug 8 at 12:18
0

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] : '+'));

InLegend ready

0

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

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.