Siete días con Titanium – día 5 – GPS y Mapas

Esto no necesita ningún tipo de introducción. Puedes usar la localización de los dispositivos para saber donde se encuentran los usuarios y actuar en consecuencia. Es bueno que sepas que necesitas la aprobación del usuario, y para los iOs > 3.2 necesitas establecer la propiedad “propósito” para hacer saber a Apple para que lo necesitas.

Titanium.Geolocation.purpose = "GPS user coordinates";

Cómo funciona la Geolocalización

Cuando inicias la app, las coordenadas son las que se encuentren en el caché del dispositivo, en otras palabras, las que fueron detectadas la última vez que utilizaste la geolocalización en tu dispositivo. Detectar la posición actual lleva tiempo de manera que si tienes una app basada en geolocalización quizás quieras tomar esto en cuenta para mejorar la experiencia del usuario y evitar dar falsos resultados.

Titanium.Geolocation provee los métodos necesarios para manejar la geolocalización.

En general, el método más usado es getCurrentPosition que te da la posición actual y dispara una vez el evento “location” que se dispara repetidamente al cambiar de posición. Para ser más claro, piensa que quieres un registrar la ruta que sigue el usuario: cuando la app comience, obtienes su posición de inicio entonces mientras camine, puedes obtener puntos de la ruta con una distribución granular ajustable.

 
Titanium.Geolocation.distanceFilter = 10; // set the granularity of the location event
 
	Titanium.Geolocation.getCurrentPosition(function(e)
	{
		if (e.error)
		{
                // manage the error
                return;
		}
 
		var longitude = e.coords.longitude;
		var latitude = e.coords.latitude;
		var altitude = e.coords.altitude;
		var heading = e.coords.heading;
		var accuracy = e.coords.accuracy;
		var speed = e.coords.speed;
		var timestamp = e.coords.timestamp;
		var altitudeAccuracy = e.coords.altitudeAccuracy;
 
                // we use the above data the way we need it
	});
 
	Titanium.Geolocation.addEventListener('location',function(e)
	{
		if (e.error)
		{
                // manage the error
		return;
		}
 
		var longitude = e.coords.longitude;
		var latitude = e.coords.latitude;
		var altitude = e.coords.altitude;
		var heading = e.coords.heading;
		var accuracy = e.coords.accuracy;
		var speed = e.coords.speed;
		var timestamp = e.coords.timestamp;
		var altitudeAccuracy = e.coords.altitudeAccuracy;
 
               // again we use the gathered data
      });

Hay otros métodos que pueden ser usados como reverseGeocoder, forwardGeocoder y getCurrentHeading – para brújulas. Porque no todos los dispositivos tienen localización por GPS (como el iPod) o la brújula y porque el usuario puede tener los servicios de localización deshabilitados, tienes que verificar si existe, si está habilitado se lo haces saber al usuario.

Como la página de documentación no está completa aún, sugiero que le eches un vistazo al ejemplo de geolocalización que muestra muy bien como usarlo.

Mapas

Los mapas son creados usando los métodos Titanium.Map Los mapas con un poco más complicados pero te permiten hacer hacer estupendas interfaces de usuario. Puedes usar un Mapview y añadirle una ruta o colocar marcadores y a los mismos adjuntarle imágenes, títulos e incluso enlaces a otras ventanas para una vista más detallada del lugar especificado o lo que sea que necesites.

Crear un mapa

var mapview = Titanium.Map.createView({
	top:20,
	height:300,
	mapType: Titanium.Map.STANDARD_TYPE,
	region:{latitude:33.74511, longitude:-84.38993, latitudeDelta:0.5, longitudeDelta:0.5},
	animate:true,
	regionFit:true,
	userLocation:true
});

Nada complicado: el constructor puede recibir diferentes argumentos incluyendo las anotaciones o marcadores (pins), pero por su puesto tendrás que declararlo primero.

Y esto se hace así:

var apple = Titanium.Map.createAnnotation({
	latitude:37.33168900,
	longitude:-122.03073100,
	title:"Steve Jobs",
	subtitle:'Cupertino, CA',
	pincolor:Titanium.Map.ANNOTATION_GREEN,
	animate:true,
	rightButton: 'apple_logo.jpg',
	myid:2 // CUSTOM ATTRIBUTE THAT IS PASSED INTO EVENT OBJECTS
});
 
var atlanta = Titanium.Map.createAnnotation({
		latitude:33.74511,
		longitude:-84.38993,
		title:"Atlanta, GA",
		subtitle:'Atlanta Braves Stadium\nfoo',
		animate:true,
		leftButton:'atlanta.jpg',
		rightButton: Titanium.UI.iPhone.SystemButton.DISCLOSURE,
		myid:3 // CUSTOM ATTRIBUTE THAT IS PASSED INTO EVENT OBJECTS
	});

y el constructor del mapa obtiene

	annotations:[atlanta,apple]

mas tarde puedes añadir esta anotación usando

	mapview.addAnnotation(atlanta);

Eventos de mapas

Una cosa que necesitas saber es que los eventos son registrados al nivel del mapa. De manera que no puedes obtener un evento clic en un marcador. Tendrás que obtener el evento click del mapview y usar las propiedad clicksource y la propiedad personalizada (myId) para detectar las anotaciones y a lo que se le ha hecho click (pin, botón izquierdo, título, subtítulo).

	if (evt.source.myid == 3 && evt.clicksource == 'rightButton') {
        // do your stuff
        }

MapRoute

Otra de las cosas que puedes hacer con un mapa es añadirle una ruta (por ahora sólo en iOs). Básicamente puedes dibujar una linea en el mapa especificando los puntos (puntos gdp) que necesita para trazarla.

Una ruta se puede ver así:

var route = {
	name:"some name",
	points:points,
	color:"red",
	width:2
};

Donde points es un arreglo de objetos que contienen coordenadas en latitud y longitud.

captura de pantalla - mapa google on iphone

Ejemplo – añadir una ruta a un Mapview

Debajo se encuentra un ejemplo que añade una ruta a un mapview usando algunas coordinadas previamente establecidas. Generará algo similar a la captura en la derecha.

var center = {latitude:42.30,longitude:-71.18,latitudeDelta:0.03, longitudeDelta:0.1};
 
var mapview = Titanium.Map.createView({
	mapType: Titanium.Map.STANDARD_TYPE,
	region: center,
	animate:true,
	regionFit:true
});
 
points = [
	{latitude:42.31,longitude:-71.11},
	{latitude:42.32,longitude:-71.13},
	{latitude:42.31,longitude:-71.22},
	{latitude:42.28,longitude:-71.26}
]
 
// route object
var route = {
	name:"some name",
	points:points,
	color:"#00f",
	width:2
};
 
// add a route
mapview.addRoute(route);

¿Que sigue?

Un buen ejercicio podría ser crear una aplicación que se encuentre mirando tu posición mientras manejas o caminas y te la muestre en un mapa. Todo lo que necesitarías hacer es usar los eventos location y usar el valor retornado para añadir un nuevo elemento al arreglo de puntos.

¿Alguien quiere intentarlo? 🙂

7 thoughts on “Siete días con Titanium – día 5 – GPS y Mapas”

  1. Hola Dan, Excelentes tus tutoriales, mil gracias, una preguntita, como harias si tuvieras que usar maps y un Overlay de una imagen, asi como para poner un mapa hecho por uno y poder calcular la distancia entre el current location del usuario y el punto x q toque en el mapa, esto todavia no esta en titanium pero estoy segura que hay manera de hacerlo, alguna idea?
    Gracias y Saludos desde Costa Rica!

  2. Le verdad es que no tengo ni idea :). Puedes intentar buscar en el forum de Appcelerator, tal vez encuentres algo.

  3. Vieras q ya busque y nada! voy a seguir pensando a ver q se me ocurre o esperar q lo agreguen al API. Gracias en todo caso!

  4. Andrea, cuando encuentres la respuesta, por favor escribela aquí tambien. Así aprendemos…juntos. 🙂

  5. Los tutoriales están geniales, hay poca documentación como la q
    No estaría mal que siguieran el 8,9,10,11,25,450….XD
    Me están ayudando mucho….

Comments are closed.