Dot.Blog

C#, XAML, Xamarin, UWP/Android/iOS

Intégrer Bing Maps dans vos applications Silverlight

Intégrer un outil aussi puissant que Bing Map peut transformer une application banale en une application extraordinaire… La puissance d’un système géographique mondial, la fascination que produit les zooms (à tel point que même les journaux télévisés utilisent le principe de plus en plus souvent pour localiser un événement) tout cela dans vos applications Silverlight c’est possible ! On pourrait croire que c’est compliqué, même pas…

L’exemple live

ci-dessous se trouve une application Silverlight qui “embarque” un espace Bing Maps tout aussi utilisable que si vous alliez sur le site de Bing Maps. Pour le fun (et la démo) j’ai pointé directement un endroit … révolutionnaire. J’ai ajouté un pushpin pour bien marquer l’endroit et si vous passez le curseur sur le pushpin vous pourrez même lire en surimpression dans un phylactère un texte qui donne un indice de plus sur le lieu !

Une fois que vous aurez deviné de quel endroit il s’agit, essayer les boutons en bas, notamment celui qui permet d’afficher la toolbar de navigation. Et amusez-vous avec Bing Map comme sur le site original. Mais rappelez-vous : tout cela se passe à l’intérieur d’une application Silverlight écrite en quelques lignes ! Regardez aussi en bas à droite les coordonnées géographiques exactes de l’endroit où se promène votre souris.

[silverlight:source=/SLSamples/SLBingMap/SLBingMap.xap;width=450;height=400]

Je veux le faire aussi !

Je vous comprends, c’est tellement classe. :-)

Télécharger le kit

D’abord il faut télécharger le kit de développement pour Silverlight. Un simple setup automatique qui créera un répertoire dans Program Files contenant les dll nécessaires à ajouter à vos projets ainsi qu’un CHM d’aide.

Première étape donc : le Bing Maps Silverlight Control SDK

Obtenir une clé de développement

Pour que le plugin Bing Maps fonctionne il faut lui donner une clé de développement et un nom d’application. Si vous avez un Windows Live ID c’est très rapide. Vous avez le droit à 5 clés. Chaque clé est associée à une application alors ne les grillez pas toutes ! (Vous remarquerez ma générosité, j’en ai grillé une pour l’appli exemple de ce billet, autant d’abnégation est à souligner !).

Si vous n’avez pas de Windows Live ID ben… il faudra en créer un. De toute façon c’est un compte que tout utilisateur d’outils Microsoft se doit d’avoir car c’est un moyen d’identification utilisé partout dans les sites Microsoft, des forums aux abonnements MSDN.

Bref, en vous rendant sur le Bing Maps Portal utilisez la fonction “Create a Bing Maps account”

Une fois le compte créé, vous pourrez créer des clés, jusqu’à 5 donc. Une clé s’obtient en indiquant un nom d’application ainsi que l’URL de cette dernière. Vous devez connaître l’URL avant de demander la clé (un détail important).

Passons aux choses sérieuses

Vous avez installé le SDK, vous avez obtenu une clé pour votre application, tout est ok. Comment ajouter une Map dans l’application ?

Une Map tout de suite !

J’ai presque honte de faire un tutor sur ça…

  1. Ajouter en référence à votre projet les deux DLL fournies avec le SDK. Il s’agit de Microsoft.Maps.MapControl.Common.dll et Microsoft.Maps.MapControl.dll. Le répertoire s’appelle Bing Maps Silverlight Control et se trouve dans Programmes (ou Programmes (x86) si vous êtes en 64 bits).
  2. Sous Blend, parce que c’est plus cool et plus facile, allez dans l’onglet Assets, cliquez sur le nœud Location et cliquez sur la DLL des contrôles Maps que vous venez d’ajouter en référence. Vous verrez un ensemble de nouveaux contrôles.
  3. Choisissez le contrôle Map et posez-le sur la surface de design dans votre LayoutRoot.

Ne reste plus qu’à saisir votre clé et le nom de l’appli dans les propriétés du contrôle ou directement dans la balise Xaml et c’est tout : F5 et ça marche !

En trois clics l’affaire est donc dans le sac… Impressionnant non ?

Les améliorations

Après, tout est question de destination de l’application. Peut-être voudrez-vous ajouter des images géolocalisées, des pushpins comme je l’ai fait dans l’exemple, réagir aux mouvements de souris (comme je l’ai fait pour afficher les coordonnées), peut-être voudrez-vous construire votre propre barre de navigation, afficher ou cacher l’échelle, ajouter des polygones (pour marquer un bâtiment par exemple), des textes, etc, etc…

Les possibilités sont très nombreuses et faciles à mettre en œuvre (certaines réclameraient néanmoins des exemples, hélas absents du SDK, et le CHM n’est pas toujours suffisant).

Par exemple la mise en route de l’application de démo ressemble à cela :

   1: private void MainPage_Loaded(object sender, RoutedEventArgs e)
   2: {
   3:    VisualStateManager.GoToState(this, "NormalState", false);
   4:    BingMap.Center = new Microsoft.Maps.MapControl.Location(48.85318, 2.36911, 120);
   5:    BingMap.Culture = "fr-FR";
   6:    BingMap.ZoomLevel = 19;
   7:    var pin = new Microsoft.Maps.MapControl.Pushpin 
   8:                     { Location = BingMap.Center, Content = "!" };
   9:    pin.MouseEnter += pin_MouseEnter;
  10:    pin.MouseLeave += pin_MouseLeave;
  11:    pin.Effect = new System.Windows.Media.Effects.DropShadowEffect();
  12:    BingMap.Children.Add(pin);
  13:    BingMap.MouseMove += BingMap_MouseMove;
  14: }

Le VSM sert uniquement à montrer ou cacher le phylactère. Vous noterez que sa position est fixe je n’ai pas compliqué les choses en faisant exactement pointer la pointe de la bulle sur le pushpin, ce n’est qu’une démo ;-)

  • En ligne 4 je positionne la Map pour qu’elle soit centrée sur un point précis (La place de la Bastille pour nos amis belges, canadiens, marocains et autres amis lointains qui lisent aussi beaucoup ce blog et qui ne savent pas forcément que c’est le symbole de la révolution française de 1789 et que “ça ira, ça ira” était une chanson révolutionnaire de cette époque).
  • En ligne 5 j’ai “tenté” d’indiquer la culture que Bing Maps est sensé utiliser. Ca reste en US tout le temps, une fausse manip, un oubli de ma part, un bug, un manque de doc ? Si l’un d’entre vous à la réponse les commentaires du billet sont là pour ça !
  • En ligne 6 je fixe le niveau de zoom exact.
  • En lignes 7 et 8 je créée un pushpin. C’est facile il suffit de lui donner une localisation (longitude, latitude et altitude). On peut même afficher un contenu (un point d’exclamation ici).
  • En ligne 9 et 10 j’attrape les événements de mouse enter / leave du pushpin, ce qui commandera le changement d’état de l’application via le VSM pour afficher ou cacher la bulle.
  • En ligne 11 j’en profite pour appliquer un effet (un drop shadow) au pushpin.
  • En ligne 12 j’ajoute le pushpin aux enfants visuel de la Map.

Rien de bien extraordinaire donc.

Le mouseMove de la Map est lui aussi géré pour afficher les coordonnées souris :

   1: private void BingMap_MouseMove(object sender, MouseEventArgs e)
   2:        {
   3:            var p = BingMap.ViewportPointToLocation(e.GetPosition(BingMap));
   4:            txtLocation.Text = "Lat. " + 
   5:            p.Latitude.ToString("#.#####") + " Long. " + 
   6:            p.Longitude.ToString("#.#####");
   7:        }

Il suffit de convertir la position de la souris en une localisation avec ViewportPointToLocation. Il existe une méthode pour faire l’inverse. Il est donc très facile de synchroniser des éléments Silverlight par dessus une Map par exemple (ce qui réclame dans un sens ou dans l’autre, de convertir une position x,y Silverlight en une localisation géographique).

Conclusion

Rien ne sert d’en faire trop, vous avez compris le principe. On peut faire des choses simples ou des choses très sophistiquées, c’est juste une question d’imagination. Et aussi d’un peu de temps pour expérimenter.

Bing Maps dans vos applications Silverlight n’est en tout cas ni un rêve, ni une chose complexe.

Les sources du projet (attention j’ai supprimé ma clé personnelle, l’application ne fonctionnera pas sans, enfin si mais un message vous invitera à utiliser une clé valide. De même l’exécution depuis VS 2010 n’est pas apprécié par Bing Map qui marche en revanche très bien lancé depuis Blend – en réalité c’est l’adresse de l’appli utilisant localhost dans Blend qui passe, alors que l’adresse complète de VS n’est pas reconnue comme valable pour la clé enregistrée) : SLBingMap.zip (62,13 kb)

blog comments powered by Disqus