How to set the icon for a Leaflet marker based on a variable

Question

I'm just beginning to learn coding in d3 and leaflet, i have some code that i'm experimenting with and facing some problems with setting the icon.

I wanted to change the leaflet icon depends on the data value, but i'm stuck how to show it.

This is my code,

var ActiveIcon = L.Icon.extend({
    options: {
        iconUrl: 'images/marker-icon_green.png',
        iconSize: [17, 30]
    } }); 
var NotActiveIcon = L.Icon.extend({   
     options: {
      iconUrl: 'images/marker-icon_blue.png',
      iconSize: [17, 30]   } });

d3.json("data_db.php", function(error, data) {       
  // add map markers to map layer   
   data.forEach( function(d,i) {
    // create a map marker if the lat lng is present
    if (d.latitude!=null && d.latitude!=undefined) {
      var title = d.site,
          mark = L.marker(([d.latitude, d.longitude]), {title: title});
          mark.bindPopup("<strong>" + d.site + "</strong>Status : " + d.status);
      markersLayer.addLayer(mark);
      clusterLayer.addLayer(mark);
    } 
});

How can i change the icon from the data value i have, if my d.status is equal to "Active" change as green icon, and Inactive as blue icon?

Answer 1

The documentation on custom icons is here: http://leafletjs.com/examples/custom-icons/

What you want to so is something like this (untested):

var ActiveIcon = L.Icon.extend({
        iconUrl: 'images/marker-icon_green.png',
        iconSize: [17, 30]
    }); 
var NotActiveIcon = L.Icon.extend({   
      iconUrl: 'images/marker-icon_blue.png',
      iconSize: [17, 30]   
    });

d3.json("data_db.php", function(error, data) {       
  // add map markers to map layer   
   data.forEach( function(d,i) {
    // create a map marker if the lat lng is present
    var markerIcon = NotActiveIcon;
    if (d.status === 'active') {
      markerIcon = ActiveIcon;
    }
    if (d.latitude!=null && d.latitude!=undefined) {
      var config = {
        title: d.title
        icon: markerIcon
      };
      var title = d.site,
          mark = L.marker(([d.latitude, d.longitude]), config);
          mark.bindPopup("<strong>" + d.site + "</strong>Status : " + d.status);
      markersLayer.addLayer(mark);
      clusterLayer.addLayer(mark);
    } 
});