APIで取得したデータをleaflet map に表示

Question

前回、質問が丸投げとご指摘を受け、自分なりに色々試してみました。再度解決できない箇所をご質問させていただければと思います。

現在、下記のgeojsonファイルを使用して、下記のサイトとチュートリアルを参考に世界マップにコロナの件数別にマップに色をつけたいと思います。

https://leafletjs.com/examples/choropleth/
https://stackoverflow.com/questions/65648762/adding-data-from-url-to-a-leaflet-map

使用しているgeojsonファイル:
https://datahub.io/core/geo-countries

下記でマップに色をつけることができたのですが、最後の30カ国が表示できません。国名：Chad以降がjsonファイルにあると、全体の色がつかなくなります。また、chad以降を削除すると表示されます。

配列等を比べてみても表示されるものとされないものは同じようにみえるのですが、なぜか230カ国以降を含むと表示されません。また逆に表示されないものを上に持ってきても同く該当国は表示されません。

geojsonでコロプレス・マップは正しく表示されているため、このgeojsonファイルに問題があるとも思えません。原因が終わりになりましたら教えて下さい。

jsonファイルから表示されない最後の34カ国を削除した場合
https://codepen.io/siam55/pen/MWbLzON

jsonファイル内の国そのまますべて表示した場合
https://codepen.io/siam55/pen/ZELWQLE

色をつけるjsスクリプト

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 &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
            '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
            'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        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);
    }

    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();
        }
    }

Answer 1

covid[j] is undefined

エラーが出ているようでした。
おそらく、添え字の範囲を超えているのだと思います。

            for (let j = 0; j < statesData.features.length; j++) {
//            for (let j = 0; j < covid.length; j++) { ←こうかも？

Comments

[suusui]

回答ありがとうございます！ご指摘を受けた行を変更したところ、無事すべて色が付きました。本当にありがとうございました。

[Lhankor_Mhy]

ご解決されて何よりです。

ただ、そのやり方で正しいデータの反映になっているかどうかは確認していません。
ですので、たまたま動いているだけかもしれませんので、お気をつけて。