May 252012
 

Un buen ejemplo de implementación de un mapamundi interactivo se encuentra en la url http://migrationsmap.net. En este artículo vamos a explicar cómo añadir mapas interactivos de países y regiones a una página web, para obtener un resultado similar.

Información de geolocalización disponible online

Desde gadm es posible descargar bases de datos de geolocalización de las áreas administrativas de todos los países, con distinto nivel de detalle. Estas bases de datos utilizan el formato ‘shapefile’ (descrito en Esri Shapefile Technical Description). Para este artículo, descargamos el fichero del Reino Unido (GBR_adm.zip). Una vez descomprimido, vemos que contiene trese conjuntos de archivos (GBR_adm[0-2].*). Cada conjunto contiene la representación del Reino Unido a distinto nivel de detalle.

Podemos ver que hay cuatro shapefiles por conjunto (.shp, .shx, .dbf, .prj), más un fichero .csv.

.prj — projection format; contiene información sobre el sistema de coordenadas y la proyección. Es un fichero de texto simple
.shp — shape format; Contiene la geometría del mapa
shx — shape index format; Es un índice posicional de la geometría que permite realizar rápidamente una búsqueda.
.dbf — attribute format; Contiene los valores de los atributos asociados a las formas que constituyen el mapa (por ejemplo, los nombres de provincias), en formato dBase IV.

Trabajando con shapefiles

Para poder visualizar y editar los ficheros que hemos descargado, podemos instalar la utilidad gratuita “Quantum GIS” disponible como un paquete de la distribución Debian:

Convertir shapefiles a SVG

Los navegadores modernos pueden visualizar información gráfica en formato SVG (“Scalable Vector Graphics”, Gráficos Vectoriales Escalables. La especificación del formato SVG se puede consultar en http://www.w3.org/TR/SVG/). Por lo tanto, necesitamos una herramienta para convertir los archivos que hemos descargado de formato shapefile a formato SVG. Desde  github descargamos un script en Perl llamado shptosvg que permite realizar esta conversión, y lo utilizamos para convertir nuestros archivos de ejemplo:

Una vez ejecutado el script, podemos finalmente visualizar nuestros archivos en un navegador:

Añadiendo Interactividad con el formato GeoJSON

Para añadir interactividad a estos mapas, necesitamos tener la información en un formato que pueda ser manipulado fácilmente en javascript. GeoJSON es un formato muy extendido para la representación de entidades geográficas, que cumple con este requisito. Los shapefiles que hemos descargado de gadm.org pueden ser convertidas a GeoJSON utilizando la librería GDAL (Geospatial Data Abstraction Library, http://www.gdal.org).

Aunque existe un módulo perl Geo::GDAL en CPAN que podríamos utilizar para escribir nuestro propio script de conversión, es más fácil utilizar la utilidad ‘ogr2ogr’ que viene incluída en el paquete Debian. Instalamos el paquete gdal-bin en nuestro equipo:

Y realizamos la conversión a GeoJSON:

Ahora, podemos escribir un código javascript que lea el fichero GeoJSON en una variable.

Utilizando Raphaël y d3.js para visualizar datos GeoJSON.

Ahora, necesitamos presentar en nuestro navegador los datos en formato GeoJSON. Esto lo hacemos escribiendo nuestro propio código javascript, haciendo uso de dos conocidas librerías de funciones javascript:

  • d3.js – Aunque ésta es una librería gráfica con muchas posibilidades, de ella sólo vamos a utilizar el método que implementa la proyección mercator, para convertir las coordenadas (longitud, latitud) contenidas en el fichero GeoJSON a coordenadas (x, y) de pantalla.
  • Raphaël. Esta librería gráfica nos permite visualizar los datos SVG, y tambíen añadir animaciones.
En la sección <head> de nuestro código HTML, cargamos las librerías:

Y en la sección <body> , añadimos el elemento <div> que contendrá el mapa, y el código javascript que lo carga:

En la línea 3, creamoss un objeto Raphael que dibujará el gráfico en el elemento <div> con identificador “map”.

En las líneas 4 a 6, creamos una instancia de la proyección mercator implementada en la librería d3.

A partir de la línea 11, leemos el fichero JSON, y procesamos cada una de las “features” en su interior. El conjunto de coordenadas de cada “feature” (Ya sea un polígono simple o múltiple) es convertido a “paths” SVG.

En las líneas 35 a 37, tras crear un path, añadimos manejadores de eventos para los eventos ‘click’, ‘mousemove’ y’mouseout’. El código de estos manejadores de eventos añade la interactividad que queremos implementar en nuestro mapa. Por ejemplo, la siguiente función cambiaría el color de fondo de un país cuando colocamos el cursor sobre el mismo:

Como vemos, la función hace referencia a la variable ‘svg_borders’ que hemos inicializado previamente al dibujar el mapa.

 Publicado por en 2:34 pm

  Una respuesta a “Como presentar mapas interactivos en un sitio web”

  1. […] nuestro anterior artículo sobre cómo incluir mapas interactivos en un sitio web hemos comentado que el formato GeoJSON está muy extendido para la representación de información […]

 Deja un comentario

(requerido)

(requerido)