Jorge Iván Meza Martínez

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=500×300&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: 500×300.  El valor máximo de estas dimensiones es 640×480.

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

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=500×300&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=500×300&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=500×300&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=500×300&format=png8&maptype=hybrid&markers=5.07,-75.521,midyellowm|4.813,-75.696,midbluep|4.534,-75.681,midreda&path=rgb:0×0000ff,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=500×300&format=png8&maptype=hybrid&markers=5.07,-75.521,midyellowm|4.813,-75.696,midbluep|4.534,-75.681,midreda&path=rgb:0×0000ff,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.

He venido actualizando la información de los departamentos y municipios de Colombia publicada anteriormente.

Ahora se incluye a los municipios creados desde entonces (1102 registros actualmente).  Además me he dado a la tarea de georreferenciar (latitud/longitud) esta información para ser utilizada en futuros proyectos.  De momento me faltan 19 municipios cuyos nombres no coinciden.

La información se puede descargar de manera gratuita teniendo en cuenta que este es un trabajo en progreso por lo que no es necesariamente preciso.  Agradecería me informen las correcciones si alguien nota algún error en los datos.

Los archivos a continuación se encuentran en formato CSV y su codificación es UTF-8 lo que debe tenerse en cuenta para su correcta visualización.

• Departamentos de Colombia: Código, Nombre, Latitud, Longitud.
• Municipios por Departamento: Código, Nombre, Código del departamento, Nombre del departamento, Latitud, Longitud.

La información se puede de la base de datos se puede consultar de manera gráfica utilizando el siguiente mapplet de mi autoría: Mapa de departamentos y municipios colombianos.

Enlace: Sistema de consulta de la división pollítico-administrativa de Colombia.

El servicio GeoIPTool permite identificar de manera gráfica de donde proviene cualquier dirección IP que se desee.

Enlace: http://geoiptool.com/.

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
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).

VN:F [1.8.5_1061]
Rating: 0 (from 0 votes)

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.

El día de hoy he desarrollado un primer demo muy sencillo basado en un Mapplet que presenta los municipios Colombianos que pertenecen a Distritos Mineros e incluye alguna información adicional al respecto.

Este primer bosquejo es muy limitado ya que su información se obtiene de manera estática desde una fuente XML y que esta no se encuentra georreferenciada, por esto hace uso del GeoCoder el cual, al menos para esta prueba, no en todos los casos funciona de manera consistente.

El tiempo de desarrollo de un ejercicio tan sencillo es de unos 30 minutos, sin embargo el cambio a funciones asíncronas que se hizo para pasar de Google Maps a Mapplets si aumentó la complejidad del diseño, el cual me tomó finalizar en mas tiempo de lo esperado.

Las funciones asíncronas, a diferencia de las síncronas que retornan con el resultado después de ser ejecutadas, retornan inmediatamente y contínua el flujo normal del programa, sin embargo su resultado aún no ha sido terminado de procesar. Cuando la función asíncrona ha completado la realización de su código, ejecuta una función cuya implementación es definida por el usuario y se utiliza para procesar su resultado, esta función se especifica a manera de callback.

Palabras mas, palabras menos, las funciones asíncronas (*Async) en los Mapplets se ejecutan cuando se espera pero no es predecible determinar cuando estas terminan su procesamiento y se obtiene un resultado. La complejidad de la demostración se aumentó debido a la utilización del GeoCoder cuya ejecución (getLatLngAsync) es asíncrona y se realizaba múltiples veces (una por cada registro), sin embargo estas se realizan después de obtener la fuente remota con los datos (_IG_FetchXmlContent), la cual también es una función asíncrona.

En conclusión, el desarrollo de este tipo de Mapplets es extremadamente sencillo y rápido, sin embargo se recomienda que los datos ya lleguen georreferenciados, es decir, parecería ser mejor preprocesar la información del lado del servidor y geolocalizarla antes de enviarla al Mapplet que buscar su complemento desde el mismo código del mapa.

Enlaces:

• Versión de demostración 0.1.8.
• Código fuente de la demostración.
• Documentación de los Mapplets por Google.