Neste artigo vamos conhecer uma maneira de colorir países em Google Maps. Não é a única, porém talvez sim seja a maneira mais simples de conseguir. Para isso, vamos utilizar a classe GPolygon, do API de Google Maps, que nos permite desenhar um polígono dadas uma série de coordenadas. Os polígonos contém uma linha de contorno e ademais pode-se aplicar cor de preenchimento. Sendo assim, utilizaremos para colorir a superfície dos países e pintar uma linha que rodeia a silhueta do país.

No Manual de Mapas de Google, que viemos publicando em CriarWeb.com, já explicamos como criar e mostrar polígonos nos mapas, com o qual já deveríamos dominar os conhecimentos necessários para seguir este exemplo.

Antes de continuar, talvez lhe interesse ver o efeito de colorido sobre diferentes países que vamos explicar neste artigo.

A parte mais trabalhosa para a realização dos polígonos de cada país consiste em obter todos os pontos geográficos (latitude, longitude) que necessitaríamos para criar seu contorno. Isto representa um grande trabalho, porque teríamos que ir, país por país, apontando os pontos da silhueta em arrays, e ademais, quanto mais detalhistas quisermos ser, mais pontos teremos que extrair. Felizmente, outras pessoas já se encarregaram de obter cada um dos pontos geográficos das silhuetas dos países e além do mais, disponibilizaram seu trabalho com licença copyleft, para que outros possam utilizá-lo em suas explicações.

Há um projeto criado por Anieto2k que nos servirá de maneira excelente para obter as linhas de pontos, em uma estrutura de dados tipo array de coordenadas GLatLng, que se pode utilizar diretamente para a criação dos polígonos em mapas de Google. O projeto mencionado se chama CountryPoints e está em Google Code na URL: http://code.google.com/p/countrypoints/

CountryPoints consiste basicamente em um arquivo com código Javascript onde se declaram uma série de arrays com pontos geográficos, baseados em latitudes e longitudes, para gerar as silhuetas de cada país. Com esses pontos se podem traçar os polígonos para desenhar os países. Embora, à princípio poderia parecer suficiente um polígono para cada país, há que assinalar que muitos deles contém ilhas ou territórios separados do principal, que devem se especificar em polígonos distintos. Portanto, em CountryPoints temos, para cada país, uma ou mais sucessões de pontos para formar um ou mais polígonos sobre a superfície.

Para ilustrar a forma deste arquivo de pontos, mostraremos aqui um extrato dos pontos de vários países:

//primeiro se declara um objeto
var country = {};

//logo se definem propriedades com as coordenadas para cada país
//se utilizam códigos de duas letras para cada país
country.GU = {
   desc: 'GUAM',
   coord: [ [new GLatLng(13.235, 144.7094), new GLatLng(13.42778, 144.6552), new GLatLng(13.65229, 144.8761), new GLatLng(13.235, 144.7094)]]
};
country.PT = {
   desc: 'PORTUGAL',
   coord: [ [new GLatLng(37.25319, -7.431854), new GLatLng(37.00889, -7.897779), new GLatLng(37.02631, -8.9892369), new GLatLng(38.71722, -9.118473)], [new GLatLng(37.70555, -25.45611), new GLatLng(37.88389, -25.85417), new GLatLng(37.70555, -25.45611)], [new GLatLng(32.6375, -16.94361), new GLatLng(32.6375, -16.94361)]]
   };

Escolhi dois países para mostrar a sintaxe de declaração de pontos de suas silhuetas, embora tenha tirado muitos pontos a Portugal para que coubesse bem no texto deste artigo de criarweb.com. Observemos que os pontos se salvam em uma propriedade chamada "coord", que é um array de duas dimensões. Na primeira dimensão tem cada um dos polígonos para cada um dos territórios separados do país. Na segunda dimensão tem cada um dos pontos para fazer o polígono, definidos com objetos GLatLng.

Sendo assim, para criar os polígonos de um país, por exemplo Portugal, teremos que fazer algo como isto:

1) Incluir o array com os pontos dos países.

Para isso, teremos que incluir um código Javascript externo, que está no projeto CountryPoints de Google Code. (podemos incluí-lo desde o servidor de Google Code ou diretamente baixá-lo e passá-lo ao nosso espaço de hosting.

<script src="http://countrypoints.googlecode.com/files/countrypoints.js" type="text/javascript"></script>

2) Extraio todos os pontos definidos para Portugal

var coordenadas_portugal = country.PT.coord;

Os códigos de países de duas letras são por exemplo, PT para Portugal, ES para Espanha e BR para Brasil... Estes códigos estão normalizados segundo normativa ISO 3166-1.

3) Percorrer as coordenadas para criar os polígonos

Com um loop percorro os grupos de coordenadas para criar cada um dos polígonos. (Porque devemos lembrar que o array de coordenadas era de duas dimensões, para cada um dos territórios separados do país)

for (i=0; i<coordenadas_portugal.length; i++){
   map.addOverlay(new GPolygon(coordenadas_portugal[i],"#669933", 2, 0.7, "#669933", 0.4));
}

Código completo para colorir países

A seguir ponho um código completo a utilizar para colorir vários países do mundo.

<script src="http://maps.google.com/maps?file=api&v=2&key=tu_lleva_api_google_maps"
type="text/javascript"></script>
<script src="http://countrypoints.googlecode.com/files/countrypoints.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[

function load() {
   if (GBrowserIsCompatible()) {
      var map = new GMap2(document.getElementById("map"));   
      map.setCenter(new GLatLng(39.41,-3.017),5);
      map.addControl(new GMapTypeControl());
      map.addControl(new GSmallZoomControl());
      
      //crio os polígonos de Espanha
      var coordenadas_espanha = country.ES.coord;
      for (i=0; i<coordenadas_espanha.length; i++){
         map.addOverlay(new GPolygon(coordenadas_espanha[i],"#dd6600", 2, 0.7, "#993300", 0.4));
      }
      
      //crio os polígonos de portugal
      var coordenadas_portugal = country.PT.coord;
      for (i=0; i<coordenadas_portugal.length; i++){
         map.addOverlay(new GPolygon(coordenadas_portugal[i],"#669933", 2, 0.7, "#669933", 0.4));
      }
      
      //crio os polígonos de frança
      var coordenadas_franca = country.FR.coord;
      for (i=0; i<coordenadas_franca.length; i++){
         map.addOverlay(new GPolygon(coordenadas_franca[i],"#000099", 2, 0.7, "#000099", 0.4));
      }
      
      //crio os polígonos de Marrocos
      var coordenadas_marrocos = country.MA.coord;
      for (i=0; i<coordenadas_marrocos.length; i++){
         map.addOverlay(new GPolygon(coordenadas_marrocos[i],"#990000", 2, 0.7, "#990000", 0.4));
      }
   }
}

window.onload=load
//]]>
</script>

O exemplo anterior pode-se ver em funcionamento em uma página à parte.

Esperamos que tenha sido possível entender o processo para pintar países. No próprio blog do criador de CountryPoints há outras aplicações sobre a utilização deste sistema, que é de onde me guiei para fazer o exemplo que vamos publicar em CriarWeb.com.

Colorir países pode ser muito bom para dar um pouco mais de vida e melhor aspecto a nossas aplicações, porém, ademais este exemplo pode servir para aprender a criar um sistema e definir uma série de coordenadas de elementos, para colorir qualquer coisa que necessitemos em mapas geográficos, como estados de um país, cidades, bairros, etc.