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:

custom_pins

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 :

Taj_Mahal

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

Création d’une application et utilisation du contrôle Bing Maps

Ceci est le deuxiè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

Description de l’application

Hier, pressé de vous faire installer les outils, j’ai oublié de vous présenter l’application elle-même !

Il s’agit d’une application très simple, permettant de surveiller la disponibilité des Vélib’s à Paris. Pour ceux qui ne connaissent pas Vélib’, il s’agit d’un réseau de stations, permettant la location de courte durée de vélos dans la capitale.

Notre application aura donc deux écrans :

Screenshot 1Screenshot 2

Le premier permet d’apercevoir, sur une carte qui occupe l’écran entier, les stations à proximité de l’utilisateur. Le deuxième sera accessible lorsque l’on appuie sur une station sur la carte ou depuis l’écran d’accueil.

Création du projet

Nous allons commencer par créer un nouveau projet.

New Project

Sélectionnez un projet de type Windows Phone Application dans la catégorie Silverlight for Windows Phone. J’ai appelé mon projet UnVelo.Wp7, mais vous êtes libres d’appeler le vôtre comme vous le souhaitez.

Comme j’avais prévenu, j’aurai besoin de fonctionnalités disponibles uniquement dans la nouvelle version du système d’exploitation. Choisissez donc les outils “Mango” ou Windows Phone 7.1 :

New Windows Phone Application

WindowClipping Votre nouveau projet contient déjà un certain nombre de fichiers :

  • App.xaml et App.xaml.cs contiennent du code relatif à l’application dans sa globalité, par exemple, des gestionnaires d’évènements ou, dans quelques instants, des ressources globales.
  • ApplicationIcon.jpg, Background.jpg et SplashScreenImage.jpg sont des images utilisées par le téléphone pour l’icône de l’application, la vignette de l’écran d’accueil et au démarrage de l’application. Je ne rentrerai pas dans le détail pour le moment, mais je vous encourage à jouer avec pour voir comment elles se comportent.
  • MainPage.xaml a été configurée dans App.xaml comme étant la page de démarrage de notre application, c’est donc ici que nous allons commencer.

ViewHolder

La page contient un certain nombre d’éléments par défaut. Ceux-ci permettent au développeur d’indiquer le nom de l’application, le titre de page et, dans une grille appelée ContentPanel, d’ajouter le contenu qu’il souhaite. Dans notre cas, cette page ne nous convient pas du tout, nous allons donc tout supprimer et ajouter notre plan.

Le contrôle Bing Maps

Pour ajouter un plan dans la page principale, nous allons utiliser le contrôle Bing Maps pour Silverlight fourni avec Windows Phone. Pour cela, vous devez ajouter une référence vers l’assembly Microsoft.Phone.Controls.Maps :

Add Reference

Ensuite, pour utiliser le contrôle dans le code XAML, il faut donner un alias au namespace Microsoft.Phone.Controls.Maps dans le fichier MainPage.xaml :

<phone:PhoneApplicationPage
    x:Class="UnVelo.Wp7.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:map="clr-namespace:Microsoft.Phone.Controls.Maps;assembly=Microsoft.Phone.Controls.Maps"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True">

Ce qui nous permettra enfin d’ajouter le contrôle à notre page :

<Grid x:Name="LayoutRoot" Background="Transparent">
    <map:Map />
</Grid>

Un petit Ctrl+F5 compilera et lancera l’émulateur pour que nous puissions enfin voir notre application pour la première fois :

Windows Phone Emulator

En l’état, vous ne pouvez pas faire grand-chose avec l’application. Vous pouvez tout de même utiliser un doigt pour déplacer la carte, faire un “double-clic” en appuyant deux fois rapidement pour zoomer et quitter l’application à l’aide du bouton Précédent de l’émulateur. Si vous avez un écran tactile, vous pourrez aussi tester des gestes comme le “pincement” pour zoomer.

Vous avez surement remarquée aussi la présence d’un message au milieu du contrôle, vous indiquant que vous n’avez pas fourni d’information d’identification et vous invitant à créer un compte développeur.

Ce compte peut être créé gratuitement sur le site Bing Maps Account Center et sera lié à un Live Id. Sur ce site vous pourrez créer une nouvelle “clé” pour l’utilisation des APIs Bing Maps.

Vous pouvez créer une clé de type “Développeur” ou “Mobile”. Les deux sont gratuites et vous permettront de travailler sans problème sur votre application Windows Phone 7. Une clé “Mobile” sera nécessaire lors du déploiement d’une application utilisant le contrôle Bing Maps, en revanche, sinon vous risquez de rencontrer des problèmes dus aux limitations des autres types de clé.

Une fois que vous avez obtenu votre clé, vous allez la copier et en faire une ressource globale de votre application, car vous allez en avoir besoin à plusieurs endroits.

Ouvrez donc le fichier App.xaml, dans lequel vous allez ajouter le namespace Microsoft.Phone.Controls.Maps, comme vous l’avez fait au-dessus et vous allez ajouter votre clé à la section Resources :

<Application.Resources>
    <map:ApplicationIdCredentialsProvider x:Key="BingMapsKey" ApplicationId="[Votre clé ici]" />
</Application.Resources>

Vous pouvez maintenant la référencer depuis MainPage.xaml :

<map:Map CredentialsProvider="{StaticResource BingMapsKey}"
         ZoomBarVisibility="Visible"
         ZoomLevel="12"
         Center="48.856614,2.352222"/>

Je m’arrêterai ici pour aujourd’hui. Vous avez tout ce qu’il vous faut pour jouer un peu avec le contrôle Bing Maps. N’hésitez pas à tester différentes propriétés pour changer l’affichage.

Demain nous utiliserons les services de géolocalisation pour centrer la carte sur la position actuelle de l’utilisateur automatiquement.

Why is Google better than Live Search?

One word: relevance.

I was looking for information on WPF/e (now Silverlight) today and, without thinking twice, I went to Google to find it. However, after seeing how good the results were for this Microsoft technology, I thought I go take a look at the Redmond-giant’s own search engine and see how it performed.

Disappointing, to say the least.

Take a look at the results (I’m shrinking them to put them side by side, but you can click to see them better):

google_wpfe_silverlight7 live_search_wpfe_silverlight6

Before going into relevance, let’s talk design.

When I use a search engine, you will probably agree with me, I couldn’t care less about the search engine itself, what I want is to find resources related to my keywords.

I’ll admit that my screen resolution of 1024×768 is not targeted by Live Search, even though about 70% of users still have resolution equal to that or less (you can google* look it up on Google if you don’t believe me) but still, Google displays 5 complete top-level results while Live Search only gives me three. I don’t want to have to scroll, I want my result to be in the top five and have the top five in front of me when I execute my search.

Now let’s talk about relevance.

These are Google’s top 3 results:

google_top_results6

Notice how result number one is a link to Microsoft’s official website for WPF/e. Even better, notice how Google’s index is so up-to-date that the title is now MSDN Silverlight Dev Center, a name which was only release one or two days ago.

Now take a look at Live Search’s top 3 results:

live_top_results6

Do I even need to comment? I guess if Microsoft wants to offer search services and sell their products, they should by search results from Google 🙂

* Google would like to avoid having its name become an everyday verb.

Pourquoi Google est meilleur que Live Search ?

Un mot : pertinence.

Je cherchais des informations sur WPF/e (désormais Silverlight) aujourd’hui et, sans y réfléchir deux fois, je suis allé les trouver sur Google. Cependant, après avoir vu combien les résultats de cette recherche d’une technologie Microsoft étaient excellents, je me suis dit que j’irais voir ce que ça donnait du côté du moteur de recherche du géant de Redmond.

Décevant, pour ne pas dire autre chose.

Regardez les résultats (j’ai réduit les images pour les mettre côte à côte, mais vous pouvez cliquer pour les voir en grand) :

google_wpfe_silverlight7 live_search_wpfe_silverlight6

Avant de parler de la pertinence, discutons du design.

Quand j’utilise un moteur de recherche, vous serez probablement d’accord avec moi, ce qui m’intéresse le moins c’est le moteur de recherche en lui-même, tout ce que je veux c’est trouver des ressources associées à mes mots clés.

J’admets que peut-être ma résolution d’écran de 1024×768 n’est pas parmi celles visées par Live Search, même si environ 70% des utilisateurs utilisent encore une résolution égale ou inférieure à celle-ci (si vous ne me croyais pas, cherchez sur Google) mais cela n’empêche que Google affiche 5 résultats complets de premier niveau tandis que Live Search n’en affiche que trois. Je ne veux pas scroller, je veux que mon résultat soit dans le top cinq et que le top cinq s’affiche devant moi.

Parlons maintenant de pertinence.

Voici les trois premiers résultats de Google :

google_top_results6

Remarquez que le premier lien est celui qui vous mène vers la page officielle sur le site de Microsoft pour WPF/e. Encore mieux, remarquez à quel point l’index de Google est à jour que le titre de la page est MSDN Silverlight Dev Center, un nom qui n’a été annoncé qu’il y a un ou deux jours.

Regardons maintenant les trois premiers résultats de Live Search :

live_top_results6

Y-a-t-il vraiment besoin de commenter ? Je pense que si Microsoft veut continuer à proposer des services de recherche et à vendre ses produits, ils devraient acheter les résultats des recherches à Google 🙂

¿Por qué Google es mejor que Live Search?

Una palabra: pertinencia.

Hoy estaba buscando información sobre WPF/e (ahora Silverlight) y, sin pensarlo dos veces, fui a Google para encontrarla. Sin embargo, después de ver que tan buenos fueron los resultados de la búsqueda de esta tecnología Microsoft, decidí darme una vuelta por el motor del gigante de Redmond para comparar.

Decepcionante, cuanto mucho.

Vean los resultados (reduje las imágenes para ponerlas a la par, pero se puede hacer clic para verlas mejor):

google_wpfe_silverlight7 live_search_wpfe_silverlight6

Antes de hablar de pertinencia, discutamos de diseño.

Cuando uso un motor de búsquedas, probablemente estarán de acuerdo conmigo, no podría importarme menos el motor en sí, sino que lo que quiero es obtener recursos asociados a mis palabras clave.

Admito que tal vez mi resolución de 1024×768 no esté entre las resoluciones para las que Live Search está diseñado, aunque más o menos 70% de los usuarios utilizan todavía resoluciones iguales o inferiores a la mía (si no me creen, busquen en Google), pero eso no cambia el hecho de que Google me muestra 5 resultados completos de primer nivel, mientras que Live Search sólo tres. Yo no quiero tener que bajar en la página para ver resultados, lo que quiero es que lo que busco se encuentre en el top cinco y que se me muestre ese top cinco cuando hago mis búsquedas.

Hablemos ahora de pertinencia.

Estos son los tres primeros resultados que me da Google:

google_top_results6

Observen cómo el primer resultado nos lleva la página oficial en el sitio de Microsoft que habla de WPF/e. Aún mejor, observen a qué punto el índice de Google está actualizado que el título de la página es MSDN Silverlight Dev Center, un nombre que no se conoce que desde hace un día o dos.

Veamos ahora los tres primeros resultados de Live Search:

live_top_results6

¿Es necesario comentar? Creo que si Microsoft quiere seguir proponiendo servicios de búsqueda y vender sus productos, deberían comprarle los resultados de las búsquedas a Google.