[GIS] Custom marker colours in leaflet based on attribute

javascriptleaflet

I'm aiming to customize my markers (leaflet maps) into 3 different colours based on different values in an attribute column.
Each marker is assigned a value A-C and I would like to represent each value as a different colour marker.
I have been trying to use a switch statement but cannot seem to get it to work, any tips?

here is my current code:

    var customMarker = "A";

    switch(Data[i].value){
        case "A":
            markercolor (orange);
        break;
        case "B":
            markercolor (blue);
        break;
        case "C":
            markercolor (green);
        break;
        default :
            markercolor (pink);
        }

     var markerOptions = {
          color: customMarker,
          opacity: 1,
      };

     var marker = new L.circleMarker(markerLocation,markerOptions).addTo(map);

Best Answer

I'd recommend something like the following:

    var colors = {
        orange: '#ffa500',
        blue: '#0000ff',
        green: '#008000',
        pink: '#ffc0cb',
    };

    var markerOptions = {
        opacity: 1,
    };

    switch(Data[i].value) {
        case "A":
            markerOptions.color = colors.orange;
            break;
        case "B":
            markerOptions.color = colors.blue;
            break;
        case "C":
            markerOptions.color = colors.green;
            break;
        default:
            markerOptions.color = colors.pink;
            break;
     }

     var marker = new L.circleMarker(markerLocation,markerOptions).addTo(map);
Related Question