javascript - Changing marker colour based on property in Leaflet - Stack Overflow

admin管理员组

文章数量:1291009

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. .awesome-markers. Thanks

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./lvoogdt/Leaflet.awesome-markers. Thanks

• javascript
• leaflet

Share Improve this question Follow edited Apr 25, 2017 at 17:02 Steven asked Apr 25, 2017 at 14:30 StevenSteven 17911 gold badge11 silver badge55 bronze badges 1

• Is it a typo customColor vs customColour? – xmojmr Commented Apr 26, 2017 at 5:34

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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
});

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.

本文标签： javascriptChanging marker colour based on property in LeafletStack Overflow