Using a setColor() with Mapbox's .addLayer()

Question

Hello I am messing around with some public Covid_19 datasets and I am trying to create a visualization of the world countries and their respective confirmed cases, deaths, and recovered stats. I am using mapbox to generate a map and .addSource to add a geoJson layer of the countries. Right now that layer is all one color because inside of the .addLayer part it only accepts one color:

map.addLayer({
      'id': 'world_countries_fill',
      'type': 'fill',
      'source': 'world_countries',
      'paint': {
           'fill-color': '#f08', // <<<
           'fill-opacity': 0.4
      }

is it possible to use a function that returns a color based off say the number of deaths for that single country in mapbox .addLayer()?

Or should i look to use leaflet and turf.js featureCollection?

here is my full js file:

function Country(name, death, recovered, confirmed) {
    this.name = name;
    this.death = death;
    this.recovered = recovered;
    this.confirmed = confirmed;
}

var countryArray = []; //array of country objects

function init() {
    get_data();

    console.log(countryArray);

    mapboxgl.accessToken = '***';
    var map = new mapboxgl.Map({
        container: 'map_area',
        style: 'mapbox://styles/mapbox/dark-v10',
        center: [4.899, 52.372],
        zoom: 2,
    });

    map.scrollZoom.disable();


    map.on('load', function() {
            map.addSource('world_countries', {
                type: 'geojson',
                data: 'world.geojson'
            });

            map.addLayer({
                'id': 'world_countries_fill',
                'type': 'fill',
                'source': 'world_countries',
                'paint': {
                    'fill-color': '#f08',
                    'fill-opacity': 0.4
                }
                //color function here
                /*
                'fill-color': function() {
                    let length = countryArray.length;

                    for(let i = 0; i < length; i++) {
                        let country = countryArray[i];
                        let color = getColorDeaths(country.deaths)
                    }
                    return color;
                },
                */
            });
    });


}

function getColorDeaths(d) {
    return d > 500000 ? '#800026' :
            d > 350000  ? '#BD0026' :
            d > 150000  ? '#E31A1C' :
            d > 85000  ? '#FC4E2A' :
            d > 25000   ? '#FD8D3C' :
            d > 8500   ? '#FEB24C' :
            d > 950   ? '#FED976' :
                        '#FFEDA0';
}

//fetchs data from the source and calls load_country_data on the json file
function get_data() {
    fetch("https://pomber.github.io/covid19/timeseries.json")
        .then(response => response.json())
        .then(data => {
            //console.log(data); //will print the json object
            load_country_data(data);
        })
        .catch(err => console.error(err));
}

//creates a Country object from each key in the json data fetched and appends the object to an array.
function load_country_data(data) {
    let json_Length = Object.keys(data).length; //amount of countrys
    let c_keys = Object.keys(data); //list of the keys
    //console.log(json_Length);

    for(let i = 0; i < json_Length; i++) {
        let tmp = new Country(); // create new Country object for each country
        let name = c_keys[i] //get the name of the country
        let length = data[name].length; //get the length from inside the country

        let tmp_deaths = 0;
        let tmp_recovered = 0;
        let tmp_confirmed = 0;

        //console.log(test[i]); // <this is how you would get the name of each country as a string
        //console.log(data['Angola']); // <this is how you get to each country

        //console.log(data[name][4]);
        //console.log(data[name][4].deaths);

        for(let i = 0; i < length; i++) {
            tmp_deaths += data[name][i].deaths;
            tmp_recovered += data[name][i].recovered;
            tmp_confirmed += data[name][i].confirmed;
        }

        //fill in the country object with the data!
        tmp.name = name;
        tmp.death = tmp_deaths;
        tmp.confirmed = tmp_confirmed;
        tmp.recovered = tmp_recovered;

        countryArray.push(tmp); //add the new object to an array to keep track
    }
}



window.onload = init;

Mapbox Developer Support Mapbox Developer Support · Accepted Answer · 2020-04-28T00:45:36

You can implement this functionality by using an expression for the 'fill-color' property. Here is an example demonstrating how to style circles with a data-driven property. Your implementation can take a similar approach, instead using perhaps the interpolate or step expressions to specify different fill colors depending on the number of cases. This create and style clusters example shows how to use the step expression very similarly to what you are looking to do, by coloring circles depending on which number range a count for a particular cluster falls into.

Using a setColor() with Mapbox's .addLayer()

1 Answers