1

I would like to raise the query, that I haven't seen before in spite of a lot of problems regarding to GeoJSON features filtering by properties.

This is using the formulas such as Greater than, lower than, which seems to not work in this software.

As we know, the JavaScript has the comparison and logical operations like in the link below:

https://www.w3schools.com/js/js_comparisons.asp

among of which I saw in Leaflet only === expression saying, that the value or type is equal. However if we use == instead, corresponding to the "equal to" it still works as follows:

var johnlewis = L.geoJSON(jl, {
  pointToLayer: function(feature, latlng) {
  if (feature.properties.Capacity == 3) {
    return L.circleMarker(latlng, {
    radius: 10,
    fillColor: "blue",
    color: "black"
  });

   } else if (feature.properties.Capacity == 5) {
  return L.circleMarker(latlng, {
    radius: 10,
    fillColor: "green",
    color: "white"
    });

    } else if (feature.properties.Capacity == 18) {
  return L.circleMarker(latlng, {
    radius: 4,
    fillColor: "orange",
    color: "purple"
     });
   }
 },
 }).addTo(map);

enter image description here

and it's fine...

The problem starts, when I change the == into >= or >. Even one line of the code affects onto the whole result:

  var johnlewis = L.geoJSON(jl, {
  pointToLayer: function(feature, latlng) {
  if (feature.properties.Capacity > 3) {
    return L.circleMarker(latlng, {
    radius: 10,
    fillColor: "blue",
    color: "black"
     });

     } else if (feature.properties.Capacity >= 5) {
     return L.circleMarker(latlng, {
    radius: 10,
    fillColor: "green",
    color: "white"
     });

    } else if (feature.properties.Capacity == 18) {
  return L.circleMarker(latlng, {
    radius: 4,
    fillColor: "orange",
    color: "purple"
  });
  }
 },
}).addTo(map);

Then unfortunately instead of nice filter as previously (above) I see such default sizes of my circlemarkers without any selection at all :(

Their color and outline comes from the very top case considered.

Another two don't take part in it.

How can I solve this?

enter image description here

  • 1
    change the order of your clauses (18 being > 3, it is expected that the 1st condition will be satisfied). On a side note, === is not equality of type but of value and type – JGH Nov 14 at 18:14
3

In your case everytime feature.properties.Capacity > 3 the condition is satisfied and the other statements won't be considered.

Instead of using if statements I would use a switch statement:

    switch(true){
     case (feature.properties['Capacity'] > 3):
        return L.circleMarker(latlng, {
            radius: 10,
            fillColor: "blue",
            color: "black"
        });
     case (feature.properties.Capacity >= 5):
        return L.circleMarker(latlng, {
            radius: 10,
            fillColor: "green",
            color: "white"
        });
    }

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch

  • I used your code, although I have got everything in one radius instead. It looks like only 1st case iw working (I put there radius 4 instead of 10). Shall I include [break;] after each case? – Mariusz Krukar Nov 15 at 11:00
  • 1
    OK Now I got ya! Basically I did the same mistake, as @JGH told me above. The order must be from the biggest to the lowest and then everything is alright. – Mariusz Krukar Nov 15 at 11:07
1

Apart from the answer above, if we want to use if statement (as well as switch statemenmts) the most important here is an order! The biggest values should go on the top and the lowest on the bottom.

Considering the switch statement example:

var johnlewis = L.geoJSON(jl, {
  pointToLayer: function(feature, latlng) {
  switch(true){
   case (feature.properties.Capacity > 10): //if we want to cover the biggest values, they should come on the top
    return L.circleMarker(latlng, {
        radius: 10,
        fillColor: "blue",
        color: "black"
    });
 case (feature.properties.Capacity >= 3): //next lower at the bottom. If you have sth lower than 3 or without record it won't be displayed on the map!
    return L.circleMarker(latlng, {
        radius: 4,
        fillColor: "green",
        color: "red"
    });
}
},
 //onEachFeature: onEachFeature 
 }).addTo(map);

Another thing, that arises from these both codes is the value threshold. If for example we set, that something is >3, then all values equal and lower, than 3 won't be displayed on the map. It applies also to the values with no records set in the .properties.

Let's see how it looks with the if statememts either:

var johnlewis = L.geoJSON(jl, {
 pointToLayer: function(feature, latlng) {
  if (feature.properties.Capacity >= 40 ) {
    return L.circleMarker(latlng, {
    radius: 10,
    fillColor: "blue",
    color: "black"
    });

   } else if (feature.properties.Capacity >= 20) {
  return L.circleMarker(latlng, {
    radius: 7,
    fillColor: "green",
    color: "white"
  });

} else if (feature.properties.Capacity >= 1) { //in this event each value different than 0 is to be visible on the map
  return L.circleMarker(latlng, {
    radius: 4,
    fillColor: "orange",
    color: "purple"
  });
  }
},
//onEachFeature: onEachFeature 
}).addTo(map);

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.