Como montar um mapa mundi com bandeiras que funciona de verdade
A ideia parece simples: pegar um mapa-múndi e colocar as bandeiras dos países nos lugares certos. Na prática, você vai enfrentar problemas de escala, legendas que sobrepõem uns aos outros e arquivos que travam no navegador se não for bem otimizado. Já fiz isso três vezes em projetos diferentes, e cada uma me custou horas que eu poderia ter economizado. O caminho mais direto é usar uma biblioteca como Leaflet ou D3.js, carregar um GeoJSON com os limites dos países e sobrepor imagens de bandeira. Você não precisa reinventar nada. O problema é que a maioria dos tutoriais online mostra um exemplo mínimo que funciona perfeitamente até você tentar adicionar mais de trinta bandeiras numa tela pequena.
O que é um mapa mundi com bandeiras na prática
É um mapa interativo ou estático que posiciona bandeiras nacionais sobre um mapa geográfico. Pode ser renderizado em SVG, Canvas ou HTML com sobreposição de imagens. A escolha da tecnologia define o quanto seu projeto vai sangrar quando a coisa ficar complexa. Eu recomendo começar com dados prontos. O arquivo Natural Earth está disponível gratuitamente e fornece bordas nacionais em resoluções 1:10m, 1:50m e 1:110m. Para bandeiras, o repositório do flagpedia no GitHub tem PNGs padronizados em tamanhos razoáveis. Juntar os dois leva cerca de dez minutos se você já souber o básico de JavaScript.
Passo a passo para montar o mapa
Crie um arquivo HTML básico e importe Leaflet via CDN. Adicione um container com altura definida. Inicialize o mapa centralizado no Equador e Longitude zero, com zoom 2. Carregue o GeoJSON dos países usando o método L.geoJSON. Dentro da função layerEach, associe cada feature ao código ISO do país e busque a bandeira correspondente. Use um ícone customizado para exibir a bandeira como marcador. Se você estiver usando SVG puro com D3, o processo é similar mas exige mais código manual. A vantagem é controle total. A desvantagem é que cada ajuste de layout vira uma sessão de depuração de meia hora.
Um detalhe que quase todo mundo esquece: defina o tamanho dos ícones das bandeiras antes de renderizar. Se deixar o tamanho padrão do Leaflet, você vai ter bandeiras gigantes sobre a Escandinávia e microscópicas sobre a África Central. Coloque um width fixo de 24 ou 32 pixels e centralize o anchor no ponto correto do ícone.
Problema real que eu encontrei e como resolvi
Em um projeto específico, precisei de um mapa mundi com bandeiras para apresentação executiva, com cerca de 45 países destacados. A primeira versão funcionava no meu monitor de 27 polegadas. Quando projetei em tela menor ou abri no laptop do colega, as bandeiras de Europa Ocidental se sobrepunham completamente. Rússia, Canadá e os países nórdicos eram piores porque os territórios são enormes e os marcadores criavam uma massa ilegível. A solução que funcionou foi agrupar as bandeiras por região e mostrar apenas quando o usuário dava zoom. Usei clustering com Leaflet.markercluster e configurei o threshold para mostrar bandeiras individuais a partir do zoom 4. Abaixo disso, exibia um círculo com o número de países agrupados. O resultado ficou limpo e a performance não sofreu porque o DOM recebia muito menos elementos de uma vez.
👉 Clique no botão abaixo para saber mais sobre o assunto!
Outro problema que apareceu foi com bandeiras de territórios disputados. A linha de fronteira entre Índia e China no setor de Aksai Chin, por exemplo, varia conforme a fonte do GeoJSON. Se seu público é global, considere ignorar essas disputações e usar apenas a versão mais comum do Natural Earth. Leva dois minutos e evita uma discussão desnecessária nos comentários.
Dicas que ninguém conta nos tutoriais
Primeiro, pré-comprima todas as imagens de bandeira em WebP ou SVG. O flagpedia fornece PNGs bons, mas um arquivo de 20KB multiplicado por 195 países já começa a pesar quase 4 megabytes. Com compressão, cai para menos de 1 megabyte sem diferença visível. Isso reduz o tempo de carregamento inicial de cerca de 8 segundos para 1,5 segundo em conexão comum. Segundo, use código ISO 3166-1 alfa-2 para nomear os arquivos. É o padrão da indústria e elimina confusão. Bandeira do Brasil é BR, não BRA e não BRA. Isso economiza horas de debugging.
Terceiro, se for distribuir o mapa como arquivo estático, gaste uns dez minutos verificando a responsividade. Mapas com muitas bandeiras frequentemente quebram em telas mobile porque o CSS padrão não limita a altura do popup. Defina max-height e overflow-y: auto nos popups para evitar que a tela inteira desapareça quando alguém clica num país pequeno.
Alternativas quando o mapa sobrecarrega
Se o objetivo é apenas visualização interna e não interatividade, considere abandonar o mapa tradicional e usar um infobox com lista organizada por continente. Leva metade do tempo para construir, carrega instantaneamente e não exige biblioteca gráfica nenhuma. Às vezes a solução mais simples é a correta. Para quem realmente precisa de interatividade completa, Mapbox GL é mais performático que Leaflet com muitos marcadores. O custo é maior curva de aprendizado e necessidade de token de API. Se o projeto é pessoal ou educacional, o Leaflet continua sendo a escolha mais sensata.
Links úteis
O GeoJSON do Natural Earth pode ser baixado diretamente do site do projeto. Os dados estão organizados por resolução e tipo de feição. Para as bandeiras, o repositório flagpedia no GitHub mantém a coleção mais completa e atualizada com licença permissiva. Se preferir algo mais simples, há pacotes npm como w que agrupam tudo num único download. Montar um mapa mundi com bandeiras não é difícil. O difícil é fazer ele funcionar bem quando o uso real aparece. Foque nos dados, na compressão e no agrupamento desde o início. A versão final vai agradecer.
