Introducción

StaticMaps es una herramienta de Google que nos permite integrar en nuestras aplicaciones a imagenes estáticas de su cartografía de una manera muy simple.  Como se puede inferir, para utilizarlos es necesario que la aplicación tenga acceso a Internet y su acceso se realiza a través de un requerimiento HTTP convencional con ciertos parámetros que se verán a continuación y que permiten refinar el contenido de la imagen del mapa producido.

Esta herramienta la he utilizado varias veces en diferentes tipos de proyectos como Mi Primer Moblet (móviles), GeoReferenciación con Java (escritorio) y la demostración de MandarinaSocial (agentes de software).

Para su uso se requiere que el desarrollador registre de manera gratuita el dominio desde donde se va a utilizar el servicio.  El registro se materializa a través de una llave de API particular.  Esta llave se solicita a través del siguiente enlace.

http://code.google.com/apis/maps/signup.html

El servicio se restringe a un máximo de 1000 requerimientos únicos diarios, siendo este límite aplicado por solicitante (ubicación) y no por llave lo que disminuye el impacto de esta restricción, mas aún cuando las solicitudes repetidas de la misma imagen no son tomadas en cuenta para la estadística de la cuota.

Un primer acercamiento a la herramienta consiste en jugar un poco con ella utilizando el Static Map Wizard.

Forma de acceso

Como se mencionó anteriormente, la solicitud se inicia requiriendo un URL con ciertos parámetros a través de GET y el servicio retorna una imagen en un formato compatible con web que puede ser insertada en una página web con una etiqueta <img> o puede ser manipulada por una aplicación desarrollada en cualquier lenguaje de programación como Java o C#.

Los siguientes aspectos del StaticMap pueden ser parametrizados a través de los parámetros del URL.

• La ubicación del mapa.
• El tamaño de la imagen generada.
• El nivel de acercamiento.
• El tipo de mapa.
• El lugar de los marcadores.
• El lugar de las rutas trazadas.

Estructura general del URL

Esta es la estructura básica del URL sobre la cual se estructura el requerimiento del servicio.

http://maps.google.com/staticmap?PARÁMETROS

La lista de PARÁMETROS consiste en varias secciones separadas entre sí por & y que se encuentran construídas con un formato especial y que serán descritas a continuación.

Estos son los parámetros del servicio suceptibles de personalizarse.

1. center.
2. zoom.
3. size.
4. format.
5. maptype.
6. markers.
7. path.
8. frame.
9. key.

Ubicaciones

Las ubicaciones georreferenciadas son especificadas de la forma latitud y longitud como dos valores reales con 6 dígitos decimales de precisión y separados por una coma: 5.07,-75.521.

Los valores válidos de una latitud varían desde -90 hasta 90 grados mientras que los valores válidos para una longitud varía desde -180 hasta 180 grados.

Parámetro Key

Es obligatorio y se utiliza para especificar la llave del API que se obtuvo inicialmente.  Sin esto, es imposible acceder al servicio.

http://maps.google.com/staticmap?center=5.07,-75.521&zoom=5&size=500x300&key=ABQIAAAAAa_xc3cplYGMwVbx_zW2chTWZSld1Wm-gV17JxrvtQa7WXWbRRTOL98qj5hk-yEw1n5LrYmEoAwzOg

Parámetro Center

Es obligatorio pero se convierte en opcional bajo ciertas circunstancias.  Determina la ubicación al rededor de la cual se centrará el mapa generado.

http://maps.google.com/staticmap?center=5.07,-75.521

El mapa anterior se encuentra centrado al rededor de las coordenadas de Manizales, Caldas.

Parámetro Zoom

Es obligatorio pero se convierte en opcional bajo ciertas circunstancias.  Determina el nivel de acercamiento al mapa.

Es definido por un número entero que varía entre 0 (menor) hasta 19 (máxima).  Debe tenerse en cuenta que no todos los niveles de acercamiento están disponibles para todos los tipos de mapas.

http://maps.google.com/staticmap?center=5.07,-75.521&zoom=11

El mapa anterior determina un nivel 11 de acercamiento sobre Manizales.

Parámetro Size.

Es obligatorio.  Especifica el tamaño de la imagen generada.

Su valor se especifica por un ancho y un alto separados por la letra 'x' y su unidad es en pixels: 500x300.  El valor máximo de estas dimensiones es 640x480.

http://maps.google.com/staticmap?center=5.07,-75.521&zoom=11&size=500x300

La imagen generada a partir del requerimiento anterior tiene un ancho de 500px y un alto de 300px.

Parámetro Format.

Es opcional y determina el tipo de formato de la imagen generada.  Su selección depende de la relación tamaño/calidad deseada.  Si se omite, su valor por defecto es GIF.

Los posibles valores para este parámetro son los siguientes.

• gif (por defecto).
• jpg
• jpg-baseline (no progresivo)
• png8 (8 bits)
• png32 (32 bits)

http://maps.google.com/staticmap?center=5.07,-75.521&zoom=11&size=500x300&format=png8

El ejemplo anterior genera una imagen con formato PNG de 8 bits.

Parámetro MapType.

Es opcional y determina el tipo de cartografía a utilizarse para la generación de la imagen.  Si se omite, su valor por defecto es roadmap.

Los posibles valores para este parámetro son los siguientes.

• roadmap (por defecto).
• mobile.  Presenta mejoras gráficas para la visualización en dispositivos móviles.
• satellite. Muestra las imagenes de satélite.
• terrain. Muesta el mapa del relieve y la vegetación.
• hybrid. Mezcla el contenido de los tipos roadmap y satellite.

http://maps.google.com/staticmap?center=5.07,-75.521&zoom=11&size=500x300&format=png8&maptype=hybrid

El ejemplo anterior modifica el tipo de mapa visto hasta ahora (roadmap) y presenta un mapa estilo híbrido de la misma ubicación.

Parámetro Markers.

Es opcional y permite especificar y personalizar los marcadores que referenciarán ubicaciones importantes en el mapa.  Es posible especificar hasta 50 marcadores diferentes por mapa.

Cuando se especifica el parámetro markers no es necesario especificar a los parámetros center y zoom ya que estos se pueden calcular automáticamente.

La información de los marcadores se especifica con una cadena separada por '|' (%7C) de la siguiente manera.

markers=infoMarcador1|infoMarcador2|infoMarcador3|...

La información de los marcadores incluye datos tanto de su ubicación como de su presentación.  Cada marcador se crea con la siguiente estructura.

{latitud},{longitud},{tamaño}{color}{identificador}

El siginificado de cada uno de estos campos se describe a continuación.

• latitud (requerido).  Latitud de la ubicación del marcador.
• longitud (requerido).  Longitud de la ubicación del marcador.
• tamaño (opcional).  Tamaño de la imagen del marcador.  Puede tomar uno de los siguientes valores.
  • tiny
  • mid (por defecto)
  • small
• color (opcional).  Determina el color de la imagen del marcador.  Puede tomar una de las siguientes constantes.
  • black
  • brown
  • green
  • purple
  • yellow
  • blue
  • gray
  • orange
  • red (por defecto)
  • white
• identificador (opcional).  Permite especificar un carácter alfanumérico y en minúsculas para identificar al marcador.  Debe tenerse en cuenta que este identificador sólo aplica para marcadores tamaño mid.  Su valor por defecto es el punto.

http://maps.google.com/staticmap?size=500x300&format=png8&maptype=hybrid&markers=5.07,-75.521,midyellowm|4.813,-75.696,midbluep|4.534,-75.681,midreda

El ejemplo anterior muestra el mapa del eje cafetero colombiano resaltando sus ciudades con marcadores de la siguiente manera: Manizales (amarillo), Pereira (azul) y Armenia (rojo).

Parámetro Path.

Es opcional y permite especificar y personalizar rutas sobre el mapa que conectan a dos o mas puntos georreferenciados.  El límite es el de máximo 100 puntos por ruta.

El parámetro se define de manera similar a markers siguiendo el siguiente formato.

path=tipoColor:#color,weight:pesoRuta|punto1|punto2|punto3|...

El siginificado de cada uno de estos campos se describe a continuación.

• tipoColor.  Especifica el tipo de formato del color.  Puede tomar uno de los siguientes valores.
  • rgb.  Esquema RGB estándar con valores de 24 bits de la forma 0xffffff.  Su nivel de opacidad por defecto es de 50%.
  • rgba.  Utiliza valores de 32 bits de la forma 0xffffffff.  El nivel de opacidad está dado por el cuarto byte (últimos dos carácteres) que conforman el canal alfa de transparencia.
• weight.  Especifica el grosor de la ruta en pixels.

http://maps.google.com/staticmap?size=500x300&format=png8&maptype=hybrid&markers=5.07,-75.521,midyellowm|4.813,-75.696,midbluep|4.534,-75.681,midreda&path=rgb:0x0000ff,weight:5|5.07,-75.521|4.813,-75.696|4.534,-75.681

En este ejemplo se agrega una ruta azul entre Armenia - Pereira - Manizales sobre el ejemplo inmediatamente anterior.

Parámetro Frame.

Es opcional y especifica si la imagen resultante se debe o no mostrar con un borde azul de 5px y con 55% de opacidad a su alrededor.  Por defecto no se muestra.

http://maps.google.com/staticmap?size=500x300&format=png8&maptype=hybrid&markers=5.07,-75.521,midyellowm|4.813,-75.696,midbluep|4.534,-75.681,midreda&path=rgb:0x0000ff,weight:5|5.07,-75.521|4.813,-75.696|4.534,-75.681&frame=true

Enlaces:

• Sign Up for the Google Maps API.
• Static Maps API Developer's Guide.
• Static Map Wizard.

Tags: GIS, Google, GoogleMaps

No es que me sienta viejo aún, pero como me hubiera gustado que como ahora, hubieran existido tantas cosas y que hubieran estado al alcance de los desarrolladores cuando yo era estudiante hace un tiempo ya.  Gloriosa época de muchas trasnochadas expermientando cositas, en particular con Java.

Desafortunadamente, en mi época de estudiante me tocó un mundo no tan interesante como el actual, ya que empezamos con C/C++ para MS-DOS y en esa época el reto adicional era mostrar imágenes en los programas y simular el ambiente 3D de ventanas con sólo las líneas y cuadrados del BGI

Java llegó después y me tocó la época en que todos estabamos aprendiendo y las cosas emocionantes empezaron a llegar con el tiempo y con Internet.  Recuerdo que ya terminando mis clases, cuando abrí mis primeras direcciones de correo en USA.net y Hotmail, mis compañeros estuvieron renuentes por un buen tiempo porque no le veían la utilidad al correo electrónico o simplemente porque no tenían quien les escribiera.  Pero por suerte ya todo eso pasó.

Ahora hay muchas cosas, tantas que no alcanza el tiempo para buscarlas, estudiarlas y hacer algo con ellas.  Inclusive hay muchas cosas del mismo estilo.  Todo un mundo de delicias para escoger.  Lo que falta es tiempo.  El trabajo y el cansancio son malos amigos para la investigación.  Ahora, donde uno mire, hay cosas para probar y lo mejor de todo es que la mayoría son abiertas y grátis ... digo libres (free), el límite es el tiempo y la pereza mental de las personas.

Hoy, a pesar de que tengo muchos informes atrasados, me dieron ganas de hacer una aplicación muy sencilla para demostrar un par de estas librerías que están allí, esperando que hagamos algo interesante con ellas.   Este ejemplo muy simple me tomó al rededor de 2 horas implementarlo y eso porque son muy lento para hacer las interfaces de usuario desde código.

Así surgió la demostración de georreferenciación al estilo web 2.0 que permite visualizar el mapa de cualquier ubicación del mundo y ubicar sobre él marcadores georreferenciados.

Para esto utiliza los servicios de Google Maps para la generación de las imágenes y GeoNames para la georreferenciación, es decir, para convertir las ubicaciones (Manizales, Caldas, Colombia) en sus respectivas duplas latitud/longitud para poder ser relacionadas geográficamente.

En la parte izquierda se aprecia la lista con las ubicaciones seleccionadas que corresponden con las marcas rojas en el mapa, en la parte derecha está el mapa junto con tres barras de desplazamiento que regulan su presentación y en la parte inferior se encuentran los botones de opciones.

El demo le permite al usuario Agregar y Remover ubicaciones como puntos seleccionados.  Como se mencionó, estas se ingresan con los nombres de las ubicaciones y el sistema obtiene su ubicación geográfica a través de la consulta de un servicio web.  Es posible en cualquier momento, Centrar el mapa al rededor de cualquiera de los puntos seleccionados almacendos.

La manipulación del mapa se realiza con las barras de desplazamiento.  La naranja (derecha) corresponde con el zoom: hacia abajo aumenta, haciendo mayor el acercamiento del mapa.  La horizontal, azul, corresponde con la longitud y la vertical, verde, corresponde con la latitud.  Cuando se modifica cualquiera de estos valores se deberá solicitar la actualización del mapa presionando el botón Refrescar.

La aplicación ha sido desarrollada en Java por lo que su código es muy claro y modular.  En términos de la implementación, el acceso al webservice de GeoNames utiliza su propio API para el cual se descargaron dos archivos: geonames-1.0-java5.jar y jdom-1.0.jar.

La georrefernciación no podría ser más fácil.

    public static GeoLocation locate(String location) throws Exception
    {
        GeoLocation result = new GeoLocation();
 
        // Creates the toponym searcher
 
        ToponymSearchCriteria searchCriteria = new ToponymSearchCriteria();
 
        // Sets the criteria based on the specified location
 
        searchCriteria.setQ(location);
 
        // Request the geolocalization to the webserver
 
        ToponymSearchResult searchResult = WebService.search(searchCriteria);
 
        // Gets the results
 
        List toponyms = searchResult.getToponyms();
 
        // Checks if there were results
 
        if(toponyms == null || toponyms.size() == 0)
            return null;
 
        // Gets the first result of all (could be many)
 
        Toponym first = toponyms.get(0);
 
        // Prepares the result with its information
 
        result.put("geoNameId",   first.getGeoNameId()   + "");
        result.put("name",        first.getName()        + "");
        result.put("latitude",    first.getLatitude()    + "");
        result.put("longitude",   first.getLongitude()   + "");
        result.put("countryCode", first.getCountryCode() + "");
        result.put("countryName", first.getCountryName() + "");
 
        return result;
    }

La clase GeoLocation que utilizo para manejar el resultado no es mas que un Hashtable<String, String> con algunos adendos para facilitar su uso.

Por otro lado, la generación del mapa requiere aún menos ciencia aunque la realizo en dos pasos discretos que en general no incluyen nada extraño.

    public String prepareUrl()
    {
		String markers = "";
 
		// Walks thru all the points to create its markers
 
		for(int i=0; i
<points.size(); i++)
		{
			// Reads the points one by one
 
			GeoLocation point = points.elementAt(i);
 
			// The markers will be green
 
			String color = "green";
 
			// Sets the point location information based on its longitude and latitude
 
			String pointLocation = point.get("latitude") + "," +
			                       point.get("longitude") + "," +
			                       color +
			                       point.get("name").toLowerCase().charAt(0);
 
			// Adds it to the markers accumulator
 
			markers += pointLocation + ((i < points.size() - 1) ? "%7C" : "");
		}
 
		// Prepares the full URL based on markers information, centered location, size, zoom and API key
 
		String url = "http://maps.google.com/staticmap?" +
		             "center=" + centerLatitude + "," + centerLongitude + "&" +
		             "markers=" + markers + "&" +
		             "zoom=" + zoomLevel + "&" +
		             "size=" + sizeWidth + "x" + sizeHeight + "&" +
		             "key=" + apiKey;
 
		// System.out.println(url);
 
		return url;
    }

En el primer paso preparo el URL del consulta al servicio basado en información como la coordenada centro del mapa, el nivel de zoom, el tamaño de la imagen, los puntos seleccionados (marcadores) y la llave del API que debe ser privada y es única para cada sitio web (FQDN), aunque para el caso específico de aplicaciones de escritorio no es muy relevante a pesar de ser obligatoria.  La llave del API puede ser obtenida de manera gratuita por cualquier desarrollador desde esta dirección.

    public Image prepareImage(String url) throws Exception
    {
        Image image = ImageIO.read(new URL(url));
 
        return image;
    }

El segundo paso se relaciona con consultar el servicio de Google utilizando el URL recién generado, leer los bytes que conforman la imagen y crear con ellos un objeto Image para ser mostrado posteriormente en la interfaz de usuario.  Con Java, este procedimiento es extremadamente sencillo: 1 línea de código.

Para su uso se deberá tener cuidado en el manejo de las posibles excepciones que pueda lanzar el requerimiento como por ejemplo, producto de un fallo de red.

        // Gets the map image
 
        Image imageMap = mapService.getMap();
 
        // Checks if was received
 
        if(imageMap == null)
        {
            JOptionPane.showMessageDialog(this, "El mapa no se pudo recuperar.",
                    "Error recuperando mapa", JOptionPane.ERROR_MESSAGE);
            return;
        }
 
        // Puts the map on the gui
 
        map.setIcon(new ImageIcon(imageMap));

Teniendo el objeto Image lo podemos poner en cualquier componente de AWT/Swing.  Por facilidad, yo utilizo un JLabel que incluye el soporte de íconos (ImageIcon) los cuales se basan en objetos de imagen.

Como se puede apreciar, la complejidad de la aplicación es muy baja por lo que reitero: la imaginación es el límite.

Es posible acceder a la aplicación desde web sin instalar ningún archivo local desde el siguiente enlace o ejecutando el siguiente comando en una consola/símbolo del sistema operativo:

   $ javaws http://demo.jorgeivanmeza.com/Java/DemoGeoReferenceMap/0.1/DemoGeoReferenceMap.jnlp

Enlace:

• Código fuente y binario de la aplicación de demostración (incluye librerías de GeoNames requeridas).

Tags: GeoNames, GIS, GoogleMaps, Java

Siguiendo mi premisa "de lo que no se pueda aprender entonces es inútil y prescindible" tuve el deseo este fin de semana de escribir una introducción a Google Mapplets con que he jugado un poco en el último par de meses.

Fruto de ese deseo surgió la Introducción práctica a Google Mapplets la cual introduce los conceptos básicos del servicio y lleva de la mano al desarrollador a través de la implementación de una demostración simple que ejemplifica de manera sencilla los conceptos expuestos y parte del API del servicio.

El lector deberá estar familiarizado con el desarrollo de software en general, la utilización de JavaScript y XML.

Introducción al desarrollo de Mapplets.

● Que son los Mapplets.
● Ventajas y desventajas frente a Google Maps.
● Diferencias importantes con el API de Google Maps.
● Requerimientos para el desarrollo.
● Como es un Mapplet (estructura).
● Herramientas para el desarrollo.
● Acceso a Mis Mapas y al Directorio de Mapas.
● Como desarrollar Mapplets.
● Plantilla base de un Mapplet.
● Enlaces de interés.

Desarrollo de Mi Primer Mapplet.

● Plantilla base de un Mapplet.
● Desarrollo e implementación de MiPrimerMapplet.
● Publicación de Mapplets con Google Pages.
● Agregar el Mapplet a Mis Mapas.
● Compartir el acceso a los Mapplets desarrollados.
● Enlaces de interés.

El ejemplo práctico de esta presentación puede consultarse en el siguiente enlace.

http://maps.google.com/ig/add?synd=mpl&pid=mpl&moduleurl=http://demo.jorgeivanmeza.com/GMaps/MiPrimerMapplet/ultimo/MiPrimerMapplet.xml

Mientras que el código fuente del mismo ejemplo puede consultarse a través de este enlace.

http://demo.jorgeivanmeza.com/GMaps/MiPrimerMapplet/ultimo/MiPrimerMapplet.xml

Enlaces:

• Introducción al desarrollo de Google Mapplets.
• Desarrollo de Mi Primer Mapplet.

Tags: GIS, Google, GoogleMapplets, GoogleMaps, GooglePages

Después de tener todo prácticamente listo con GoogleMaps aparece un problema inesperado. No habíamos notado que a diferencia de GoogleEarth, GoogleMaps no muestra la división política ni las etiquetas de nuestros departamentos y municipios. Estuve buscando una posible solución y no la encontré. Según comentarios, GoogleMaps sólo muestra esta información para pocos países.

Evaluando el servicio de Microsoft, LocalLive, encontré que este si muestra toda la información que necesito. No quería hacer el cambio, pero tocó. Me gusta mas Google y tengo mucha mas información que del producto de Microsoft pero no hay nada que hacer si no muestra los municipios.

Después de dos horas de pruebas y armado con únicamente con la API y los ejemplos que trae inmersos en ella realicé mi primer demo estático con las funciones que necesito.

• Mostrar un mapa.
• Cambiar el estilo a híbrido.
• Ubicarlo en el espacio que deseo.
• Capturar y mostrar la información relacionada con los eventos de click y de zoom.
• Manipular el control por defecto (ocultarlo).
• Agregar marcas y anexarles información relacionada, incluyendo un icono personalizado.
• Revisar la documentación respecto a su licencia.

El siguiente paso es posibilitar la manipulación de la información (búsquedas) y su persistencia en bases de datos.

Esta primer aproximación al servicio LocalLive puede accederse en el siguiente URL: http://demo.jorgeivanmeza.com/LocalLive/too_simple_demo/start.html

Una aproximación similar había hecho con GoogleMaps hace un tiempo. Esta puede consultarse en el siguiente URL: http://demo.jorgeivanmeza.com/GMaps/too_simple_demo/start.html

Tags: GoogleMaps, LocalLive