2

I am trying to add a legend to my leaflet map and no matter what I try I cannot get it to display properly. I have imported a point level geojson into my map and I have styled the points in a similar way to how it's done within the Leaflet Choropleth example:

function getColor(d) {
        return d === 'Road Surface'  ? "#de2d26" :
               d === 'Signage'  ? "#377eb8" :
               d === 'Line Markings' ? "#4daf4a" :
               d === 'Roadside Hazards' ? "#984ea3" :
                            "#ff7f00";
    }

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

        };
    }

I can't add the code for the data because it contains sensitive information but I have added the geojson and have added some popups to it.

When it comes to the legend here is my code:

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

    var div = L.DomUtil.create('div', 'info legend');
    labels = ['<strong>Categories</strong>'],
    categories = ['Road Surface','Signage','Line Markings','Roadside Hazards','Other'];

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

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

legend.addTo(map);

This code brings up a box that contains a title and the categories that I have defined, but no colours, which is the thing that I can't work out.

3

I found the problem. The code that I posted in the question above was correct but I had made a schoolboy error in the css part.
I am pretty new to leaflet and coding in general and there is very little out there on how to produce legends (other than the Choropleth example). Here is the code that works for me that produces a legend like this: enter image description here

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

    var div = L.DomUtil.create('div', 'info legend');
    labels = ['<strong>Categories</strong>'],
    categories = ['Road Surface','Signage','Line Markings','Roadside Hazards','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);
0

You could check if your function"get color"is written inside some other function(for example some sort of init function and your for loop not.what happens if you run getColor(categories[0]) in your console? Apart from that categories[i] + 1 should be just categories[i] in order not to get problems during your last loop...

  • Thanks for getting back to me. 'Get Color' is also added when i'm calling the geojson as a circle marker: L.geoJson(RRData, { style: style, pointToLayer: function (feature, latlng) { var popupOptions = { maxWith: 300 };var popupContent = "<b>Location: </b>" + feature.properties.ActualLocation + "</br>" + "<b>Issue: </b>" + feature.properties.TypeOfIssue + "</br>" + "<b>Information: </b>" + feature.properties.Information; return L.circleMarker(latlng, getColor(feature.properties.typeofissue)).bindPopup(popupContent, popupOptions); } }).addTo(map); Could this be where the problem is? – Richard Butler Feb 9 '15 at 23:02
0

I am having a similar issue, but my legend only shows one color for the different categories. But my layer coloring is correct.enter image description here

By the way your code really helped me out! I have been struggling with categorical data for a while! The chloropleth was easy.

  • This appears to be a new question, not an answer. – nmtoken Feb 19 '18 at 9:44

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.