Leaflet chloropleth map colours are not updating

Question

So I'm trying to make a chloropleth map using Leaflet. I want the colour to vary based on the country's Haven Ranking, dark red for high ranking (#1) and light yellow for lowest (#64). I have downloaded shapefiles of each country, converted them to geojson, then into Javascript, and added havenRanking as a property in each file, eg. as follows:

     {
     "type": "FeatureCollection",
     "name": "TurksAndCaicos",
     "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
     "features": [
     { "type": "Feature", "properties": { "ID_0": 237, "ISO": "TCA", "NAME_0": "Turks and Caicos Islands", "havenRanking": 32, "ID_1": 1, "NAME_1": "Grand Turk", "TYPE_1": "District", "ENGTYPE_1": "District", "NL_NAME_1": null, "VARNAME_1": null }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ -71.132080078124943, 21.513471603393612 ],

(I have cut off the co-ordinates in the above example as there is a lot of them). Now here is my code:

        /* This loads the geojson data for the Turks and Caicos Islands, by calling the variable in my external javascript which contains
                the data layer, and then styling it. */

        TurksAndCaicosLayer =           L.geoJson(TurksAndCaicos, { 
                    style: styleGenerator,  //set the style using a function
                    }
        )

        /* This function styles the data (a single country) */

        function styleGenerator(feature) {

            //return a style
            return {
                weight: 0.5,
                color: '#666',
                fillOpacity: 1,
                fillColor: getcolor(feature.properties.havenRanking)
            };
        }

    /* Return a color based upon the Haven Ranking */
        function getcolor(havenRanking) {

            // create a variable to hold the color

            let color;

            //assign a color based upon the Haven Ranking 

            if (havenRanking = 1) {
                color = '#bd0026'; 
            } else if (havenRanking = 2) {
                color = '#bf0626';
            } else if (havenRanking = 3) {
                color = '#c20d27';
            } else if (havenRanking = 4) {
                color = '#c41327';
            } else if (havenRanking = 5) {
                color = '#c71827';
            } else if (havenRanking = 6) {      
                color = '#c91c28';
            } else if (havenRanking = 7) {
                color = '#cb2028';
            } else if (havenRanking = 8) {
                color = '#cd2429';
            } else if (havenRanking = 9) {
                color = '#cf2829';
            } else if (havenRanking = 10) {
                color = '#d12c2a';
            } else if (havenRanking = 11) {
                color = '#d4302a';
            } else if (havenRanking = 12) {
                color = '#d5332b';
            } else if (havenRanking = 13) {
                color = '#d7372c';
            } else if (havenRanking = 14) {
                color = '#d93a2c';
            } else if (havenRanking = 15) {
                color = '#db3e2d';
            } else if (havenRanking = 16) {
                color = '#dd412e';
            } else if (havenRanking = 17) {
                color = '#df442f';
            } else if (havenRanking = 18) {
                color = '#e0472f';
            } else if (havenRanking = 19) {
                color = '#e24b30';
            } else if (havenRanking = 20) {
                color = '#e44e31';
            } else if (havenRanking = 21) {
                color = '#e55132';
            } else if (havenRanking = 22) {
                color = '#e75433';
            } else if (havenRanking = 23) {
                color = '#e85834';
            } else if (havenRanking = 24) {
                color = '#e95b35';
            } else if (havenRanking = 25) {
                color = '#eb5e36';
            } else if (havenRanking = 26) {
                color = '#ec6137';
            } else if (havenRanking = 27) {
                color = '#ee6438';
            } else if (havenRanking = 28) {
                color = '#ef683a';
            } else if (havenRanking = 29) {
                color = '#f06b3b';
            } else if (havenRanking = 30) {
                color = '#f16e3c';
            } else if (havenRanking = 31) {
                color = '#f2713d';
            } else if (havenRanking = 32) {
                color = '#f3743f';
            } else if (havenRanking = 33) {
                color = '#f47740';
            } else if (havenRanking = 34) {
                color = '#f57b41';
            } else if (havenRanking = 35) {
                color = '#f67e43';
            } else if (havenRanking = 36) {
                color = '#f78144';
            } else if (havenRanking = 37) {
                color = '#f88445';
            } else if (havenRanking = 38) {
                color = '#f98747';
            } else if (havenRanking = 39) {
                color = '#fa8a48';
            } else if (havenRanking = 40) {
                color = '#fa8d4a';
            } else if (havenRanking = 41) {
                color = '#fb914c';
            } else if (havenRanking = 42) {
                color = '#fc944d';
            } else if (havenRanking = 43) {
                color = '#fc974f';
            } else if (havenRanking = 44) {
                color = '#fd9a50';
            } else if (havenRanking = 45) {
                color = '#fd9d52';
            } else if (havenRanking = 46) {
                color = '#fea054';
            } else if (havenRanking = 47) {
                color = '#fea355';
            } else if (havenRanking = 48) {
                color = '#ffa657';
            } else if (havenRanking = 49) {
                color = '#ffaa59';
            } else if (havenRanking = 50) {
                color = '#ffad5b';
            } else if (havenRanking = 51) {
                color = '#ffb05d';
            } else if (havenRanking = 52) {
                color = '#ffb35e';
            } else if (havenRanking = 53) {
                color = '#ffb760';
            } else if (havenRanking = 54) {
                color = '#ffba62';
            } else if (havenRanking = 55) {
                color = '#ffbd64';
            } else if (havenRanking = 56) {
                color = '#ffc066';
            } else if (havenRanking = 57) {
                color = '#ffc368';
            } else if (havenRanking = 58) {
                color = '#ffc66a';
            } else if (havenRanking = 59) {
                color = '#ffc96c';
            } else if (havenRanking = 60) {
                color = '#ffcd6e';
            } else if (havenRanking = 61) {
                color = '#ffd070';
            } else if (havenRanking = 62) {
                color = '#ffd372';
            } else if (havenRanking = 63) {
                color = '#fed674';
            } else if (havenRanking = 64) {
                color = '#fed976';
            }

            //return the resulting color
            return color;
    }

I realise this is super long winded, but I want a seperate colour for every different rank.

So, my issue is that all the countries are showing up as the first colour, dark red, even if their haven ranking is low. I don't know what is causing this. Is it an issue with the havenRanking property in my geojson files, or with my code?

Many thanks

Answer 1

Best practice as the response of @Falke Design is to use the strict equality operator === like if (havenRanking === 1).

In addition to that take a look at the switch statement that allows you to avoid this redundancy of else if:

switch(havenRanking ) {
  case 1:
    color = '#bd0026'; 
    break;
  case 2:
    color = '#bd0026'; 
    break;
}

Answer 2

all your "if"s are wrong. if (havenRanking = 1) {

it should be: if (havenRanking == 1) {