Dans cet article en 3 parties (eh oui, finalement c’est 3 parties, et non 2…), je vous propose de découvrir comment utiliser le contrôle Bing Maps ainsi que les services REST Bing Maps dans une application Metro Windows 8 en XAML/C#.

Concernant la documentation, vous retrouvez sur la MSDN une section consacrée à l’utilisation du contrôle Bing Maps dans une application Metro et une autre section consacrée à l’utilisation des services REST Bing Maps.

Afin d’utiliser les services BingMaps, vous devez vous procurer une clé d’accès à ces services. Pour créer cette clé, ça se passe sur le portail BingMaps et voici la marche à suivre.

Maintenant que nous avons tous les prérequis, nous pouvons commencer…

Dans cette série d’article, nous allons découvrir :

• comment insérer et manipuler une carte BingMaps dans une application Metro Windows 8 :
  • Changer de vue
  • Afficher le trafic
  • Centrer la carte par rapport à des coordonnées
  • Afficher, customiser, interagir avec des points d’intérêts comme ma localisation, des étapes d’un itinéraire, des incidents
• comment utiliser les services REST afin de :
  • rechercher la localisation d’une adresse,
  • retrouver un itinéraire
  • retrouver la liste des incidents d’une zone

Voici le résultat que nous obtiendrons :

Pour commencer, ouvrez Visual Studio 2012, et créez un nouveau projet vide de type Windows Metro style :

2ème étape, il faut ajouter une référence vers le SDK Bing Maps, que vous avez préalablement installé…

Une fois la référence ajoutée, si vous compilez le projet vous avez une erreur qui indique que la compilation “Any CPU” n’est pas supportée, ainsi qu’un Waring indiquant qu’il faut ajouter une référence vers Microsoft.VCLibs.

Allez dans les propriétés de compilation afin de sélectionner une nouvelle architecture cible, x86 par exemple, puis ajouter une référence vers l’assembly Microsoft.VCLibs qui correspond au Microsoft Visual C++ Runtime Package.

Nous sommes maintenant prêts à intégrer une carte dans notre application!

Ouvrez la page MainPage.xaml et ajoutez un contrôle de type Map à l’intérieur du contrôle Grid :

Avant de pouvoir exécuter votre application, il vous faut tout d’abord nommer le contrôle Map et lui fournir la clé que vous avez précédemment créée :

Une fois ces informations renseignées, vous pouvez exécutez l’application. Le contrôle Map intègre de base la navigation à la souris, au clavier et au touch :

Pour une description complète de la classe Map, je vous invite à consulter sa page MSDN associée.

Voici ici un exemple qui permet, depuis le code XAML :

• d’afficher la carte en vue aérienne,
• d’afficher les informations de trafic,
• de masquer la légende de l’échelle,
• d’initialiser la carte avec un zoom de niveau 17
• de centrer la carte sur le point de coordonnées (48.830617,  2.261645)

Maintenant, nous allons ajouter une AppBar qui va permettre à l’utilisateur :

• de modifier le type de carte,
• afficher/masquer le trafic,
• centrer la carte sur la localisation de l’utilisateur et afficher un point d’intérêt

Tout d’abord, il faut ajouter les styles ci-dessous dans les ressources de la page. Ces styles vont nous permettre d’avoir de jolis boutons Metro pour notre barre d’application!

Et enfin, voici le code l’AppBar à ajouter dans la MainPage :

Pour les changements de vue de la carte, il suffit de modifier la propriété MapType du contrôle Map et de lui affecter une valeur de l’énumération Bing.Maps.MapType comme ceci :

Pour afficher/masquer le trafic, il suffit de modifier la valeur de la propriété ShowTraffic :

Pour utiliser l’API de géolocalisation, il faut tout d’abord autoriser l’application à le faire. Depuis l’explorateur de solution, ouvrez le fichier Package.appxmanifest, puis dans l’onglet Capabilities, cochez la case Location :

Pour plus d’informations sur la notion de Capabilities, je vous invite à consulter l’article correspondant sur la MSDN.

Pour utiliser l’API de géolocalisation, nous avons besoin d’une instance de la classe Geolocator dans l’espace de nom Windows.Devices.Geolocation. Cette classe possède une propriété LocationStatus que nous pouvons utiliser de cette manière :

Ensuite, pour localiser l’utilisateur et ainsi récupérer les coordonnées géographiques, il faut utiliser la méthode GetGeopositionAsync comme ceci :

La méthode GetGeopositionAsync retourne un objet de type GeoPosition (ou plutôt IAsyncOperation), grâce auquel nous pouvons récupérer la latitude et la longitude.

Pour utiliser des coordonnées géographiques sur le contrôle Map, nous avons besoin d’un objet de type Location de l’espace de nom Bing.Maps.Location :

Un point d’intérêt sur un contrôle de type Map est représenté par un objet de type Pushpin, qu’il faut positionner via la classe MapLayer, puis l’ajouter  à la collection Children du contrôle Map :

Enfin, nous pouvons centrer la carte sur ce point d’intérêt et y ajouter un tooltip :

Ici nous utilisons la méthode SetView de l’objet Map pour centrer la carte sur les coordonnées géographiques spécifiées. Le second paramètre permet de définir le niveau de zoom. Le contrôle animera la carte automatiquement pour obtenir ce niveau de zoom et cette position.

Voici le code complet de la méthode de recherche de localisation :

Dans la 2ème et 3ème partie de cet article, nous découvrirons les services REST Bing Maps qui vont nous permettre d’intégrer la recherche d’adresse, d’itinéraire et d’incidents.

En attendant, si vous avez besoin de plus de détails sur certaines notions non détaillées dans cet article (mots clés async/await, notion de style et d’AppBar…) je vous invite à consulter les articles présents sur le site de la communautés des Développeurs Windows 8.

Et si vous avez des questions sur le développement Windows 8, n’hésitez pas à les poster sur le groupe Facebook de la communauté Windows 8.