Jorge Iván Meza Martínez » GoogleMaps http://blog.jorgeivanmeza.com The Fire Within Me: "knowledge will set you free" Tue, 31 Jan 2012 18:18:13 +0000 en hourly 1 Como crear un mapa con GoogleMaps version 2, en pasos simpleshttp://blog.jorgeivanmeza.com/2009/09/como-crear-un-mapa-con-googlemaps-version-2-en-pasos-simples/?utm_source=rss&utm_medium=rss&utm_campaign=como-crear-un-mapa-con-googlemaps-version-2-en-pasos-simples http://blog.jorgeivanmeza.com/2009/09/como-crear-un-mapa-con-googlemaps-version-2-en-pasos-simples/#comments Mon, 28 Sep 2009 20:02:34 +0000 jimezam http://blog.jorgeivanmeza.com/?p=2022 Continue reading →]]> Introducción.

Utilizar el API de Google Maps para crear mapas interactivos con Javascript en nuestros sitios web es muy fácil de implementar.  Este servicio ofrece dos alternativas: los Mapplets que se ejecutan de manera asíncrona, directamente en el sitio de maps.google.com y los desarrolladores sólo debemos especificar y albergar un documento XML donde se encuentra la especificación y los datos del mapa.  Por el otro lado están los mapas implementados directamente con el API de manera síncrona, se incrustan en nuestras propias páginas web y su comportamiento se define a través del Javascript que implementemos.

En otras ocasiones me he referido a los Mapplets por esto la implementación de hoy la vamos a realizar utilizando el API síncrono.

Objetivo.

El objetivo del presente artículo es el de visitar a Cuba donde ubicaremos marcadores sobre 5 ciudades de este país y asociaremos globitos con mensajes personalizados que aparecerán cuando el usuario haga clic sobre las diferentes ciudades.

Resultado final

Resultado final

Procedimiento.

Condiciones inciales.

Para el desarrollo de esta mini aplicación vamos a utilizar PHP y vanilla Javascript, es decir, no nos apoyaremos en ningún framework de Javascript adicional a lo comúnmente soportado por los navegadores web actuales.

En mi caso, mi servidor web de destino será http://demo.jorgeivanmeza.com/.  Es muy importante determinar esto para la próxima etapa, la creación de la llave del API.

Creación de la llave del API.

Acceda al siguiente enlace y cree su propia llave para el API de Google.  Es necesario especificar el dominio bajo el cual se ejecutará la aplicación web.  En el caso de desarrollar la aplicación de manera local, puede obtener una llave para http://localhost/ y después la deberá modificar antes de desplegarla en el servidor de producción.  Si no especifica el dominio correcto, la aplicación no podrá generar el mapa.

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

Es necesario contar con una cuenta de Google, así que de no contar con una es necesario abrirla antes de intentar crear una llave del API.

Creación de una estructura básica para la página web.

Cree el archivo simpleGoogleMaps.php (o como desee llamarlo) en una ubicación pública de su servidor web (bajo el DOCUMENT_ROOT).  Agregue siguiente contenido al archivo y guárdelo.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta name="Author" content="Jorge Iván Meza Martínez - http://jorgeivanmeza.com/ - jimezam@gmail.com" />
    <meta name="Description" content="Demostración Simple de Google Maps" />
    <title>Demostración Simple de Google Maps</title>
    <!-- Llave del API -->
    <!-- Estilos CSS -->
    <!-- Implementación Javascript -->
</head>
<body>
    <!-- Ubicación del mapa -->
</body>
</html>

Especificar la Llave del API.

En el contenido del archivo PHP actualice el siguiente código por la marca de Llave del API.

<script src='http://maps.google.com/maps?file=api&v=2&sensor=false&hl=es&key=XXXXX' type='text/javascript'></script>

Reemplace la cadena XXXXX por su Llave del API específica que obtuvo durante el paso anterior correspondiente.

Especificar la ubicación del mapa.

El mapa se generará en un div que determinemos dentro del body para tal fin, este puede estar integrado normalmente con el resto del diseño de la página.  En nuestro caso particular debido a su simplicidad, el contenido de la página será solamente dicho div.

Reemplace la etiqueta Ubicación del mapa con el siguiente código.

<div id='MiMapa'>Aqui viene el mapa!</div>

Es necesario identificar al div con un id único que utilizaremos posteriormente.

Actualizar el estilo del mapa.

El siguiente paso es el especificar un estilo para el div que contendrá al mapa.  Este estilo finalmente dependerá del diseño de la página.  Para este caso utilizamos CSS para definirle un alto y un ancho al mapa.

Reemplace la etiqueta Estilos CSS con el siguiente código.

<style content="text/css">
#MiMapa
{
    width: 640px;
    height: 480px;
}
</style>

Especificar la implementación Javascript.

El código faltante hace referencia a código Javascript que va a determinar el contenido y comportamiento del mapa.  Reemplace la etiqueta Implementación Javascript con el siguiente código base.

<script type='text/javascript'>
// El código de las siguiente secciones se incluye aquí ...
</script>

Preparar el mapa.

Para crear el mapa y establecer sus parámetros iniciales se realizan las siguientes acciones.

  1. Verificar que exista la compatibilidad adecuada con el navegador.
  2. Crear la instancia del mapa asociada al div especifico.
  3. Establecer la ubicación inicial del mapa.
  4. Establecer el tipo inicial del mapa.

Para hacer esto creamos al objeto mapa1 y a la función prepararMapa con el siguiente código.

/*
 * Objeto que hace referencia al mapa desplegado.
 */
var mapa1 = null;
/*
 * Establece los parámetros iniciales del mapa instanciando
 * al objeto 'mapa'.
 *
 * @param String  - Nombre del DIV que albergará al mapa.
 * @param Double  - Latitud donde se centrará el mapa.
 * @param Double  - Longitud donde se centrará el mapa.
 * @param Integer - Altura donde se centrará el mapa.
 *
 * @return el mapa en éxito, null en fracaso.
 */
function prepararMapa(div, centerLat, centerLang, centerAlt)
{
    /* Verifica que el navegador sea compatible con
       Google Maps */
    if (GBrowserIsCompatible())   // [1]
    {
        /* Crea la instancia del objeto 'mapa' asociándole
           el div correspondiente */
        mapa = new GMap2(document.getElementById(div));    // [2]
        /* Centra el mapa en la ubicacion (latitud, longitud
           y altura) especificadas */
        mapa.setCenter(new GLatLng(centerLat, centerLang), centerAlt);     // [3]
        /* Establece el tipo de mapa.  Disponibles:
               - G_NORMAL_MAP
               - G_SATELLITE_MAP
               - G_HYBRID_MAP
           Enlace: http://code.google.com/apis/maps/documentation/controls.html */
        mapa.setMapType(G_HYBRID_MAP);      // [4]
        /* Establece el comportamiento por defecto de los
           elementos del UI del mapa.
           Enlace: http://code.google.com/apis/maps/documentation/reference.html#GMap2.setUIToDefault */
        mapa.setUIToDefault();
        /* Éxito */
        return mapa;
    }
    else     /* Fracaso */
        return null;
}

Agregar un marcador.

Posteriormente implementamos la función agregarMarcador que se ocupará de agregar un marcador creado con cierta información específica al mapa.  Su código es el siguiente.

/*
 * Agrega un marcado con la información especificada
 * al mapa.
 *
 * @param GMap2   - Referencia externa al mapa.
 * @param Double  - Latitud donde se centrará el mapa.
 * @param Double  - Longitud donde se centrará el mapa.
 * @param String  - Mensaje que tendrá la burbuja asociada.
 *
 * @return void.
 */
 function agregarMarcador(mapa, latitud, longitud, mensaje)
 {
    /* Crea el punto asociado a la longitud y latitud
       especificadas. */
    var punto = new GLatLng(latitud, longitud);
    /* Crea un marcador asociado a la ubicación anterior */
    var marcador = new GMarker(punto);
    /* Establece que en el evento 'onclick' del marcador
       muestre la burbuja con el mensaje especificado */
     GEvent.addListener(marcador, "click", function()
     {
         mapa.openInfoWindowHtml(punto, mensaje);
     });
     /* Agrega el marcador recién creado al mapa */
     mapa.addOverlay(marcador);
 }

Información de las ciudades de Cuba.

Los marcadores del mapa corresponderán como se dijo anteriormente, con cinco ciudades de Cuba que se predefinieron y de las cuales se conoce su ubicación: latitud y longitud.  Su información se almacena en el arreglo puntos en el cual cada una de sus celdas corresponde con una ciudad.

/* Información para los marcadores del mapa: Ciudades de
 * Cuba. */
 var puntos = new Array(
    {
        'nombre'  : 'La habana',
        'latitud' : 23.132,
        'longitud': -82.364
    },
    {
        'nombre'  : 'Santa Clara',
        'latitud' : 22.4,
        'longitud': -79.967
    },
    {
        'nombre'  : 'Bayamo',
        'latitud' : 20.379,
        'longitud': -76.643
    },
    {
        'nombre'  : 'Las Tunas',
        'latitud' : 20.962,
        'longitud': -76.951
    },
    {
        'nombre'  : 'Manzanillo',
        'latitud' : 20.343,
        'longitud': -77.117
    }
 );

Para automatizar el proceso de agregación de los marcadores basados en la información de los puntos creamos a la función agregarMarcadores cuya misión es la de invocar repetidas veces a la función agregarMarcador.  En ella se define además el contenido del globito de cada uno de las ciudades (mensaje).

/*
 * Automatiza el agregar los marcadores basados en la
 * información del arreglo de puntos.
 *
 * @param GMap2   - Referencia externa al mapa.
 * @param Array   - Información de los marcadores a agregar.
 *
 * @return void.
 */
 function agregarMarcadores(mapa, informacion)
 {
    for(var i=0; i<informacion.length; i++)
    {
        var nombre   = puntos[i]['nombre'];
        var latitud  = puntos[i]['latitud'];
        var longitud = puntos[i]['longitud'];
        var mensaje  = "Este es <b>" + nombre + "</b>,<br /> su latitud es <b>" +
                       latitud + "</b><br /> y su longitud es <b>" + longitud + "</b>.";
        agregarMarcador(mapa, latitud, longitud, mensaje);
    }
 }

Finalmente, el programa principal.

En este fragmento del código definimos la ejecución del programa principal del mapa.  Se ejecuta tan pronto como la página se encuentra cargada (onLoad) y desarrolla las siguiente actividades.

  1. Prepara el mapa.
  2. Verifica que el mapa haya sido creado exitosamente.
  3. Agrega los marcadores sobre las ciudades especificadas.

Su código es el siguiente.

/* Inicio del programa Javascript (setup) */
window.onload = function()
{
    /* Solicita la creación del mapa especificando el DIV
       que lo albergará y la ubicación (latitud, longitud,
       altura). */
    mapa1 = prepararMapa('MiMapa', 21.4, -79.8, 7);
    if(mapa1 == null)
    {
        alert("Su navegador no incluye soporte para Google Maps!");
        return false;
    }
    /* Solicita la agregación de los marcadores de ejemplo
       especificando la referencia al mapa y el arreglo con
       la información de los puntos */
    agregarMarcadores(mapa1, puntos);
    return true;
}

Listo!

Probar la página web utilizando un navegador como Firefox.

Enlaces.

]]> http://blog.jorgeivanmeza.com/2009/09/como-crear-un-mapa-con-googlemaps-version-2-en-pasos-simples/feed/ 0 Introducción a StaticMaps de Googlehttp://blog.jorgeivanmeza.com/2008/10/introduccion-a-staticmaps-de-google/?utm_source=rss&utm_medium=rss&utm_campaign=introduccion-a-staticmaps-de-google http://blog.jorgeivanmeza.com/2008/10/introduccion-a-staticmaps-de-google/#comments Wed, 29 Oct 2008 03:47:38 +0000 jimezam http://www.jorgeivanmeza.com/blog/?p=854 Continue reading →]]> 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: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=500×300&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:

]]> http://blog.jorgeivanmeza.com/2008/10/introduccion-a-staticmaps-de-google/feed/ 1 Demostración de georreferenciación al estilo web 2.0http://blog.jorgeivanmeza.com/2008/09/demostracion-de-georreferenciacion-al-estilo-web-20/?utm_source=rss&utm_medium=rss&utm_campaign=demostracion-de-georreferenciacion-al-estilo-web-20 http://blog.jorgeivanmeza.com/2008/09/demostracion-de-georreferenciacion-al-estilo-web-20/#comments Wed, 10 Sep 2008 02:43:37 +0000 jimezam http://www.jorgeivanmeza.com/blog/?p=652 Continue reading →]]> 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 :-P

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:
 ]]> http://blog.jorgeivanmeza.com/2008/09/demostracion-de-georreferenciacion-al-estilo-web-20/feed/ 0  Introducción práctica a Google Mappletshttp://blog.jorgeivanmeza.com/2008/07/introduccion-practica-a-google-mapplets/?utm_source=rss&utm_medium=rss&utm_campaign=introduccion-practica-a-google-mapplets http://blog.jorgeivanmeza.com/2008/07/introduccion-practica-a-google-mapplets/#comments Tue, 15 Jul 2008 04:37:45 +0000 jimezam         http://www.jorgeivanmeza.com/blog/?p=409 Continue reading →]]> 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:
 ]]> http://blog.jorgeivanmeza.com/2008/07/introduccion-practica-a-google-mapplets/feed/ 0  De GoogleMaps a LocalLivehttp://blog.jorgeivanmeza.com/2007/08/de-googlemaps-a-locallive/?utm_source=rss&utm_medium=rss&utm_campaign=de-googlemaps-a-locallive http://blog.jorgeivanmeza.com/2007/08/de-googlemaps-a-locallive/#comments Mon, 27 Aug 2007 21:09:31 +0000 jimezam     http://www.jorgeivanmeza.com/blog/?p=118 Continue reading →]]> 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
 ]]> http://blog.jorgeivanmeza.com/2007/08/de-googlemaps-a-locallive/feed/ 1