GIS & Chips » Google Maps http://www.gisandchips.org Geografía útil para llevar Tue, 29 Nov 2011 10:38:56 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 API de Google + OpenStreetMap y otros servicios georreferenciados http://www.gisandchips.org/2010/03/24/api-de-google-openstreetmap-y-otros-servicios-georreferenciados/ http://www.gisandchips.org/2010/03/24/api-de-google-openstreetmap-y-otros-servicios-georreferenciados/#comments Wed, 24 Mar 2010 11:22:00 +0000 pepe http://www.gisandchips.org/?p=1551 Voy a tratar de diseñar un visor de cartografía utilizando el API de Google Maps ( si quereis saber más sobre este tema, podeis leer artículos en esta misma web que hacen referencia:  Google Web Toolkit & Google Maps, Integración de un servicio WMS en GoogleMaps usando GWT )  con la cartografía de OpenStreetMap y además voy a incluir datos de servicios de tipo georeferenciado (panoramio, youtube, flickr, kml, wikipedia,…) en dicho mapa.

Muestra un curioso mapa mundial lleno de etiquetas de los servicios georreferenciadosYa aviso que, una vez que muestro todos los servicios en el mapa,  queda un mapa demasiado lleno de elementos, pero eso  es justo lo que pretendo con este visor, tener todos los elementos en el mismo mapa y que se visualicen tanto fotos, videos, artículos de la wikipedia,kml,… a la vez, permitiéndo incluso añadir muchos más elementos.

En primer lugar, para mostrar el mapa de Google Maps, necesito registrar la clave previamente para el sitio web en cuestion que voy a tratar.

Y una vez registrada la clave ya se puede realizar el visor,  la programación del visor sería la siguiente:

//Hojas de estilo de google maps
 <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/yui/2.7.0/build/reset-fonts-grids/reset-fonts-grids.css">
 <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/yui/2.7.0/build/base/base-min.css">
 <script type="text/javascript" src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=clave_registrada_en_google"></script>

<script
type="text/javascript" charset="utf-8">
 google.load("maps", "2.x");

 function load()
 {
 if (!GBrowserIsCompatible())
 return;

 //definicion de variable de copyright del mapa
 var copyOSM = new GCopyrightCollection("GIS&Chips 2010");
 copyOSM.addCopyright(new GCopyright(1, new GLatLngBounds(new GLatLng(-90,-180), new GLatLng(90,180)), 0, " "));

 //definicion de las tiles de OpenStreetMap que iran por bajo del mapa
 var tilesMapnik     = new GTileLayer(copyOSM, 1, 17, {tileUrlTemplate: 'http://tile.openstreetmap.org/{Z}/{X}/{Y}.png'});
 var tilesOsmarender = new GTileLayer(copyOSM, 1, 17, {tileUrlTemplate: 'http://tah.openstreetmap.org/Tiles/tile/{Z}/{X}/{Y}.png'});
 var tilesCycle = new GTileLayer(copyOSM, 1, 17, {tileUrlTemplate: 'http://a.andy.sandbox.cloudmade.com/tiles/cycle/{Z}/{X}/{Y}.png'});

 var mapMapnik     = new GMapType([tilesMapnik],     G_NORMAL_MAP.getProjection(), "Mapnik");
 var mapOsmarender = new GMapType([tilesOsmarender], G_NORMAL_MAP.getProjection(), "Osmarend");
 var mapCycleMap = new GMapType([tilesCycle], G_NORMAL_MAP.getProjection(), "CycleMap");

 //definicion de mapa incluyendo los tres tiles de OpenStreetMap

 var map           = new GMap2(document.getElementById("map"), { mapTypes: [mapMapnik, mapOsmarender,mapCycleMap] });

 //se añaden los controles de mapa del API de Google Maps
 map.addControl(new GLargeMapControl()); //control de desplazamiento y acercamiento de gran tamaño empleado en  Google Maps.
 map.addControl(new GMapTypeControl());  //Permite alternar entre los diferentes tipos de mapas (en este caso las tres tiles)
 map.addControl(new GOverviewMapControl()); //Este control nos permite mostrar una ventana de vista rápida contraible

//Situado el centro, las coordenadas de la Universidad de Alicante
 map.setCenter( new GLatLng(38.38575, -0.51486), 16);

 map.enableScrollWheelZoom();
 map.enableContinuousZoom();

 //Se definen como GLayers los servicios georeferenciados que quiero incluir

 var wikipedia = new GLayer("org.wikipedia.es");
 var panoramio = new GLayer("com.panoramio.all");
 var youtube = new GLayer("com.youtube.all");
 var webcam = new GLayer("com.google.webcams");

 map.addOverlay(wikipedia);
 map.addOverlay(panoramio);
 map.addOverlay(youtube);
 map.addOverlay(webcam);

 //En este caso como los servicios son un xml se añaden como GGeoXML(tanto el api de flickr como cualquier KML que quiera incluir lo debo definir as�)
 var geoXmlFlickr;
 geoXmlFlickr = new GGeoXml("http://api.flickr.com/services/feeds/geo/?tags=universidad+alicante");
 map.addOverlay(geoXmlFlickr);

//Ejemplo de introducción de un KML
 var tram = new GGeoXml("http://www.sigua.ua.es/web/utils/acceso/kml/TRAM4.kml");
 map.addOverlay(tram);
 }

Aqui se puede ver como se muestra en el mapa el KML importado
Se muestra como queda la integracion de un archivo kml con información sobre una linea de tranvia en Alicante en el mapa anteriormente desarrollado


 </script>

 </head>

 <body onload="load()" onunload="GUnload()">
 <div>
 <div role="main">
 <div>
 <div id="map" style="width: 100%; height: 600px;"></div>

 </div>
 </div>
 </div>

El visor completo con todos los datos estaría accesible desde la siguiente URL:
http://www.gisandchips.org/demos/pepe/osm/test.html

Como digo, este mapa incluye tantos elementos que a veces es un poco extraño, pero es justo lo que pretendía, incluir muchos servicios en un mismo mapa.

]]> http://www.gisandchips.org/2010/03/24/api-de-google-openstreetmap-y-otros-servicios-georreferenciados/feed/ 4 Google Web Toolkit & Google Maps http://www.gisandchips.org/2009/11/20/google-web-toolkit-google-maps/ http://www.gisandchips.org/2009/11/20/google-web-toolkit-google-maps/#comments Fri, 20 Nov 2009 14:40:09 +0000 jpiera http://www.gisandchips.org/?p=1034 Google Web Toolkit (GWT) es un framework creado por Google que permite al programador hacer aplicaciones web utilizando el lenguaje de programación Java. Existe un plugin de Eclipse que se utiliza para facilitar la generación de aplicaciones GWT donde se puede depurar código utilizando el depurador de código del entorno. Una vez que la aplicación esta depurada, se tiene que pasar por el compilador GWT que genera código HTML y Javascript. La idea es poder generar páginas que utilicen la tecnología Ajax (HTML + Javascript asíncrono), sin ser necesario escribir ni una sola línea de Javascript.

Google Maps es un servicio de mapas que ofrece Google que tiene un API que permite integrarlo en cualquier página web utilizando Javascript. Pero si estamos utilizando GWT, existe además un jar que contiene un API para Java lo que permite a un programador de GWT poder integrar la tecnología de Google Maps en sus páginas web. Este artículo explica ese API y mediante ejemplos.

En este tutorial vamos a crear un proyecto de GWT y le vamos a añadir un mapa de Google Maps. Partiremos de un entorno en el que se ha instalado un Eclipse y se ha instalado el plugin de GWT. A continuación hay que crear un proyecto del tipo “Google -> Web Application Project” que tiene que tener un nombre (GoogleMapsDemo) y un paquete raíz(org.gisandchips.gwt.maps). No es necesario utilizar los mismos nombres que se usan en el ejemplo, pero si se hace así se podrá seguir este tutorial sin la necesidad modificar nada.

Pantallazo-New Web Application Project

El wizard de creación de un proyecto GWT crea un proyecto que se puede ejecutar: para ello seleccionamos la opción “Run -> Debug Configurations -> Web Application” y seleccionaremos GoogleMapsDemo que es el lanzador que ha creado el wizard por nosotros. Pulsamos en “Debug” y si todo va bien se abrirá un navegador que muestra un formulario con un único campo de texto y un botón para enviar.

Podemos rellenar el campo de texto con cualquier valor y al pulsar el botón se abrirá una ventana dónde el servidor nos da la bienvenida. ¿Y qué tiene esto de especial? Lo que realmente ha ocurrido es que el cliente ha enviado una petición asíncrona (¡el famoso Ajax!) y ha esperado a que el servidor le devuelva una respuesta para mostrarla.

Screenshot-Web Application Starter Project

Ahora que ya sabemos crear y ejecutar una aplicación en GWT vamos a crear una aplicación utilizando Google Maps. Primero hay que descargarse la librería de Google Maps para GWT desde la página web de Google (gwt-maps-XXX), hay que descomprimirla, y hay que copiar el jar gwt-maps a la carpeta “war -> WEB-INF -> lib” de nuestro proyecto. A continuación hay que modificar el path del proyecto (“Project -> Properties -> Java Build Path -> Libraries -> Add Jars”) y añadir la librería que acabamos de bajar.

Con esto ya tenemos acceso desde el Eclipse a las clases de Google Maps, pero para tener acceso en tiempo de ejecución tenemos que editar el fichero “org.gisandchips.gwt.maps.GoogleMapsDemo.gwt.xml” y añadir una línea para incluir la dependencia en el proyecto. Al final el fichero quedará de esta forma:


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 1.7.1//EN" "http://google-web-toolkit.googlecode.com/svn/tags/1.7.1/distro-source/core/src/gwt-module.dtd">
<module rename-to='googlemapsdemo'>
 <!-- Inherit the core Web Toolkit stuff.                        -->
 <inherits name='com.google.gwt.user.User'/>

 <!-- Inherit the default GWT style sheet.  You can change       -->
 <!-- the theme of your GWT application by uncommenting          -->
 <!-- any one of the following lines.                            -->
 <inherits name='com.google.gwt.user.theme.standard.Standard'/>
 <!-- <inherits name='com.google.gwt.user.theme.chrome.Chrome'/> -->
 <!-- <inherits name='com.google.gwt.user.theme.dark.Dark'/>     -->

 <!-- Other module inherits                                      -->

 <!-- Specify the app entry point class.                         -->
 <entry-point class='org.gisandchips.gwt.maps.client.GoogleMapsDemo'/>

 <!-- Load the Google Maps GWT bindings from the gwt-google-apis project -->
 <!-- Added by projectCreator if you use the -addModule argument -->
 <inherits name="com.google.gwt.maps.GoogleMaps" />
 <script src="http://maps.google.com/maps?gwt=1&amp;file=api&amp;v=2&amp;sensor=false" />
</module>

Tal y como se indica en el fichero XML, la clase “org.gisandchips.gwt.maps.client.GoogleMapsDemo” es la que contiene el punto de entrada a la aplicación, por lo tanto es aquí donde hay que introducir el código Java que generará la página web. Por otra parte, el fichero “GoogleMapsDemo.html” que hay en la carpeta war es el que contiene el HTML de entrada y que habrá que editar para personalizar una nuestra página de inicio. En nuestro caso vamos a modificar el título y a añadir una etiqueta donde se situará el mapa. El “body” del documento quedaría de la siguiente forma:


<body>

 <!-- OPTIONAL: include this if you want history support -->
 <iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>

 <h1>Mi primer ejemplo con GWT y Google Maps</h1>

 <table align="center">
 <tr>
 <td id="mapContainer"></td>
 </tr>
 </table>
 </body>

A continuación hay que editar la clase “org.gisandchips.gwt.maps.client.GoogleMapsDemo”. Eliminamos todo el código del método “onModuleLoad” y añadimos el siguiente código java:


public void onModuleLoad() {
 MapWidget mapWidget = new MapWidget();
 mapWidget.setSize("1000", "500");

 RootPanel.get("mapContainer").add(mapWidget);

}

Ahora ya podemos lanzar el proyecto una vez más para ver los resultados. Se abrirá el navegador y tendremos que ver una página web con un mapa en el centro donde podremos hacer panning y desplazarnos.

Screenshot-Web Application Starter Project

Ahora que sabemos cómo introducir un mapa de todo el planeta en nuestra aplicación, vamos a modificar algunas de las propiedades del objeto “MapWidget” que es el que representa al mapa. Primero vamos a añadir algunos componentes al mapa mediante el método “addControl”.

Podemos introducir una barra de navegación que permitirá hacer zoom añadiendo un objeto de tipo “LargeMapControl”. También podemos añadir un combo que permitirá seleccionar los distintos formatos de GoogleMaps utilizando el objeto “MenuMapTypeControl”.  El método “onModuleLoad” quedaría así:

public void onModuleLoad() {
MapWidget mapWidget = new MapWidget();
mapWidget.setSize("1000", "500");

//Añadimos la barra de navegación
mapWidget.addControl(new LargeMapControl());

//Añadimos el combo con los formatos
mapWidget.addControl(new MenuMapTypeControl());

RootPanel.get("mapContainer").add(mapWidget);
}

Ahora volvemos ejecutar la aplicación y podremos ver los nuevos componentes introducidos en el mapa.

Llagados a esta punto ya hemos comentado los pasos básicos que hay que hacer para integrar un mapa de Google Maps en una web realizada mediante GWT. En los próximos artículos veremos cómo se pueden hacer búsquedas en el mapa y cómo se puede personalizar.

]]> http://www.gisandchips.org/2009/11/20/google-web-toolkit-google-maps/feed/ 7