En este artículo vamos a conocer una manera de colorear países en Google Maps. No es la única pero quizás sí sea la más sencilla de conseguirlo. Para ello vamos a utilizar la clase GPolygon, del API de Google Maps, que nos permite dibujar un polígono dadas una serie de coordenadas. Los polígonos contienen una línea de contorno y además se les puede aplicar color de relleno. Así pues, los utilizaremos para rellenar de color la superficie de los países y pintar una línea que rodea la silueta del país.

En el Manual de Mapas de Google, que venimos publicando en DesarrolloWeb.com, ya explicamos cómo crear y mostrar polígonos en los mapas, con lo que ya deberíamos dominar los conocimientos necesarios para seguir este ejemplo.

Antes de continuar, tal vez te interese ver el efecto de coloreado sobre diferentes países que vamos a explicar en este artículo.

La parte más laboriosa para la realización de los polígonos de cada país consiste en sacar todos los puntos geográficos (latitud, longitud) que necesitaríamos para crear su contorno. Esto representa un gran trabajo, porque tendríamos que ir, país por país, apuntando los puntos de la silueta en arrays, y además, cuanto más detallistas queramos ser, más puntos tenemos que extraer. Afortunadamente, otras personas ya se han tomado por nosotros la molestia de sacar cada uno de los puntos geográficos de las siluetas de los países y además, han disponibilizado su trabajo para con licencia copyleft, para que otros puedan utilizarlo en sus aplicaciones.

Hay un proyecto creado por Anieto2k que nos va a servir de manera excelente para obtener las líneas de puntos, en una estructura de datos tipo array de coordenadas GLatLng, que se puede utilizar directamente para la creación de los polígonos en mapas de Google. El proyecto mencionado se llama CountryPoints y está en Google Code en la URL: http://code.google.com/p/countrypoints/

CountryPoints consiste básicamente en un archivo con código Javascript donde se declaran una serie de arrays con puntos geográficos, basados en latitudes y longitudes, para generar las siluetas de cada país. Con esos puntos se pueden trazar los polígonos para dibujar los países. Aunque en un principio podría parecer suficiente un polígono para cada país, hay que señalar que muchos de ellos contienen islas o territorios separados del principal, que deben especificarse en polígonos distintos. Así que en CountryPoints tenemos, para cada país, una o más sucesiones de puntos para formar uno o más polígonos sobre la superficie.

Para ilustrar la forma de este archivo de puntos, vendrá bien mostrar aquí un extracto de los puntos de varios países:

//primero se declara un objeto
var country = {};

//luego se definen propiedades con las coordenadas para cada país
//se utilizan códigos de dos 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)]]
   };

He escogido dos países para mostrar la sintaxis de declaración de puntos de sus siluetas, aunque a Portugal le he quitado muchos puntos para que quepa bien en el texto de este artículo de desarrolloweb .com. Observemos que los puntos se guardan en una propiedad llamada "coord", que es un array de dos dimensiones. En la primera dimensión tiene cada uno de los polígonos para cada uno de los territorios separados del país. En la segunda dimensión tiene cada uno de los puntos para hacer el polígono, definidos con objetos GLatLng.

Así pues, para crear los polígonos de un país, por ejemplo Portugal, tendremos que hacer algo como esto:

1) Incluir el array con los puntos de los países.

Para ello tendremos que incluir un código Javascript externo, que está en el proyecto CountryPoints de Google Code. (podemos incluirlo desde el servidor de Google Code o directamente descargarlo y subirlo a nuestro espacio de alojamiento.

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

2) Extraigo todos los puntos definidos para Portugal

var coordenadas_portugal = country.PT.coord;

Los códigos de países de dos letras son por ejemplo PT para portugal, ES para España y BR para Brasil... Estos códigos están normalizados según normativa ISO 3166-1.

3) Recorrer las coordenadas para crear los polígonos

Con un bucle recorro los grupos de coordenadas para crear cada uno de los polígonos. (Porque debemos recordar que el array de coordenadas era de dos dimensiones, para cada uno de los territorios separados del 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 colorear países

A continuación pongo un código completo a utilizar para colorear varios países del 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());
      
      //creo los polígonos de España
      var coordenadas_espana = country.ES.coord;
      for (i=0; i<coordenadas_espana.length; i++){
         map.addOverlay(new GPolygon(coordenadas_espana[i],"#dd6600", 2, 0.7, "#993300", 0.4));
      }
      
      //creo los 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));
      }
      
      //creo los polígonos de francia
      var coordenadas_francia = country.FR.coord;
      for (i=0; i<coordenadas_francia.length; i++){
         map.addOverlay(new GPolygon(coordenadas_francia[i],"#000099", 2, 0.7, "#000099", 0.4));
      }
      
      //creo los polígonos de Marruecos
      var coordenadas_marruecos = country.MA.coord;
      for (i=0; i<coordenadas_francia.length; i++){
         map.addOverlay(new GPolygon(coordenadas_marruecos[i],"#990000", 2, 0.7, "#990000", 0.4));
      }
   }
}

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

El ejemplo anterior se puede ver en marcha en una página aparte.

Esperamos que se haya podido entender el proceso para pintar países. En el propio blog del creador de CountryPoints hay otras explicaciones sobre la utilización de este sistema, que es de donde me he guiado para hacer el ejemplo que vamos a publicar en DesarrolloWeb.com.

Colorear países puede venir muy bien para darle un poco de vida y mejor aspecto a nuestras aplicaciones, pero además este ejemplo puede servir para aprender a crear un sistema por el cual definir una serie de coordenadas de elementos, para colorear cualquier cosa que necesitemos en mapas geográficos, como provincias de un país, ciudades, barrios, etc.