setting the style of each leaflet feature

Question

I am using leaflet and geojson of some regions to show the related calculations about those regions on map by color. I calculate each region value by a function which is called calculation(). The output of this function is a simple float. Here is what I have done:

1. I use onEachFeature for loading each feature.
2. Then I use Ajax to do some calculations. (I use Jquery here)
3. I save the calculation results in an array.
4. then, I use .done to set the style of each feature (which is a region) to set its color.

Here is my code:

var region=L.geoJSON(qom, {onEachFeature:
function (feature, layer) {
    $.ajax({    //send the ajax with following parameter
        type:"POST",
        timeout: 2000,
        cache:false,
        url:    "../tool/calculation.php", //the php we are sending info too and has got 
        data: { },    // multiple data sent using ajax
        success: function (data) {    //now we have data
            $.each(data, function(calculation_related_key,calculation_related_content) {
                region_array_calculation.push([the_region_id, calculation_related_content['result']]);
            });
        }
    }).done(function (){
        L.geoJSON(qom, {style : set_feature_style(feature, region_array_calculation)}).addTo(mymap);
        });
}
});

Here is setting style code:

function set_feature_style (feature, calculation_array) {
for (i=0;i<calculation_array.length;i++) {
    if (calculation_array[i][0]==feature.properties.region_id) {
        return {
            weight: 0.5,
            opacity: 0.3,
            color: 'Black',
            dashArray: '3',
            fillOpacity: 0.2,
            fillColor:get_feature_color(calculation_array[i][1])
        }  
    }
}
}

Here I set the color

function get_feature_color(input) {
var x= input;
switch (true)   {
case (x>=0 && x<=0.5):
    return 'blue';
    break;
case (x>0.5 && x<=1):
    return 'green';
}
}

But unfortunately the result I get is all in blue. However the calculation for some of the regions is more than 0.5.

Answer 1

I think the code is ok: I used your functions with the following array:

var calcArray = [
  [0,0.4],
  [1,0.9],
  [2,0.1],
  [3,0.89],
  [4,0.7]
];

and the following code to paint the regions:

$("#regionX").css("background-color",(set_feature_style({properties:{region_id:X}},calcArray).fillColor));

You can see a live demo below :)

var calcArray = [
  [0,0.4],
  [1,0.9],
  [2,0.1],
  [3,0.89],
  [4,0.7]
];

function set_feature_style (feature, calculation_array) {
for (i=0;i<calculation_array.length;i++) {
    if (calculation_array[i][0]==feature.properties.region_id) {
        return {
            weight: 0.5,
            opacity: 0.3,
            color: 'Black',
            dashArray: '3',
            fillOpacity: 0.2,
            fillColor:get_feature_color(calculation_array[i][1])
        }  
    }
}
}

function get_feature_color(input) {
var x= input;
switch (true)   {
case (x>=0 && x<=0.5):
    return 'blue';
    break;
case (x>0.5 && x<=1):
    return 'green';
}
}

$("#region0").css("background-color",(set_feature_style({properties:{region_id:0}},calcArray).fillColor));
$("#region1").css("background-color",(set_feature_style({properties:{region_id:1}},calcArray).fillColor));
$("#region2").css("background-color",(set_feature_style({properties:{region_id:2}},calcArray).fillColor));
$("#region3").css("background-color",(set_feature_style({properties:{region_id:3}},calcArray).fillColor));
$("#region4").css("background-color",(set_feature_style({properties:{region_id:4}},calcArray).fillColor));

.region{
  width:100px;
  height:100px;
  color:white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="region" id="region0">region 0</div>
<div class="region" id="region1">region 1</div>
<div class="region" id="region2">region 2</div>
<div class="region" id="region3">region 3</div>
<div class="region" id="region4">region 4</div>