miércoles, 10 de abril de 2013

Comenzando con Google Maps API v2 parte 3



Desarrollo sobre la plataforma Android


Hola como estas todos, en esta ocasión vamos a continuar con la última versión de la API de Google Maps para Android, en este caso vamos a ver como modificamos la forma en la que se ve el mapa como el zoom , o el ángulo del mismo. Estaba pensando seguir con el tema de la ubicación, pero lo voy a dejar para la siguiente, así posteriormente vamos a situar puntos varios puntos en el mapa. Pero prefiero que primero sepamos manejar la vista, para ello simplemente vamos a mover la cámara  ;)

Con esta nueva versión de la API vamos a poder rotar, acercar o correr el mapa de manera sencilla solo con algunos gestos, lo que va a hacer que para el usuario pueda ubicar de mejor manera de una forma en la que le parezca mas cómodo  ademas muchas ciudades ya tienen un mapa en 3d lo que lo hace realmente atractivo.


Lo bueno de mover solo la  “ cámara” es que esto no va a modificar ningún overlay, marcador, o imagen que nosotros hayamos ubicado sobre el mapa, así solo se cambiara la vista del mapa, sin afectar lo que le agreguemos. Vamos a ver un par de conceptos necesarios, para entender el cómo modificar la vista.

De la misma manera que Google Maps para la web, la version de Android representan al mundo que es esférico de manera plana en nuestros dispositivos utilizando la proyección de Mercator: 
http://es.wikipedia.org/wiki/Proyecci%C3%B3n_de_Mercator
Así que si nos movemos para el este como para el oeste se va a ir repitiendo el mapa, no así como para el norte o sur, donde sí tienen límite. (estos límites son aproximadamente +/- 85 grados, lo que nos va a ayudar a facilitarnos la lógica para la selección de los tile )

La posición de la cámara:

El mapa fue modelado como si se lo estuviera mirando con una cámara hacia el piso, para modificar la forma en que la cámara observa y muestra este mapa, vamos a tener que modificar algunas de estas propiedades:

Target (Ubicación) : Este va a ser la ubicación del centro del mapa, esta la vamos a especificar, pasándole la longitud y latitud del mismo.

Zoom: Imagino que deben saber a que se refiere esta propiedad ;) básicamente el nivel de zoom, es el que va a determinar la escala del mapa, mientras más grande el zoom más detallada y cercana la imagen del mapa, mientras menor el zoom o sea más cercano a 0, nos acercamos más a ver el planeta completo. Aumentando en uno vamos a doblar el tamaño de la imagen (debemos tener en cuenta que no necesariamente debe ser un entero el zoom)

Bearing (orientación)
Es la dirección en que la línea vertical apunta, esta se mide en grados desde el norte. Básicamente nos va a servir para poder girar la manera en la que vemos el mapa, por ejemplo si le seteamos un bearing de 90 grados, el mapa nos va a quedar apuntando hacia el este.

Tilt (angulo en el que vemos el mapa)
Es la posición de la cámara, que se encuentra en un arco que está ubicado entre la superficie de la tierra y la posición central del mapa, esta posición se mide en grados, así que cuando modificamos los grados, lo que vemos es una perspectiva diferente del mapa.

Ejemplo, con cero grados,  el punto 1 es la cámara y el 2 es el mapa actual:


Así es como se ve el mapa:


Los grados pueden ir de cero a 90, veamos un ejemplo con 45 grados, ahora el número 3 representa la cámara  así que ahora la línea que va hasta el número 4 forma la vista que se verá del mapa:


Ahora veamos como se ve esto: (tengan encuentra que la posición es exactamente la misma que la anterior, el mapa se ve diferente solo porque cambio el punto de vista, no el mapa en si)


Para no hacerlo demasiado largo, voy a comentar un par de cosas más, pero no profundizaré en el tema, para eso creo que la docu oficial esta muy bien explicada, y los temas anteriormente tratados son los mas importante.

Algo que me pareció bastante agradable es la manera en la que podemos animar la forma en que se mueve la posición de la cámara, podemos hacer que se mueve de forma mas rápida o lenta, modificar el zoom cuando se mueve, etc para ello nos brindan por ejemplo los objetos CameraUpdate y CameraUpdateFactory (les recomiendo jugar con ellos ;) )

Esto es un ejemplo de como usar lo anteriormente comentado:

private static final LatLng SYDNEY = new LatLng(-33.88,151.21);
private static final LatLng MOUNTAIN_VIEW = new LatLng(37.4, -122.1);

private GoogleMap map;

... // con map debemos obtener referencia a nuestro MapFragment o MapView

// mover la camara instantaneamente a Sydney con un zoom  15.
map.moveCamera(CameraUpdateFactory.newLatLngZoom(SYDNEY, 15));

// agrandamos el zoom en 1,animando la camara
map.animateCamera(CameraUpdateFactory.zoomIn());

// alejamos el zoom al nivel 10, animando la cámara por 2 segundos
map.animateCamera(CameraUpdateFactory.zoomTo(10), null, 2000);

// Construimos una camara que apunta a Mountain View y animamos la camara hasta esa   // posicion
CameraPosition cameraPosition = new CameraPosition.Builder()
    .target(MOUNTAIN_VIEW)      // seteamos el centro del mapa a Mountain View
    .zoom(17)                   //  configuramos el zoom
    .bearing(90)                // cambiamos la orientación de la cámara al este
    .tilt(30)                   //  configuramos el angulo de la cámara a 30 grados
    .build();                   // Creamos la CameraPosition

map.animateCamera(CameraUpdateFactory.newCameraPosition(cameraPosition));

Documentación oficial:
https://developers.google.com/maps/documentation/android/views


Otros post relacionados con el tema:
http://www.aprendiendodeandroidymas.com/2012/12/comenzando-con-google-maps-api-v2-parte.html

http://www.aprendiendodeandroidymas.com/2012/12/comenzando-con-google-maps-api-v2-parte_31.html

Código fuente:
https://github.com/Android-Hispano/android-hispano-demo

Espero que les haya sido de utilidad el tema, creo que con esto tenemos para jugar un buen rato con nuestro mapa, realmente me resulto bastante sencillo, y agradable el manejo de la vista, nos vemos en una próxima entrega.

Saludos a todos, Gabriel E. Pozo