Mapas interactivos y geovisualización con Unfolding

Un nuevo post sobre visualización de datos, esta vez aplicados a la geoinformación y la visualización de mapas interactivos.

En esta ocasión usaremos Unfolding, una libreria en Java basada en Processing (del cual ya hablamos en el anterior post) y de muy facil uso, aplicada en el desarrollo de mapas interactivos y visualización de datos con información geográfica.

El ejemplo que presentamos a contianución desarrolla una sencilla aplicación de escritorio en Java (con Java Swing) que muestra un mapa interactivo donde se marcan diferentes localizaciones que representan marcas de cervezas. Al hacer click sobre un marcador cualquiera, se muestra un pop-up con información adicional del marcador.

Asi que basicamente de lo que se trata es de:

  1. Mostrar el mapa.
  2. Colocar los marcadores sobre el mapa.
  3. Implementar la interacción con los marcadores (mostrar el pop-up).

1. Mostrar el mapa

Como se ha mencionado con anterioridad, Unfolding está basado en Processing y usa parte de su API para realizar ciertas acciones. Para empezar usa el PApplet que ya vimos en Processing como punto de inicio de la aplicación. Además, usa el método setup() para inicializar la apliación y el método draw() para ejecutarla, así como otros métodos ya vistos para configurar e inicializar la vista principal.

Por otro lado, Unfolding ofrece diferentes proveedores de mapas a disposición del usuario. Cada uno tiene sus condiciones de uso y restricciones. En el ejemplo que se presenta, se usará OpenStreetMap, que es bastante flexible y solo limitado por la carga de uso, sin muchas más restricciones. Una vez inicializado el mapa, establecemos una posición de origen mediante sus coordenadas geográficas de latitud y longitud.

El resultado sería este:

mapa_01

2. Colocar los marcadores sobre el mapa

Una vez tenemos el mapa, podemos proceder a crear los marcadores con la información pertinente asociada a cada uno y situarlos sobre el mapa.

Para ello lo que vamos a hacer es cargar cierta información de un fichero. Esa información contiene la localización geográfica en la que se colocará el marcador (longitud y latitud), el nombre del marcador y los datos asociados al marcador que se mostrarán posteriormente mediante un pop-up interactivo. Estos son los datos:

# Cervezas artesanas de España
# Ciudad, latitud, longitud, cerveza1-cerveza2-cerveza3-cerveza4
Salamanca,41.0,-5.6,Malasombra-Lega-Bizarra-Helmantica
Madrid,40.4,-3.7,La Virgen-Cibeles-Maravillas
Asturias,43.32,-5.9,Caleya

Vamos por pasos:

  • Cargamos los datos en una lista interna de DTOs (beans):

  •  Crear los marcadores:

La clase BirraMarker se extiende de SimplePointMarker y tiene unos atributos específicos que el mapa usará para situar y dibujar el marcador sobre él, como el icono (PImage img). También tiene un método draw() que se invoca para dibujar el marcador. Ahí se puede indicar la posición en la que se quiere dibujar la imagen asociada al marcador. Por ejemplo:

  • Añadimos los marcadores al mapa:

Como se ve en el ejemplo, se usan múltiples clases y APIs de Processing, como PImage, loadImage(), etc.

mapa_02

3. Mapa interactivo

Por último, haremos el mapa interactivo. La intención es que al hacer click con el ratón sobre cada marcador, se muestre un pop-up sobre él con información adicional. Al volver a hacer click, o hacer click en otro marcador, el pop-up desaparece. Además también queremos mostrar otro pop-up sobre cada marcador si se coloca el puntero sobre él, que desaparezca cuando éste se vaya. Aquí mostraremos el nombre del marcador.

Ámbos eventos podemos definirlos mediante la API del PApplet heredada de Processing. Este serái el método para el evento de click sobre el mapa:

Si no hay marcadores, devolvemos nulo, es decir, no hacemos nada. Si hay marcadores, primero deseleccionamos todos, ya que no admitimos selección múltiple en nuestro ejemplo. Despues detectamos cual es el primer marcador seleccionado en la posición del puntero (Marker m = birraMap.getFirstHitMarker(mouseX, mouseY)) y lo marcamos como tal (m.setSelected(true)).

El método para definir el evento de movimiento del ratón sería el siguiente:

El procedimiento es practicamente el mismo que en el caso anterior. Tan solo en lugar de establecer el marcador como seleccionado, se usa setHover(true).

Tan solo nos falta añadir al método draw() del marcador el código que permitirá dibujar los pop-ups en caso de que éste sea seleccionado o sobrevolado por el puntero. El método definitivo quedaría así:

Como se ve en el método, se usan los atributos selected y hover que se marcan en los métodos anteriores de eventos para determinar el estado del marcador. Hay que recordar que el método draw() se está invocando de forma contínua tal y como se usa en Processing.

Este sería el resultado final:

mapa_03

mapa_04

Podeis descargar el proyecto completo desde aquí. !Ahora a darle a los mapas!