Windows Phone Toolkit y el Control de Mapas

En el post anterior vimos un inicio de como utilizar el control mapas de Nokia para Windows Phone8, en este post añadiremos Windows Phone Toolkit

Para aquellos que no conozcáis Windows Phone Toolkit, este es un conjunto de herramientas y controles extra desarrollados por Microsoft y Open Source alojados en codeplex, concretamente en http://phone.codeplex.com/.

A la hora de utilizarlo en un proyecto nos serviremos de Nuget, haremos click derecho sobre el proyecto o solución > Administrar paquetes Nugget y buscar el Windows Phone Toolkit.

imageimage

Una vez instalado para su utilización deberemos importar su espacio de nombres

xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

 

Una vez importado puedes utilizar en la pagina sus controles que son

 

con esto ya se tienen disponibles los todos los controles del toolkit, los cuales son:

  • AutoCompleteBox

  • ContextMenu

  • CustomMessageBox

  • DateTimeConverters

  • DateTimePickers

  • Effects – SlideInEffect, TiltEffect and TurnstileFeatherEffect

  • ExpanderView

  • HubTile

  • ListPicker

  • LongListMultiSelector

  • Map extensions

  • PhoneTextBox

  • RatingControl

  • ToggleSwitch

  • Navigation transitions

  • WrapPanel

  • LongListSelector for 7.x

  • MultiSelect for 7.x

En este caso vamos a ver la extension de mapas, para ello debemos importar su espacio de nombres

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

Como podéis ver en este using estamos importando el espacio de nombres de Mapas del Toolkit y vamos a ver los controles UserLocationMarker y

Pushpin, ambos son un capa de pushpinss personalizados como los que vimos en el anterior post que podíamos hacer con la clase MapOverlay cada uno con su look y destinado a utilizarse para diferentes casos.

 

  • Pushpin: tiene el mismo look & feel que el viejo Bing Maps y se utiliza para señalar puntos de interés en el mapa
  • UserLocationMarker: es usado para identificar la posición del usuario y tiene el mismo look & feel que el usado en la aplicación nativa.

Usarlos es tan sencillo como el siguiente trozo de código

        <Controls:Map x:Name="map"
                      Center="43.2566901,-2.92406159"
                      ZoomLevel="15"
                      Pitch="8"
                      PedestrianFeaturesEnabled="True"
                      LandmarksEnabled="True"
                      Grid.Row="1">
            <toolkit:MapExtensions.Children>
                <toolkit:UserLocationMarker x:Name="UserLocationMarker" />
                <toolkit:Pushpin x:Name="MyPushpin" Content="Posición">
                </toolkit:Pushpin>
            </toolkit:MapExtensions.Children>
        </Controls:Map>
    

Si queremos trabajar con ellos desde el code-behind para enviar un posicionamiento en el mapa y lo marque utilizaremos el siguiente código

        private void CreatePushPins()
        {
            Pushpin pushpin = null;
            UserLocationMarker marker = null;

            ObservableCollection<DependencyObject> children = MapExtensions.GetChildren(map);
            pushpin = children.FirstOrDefault(x => x.GetType() == typeof(Pushpin)) as Pushpin;
            marker = children.FirstOrDefault(x => x.GetType() == typeof(UserLocationMarker)) as UserLocationMarker;
            pushpin.GeoCoordinate = new GeoCoordinate(43.2576901, -2.9250616);
            marker.GeoCoordinate = map.Center;
        }

Como veis a través del método MapExtensions.GetChildren me devuelve todos los objetos creados en el mapa y luego a través de LinQ los recupero por tipo, en este caso, solo el primero de cada tipo porque podemos tener múltiples, a partir de ahí les asigno las coordenadas en las cuales los quiero mostrar, siendo la localización del usuario el centro del mapa y el PushPin una posición al lado como se ve en la imagen

image

 

 

Si lo que queremos es mostrar una serie de lugares a partir de una lista de coordenadas que tengo por ejemplo de restaurantes utilizaremos el siguiente XAML

            <toolkit:MapExtensions.Children>
                <toolkit:MapItemsControl>
                    <toolkit:MapItemsControl.ItemTemplate>
                        <DataTemplate>
                            <toolkit:Pushpin GeoCoordinate="{Binding Coordenada}" Content="{Binding Informacion}" />
                        </DataTemplate>
                    </toolkit:MapItemsControl.ItemTemplate>
                </toolkit:MapItemsControl>
            </toolkit:MapExtensions.Children>

 

Nuestro siguiente paso es crear la clase donde vamos a tener los datos con los que realizamos el binding, como por ejemplo

    public class Lugar
    {
        public GeoCoordinate Coordenada { get; set; }
        public string Informacion { get; set; }      
    }

Rellenaríamos los datos que queremos mostrar

 

private void CrearLugares()
        {
            lugares.Add(new Lugar()
            {
                Coordenada = new GeoCoordinate(43.2566901, -2.92406159),
                Informacion = "Restaurante 1"
            });
            lugares.Add(new Lugar()
            {
                Coordenada = new GeoCoordinate(43.2576901, -2.93406159),
                Informacion = "Restaurante 2"
            });
            lugares.Add(new Lugar()
            {
                Coordenada = new GeoCoordinate(43.2526901, -2.93406159),
                Informacion = "Restaurante 3"
            });
        }

Y ya nos queda el último paso que es asignar la lista de lugares al objeto MapItemsControl, con estas tres líneas de código

 private void CreatePushPins()
        {

            ObservableCollection<DependencyObject> children = MapExtensions.GetChildren(map);
            var obj = children.FirstOrDefault(x => x.GetType() == typeof(MapItemsControl)) as MapItemsControl;

            obj.ItemsSource = lugares;
        }

 

El resultado es

 

image

 

Podéis descargar el ejemplo desde el siguiente enlace

descargar-ejemplo

Control de Mapas en Windows Phone 8

Después de mucho tiempo sin escribir por diversos temas, me he propuesto como arranque del año volver a escribir y como arranque de este año 2014 voy a tratar el tema de Mapas de Windows Phone 8.

Con Windows Phone 8 tenemos dos opciones a la hora de utilizar mapas, los mapas de Bing (los que utilizábamos en Windows Phone 7) o los de Nokia, siendo estos los que se recomienda utilizar por su potencia y fiabilidad, yo voy a hablar de los mapas de Nokia.

A la hora de utilizar los mapas lo primero que tenemos que tener en cuenta es de activar la capacidad ID_CAP_MAP en nuestro proyecto como muestra la siguiente imagen.

 

image

Para utilizar el control de mapas en nuestra aplicación arrastramos de la barra de herramientas a la pantalla donde vamos a utilizarlo como en la siguiente imagen.

image

Al arrástralo observaremos que nos ha introducido un nuevo espacio de nombres en el XAML denominado Controls cuyo espacio de nombres es Microsoft.Phone.Controls.Maps.

image

Ya tenemos el control de mapas en la ventana, la primera propiedad en la que podemos fijarnos es CartographicMode, esta propiedad nos permite indicar el modo de cartografía en el que mostrar el mapa, WP8 nos ofrece 4 tipos que podemos ver en la siguiente imagen.

image

AdemásAdemas de esta propiedad, en el control mapa tenemos

  • Center Indica el centro del mapa que se va a mostrar, es de tipo GeoCoordinate, el cual es ua clase que almacena propiedades de geolocalización como latitud, longitud, altitud….
  • ZoomLevel isNivel del Zoom del mapa, su valor va de 1 (lejos) a 20 (cerca).
  • Heading Rotación del mapa.
  • Pitch Es la elevación del mapa comparado con el Horizonte, veremos como se utiliza.
  • CartographicMode Ya lo hemos visto anteriormente
  • ColoreMode Tipo de color para el map (Dark o Light).
  • LandmarksEnabled Muestra los edificios en una representación 3D, estos edificios son los considerados importantes como monumentos, iglesias.
  • PedestrianFeaturesEnabled Muestra los elementos del peaton, como por ejemplo las estaciones de metro, autobuses….

Un ejemplo sería el siguiente código

 

image

    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Controls:Map x:Name="map"
                      Center="43.2566901,-2.92406159"
                      ZoomLevel="17"
                      Heading="45"
                      Pitch="25"
                      CartographicMode="Road"
                      ColorMode="Dark"
                      PedestrianFeaturesEnabled="True"
                      LandmarksEnabled="True"/>
    </Grid>

Lo siguiente que vamos a ver es el método SetView, este método permite cambiar la vista del control (ir a otras coordenadas) usando una animación, es muy sencillo de usar solo tenemos que ver el siguiente código

                map.SetView(new System.Device.Location.GeoCoordinate()
                {
                    Latitude = 43.3065222257616,
                    Longitude = -2.9944420673
                }, 15, Microsoft.Phone.Maps.Controls.MapAnimationKind.Parabolic);

Como tipos de animación tenemos Parabolic  o  Linear.

Una de las características mas chulas del control de mapas es la facilidad con la que se pueden añadir cualquier tipo de capas al control para señalar posiciones, elementos…. Esto se realiza a través de la clase MapOverlay , esta clase representa una capa dentro del mapa y puede contener cualquier objeto de tipo UIElement. Por ejemplo si queremos señalar un punto geográfico con una ellipse de color rojo, es tan sencillo como el siguiente trozo de código.

            var overlay = new MapOverlay();
image            overlay.GeoCoordinate = new System.Device.Location.GeoCoordinate()
            {
                Latitude = 43.3065222257616,
                Longitude = -2.9944420673
            };
            overlay.Content = new Ellipse()
            {
                Height = 30,
                Width = 30,
                Stroke = new SolidColorBrush(Colors.Red)
            };
            var layer = new MapLayer();
            layer.Add(overlay);
            map.Layers.Add(layer);

Como podéis observar es un característica muy potente ya que podemos generar cualquier contenido y a ese contenido darle comportamientos, lo que nos permite generar PushPins al mapa muy potentes y personalizados. Los pasos que tenemos que realizar son:

 

  1. Crear el objeto MapOverlay
  2. En el MapOverlay establecer el contenido con un UIElement
  3. En el MapOverley establecer la ubicación geográfica
  4. Crear el objeto MapLayer
  5. Agregar el MapOverlay a la colección de Layers del control

En el siguiente post utilizaremos el Windows Phone Toolkit, donde veremos los controles UserLocationMarker y Pushpin.

 

 Aquí os dejo un ejemplo de lo visto anteriormente