Geolocalización en WP7 – Parte I

Estándar

En este tutorial crearemos una aplicación para Windows Phone 7 en la cual utilizaremos Bing Maps para realizar la geolocalización.

El tutorial lo estoy planteando desde cero y paso a paso para que nadie se pierda..

Nuestro primer paso es crear la aplicación en Visual Studio, es decir vamos a File>New Project>Windows Phone Application , y allí veremos la siguiente pantalla en donde agregaremos el nombre de la aplicación (en mi caso lo he llamado “Geo”):

L02

Al haber creado la aplicación, el siguiente paso es arrastrar el control Map (lo podemos encontrar en toolbox) hacia nuestra aplicación:

L03

Si pulsamos la tecla F5, la aplicación correrá pero tendremos un problema, nos aparecerá una leyenda que nos dice que no tenemos las credenciales para usar el control.

L04

Para solucionar esto visitaremos la página bingmapsportal.com, en la cual nos crearemos una cuenta para poder obtener las credenciales.

L05

Una vez creada la cuenta, nos dirigimos a “Create or view keys” y una vez allí completamos el formulario. En mi caso el nombre de mi aplicación es “Geo”, el tipo de clave es “Basic”, y el tipo de aplicación es “Mobile”

L06

Luego de haber completado el formulario, obtendremos la credencial que nos permitirá usar el mapa de Bing de manera correcta:

L07

El siguiente paso es abrir la solución desde Expression Blend, seleccionar el control Mapa, y en la propiedad “CredentialsProvider” seleccionar “Convert to New Resource”

L08

Al Crear un nuevo recurso para la credencial, aprovecharemos para crear un diccionario de recursos, tal como muestra la imagen:

L09

Una vez creado lo anterior, si accedemos al archivo ResourceDictionary.xml encontraremos el lugar para agregar la clave o credencial que nos ha proporcionado Bing:

L10

Si hacemos un F5 luego de agregar la clave, veremos que al mapa ya no le aparecerá ninguna leyenda.

L11

Regresando a Visual Studio, empezaremos a agregar el código básico a nuestra aplicación: Los Namespaces, instancias, y eventos que usaremos
*Los detalles del código están en la imagen

L12

Continuando con el código agregaremos un indicador de los estados en los que se puede encontrar el servicio de localización:

L13

El siguiente paso es determinar que hacer cuando el usuario de la aplicación cambie su posición:

L14

Si probamos nuestra aplicación la veremos de la siguiente manera:
*Nos podemos ayudar con las herramientas adicionales que provee el emulador para simular con distintas ubicaciones geográficas:

L15

Para personalizar un poco más a la aplicación crearemos un template para tener un Pushpin Personalizado, el cual lo podemos agregar en el diccionario de recursos, de la siguiente manera:

L20

Para que los cambios sean visibles debemos especificarlos de la siguiente manera:

L21

Si ejecutamos la aplicación podremos ver a nuestra aplicación en funcionamiento con el pushpin personalizado:

L22

*Detalle: la última captura contiene un ‘application bar’ con algunas de las funcionalidades que veremos en el siguiente post!

Espero que les haya servido..

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s