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.
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 />; justo debajo de la llamada a Google Maps.
<script src="http://maps.google.com/maps?file=api&v=2&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 😀
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.
14 comentarios, 1 referencias
+
#