Ver mi mapa y datos usando Windows Phone 7 (Parte 5)

Bien, pues ya vamos por la última, haciendo un resumen de lo que llevamos hecho, podemos comenzar con hacer una aplicación que me permitiera desplegar un mapa usando al API de Bing Maps para Silverlight, después hicimos un servicio web ASP.net para poder guardar información de los elementos que quisimos poner dentro de el mapa, en la tercera entrega vimos como publicar esa aplicación para considerar el hecho de cuando la pongamos en modo productivo, en la cuarta entrada vimos el gran salto hacia los servicios WCF que para ser honesto, son una maravilla y bastante cómodos de utilizar, llegaron para quedarse y con justa razón, entonces hasta ahora ya tenemos todo para trabajar con todos estos datos, opté por recibir los resultados vía Windows Phone 7 para cambiar un poco de plataforma y además para confirmar los recién adquiridos conocimientos en esta plataforma, (agradezco a Raúl Mayo por su artículo que fue el principal eje para comprender por completo los servicios WCF).

Pues bien, primero crea el proyecto que necesitas, esto es algo así (por costumbre es que siempre inicio mis proyectos en Blend, puedes comenzarlos como mejor te acomodes).

Ahora para hacernos las cosas mas sencillas, puedes brincar a VS2010 y simplemente arrastrar y seleccionar un control de mapa que está entre tus herramientas, así nos quitamos de muchos pasos.

Ya que tienes tu control de mapa en la aplicación, debes ponerle al igual que tu aplicación web las credenciales que obtuviste para desarrollar en Bing (puedes usar las mismas que en la parte uno de este tutorial), después de las credenciales puedes escoger el tipo de mapa que usarás así como cualquier ajuste que quieran, en mi caso por ser de México, pude poner los siguientes valores para el ZoomLevel y Center del mapa.

Center=»22.75791,-101.5966″ ZoomLevel=»5.900″

Entonces mi vista previa quedaría de la siguiente manera.

Ya que tenemos el mapa lo único que nos hace falta es mandar llamar el servicio WCF que creamos en la parte 4 de esta serie, sino lo has publicado, ahora es cuando debas hacerlo pues usaremos esa URL (para saber como hacerlo esta la Parte 3 de esta serie a tu disposición ), para eso darás clic derecho sobre el proyecto y agrega una “Referencia de Servicio”.

En el cuadro de diálogo escribe la URL de tu servicio WCF y presiona el botón de “Ir” para que te aparezca el servicio en el cuadro de abajo así como sus métodos existentes, solo falta que hasta abajo escribas el nombre de esa referencia para que quede de la siguiente manera (aclaro que no necesitas dar clic hasta dar con tu método, solo es un método para confirmar que si es el servicio que necesitas).

Ahora en la interfaz agrega un botón para mandar llamar ese servicio (yo lo pondré hasta arriba para usar ese espacio sin chiste donde esta el título), y en su evento clic es donde vas a mandar traer al método de tu servicio.

private void button1_Click(object sender, RoutedEventArgs e)
{
LocationRect extent = mapa.BoundingRectangle;
double Norte = Math.Round(extent.North, 4);
double Sur = Math.Round(extent.South, 4);
double Este = Math.Round(extent.East, 4);
double Oeste = Math.Round(extent.West, 4);
 
Servicio1.Service1Client miServicio = new Servicio1.Service1Client();
miServicio.MostrarLugaresCompleted += miServicio_MostrarLugaresCompleted;
miServicio.MostrarLugaresAsync(Norte, Sur, Este, Oeste);
}

Como puedes recordar, al momento de hacer el servicio WCF le estableciste cuatro parámetros, entonces ahora debes mandarlos para que el servicio haga lo suyo, si te preguntas de donde los sacas checa la siguiente imagen.

Entonces el BoundingRectangle te permitirá obtener las coordenadas de tus cuatro extremos del mapa y gracias a eso el servicio podrá determinar el área de visibilidad que tienes en tu pantalla para que de acuerdo a ello te regrese solo los resultados que estén al alcance de tu vista y no todos.

Para continuar, antes de que escribas algo en el evento Completed, debes declarar una variable global de tipo MapLayer y crear un nuevo UserControl.

En este nuevo UserControl, solo debes preocuparte por poner un PushPin, para que te quede algo así.

http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="<a href="http://schemas.microsoft.com/winfx/2006/xaml">http://schemas.microsoft.com/winfx/2006/xaml</a>"
xmlns:d="<a href="http://schemas.microsoft.com/expression/blend/2008">http://schemas.microsoft.com/expression/blend/2008</a>"
xmlns:mc="<a href="http://schemas.openxmlformats.org/markup-compatibility/2006">http://schemas.openxmlformats.org/markup-compatibility/2006</a>"
xmlns:Microsoft_Phone_Controls_Maps="clr-namespace:Microsoft.Phone.Controls.Maps;assembly=Microsoft.Phone.Controls.Maps"
x:Class="WindowsPhoneApplication1.Apuntador"
mc:Ignorable="d" Width="32" Height="72"&gt;

Y en por el lado de tu código C# debe quedar de la esta forma.

using System;
using System.Windows;
using System.Windows.Controls;
 
namespace WindowsPhoneApplication1
{
public partial class Apuntador : UserControl
{
public Apuntador()
{
InitializeComponent();
}
 
public string Nombre { get; set; }
 
public string Descripcion { get; set; }
 
public string Telefono { get; set; }
 
public byte[] Imagen { get; set; }
}
}

Y ya con variable y control de usuario creados puedes meter este código en el evento Completed del servicio WCF

void miServicio_MostrarLugaresCompleted(object sender, Servicio1.MostrarLugaresCompletedEventArgs e)
{
if (e.Error == null)
{
capaMapa = new MapLayer();
foreach (var item in e.Result)
{
Apuntador apuntador = new Apuntador();
apuntador.Nombre = item.Nombre;
apuntador.Descripcion = item.Descripcion;
apuntador.Telefono = item.Telefono;
apuntador.Imagen = item.Imagen.Bytes;
Location ubicacion = new Location();
ubicacion.Latitude = item.Latitud;
ubicacion.Longitude = item.Longitud;
capaMapa.AddChild(apuntador, ubicacion, PositionOrigin.BottomLeft);
apuntador.MouseLeftButtonDown += apuntador_MouseLeftButtonDown;
}
mapa.Children.Add(capaMapa);
}
}

Simplemente a partir del resultado obtenido asignas un valos a tu control de usuario y usas un objeto de tipo Location para recibir las coordenadas, ya que tienes ambos elementos, los colocarás dentro de un MapLayer (el que creaste antes) y ese objeto será el que insertes dentro de tu mapa, por último nos quedamos con el evento MouseLeftButtonDown de nuestro control creado, pero de nuevo, antes de continuar ahora necesitas crear una página nueva de la siguiente manera (Puede ser “Portrait” o “Landscape”, como la prefieras, no hay problema).

Y en esa página inserta los controles necesarios para que quede de la siguiente manera en tu XAML

http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="<a href="http://schemas.microsoft.com/winfx/2006/xaml">http://schemas.microsoft.com/winfx/2006/xaml"</a>
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="<a href="http://schemas.microsoft.com/expression/blend/2008">http://schemas.microsoft.com/expression/blend/2008"</a>
xmlns:mc="<a href="http://schemas.openxmlformats.org/markup-compatibility/2006">http://schemas.openxmlformats.org/markup-compatibility/2006"</a>
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480"
shell:SystemTray.IsVisible="True"&gt;

Y por el lado de tu code behind así.

using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using Microsoft.Phone.Controls;
using System.Windows.Media.Imaging;
using System.IO;
 
namespace WindowsPhoneApplication1
{
public partial class Descripcion : PhoneApplicationPage
{
public Descripcion(string Nombre, string Descripcion, string Telefono, byte[] Imagen)
{
InitializeComponent();
PageTitle.Text = Nombre;
txtDescripcion.Text = Descripcion;
txtTelefono.Text = Telefono;
MostrarImagen(Imagen);
}
 
private void MostrarImagen(byte[] arreglo)
{
BitmapImage imagenRecibida = new BitmapImage();
Stream stream = new MemoryStream(arreglo);
imagenRecibida.SetSource(stream);
imgControl.Source = imagenRecibida;
}
}
}

Ok, ahora si puedes regresar a tu ventana principal y colocar el siguiente código en el evento que dejamos pendiente.

void apuntador_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
Apuntador elementoSeleccionado = sender as Apuntador;
this.Content = new Descripcion(elementoSeleccionado.Nombre, elementoSeleccionado.Descripcion,
elementoSeleccionado.Telefono, elementoSeleccionado.Imagen);
}