Leaflet : Differentiating colors dynamically

Question

Here's what I want to do:

Show all features of the GeoJSON file using Leaflets. Connect to the database, in a database there is a table that has an ID column that matches the GeoJSON file feature, and there is a column containing the range (1-4).

IF
range = 1: red;
range = 2: yellow;
range = 3: green;
range = 4: blue;

Does anyone know this example or the idea how this should be done? I'm following this method Choropleth but I can only do this by adding a property and entering the value into the GeoJson file. But now I want to do it dynamically, by storing the range number values in the database.

Answer 1

Then in your style section, do something like this, referring to the range values field this way. (I called mine Range)

color:getColor(feature.properties.Range),

Now you have to create a function to style it using those values.

// Set function for color ramp
function getColor(range){
    return range == '1' ? 'red' :
    range == '2' ? 'yellow' :
    range == '3' ? 'green' :
    range == '4' ? 'blue' :
    'white';  //In case it's not defined.
}

Note: I have quotes around the range value, as if it's stored as a string, if you stored it as a number, remove the quotes.