0

Knowing the thing with leaflet chloropleth:

Styling individual features in a GeoJSON layer https://leafletjs.com/examples/choropleth/

we can distinguish the range of values by colour.

I would like to distinguish it by radius.

The example below doesn't explain my problem:

https://stackoverflow.com/questions/44232752/how-to-style-features-depending-on-comparison-operators-in-leaflet

I tried sth like this:

 job2 = L.geoJson(data2, {  //layer2 Virgin Media start 
    style: function(feature) {
    if (feature.properties.Post_Survey_Home_Count > 10)
    return {
    radius: 8
    };
    }
    if (feature.properties.Post_Survey_Home_Count > 50)
    return {
    radius: 10
    };
    },
    pointToLayer: function(feature, latlng) {
            feature.properties.myKey = '<b>'+ feature.properties.Owner + '</b>; ' + feature.properties.Address
            label = String(feature.properties.Owner)
        return L.circleMarker(latlng, {
            radius:6,
            opacity: .5,
            //color: "#000",
            color:getColor2(feature.properties.Type),
            fillColor:  getColor2(feature.properties.Type),
            fillOpacity: 0.8
        }).bindTooltip(label, {permanent: false, direction: "top", 
   className: "my-labels"}).openTooltip(); 
    },
    onEachFeature: function (feature, layer) {  // Virgin Media tracker data start ---------
                layer._leaflet_id = feature.properties.Owner;
            var popupContent = "<p><h2>" +
                feature.properties.Owner + "</h2><font color='red'> 
  <h3>Status:</font> " +
                feature.properties.Status + "</h3><b> NBU ID:</b> " +
                feature.properties.NBU + "</br><b> Ticket ID:</b> " +
                feature.properties.Ticket_ID + "</br><b> Address (street):</b> " +
                feature.properties.Address + "</br><b> Address (postcode):</b> " +
                feature.properties.Postcode + "</br><b> Asbestos report:</b> " +
                feature.properties.Asbestos_rep + "</br><font color='blue'><b>Planner</b>:</font> " +
                feature.properties.Planner + "</br><font color='blue'><b>Surveyor</b>:</font> " +
                feature.properties.Surveyor + "</br></h2><b>Units provisional:</b> " +
                feature.properties.Client_Home_Count + "</br></h2><b> Post survey units:</b> " +
                feature.properties.Post_Survey_Home_Count + "</br> <b>STATS (applied):</b> " +
                feature.properties.STATS_Applied_for_date + "</br> <b>STATS (completed):</b> " +
                feature.properties.STATS_compleeted + "</br> <b>VM issue date:</b> " +
                feature.properties.Date_issued_from_VM + "</br> <b>QC date:</b> " +
                feature.properties.ACTUAL_Internal_QC_Date + "</br> <b>VM ECD date:</b> " +
                feature.properties.VM_ECD_date + "</br><b>General notes:</b> " +
                feature.properties.General_notes + "</br>" +
                '</br><center><a href="'+ feature.properties.Directory +'" target="_blank">Local directory</a></center></p>' +
                '<center><font color="red"><a href="'+ feature.properties.Sharepoint +'" target="_blank">Sharepoint</a></font></center></p>';                   
            if (feature.properties && feature.properties.popupContent) {
                    popupContent += feature.properties.popupContent;
                }
            layer.bindPopup(popupContent);
            layer.on({ 
                mouseover: function (e) {
                    this.setStyle({
                        'fillColor': '#663300',
                        'weight':11
                    });
                },
                mouseout: function (e) {
                    this.setStyle({
                        'fillColor': getColor2(feature.properties.Type),
                        'weight': 2
                    });
                }
            }); //layer.on finish
    } //Virgin Media onEachfeature tracker finish
})//.addTo(map);  //layer 2 Virgin Media finish

and also

   job2 = L.geoJson(data2, {  //layer2 Virgin Media start   
    pointToLayer: function(feature, latlng) {
            feature.properties.myKey = '<b>'+ feature.properties.Owner + '</b>; ' + feature.properties.Address
            label = String(feature.properties.Owner)
        return L.circleMarker(latlng, {
            radius:6,
            opacity: .5,
            //color: "#000",
            color:getColor2(feature.properties.Type),
            fillColor:  getColor2(feature.properties.Type),
            fillOpacity: 0.8
        }).bindTooltip(label, {permanent: false, direction: "top", className: "my-labels"}).openTooltip(); 
    },
    onEachFeature: function (feature, layer) {  // Virgin Media tracker data start ---------
                layer._leaflet_id = feature.properties.Owner;
            var popupContent = "<p><h2>" +
                feature.properties.Owner + "</h2><font color='red'><h3>Status:</font> " +
                feature.properties.Status + "</h3><b> NBU ID:</b> " +
                feature.properties.NBU + "</br><b> Ticket ID:</b> " +
                feature.properties.Ticket_ID + "</br><b> Address (street):</b> " +
                feature.properties.Address + "</br><b> Address (postcode):</b> " +
                feature.properties.Postcode + "</br><b> Asbestos report:</b> " +
                feature.properties.Asbestos_rep + "</br><font color='blue'><b>Planner</b>:</font> " +
                feature.properties.Planner + "</br><font color='blue'><b>Surveyor</b>:</font> " +
                feature.properties.Surveyor + "</br></h2><b>Units provisional:</b> " +
                feature.properties.Client_Home_Count + "</br></h2><b> Post survey units:</b> " +
                feature.properties.Post_Survey_Home_Count + "</br> <b>STATS (applied):</b> " +
                feature.properties.STATS_Applied_for_date + "</br> <b>STATS (completed):</b> " +
                feature.properties.STATS_compleeted + "</br> <b>VM issue date:</b> " +
                feature.properties.Date_issued_from_VM + "</br> <b>QC date:</b> " +
                feature.properties.ACTUAL_Internal_QC_Date + "</br> <b>VM ECD date:</b> " +
                feature.properties.VM_ECD_date + "</br><b>General notes:</b> " +
                feature.properties.General_notes + "</br>" +
                '</br><center><a href="'+ feature.properties.Directory +'" target="_blank">Local directory</a></center></p>' +
                '<center><font color="red"><a href="'+ feature.properties.Sharepoint +'" target="_blank">Sharepoint</a></font></center></p>';                   
            if (feature.properties && feature.properties.popupContent) {
                    popupContent += feature.properties.popupContent;
                }
            layer.bindPopup(popupContent);
            layer.on({ 
                mouseover: function (e) {
                    this.setStyle({
                        'fillColor': '#663300',
                        'weight':11
                    });
                },
                mouseout: function (e) {
                    this.setStyle({
                        'fillColor': getColor2(feature.properties.Type),
                        'weight': 2
                    });
                }
            }); //layer.on finish
    } //Virgin Media onEachfeature tracker finish
})//.addTo(map);  //layer 2 Virgin Media finish

function styling (feature) {
if (feature.properties.Post_Survey_Home_Count > 20) {
    return {color: "red"}
} else {
    return {color: "yellow"}
}
  }

but unfurtunately I can't see the result.

Could we add elements other than equal === at all?

enter image description here

  • You will have much greater chances of receiving and answer to your questions if your question is clear and concise: (1) I have this and this (2) On the basis of this and this (data) I want to achieve this (3) I have tried this (4) as a result I get this but not this. I must admit that as your many questions were formulated till now I have hard time understanding what you want to achieve. It should be short and precise. – TomazicM Nov 12 at 17:43
  • So, to continue, your question is probably shortly: I have GeoJSON, where features (point, polygon?) have this property. I would like to display circle markes on each feature with radius that depends on that feature property value. Till now I have tried this, but with no success. I get only this. – TomazicM Nov 12 at 17:48
  • I though, that I clearly precised what I mean. If so, I will work on it. My thoughs refer to the code if (feature.properties.Post_Survey_Home_Count > 10) return { radius: 8 }; } if (feature.properties.Post_Survey_Home_Count > 50) return { radius: 10 }; }, where I want to apply > instead of === but it doesn't work – Mariusz Krukar Nov 13 at 9:19
0

Basically better is to set the if statements in the return L.circleMarker instead of style. The statements should be also ordered properly, showing the biggest values on the top and the lowest on the bottom. Finally the code looks like this:

  job2 = L.geoJson(data2, {  //layer2 Virgin Media start    
    style: style2,
    pointToLayer: function(feature, latlng) {
            feature.properties.myKey = '<b>'+ feature.properties.Owner + '</b>; ' + 
  feature.properties.Address
            label = String(feature.properties.Owner)
            if (feature.properties.Post_Survey_Home_Count >=100)
        return L.circleMarker(latlng, {
            radius:12,
            opacity: .5,
            //color: "#000",
            color:getColor2(feature.properties.Type),
            fillColor:  getColor2(feature.properties.Type),
            fillOpacity: 0.8
        }).bindTooltip(label, {permanent: false, direction: "top", className: "my-labels"}).openTooltip(); 
           else if (feature.properties.Post_Survey_Home_Count >=50)
           return L.circleMarker(latlng, {
            radius:9,
            opacity: .5,
            //color: "#000",
            color:getColor2(feature.properties.Type),
            fillColor:  getColor2(feature.properties.Type),
            fillOpacity: 0.8
         }).bindTooltip(label, {permanent: false, direction: "top", className: "my-labels"}).openTooltip(); 
            else if (feature.properties.Post_Survey_Home_Count >=1)
            return L.circleMarker(latlng, {
            radius:6,
            opacity: .5,
            //color: "#000",
            color:getColor2(feature.properties.Type),
            fillColor:  getColor2(feature.properties.Type),
            fillOpacity: 0.8
          }).bindTooltip(label, {permanent: false, direction: "top", className: "my-labels"}).openTooltip(); 
            else if (feature.properties.Post_Survey_Home_Count === "")
            return L.circleMarker(latlng, {
            radius:4,
            //opacity: .5,
            //color: "#000",
            color:getColor2(feature.properties.Type),
            fillColor:  getColor2(feature.properties.Type),
            fillOpacity: 0.6,
        }).bindTooltip(label, {permanent: false, direction: "top", className: "my-labels"}).openTooltip(); 
    },
    onEachFeature: function (feature, layer) {  // Virgin Media tracker data start ---------
                layer._leaflet_id = feature.properties.Owner;
            var popupContent = "<p><h2>" +
                feature.properties.Owner + "</h2><font color='red'><h3>Status:</font> " +
                feature.properties.Status + "</h3><b> NBU ID:</b> " +
                feature.properties.NBU + "</br><b> Ticket ID:</b> " +
                feature.properties.Ticket_ID + "</br><b> Address (street):</b> " +
                feature.properties.Address + "</br><b> Address (postcode):</b> " +
                feature.properties.Postcode + "</br><b> Asbestos report:</b> " +
                feature.properties.Asbestos_rep + "</br><font color='blue'><b>Planner</b>:</font> " +
                feature.properties.Planner + "</br><font color='blue'><b>Surveyor</b>:</font> " +
                feature.properties.Surveyor + "</br></h2><b>Units provisional:</b> " +
                feature.properties.Client_Home_Count + "</br></h2><b> Post survey units:</b> " +
                feature.properties.Post_Survey_Home_Count + "</br> <b>STATS (applied):</b> " +
                feature.properties.STATS_Applied_for_date + "</br> <b>STATS (completed):</b> " +
                feature.properties.STATS_compleeted + "</br> <b>VM issue date:</b> " +
                feature.properties.Date_issued_from_VM + "</br> <b>QC date:</b> " +
                feature.properties.ACTUAL_Internal_QC_Date + "</br> <b>VM ECD date:</b> " +
                feature.properties.VM_ECD_date + "</br><b>General notes:</b> " +
                feature.properties.General_notes + "</br>" +
                '</br><center><a href="'+ feature.properties.Directory +'" target="_blank">Local directory</a></center></p>' +
                '<center><font color="red"><a href="'+ feature.properties.Sharepoint +'" target="_blank">Sharepoint</a></font></center></p>';                   
            if (feature.properties && feature.properties.popupContent) {
                    popupContent += feature.properties.popupContent;
                }
            layer.bindPopup(popupContent);
            layer.on({ 
                mouseover: function (e) {
                    this.setStyle({
                        'fillColor': '#663300',
                        'weight':11
                    });
                },
                mouseout: function (e) {
                    this.setStyle({
                        'fillColor': getColor2(feature.properties.Type),
                        'weight': 2
                    });
                }
            }); //layer.on finish
    } 
}).addTo(map);  //layer 2 Virgin Media finish

enter image description here

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.