Archive

Posts Tagged ‘Mapas’

31 días de Windows Phone | Día #20: El control Map

December 20th, 2010 No comments

Cada vez es más común en teléfonos celulares el uso de la ubicación geográfica del usuario para mostrar puntos cercanos de interés, rutas a destinos, y otras aplicaciones por el estilo. En muchos de esos casos, es esencial poder presentar la información en un mapa. Este artículo muestra cómo tomar ventaja del servicio de mapas de Bing en Windows Phone 7.

Este artículo fue publicado originalmente en Maromas Digitales y es una traducción aproximada del artículo 31 Days of Windows Phone | Day #20: Map Control por Jeff Blankenburg publicado el 20 de octubre del 2010

 

Este artículo es el Día #20 de una serie llamada los 31 días de Windows Phone.

El artículo gigante de ayer trató sobre la distribución de notificaciones (Push Notifications) y cómo hacer llegar información al teléfono aún cuando nuestra aplicación no está siendo ejecutada. Hoy volvemos a los controles, específicamente el control Map. A medida que el uso de información sobre ubicación geográfica se hace más común en aplicaciones móviles, es más y más importante poder enseñar dónde se encuentra nuestro usuario y los puntos de interés cercanos.

 

Usando el control Map

Es parte del Cuadro de Herramientas de Visual Studio 2010 por lo sólo hay que arrastrarlo a la pagina. Notarán que entonces se añade un nuevo espacio de nombres de XML.

 

 

Este es el código XAML generado automáticamente por la operación (luego de que ajusté su tamaño y posición):

 

 

Finalmente un vistazo rápido al mapa en mi aplicación:

 

Mapa básico.

 

Notarán el mansaje blanco que dice “Invalid Credentials: Sign up for a developer account.” En lo que resta del artículo voy enumerar todo lo que se puede hacer con este control, incluso cómo obtener una clave para el desarrollo con la interfase de programación.

 

Creando la cuenta de desarrollador

Lo primero, antes de empezar a desarrollar la aplicación, es obtener una clave para la interfase de programación para mapas de Bing. Es un proceso simple y gratuito que elimina el feo mensaje de que vimos hace un momento. Para obtener una, vayan y regístrense en el portal de mapas de Bing. El segundo paso es crear una clave para la interfase de programación. Tal como se ve acá:

 

Formulario para solicitar una clave de desarrollador.

 

Luego de llenar el formulario, recibirán una clave similar a esta:

AsWlUnHEvLgHlLHaRqTZLslewv1QIdGppxOqyL-7He2jxyHvLAjutrcntemUih-w9

(Esta no es mi clave ya que le cambié varios caracteres, pero es su apariencia general.)

 

Usando el proveedor de credenciales

Una vez teniendo la clave, podemos incorporarla en nuestra aplicación. Si sólo se tiene un mapa en toda la aplicación, entonces basta con usarla de esta forma:

 

 

Si vamos a utilizar la misma llave repetidas veces, puede ser mejor almacenarla en otra parte, como por ejemplo, el archivo App.xaml y luego obtenerla desde la página donde se ocupe.

 

App.xaml

 

 

Control Map

 

 

Cambiando las características del mapa

Hay toda una gama de opciones para cambiar el aspecto y presentación del mapa. Por ejemplo, se puede cambiar de mapa de caminos a mapa aéreo, o se puede escoger enseñar u ocultar la el seleccionador de nivel de ampliación. El Bing Maps Silverlight Control Interactive SDK permite explorar la increíble lista de opciones configurables. No hay razón para que las cubra TODAS las opciones aquí (en vista del excelente trabajo efectuado en ese sitio); además mi enfoque es explicar cómo suplir nuestros datos al mapa. Me voy a concentrar en dos puntos específicos: cómo añadir tachuelas y polígonos.

 

Agregando una tachuela

Agregar una tachuela abarca simplemente crear un objeto Pushpin en C# y configurar su ubicación para luego añadirlo al mapa. Lo mismo aplica en XAML. El segundo provee algunos atajos, pero ninguno de los dos es complicado.

 

XAML

 

 

C#

 

 

El ejemplo, en ambos casos, añade una tachuela al mapa indicando mi oficina en el 8800 Lyra Drive, Columbus, Ohio, EEUU. En mi aplicación se ve así:

 

Tachuela en el mapa.

 

Si se preguntan cómo convertí la dirección a latitud y longitud les recomiendo ver mi artículo en la serie de 31 días de Silverlight. Allí cubro específicamente el tema de codificación geográfica de direcciones y es exactamente lo que van a necesitar en la aplicación del teléfono.

 

Agregando un polígono

Otro pequeño control en el ensamblaje de mapas es el MapPolygon. Si le pasamos un lista de puntos geográficos, dibujará un contorno personalizado en el mapa. La figura permanece en sitio aun cuando el usuario desplaza la vista en el mapa. Puesto que está asociado a valores de longitud y latitud, es fácil usarlo para delinear países, estados, regiones o hasta parqueos de automóviles, si eso es lo que aplicación hace. Así es cómo se logra:

 

XAML

 

 

C#

 

 

Y ahí lo tienen. Hemos añadido una tachuela y un polígono a nuestro mapa. Para enterarse de la gran cantidad de posibilidades de este control asegúrense de revisar el Bing Maps Silverlight Control Interactive SDK. (Les dejo abajo la captura del MapPolygon.)

 

Polígono en el mapa.

 

Descargando el código

En el ejemplo encontrarán la demostración de cómo añadir tachuelas y polígonos al mapa tanto en XAML como en C#. No se ocupa usar ambas formas, escojan una o la otra dependiendo de sus necesidades.

 

Jeff Blankenburg

 

Categories: WP7 Tags: , , ,

Creando un control de usuario reutilizable : El mapa de México en XAML en acción – Parte III

December 30th, 2008 No comments

Esta es la continuación del artículo "Creando un control de usuario reutilizable : El mapa de México en XAML en acción Parte II

El portal que estamos desarrollando con Silverlight 2 tiene un control de usuario que representa el mapa de México.  El control es sensible a los clics del mouse y levanta un evento cuando un estado es seleccionado.  No obstante, la solución en este momento no es muy funcional ya que lo único que hace es mostrar el nombre del estado en un TextBlock.  En este artículo veremos cómo extender la funcionalidad del Portal agregando una funcionalidad sencilla pero poderosa: obtenendremos una serie de fotografías relacionadas con el estado seleccionado usando los servicios REST públicos de Flickr.

REST

REST es el acrónimo de REpresentational State Transfer, el cual es una serie de lineamientos y prácticas para la arquitectura de servicios usando las propias bondades de HTTP y sus verbos (PUT, GET, DELETE, POST) los cuales pueden derivar fácilmente en acciones CRUD (Create, Read, Update, Delete) y por ende en acciones para obtener o modificar datos. 

Comunmente en el ámbito de Servicios Web tradicionales (ASMX o WCF) tenemos métodos marcados especialmente para responder a peticiones y regresar algún conjunto de datos o realizar alguna operación.  No obstante, para cada operación o acción requerimos crear un endpoint diferente cada vez (no necesariamente, pero muy comunmente es así), es decir, vamos creando métodos y más métodos para satisfacer las necesidades operativas de nuestro servicio.  En REST no necesariamente es lo mismo.

Un ejemplo de un servicio REST puede ser:

/productos">/productos">http://<sitio>/productos

para regresar una lista completa de productos, o

/productos/1001">/productos/1001">http://<sitio>/productos/1001

para regresar únicamente el producto con identificador 1001.

API de Flickr

Vamos a utilizar los servicios REST que expone Flickr de manera gratuita y pública para implementar la funcionalidad de obtención de imágenes en nuestro Portal que estamos desarrollando.  La documentación completa de estos servicios la pueden consultar aquí.  Es importante mencionar que para la correcta ejecución de los servicios y obtención de datos necesitan un identificador único, el cual es obtenido de manera sencilla inscribiéndote al sitio de Flickr.  Ese identificador está relacionado con tu cuenta así que mucho cuidado en dónde lo usen o muestren.

El API de Flickr indica la manera en la que puedes consultar sus servicios y cómo serán regresados esos datos.  Para nuestra aplicación utilizaremos el método flickr.photos.search para buscar todas aquellas fotos que están etiquetadas con el nombre del estado que hemos seleccionado en el mapa.  Cabe mencionar que los servicios de Flickr tienen muchas más funcionalidades para usarlas en nuestras aplicaciones, como etiquetado de fotos, consulta de grupos, contactos, modificación de los metadatos de las fotos, etc.  Para más información, consulta la documentación en línea.

URL del servicio

La dirección, entonces, del servicio que estaremos usando es:

http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=AQUI VA TU API KEY&tags=NOMBRE DEL ESTADO"

URL de las fotos

Cada foto en Flickr tiene un URL el cual está constituído de la siguiente manera:

http://farm{FARM}.static.flickr.com/{SERVIDOR}/{ID}_{SECRETO}.jpg

Tal es el caso de la siguiente imagen, que tiene el URL http://farm4.static.flickr.com/3159/3046189596_1e8821aaaf_o.jpg

Implementación

Estados

Primero lo que vamos a hacer es corregir el hecho de que algunos estados de México tienen más de una palabra, y que los Canvas que representan cada estado de la República tienen un nombre corto, por ejemplo Baja California Sur es BCSur o San Luis Potosí es SanLuisP.  Dudo mucho que las personas que suban imágenes a Flickr etiqueten sus fotos de esa manera.  Por lo tanto, vamos a agregar la siguiente clase a nuestro proyecto de Silverlight la cual es una clase que hereda de la clase genérica Dictionary<T, T>, y en nuestro caso la implementaremos como Dictionary<string, string>.

Posteriormente, es buena idea tener un control que muestre las fotos relacionadas al estado seleccionado y eso lo vamos a lograr con un control de tipo ListBox en Page.xaml.  El control lo vamos a situar en la segunda columna y en la segunda fila, ocupando dos filas de espacio.

Es importante hacer notar que estamos modificando la plantilla del ListBox para cada uno de sus elementos, y estamos usando el elemento <DataTemplate> en el cual definimos lo que queremos que se vea para cada uno de los elementos.  En nuestro caso implementamos un elemento <Image> y hacemos atado de datos a la propiedad Url explicada anteriormente en este artículo.  El atado de datos (data binding en inglés) es una característica sumamente importante y poderosa de Silverlight la cual tendrá su propia saga de artículos más adelante en este blog.

Después lo que vamos a hacer es agregar a nuestro proyecto de Silverlight una clase que represente una foto o imagen de Flickr.  El siguiente fragmento de código muestra la clase Foto con sus respectivas propiedades (Farm, Server, ID, Secret) y una quinta propiedad llamada Url la cual regresará la cadena compuesta, es decir, el Url tal y como lo espera Flickr para poder mostrar fotos.

Además, vamos a modificar un poco nuestro control Mexico.xaml, agregando un segundo evento llamado EstadoSeleccionadoMouse el cual se disparará cuando simplemente pasemos el cursor del mouse sobre alguno de los estados.  Esto lo queremos hacer así por el hecho de determinar con anticipación el nombre del estado antes de hacer click, y evitar peticiones innecesarias al servidor de Flickr y de esta manera ahorrarnos ancho de banda.  El evento EstadoSeleccionadoMouse estará también basado en el mismo delegado MexicoEventHandler creado y explicado en los artículos anteriores.

Ahora bien, cuando se levante el evento EstadoSeleccionado de nuestro control (cuando el usuario haga clic en algún estado) vamos a hacer una petición al servicio de Flickr para obtener todas las fotos relacionadas con el estado seleccionado (aquellas que estén etiquetadas con ese nombre). 

Esto lo vamos a hacer utilizando un objeto de tipo WebClient, el cual encapsula la funcionalidad necesaria para hacer llamadas asíncronas al endpoint que definas en el método que estés utilizando: DownloadStringAsync o OpenReadAsync.  En nuestro caso usaremos DownloadStringAsync ya que la respuesta del servicio de Flickr es texto plano expresado ya sea en XML o en JSON.

Asimismo, es importante notar que estamos usando una consulta de LINQ To XML para obtener todas las fotos que regresa el servicio en forma de elementos Xml y por cada una de ellas regresaremos una instancia de Foto, la cual tiene implementada la propiedad Url que regresa ya armada el URL correcto y es la propiedad a la que se ata o liga el elemento <Image> dentro del <DataTemplate>… todo concuerda!

Todo listo

Ejecutemos la aplicación y veamos que inicialmente tiene la misma apariencia que la aplicación del anterior artículo, no obstante, si hacemos clic en algún estado, en la parte derecha se muestran todas las fotos relacionadas con él.

Incluso, podemos corroborar que efectivamente sean las fotos correctas desde el mismo sitio de Flickr, haciendo una búsqueda por la palabra completa “Nuevo León” (como se muestra en el ejemplo).  Ojo: hay que incluir las comillas para determinar que es una palabra compuesta y no dos  palabras por separado (Nuevo y León).

 

El código fuente de este artículo lo pueden descargar de la sección “Contenido” de La Liga Silverlight o haciendo clic directamente aquí.

Categories: General Tags: , ,

Creando un control de usuario reutilizable : El mapa de México en XAML en acción – Parte II

December 22nd, 2008 1 comment

Esta es la continuación del artículo “Creando un control de usuario reutilizable : El mapa de México en XAML en acción – Parte I”.

Crear un control de usuario reutilizable en Silverlight 2 es una tarea muy sencilla y más si organizamos e identificamos bien los pasos a seguir.

Actualmente en nuestra solución de Silverlight tenemos varios archivos entre ellos Page.xaml y Mexico.xaml.  Page.xaml es el archivo que incluye por default la plantilla de proyectos Silverlight 2 para Visual Studio .NET 2008.  Este archivo representa una página en nuestra aplicación; podemos tener más de 1 página por proyecto no obstante la página que estaremos viendo en la aplicación es aquella que asignes en la propiedad RootVisual lo cual podemos comprobar si abrimos el archivo de code-behind App.xaml.cs:

El fragmento de código muestra el comportamiento predeterminado de una aplicación Silverlight 2: la aplicación mostrará una instancia de Page.xaml, la cual no es mas que una clase que extiende la clase base UserControl; esta instancia es asignada a la propiedad RootVisual de la aplicación y todos felices y contentos.

Ahora bien, queremos crear nuestro control del mapa de México como un control reutilizable para poder usarlo en Page.xaml, Page2.xaml o CualquierOtroArchivo.xaml.

El siguiente paso será importar el namespace del proyecto en la declaración del UserControl de Page.xaml, asignándole un alias (por ejemplo “mapas”) para poder nombrar las nuevas instancias del mapa de una manera sencilla:

Tenemos nuestra primer instancia del control de usuario en Page.xaml ! No obstante, el mapa del control de usuario tiene un tamaño superior al tamaño de Page.xaml.  Esto es fácilmente corregido si eliminamos las declaraciones fijas de tamaño que tiene Mexico.xaml (Width y Height) en los Canvas LayoutRoot y MapaMexico y en la declaración del UserControl.  Además es buen momento para quitar la declaración de color azul del Canvas MapaMexico para que el mapa sea totalmente transparente cuando lo coloquemos en una página:

Estos últimos pasos nos permitirán declarar el mapa de México como cualquier otro elemento o control de Silverlight 2.  La siguiente figura muestra cómo se dibuja el nuevo control de usuario en el diseñador de Visual Studio .NET 2008:

Ya que el mapa de México lo podemos tratar como cualquier otro elemento o control de Silverlight, apliquemos una transformación de escala (ScaleTransform) para manipular su tamaño y mostrarlo un poco mejor en la página:

Es buen momento para diseñar la página de nuestra aplicación (Page.xaml).  Al diseño agregaremos 2 columnas y 3 filas ya sea manualmente en el archivo Page.xaml o por medio de Expression Blend.  La primer fila nos servirá para colocar el título de la aplicación, la segunda para colocar el mapa de México y la tercera para indicar cuál estado ha sido seleccionado.

El siguiente fragmento de código muestra las modificaciones realizadas a Page.xaml y la figura la aplicación ejecutándose en el navegador:

Al ejecutar la aplicación nos damos cuenta que el mapa de México continúa sirviendo, pero aún necesitamos una manera de avisarle a la página Page.xaml que un estado ha sido seleccionado!  Esto lo haremos creando un evento en Mexico.xaml.cs.

Primeramente necesitamos definir una nueva clase de Argumentos.  Esta clase incluirá una propiedad llamada Estado la cual indicará qué estado ha sido seleccionado por el usuario:

Posteriormente un nuevo delegado que sea la base para el evento que estamos buscando disparar.  Este nuevo delegado usará dos parámetros: object y MexicoEventArgs; siendo el primero el objeto (instancia del mapa) que ha disparado el evento y el segundo los argumentos del evento.  Sin sorpresa alguna vemos que estoy usando MexicoEventArgs ya que precisamente usaremos su propiedad Estado para indicar el estado seleccionado.

Ahora bien, declaremos el evento dentro de la clase Mexico:  Este evento estará basado en MexicoEventHandler (el nuevo delegado):

Finalmente, vamos a disparar este evento en el clic de cada estado en vez de estar mostrando la ventana de alerta:

Este último fragmento de código  demuestra varias cosas:

  1. Estamos obteniendo el nombre del estado haciendo un cast a Canvas de la propiedad sender para determinar qué estado fue seleccionado y
  2. Estamos creando una nueva instancia de MexicoEventArgs a la cual le estaremos asignando en su propiedad Estado el nombre del estado obtenido del punto número 1.
  3. Estamos usando una nueva característica del .NET Framework 3.5 la cual es “Object Initializer” o “Inicializadores de Objectos”.  Con ella podemos en la misma línea de código establecer las propiedades públicas que necesitemos sin necesidad de contar con un constructor adecuado para ello.

Perfecto!  Por último, necesitamos “inscribirnos” al evento EstadoSeleccionado en Page.xaml, para poder establecer el texto del TextBlock tbEstado con el nombre del estado seleccionado:

Estamos usando una expresión Lambda, en vez de la declaración del método en el cuerpo de la clase.  Las expresiones Lambda son un tipo especial de Métodos Anónimos (concepto introducido desde la versión 2.0 del .NET Framework) y su sintaxis incluye el operador => que significa “se va a”.  Es notable cómo el compilador conoce de antemano el tipo de los parámetros de la expresión Lambda sin necesidad de explícitamente indicarlos (o es Object, args es MexicoEventArgs).

Listo!  Hemos creado nuestro primer control de usuario y lo hemos utilizado en Page.xaml. Si ejecutamos la aplicación podemos darnos que el comportamiento esperado es correcto:  al hacer clic en un estado del control de usuario mapaMexico, el TextBlock tbEstado cambia su texto correctamente: (la propiedad ShowGridLines del Grid en Page.xaml ha sido establecida a false en la siguiente figura)

Puedes descargar el código fuente de este artículo en la sección Contenido de la La Liga Silverlight en esta dirección.

En el siguiente artículo veremos cómo extender la funcionalidad de nuestra aplicación para crear un portal que muestre fotografías relacionadas con el estado seleccionado del control de usuario!

Categories: General Tags: ,

Creando un control de usuario reutilizable : El mapa de México en XAML en acción – Parte I

December 18th, 2008 3 comments

Hace algunas semanas creé el primer mapa de México en XAML.  Esta iniciativa animó a unos buenos amigos a perfeccionar esta primer aproximación del mapa de México en XAML para poder utilizarlo en nuestras aplicaciones Silverlight / WPF.  En este artículo veremos cómo crear un control de usuario reutilizable a partir de este XAML para poder usarlo en la plataforma Silverlight.

Para iniciar, es buena idea mostrar el mapa de XAML que usaremos.  El mapa de México en XAML lo pueden descargar del sitio de contenido de La Liga Silverlight.  Para mostrar el mapa estoy usando KaXaml, una excelente herramienta para edición de XAML alternativa a las ya conocidas herramientas como Visual Studio .NET 2008 o Expression Blend.

Muy bien, para iniciar debemos hacer notar los siguiente:

  • Cada estado de la república es un Path, el cual está envuelto en un contenedor <Canvas> con el nombre de cada estado en la propiedad x:Name, esto para poder tener control sobre cada uno de los estados (al darle click sobre cada uno de ellos o al mover el mouse encima de él). 32 estados = 32 Path = 32 Canvas.
  • El <Canvas> raíz de todo el mapa se llama MapaMexico.  Este <Canvas> es el contenedor de los 32 estados del país

Comenzando

Crearemos una aplicación de tipo Silverlight por medio de Visual Studio .NET 2008 y usando las plantillas.  A esta aplicación le llamaremos PortalMexico como a continuación se muestra en la ilustración:

Posteriormente seleccionamos la opción de crear una aplicación Web y cerramos la ventana de diálogo.  Una vez descargado el mapa de México en XAML, agregamos los dos archivos Mexico.xaml y Mexico.xaml.cs al proyecto de Silverlight.  Estos archivos son el diseño en XAML y el code-behind relacionado a ese XAML respectivamente.

El mapa de México en XAML ya incluye código preconstruído el cual colorea el estado de la república Mexicana que esté seleccionado a través del cursor del mouse.  Este código es bastante sencillo y se logra de la siguiente manera:

Vale la pena notar que el código itera sobre todos los estados (Canvas) que están en el Canvas raíz (MapaMexico) y por cada uno ejecuta el método RegisterEvents() que a continuación se muestra:

Como podrás notar, para los eventos MouseEnter (al entrar el cursor del mouse sobre el Canvas), MouseLeave (al salir el cursor del mouse del Canvas) y MouseLeftButtonUp (al hacer clic completo con el mouse sobre un estado (Canvas)) se asignan los manejadores de evento:

estado_MouseEnter

estado_MouseLeave

estado_MouseLeftButtonUp

…respectivamente.  Esto quiere decir que, estos métodos (denominados manejadores de eventos por tratarse de métodos que se ejecutan cuando se dispara un evento) se comparten para los 32 estados!  librándonos de escribir más código del necesario, el cual también pudo haber sido resuelto de la siguiente manera pero menos eficiente:

O peor aún:

Asimismo, cuando haces clic sobre un estado del mapa de México, te muestra el navegador un mensaje de alerta con el nombre del estado que has seleccionado.  De hecho lo que te muestra no es más que el nombre del Canvas que envuelve el Path que representa el estado, tal y como lo podemos apreciar en el siguiente fragmento de código tomado del code-behind del mapa:

Es notable la presencia de la clase HtmlPage de Silverlight, la cual encapsula toda la funcionalidad necesaria del HTML Bridge de Silverlight.  Esta característica permite manipular el DOM del navegador con .NET dentro del plugin de Silverlight!!!  Esta es uno de los componentes que en lo personal considero bastante potente en esta plataforma y motivo suficiente para incluir Silverlight en todos nuestros proyectos Web ya que si abrimos un poco nuestra imaginación podremos darnos cuenta que tal vez, y digo, tal vez… no volvamos a necesitar crear scripts de Javascript para nuestras aplicaciones Web.  Este tema merece artículos en específico que próximamente estarán publicados en este blog y en La Liga Silverlight.

Vale la pena probar el mapa de México en XAML tal cual se puede descargar de La Liga Silverlight, sin modificaciones para poder entender lo que hemos explicado hasta el momento.  Para que la aplicación PortalMexico inicie con Mexico.xaml en vez de con Page.xaml, simplemente modifica la siguiente línea en el archivo App.xaml.cs, el cual es el archivo de código global para toda nuestra aplicación Silverlight, y posteriormente ejecuta la aplicación presionando la tecla F5 o eligiendo la opción Start Debugging del menú Debug en Visual Studio .NET 2008 (por favor toma en cuenta el nombre de espacio Mexico que contiene la clase Mexico)

 

Muy bien, ya que explicamos la manera de cómo se están adjuntando los manejadores de eventos a los diferentes eventos para cada estado y qué sucede cuando un usuario hace clic en algún estado es momento de implementar nuestro control de usuario en la aplicación Silverlight:  Es hora de reutilizar Mexico.xaml en Page.xaml :)

Categories: General Tags: ,

Otro mapa de México en XAML

November 20th, 2008 5 comments

Siguiendo la iniciativa que mencioné hace algunos días, mi buen amigo y colega Martín Uresti me pasó otro mapa de la República Mexicana en XAML más detallado y preciso para usarlo en nuestras aplicaciones Silverlight / WPF.  Muchas gracias Martín por tu colaboración y por compartirnos este gran recurso que será sin duda alguna de mucha ayuda para más de una persona.

El mapa lo pueden descargar aquí.

Haz clic en la foto para verla más grande

Espero les sea de ayuda!

Categories: General Tags: ,