While working on my map using leaflet, I decided to implement a dynamic color concept based on input data. However, despite comparing 3 sets of data to ensure accuracy, some parts of the color scheme are displaying incorrect results. Below is the snippet of the JavaScript code responsible for the color logic:
data_increase = [5]
data_decrease = [14]
data_equal = [29]
//data derived from input
function color_region_a(fillColor) {
if (data_increase < data_decrease && data_decrease > data_equal)
return 'green';
else if (data_increase < data_decrease && data_decrease < data_equal)
return '#7FFF00'; //color between green and yellow (Chartreuse)
else if (data_equal > data_increase && data_equal > data_decrease)
return 'yellow';
else if (data_equal > data_increase && data_increase > data_decrease)
return 'orange';
else(data_increase > data_decrease && data_increase > data_equal)
return 'red';
};
Although there seems to be no issue with the map implementation as seen below:
var region_a = L.geoJson(RegionA, {
"color":"white",
fillColor: color_region_a(),
opacity: 10,
}).addTo(map)
The problem lies in the fact that the function color_region_a always returns red for the fillColor instead of the expected result #7FFF00 or chartreuse. Can anyone pinpoint where I might have gone wrong in my approach? Any alternative methods would be appreciated. Thank you.