Ajout de punaises sur une carte Bing Maps

Ceci est le cinquième billet d’une série sur Windows Phone 7 dans laquelle je construis une application permettant de surveiller la disponibilité de vélos des stations Vélib’ à Paris. Pour rappel, voici la table de matières:

1. Introduction et installation des outils
2. Création d’une application et utilisation du contrôle Bing Maps
3. Le GPS et les services de géolocalisation
4. Consommation d’un service OData
5. Ajout de punaises sur une carte Bing Maps
6. Création de nouvelles pages et navigation
7. Création de vignettes sur la page d’accueil

On a besoin de punaises

Hier nous nous sommes arrêtés sur une liste stations. Chaque station est représentée par un objet de type Station qui contient des propriétés telles que le numéro de station, son adresse, le nombre de vélos et de places disponibles, mais surtout, ses coordonnées géographiques.

La prochaine étape sera donc d’utiliser ces informations pour afficher des punaises sur la carte de la page principale qui donneront un aperçu de l’état de chaque station et qui nous permettront d’accéder à la page de détails de celles-ci.

Pour afficher des punaises sur une carte, vous allez utiliser des calques. Ces calques dérivent de MapLayer et supportent des éléments d’à peu près n’importe quel type:

Dans notre cas, le Pushpin fourni dans l’assembly Bing Maps suffira largement. Ce contrôle possède deux propriétés qui nous intéressent :

• Content : est une propriété héritée de ContentControl qui permet à la classe Pushpin d’afficher à peu près n’importe quel contenu.
• Location : est de type GeoCoordinate et représente les coordonnées géographiques de la punaise qui serviront à la positionner sur la carte.

<map:Pushpin Content="Taj Mahal" Location="27.172222,78.042476" />

Cependant, notre modèle de données, la Station, ne correspond pas tout à fait à ce qui est attendu par la classe Pushpin. Avant de continuer, vous aurez donc besoin d’un modèle qui représentera les stations sur la carte. Créez la classe Pin dans votre projet :

public class Pin
{
    public Station Station { get; set; }

    public string Label { get { return this.Station.Number.ToString(); } }

    public GeoCoordinate Location
    {
        get
        {
            return new GeoCoordinate(
                (double)this.Station.Latitude,
                (double)this.Station.Longitude);
        }
    }
}

Transformez maintenant votre collection de Stations en une collection de Pins :

private void GetStationsInRectangleCallbak(IAsyncResult result)
{
    var stations = this._repository.EndExecute<Station>(result);

    var p = from s in stations
            select new Pin { Station = s };

    Dispatcher.BeginInvoke(
        new Action<IEnumerable>((pins) => pinLayer.ItemsSource = pins), p);
}

Et un calque pour afficher le tout

Dans le code ci-dessus, nous avons transformé les stations et assigné cette nouvelle collection au calque de type MapItemsControl qui hébergera les punaises.

<map:Map x:Name="Map"
    CredentialsProvider="{StaticResource BingMapsKey}"
    ZoomBarVisibility="Visible" ZoomLevel="16"
    ViewChangeEnd="OnViewChangeEnd">
    <map:MapItemsControl x:Name="pinLayer">
        <map:MapItemsControl.ItemTemplate>
            <DataTemplate>
                <map:Pushpin Location="{Binding Location}"
                             Content="{Binding Label}"
                             Tap="OnStationTap" />
            </DataTemplate>
        </map:MapItemsControl.ItemTemplate>
    </map:MapItemsControl>
</map:Map>

MapItemsControl qui expose, entre autres, les propriétés ItemsSource et ItemTemplate qui nous permettent de spécifier les éléments à afficher et le template à utiliser pour leur rendu à l’écran, respectivement. Dans l’exemple ci-dessus, chaque punaise sera représentée par un Pushpin dont les propriétés sont liées à celles du modèle créé à l’étape précédente. De plus, la méthode OnStationTap sera appelée lorsque l’on appuie sur les repères :

private void OnStationTap(object sender, GestureEventArgs e)
{
    var station = ((sender as Pushpin).DataContext as Pin).Station;
}

Nous savons que c’est un objet de type Pushpin qui appelle la méthode et que son DataContext est de type Pin. Il ne reste plus qu’à appeler la propriété Station de ce dernier type pour obtenir les information de la station que l’utilisateur a choisi.

Lundi nous passerons cette station à une nouvelle page qui sera chargée d’afficher ses détails.