Changing marker colour based on property in Leaflet

Question

I'm aiming to have my markers in three different colours depending on their rating property. I have seen a similar post where an object was used to define the colours. Each marker has a rating attribute between 1 and 5.

I was thinking of using a else if statement e.g

if (rating < 3) {
    markerColor: 'red'
} else if (rating = 3 ) {
    markerColor: 'orange'
} else {
    markerColor: 'green'
}

I am creating my markers as follows:

for (var i = 0; i < data.length; i++)   {

    var customOptions = {
        'maxWidth': '500',
        'className' : 'custom'
    };

    //Custom icon
    var blueMarker = L.AwesomeMarkers.icon({
        markerColor: 'blue'
    });

    //Create markerLocation variable    
    var markerLocation = new L.LatLng(data[i].lat, data[i].lon);

    //Create marker variable
    var marker = new L.Marker(markerLocation, {icon: blueMarker});

    marker.bindPopup("<p><h2>Rating:</h2> " + data[i].rating_value,
                     customOptions);
}

Would the else if statement be used when assigning the blueMarker variable?

Thanks

I used

  var = customColour = "green";

  if (data[i].rating_value < 3)
    customColor = "red";
  else if (data[i].rating_value === 3)
    customColor = "orange";

//Create custom icon
  var customMarker = L.AwesomeMarkers.icon({
  markerColor: customColour
  });

//Create markerLocation variable    
  var markerLocation = new L.LatLng(data[i].lat, data[i].lon);

//Create marker variable
  var marker = new L.Marker(markerLocation, {icon: customMarker});

However the AwesomeMarkers plugin only accepts colours, so I dont think using customColour worked. https://github.com/lvoogdt/Leaflet.awesome-markers. Thanks

Answer 1

You'd use the conditional statement to determine the value which gets passed into the markerColor property. In my example below, I store the determined colour within a variable named customColor:

var customColor = "green";

if (rating < 3)
  customColor = "red";
else if (rating === 3)
  customColor = "orange";

var blueMarker = L.AwesomeMarkers.icon({
  markerColor: customColor
});

Answer 2

I would use a function so you can easily add more keys in the future. It would look something like:

function determineColor(rating) {
  if ( rating < 3) {
    return 'red';
  } else if ( rating === 3 ) {
    return 'orange';
  } else {
    return 'blue';
  }
}

var Marker = L.AwesomeMarkers.icon({
  markerColor: determineColor(rating)
});

Also reminder one = assigns values to variables and === checks for equality.