Adding data with API to a leaflet map

Question

I'm learning javascript and trying to make a covid world map with Leaflet map. I followed this article and code below.

I changed the API URL and variable to get the data for countries geojson. I can added colour in most countries but for some reason, for some countries after 230th countries on geojson, it doesn't work.

Could you advise what I should do to put colours for all countries?

I'm using this geo countries JSON below. If I use data with whole countries, the colours are not added on the map, but if I remove countries after Chad to Zimbabwe (it's the last 34 countries on JSON fil), the colour added on the map properly.

https://datahub.io/core/geo-countries

var map = L.map('map').setView([40, 0], 2);
    L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
        maxZoom: 18,
        attribution: 'Map data © OpenStreetMap contributors, ' +
            'CC-BY-SA, ' +
            'Imagery © Mapbox',
        id: 'mapbox/light-v9',
        tileSize: 512,
        zoomOffset: -1
      //  layers: [geo,geojson]
    }).addTo(map);
    //"https://corona.lmao.ninja/v3/covid-19/states"

    //  GET THE COVID DATA
    var geojson = L.geoJson(statesData).addTo(map);

    let covid;

    //  GET THE COVID DATA
    function setup(){
        loadJSON("https://disease.sh/v3/covid-19/countries",gotData);
    }

    // SOLUTION TO LONG TERM PROBLEM
    // this was the solution that allowed me to add the data from URL to the map.
    // The whole time, the problem was trying to do this without assigning it to a variable
    let geo = L.geoJson(statesData, {style: style}).addTo(map);


    function gotData(data){
        covid = data;
        statesData.features[0].properties.cases = covid[0].cases;

        // add covid cases to states data
        for (let i = 0; i < statesData.features.length; i++) {
            for (let j = 0; j < statesData.features.length; j++) {
                if (statesData.features[i].properties.ADMIN === covid[j].country) {
                    statesData.features[i].properties.cases = covid[j].cases;
                    break;
                }
            }
        }

        geo.addData(statesData); // another part of the solution - addData function

    };


   function getColor(d) {
       return d > 10000000 ? '#800026' :
               d > 5000000 ? '#BD0026' :
               d > 1000000 ? '#E31A1C' :
               d > 70000 ? '#FC4E2A' :
               d > 50000 ? '#FD8D3C' :
               d > 30000 ? '#FEB24C' :
               d > 10000 ? '#FED976' :
                           '#FFEDA0';
     }

    // CREATE FUNCTION TO STYLE AND APPLY GET COLOR
    function style(feature) {
        return {
            // apply get color
            fillColor: getColor(feature.properties.cases),
            weight: 2,
            opacity: 1,
            color: 'white',
            dashArray: '3',
            fillOpacity: 0.7
        }
      }
      for(let i = 0; i< statesData.features.length;i++){
          console.log(statesData.features[i].properties.cases);
      }

    function highlightFeature(e) {
        var layer = e.target;

        layer.setStyle({
            weight: 5,
            color: '#666',
            dashArray: '',
            fillOpacity: 0.7
        });

        if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
            layer.bringToFront();
        }
    }

This is a successful map if I removed last 34 countries from geojson file.

https://codepen.io/siam55/pen/MWbLzON

This is a failed map if I put a while counties on geojson file.

https://codepen.io/siam55/pen/ZELWQLE

Any advice to solve the issue is highly appreciated :)

kboul · Accepted Answer

If you log statesData.features.length you will see that the length is 255. If you log the data length from https://disease.sh/v3/covid-19/countries you will see that the number is 221. If you do the math the difference is 34. This happens because you loop two times over the same variable and use statesData.features index to get an item from another variable which does not have that index because it is shorter in size.

What you should do instead is loop over data which is the array that contains the cases for each country and statesData which is the geojson containing the geometry.

function gotData(data) {
  var covid = data;
    // add covid cases to states data
    for (let j = 0; j < data.length; j++) {
        for (let i = 0; i < statesData.features.length; i++) {
            if (statesData.features[i].properties.ADMIN === covid[j].country || statesData.features[i].properties.ISO_A3 === covid[j].country) {
               statesData.features[i].properties.cases = covid[j].cases;
                    break;
            }
        }
    }

  geo.addData(statesData); // another part of the solution - addData function
}

Now in some cases you may not get the correct results. For instance USA in one case is stored as Unites States of America on ADMIN key but as USA on the geojson. When it is compared it will not store the correct value for the compared country and will end up in the last case of your ternary operator which assigns this color #FFEDA0 to the country. There is another key called ISO_A3 which has the correct name that coincides with the geojson for cases like USA. You should check for the other cases as well if the proper color is assigned based on the number of cases

Adding data with API to a leaflet map

Answers (1)

Related Questions