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.

 

xmlns:map="clr-namespace:Microsoft.Phone.Controls.Maps;
           assembly=Microsoft.Phone.Controls.Maps"

 

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

 

<map:Map Height="607"
         HorizontalAlignment="Left"
         Name="miMapa"
         VerticalAlignment="Top"
         Width="456" />

 

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:

 

<map:Map CredentialsProvider="AsWlUnHEvLgHlLHaRqTZLslewv1QIdGppxOqyL-7He2jxyHvLAjutrcntemUih-w9">

 

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

 

<Application.Resources>
  <map:ApplicationIdCredentialsProvider
    ApplicationId="AsWlUnHEvLgHlLHaRqTZLslewv1QIdGppxOqyL-7He2jxyHvLAjutrcntemUih-w9"
    x:Key="BingMapsAPIKey" />
</Application.Resources>

 

Control Map

 

<map:Map CredentialsProvider="{StaticResource BingMapsAPIKey}">

 

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

 

<map:Pushpin Location="40.1449, -82.9754"
             FontSize="30"
             Background="Orange"
             Content="1" />

 

C#

 

Pushpin pushpin = new Pushpin();
Location location = new Location();
location.Latitude = 40.1449;
location.Longitude = -82.9754;
pushpin.Location = location;
pushpin.Background = new SolidColorBrush(Colors.Orange);
pushpin.Content = "1";
pushpin.FontSize = 30;
MapControl.Children.Add(pushpin);

 

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

 

<map:MapPolygon Fill="Purple"
                Stroke="White"
                Opacity=".7"
                Locations="40.1449,-82.9754 40.1449,-12.9754 10.1449,-82.9754" />

 

C#

 

MapPolygon mapPolygon = new MapPolygon();
mapPolygon.Fill = new SolidColorBrush(Colors.Purple);
mapPolygon.Stroke = new SolidColorBrush(Colors.White);
mapPolygon.Opacity = .7;
LocationCollection locations = new LocationCollection();
Location location = new Location();
location.Latitude = 40.1449;
location.Longitude = -82.9754;
Location location1 = new Location();
location1.Latitude = 40.1449;
location1.Longitude = -12.9754;
Location location2 = new Location();
location1.Latitude = 10.1449;
location1.Longitude = -82.9754;
locations.Add(location);
locations.Add(location1);
locations.Add(location2);
mapPolygon.Locations = locations;

MapControl.Children.Add(mapPolygon);

 

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