Saltar al contenido
Menú
El blog de Kañaz
  • Inicio
  • Acerca de
  • Github
  • Youtube
  • LinkedIn
  • Twitter
El blog de Kañaz

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

Publicada el 19 enero, 201116 julio, 2012
Twittear

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).

img51

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.

img52

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.

img53

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”.

img54

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).

img55

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);
}

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.

img56

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.

img57

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;

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; }
}
}

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);
}
}

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).

img58

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;

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;
}
}
}

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);
}

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

Listo!!! Si todo te marchó de acuerdo a lo requerido ahora si hagamos la prueba de fuego, entra a tu aplicación web y señala un par de lugares.

img59

Y después vete a tu aplicación móvil.

img60 img62

Aquí el código del proyecto móvil.

Descargar código.

Y por si se las perdieron, aquí están las entradas anteriores.

1.- Usar bing maps en Silverlight 4

2.- Implementar un servicio web ASP dentro de mi aplicación Silverlight

3.- Publicar mi aplicación web

4.- Crear un servicio WCF para obtener datos

1 comentario en «Ver mi mapa y datos usando Windows Phone 7 (Parte 5)»

  1. Pingback: Crear un servicio WCF (Parte 4) « Mi sitio, tu sitio

Deja una respuesta Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Busca en este sitio

MI perfil de Github

Github profile

Sígueme en Twitter

Seguir a @aminespinoza
©2023 El blog de Kañaz | Funciona con SuperbThemes y WordPress