Contenido

CountryPoints, paises por puntos para Google Maps

21 oct

+ 15

Llevo un días recopilando datos y uniendo puntos geográficos para montar un fichero Javascript con todos los puntos necesarios para colorear paises en Google Maps sin necesidad de usar ficheros KML.

countrypoints

Usando de base el estandar ISO 3166-1 de codigos de paises, he montado un fichero JS de (892kb) con todos los puntos necesarios para pintar los paises sobre mapas de Google Maps usando GPolygon(). Se que es una matada, pero la velocidad de creación de poligonos es más rápido que la carga de fichero KML, aunque estos son más potentes y ofrecen más posibilidades.

Ejemplo 

    var map = null; // MAPA
    var points = [];    // Puntos pintados
    var code = "ES"; // España
    // Opciones del polígono
    var opt = {
	lineColor: "#ff0000", // Contorno del país
	lineWidth: 1, // Tamaño la línea de contorno
	lineOpacity: 1, // Opacidad de la línea de contorno
	backgroundColor: "#ff0000", // Color del fondo
	backgroundOpacity: 0.2 // Opacidad del fondo.
    };
// Función que pinta polígonos
function paintPais(code, mapa) {
	var coords = country[code].coord;
	for (var x in coords) {
		points[code] = new GPolygon(coords[x], opt.lineColor, opt.lineWidth, opt.lineOpacity, opt.backgroundColor, opt.backgroundOpacity);
		GEvent.addListener(points[code], "click", function(a){alert("PAIS: " + pais.desc);});
		mapa.addOverlay(points[code]);
	}
}

window.onload = function() {
    if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("map"));
	      map.setCenter(new GLatLng(0, 0), 3);
	      if (country[code]) paintPais(code, map);
      }
}

Demo

He montado un pequeño script con Google Maps para poder testearlo y ver como funciona.

¿Como usarlo?

Para poder usar el script simplemente tenemos que linkarlo en nuestro <head /&gt; justo debajo de la llamada a Google Maps.

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key={KEY}" type="text/javascript"></script>
<script src="http://countrypoints.googlecode.com/files/countrypoints.js" type="text/javascript"></script>

Al formar parte de Google Code, delegamos en Google el tiempo de carga del fichero, y ya que es grande no nos viene mal abusar de sus servidores :D

El secreto

Si le echamos un vistazo al fichero, vemos que este está compuesto de objetos que forman parte del objeto country y que contienen los puntos necesarios para pintar los contornos de los paises.

var country = { };
country.AO:{
		desc: 'ANGOLA',
		coord: [
		[new GLatLng(-5.768556, 12.21455),...],
		[new GLatLng(-17.25483, 11.75278),...]
		]
	};
country.AW:{
	desc: 'ARUBA',
	coord: [ [new GLatLng(12.62763, -70.06007), ...]]
	};

Conociendo estos puntos simplemente tenemos que formar un GPolygon() con ellos para darle la forma deseada.

var coords = country.ES.coord;
for (var x in coords) {
  map.addOverlay(new GPolygon(coords[x], opt.lineColor, opt.lineWidth, opt.lineOpacity, opt.backgroundColor, opt.backgroundOpacity););
}

opt, es un objeto que creé para la demo y que contiene los colores y opacidades de las líneas y fondos.

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.