• ✅ Nos termômetros
• ✅ No ranking mundial
• ✅ No cluster (popup do mapa opcional)

Usaremos a API pública da REST Countries para obter a bandeira dinamicamente pelo nome do país.

🔵 O QUE VAMOS FAZER

Quando o sistema identificar o país:

1. Buscar código ISO do país (ex: BR, US, FR)
2. Gerar bandeira automaticamente via:

https://flagcdn.com/w40/{codigo}.png

🔵 PASSO 1 — Adicionar função para pegar bandeira

No index.html, dentro do <script>, antes da função loadVotes(), adicione:

async function getFlag(country){    try{
        let res = await fetch(`https://restcountries.com/v3.1/name/${country}?fields=cca2`);
        let data = await res.json();        if(data && data[0] && data[0].cca2){
            let code = data[0].cca2.toLowerCase();
            return `https://flagcdn.com/w40/${code}.png`;
        }
    }catch(e){}    return "";
}

🔵 PASSO 2 — Atualizar os Termômetros

Substitua esta parte dentro de loadVotes():

Object.keys(countries).forEach(c=>{

Por versão com bandeira:

for (const c of Object.keys(countries)){    let percent=(countries[c]/max)*100;
    let flag = await getFlag(c);    let div=document.createElement("div");
    div.className="thermo";
    div.innerHTML=`
        <strong>
            ${flag ? `<img src="${flag}" width="24" style="vertical-align:middle;margin-right:6px;">` : ""}
            ${c} (${countries[c]})
        </strong>
        <div class="bar">
            <div class="fill" style="width:${percent}%"></div>
        </div>
    `;
    document.getElementById("thermometers").appendChild(div);
}

⚠️ IMPORTANTE
Você deve tornar a função loadVotes assíncrona:

Altere:

function loadVotes(){

Para:

async function loadVotes(){

🔵 PASSO 3 — Atualizar Ranking Mundial

Substitua o ranking atual por:

let ranking=Object.entries(countries).sort((a,b)=>b[1]-a[1]);for (let i=0;i<ranking.length;i++){    let flag = await getFlag(ranking[i][0]);    document.getElementById("ranking").innerHTML+=`
        ${i+1}º - 
        ${flag ? `<img src="${flag}" width="20" style="vertical-align:middle;margin-right:4px;">` : ""}
        ${ranking[i][0]} (${ranking[i][1]})<br>
    `;
}

🔵 PASSO 4 — Bandeira no Popup do Mapa (opcional)

Substitua criação do marcador:

let marker=L.circleMarker([v.lat,v.lng],{

Por:

let marker=L.circleMarker([v.lat,v.lng],{
    radius:6,
    color:"#FF4DA6",
    fillOpacity:.8
});marker.bindPopup(`<strong>${v.city}</strong><br>${v.country}`);

🎯 Resultado Final

Agora você terá:

• 🇧🇷 Brasil com bandeira automática
• 🇺🇸 United States
• 🇫🇷 France
• 🇪🇸 Spain
• Qualquer país do planeta automaticamente

Sem precisar cadastrar manualmente.

⚠️ Observação Técnica Importante

A API da REST Countries é gratuita, mas pode limitar requisições se o tráfego crescer muito.