Intégrer les services Bing Maps dans son application Metro Windows 8 en XAML/C# (1/3)

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 :

bingmaps1

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

bingmaps2

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

bingmaps3

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 :

bingmaps4

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 :

  1. <Grid Background= »{StaticResource ApplicationPageBackgroundThemeBrush}« >
  2. <Maps:Map x:Name= »myMaps » Credentials= »XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX » />
  3. </Grid>

 

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 :

bingmaps5

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)
  1. <Maps:Map x:Name= »myMaps »
  2.                       Credentials= »XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX »
  3.                       MapType= »Aerial »
  4.                       ShowTraffic= »True »
  5.                       ShowScaleBar= »False »
  6.                       ZoomLevel= »17″>
  7. <Maps:Map.Center>
  8. <Maps:Location Latitude= »48.830617″ Longitude= »2.261645″ />
  9. </Maps:Map.Center>
  10. </Maps:Map>
  11. </Grid>

 

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!

  1. <Style x:Key= »TrafficAppBarButtonStyle » TargetType= »Button » BasedOn= »{StaticResource AppBarButtonStyle}« >
  2. <Setter Property= »AutomationProperties.AutomationId » Value= »TrafficAppBarButton »/>
  3. <Setter Property= »AutomationProperties.Name » Value= »Traffic »/>
  4. <Setter Property= »Content » Value= »⚠ »/>
  5. </Style>
  6. <Style x:Key= »AerialAppBarButtonStyle » TargetType= »Button » BasedOn= »{StaticResource AppBarButtonStyle}« >
  7. <Setter Property= »AutomationProperties.AutomationId » Value= »AerialAppBarButton »/>
  8. <Setter Property= »AutomationProperties.Name » Value= »Aerial »/>
  9. <Setter Property= »Content » Value= »✈ »/>
  10. </Style>
  11. <Style x:Key= »RoadAppBarButtonStyle » TargetType= »Button » BasedOn= »{StaticResource AppBarButtonStyle}« >
  12. <Setter Property= »AutomationProperties.AutomationId » Value= »RoadAppBarButton »/>
  13. <Setter Property= »AutomationProperties.Name » Value= »Road »/>
  14. <Setter Property= »Content » Value= »⛙ »/>
  15. </Style>
  16. <Style x:Key= »BirdseyeAppBarButtonStyle » TargetType= »Button » BasedOn= »{StaticResource AppBarButtonStyle}« >
  17. <Setter Property= »AutomationProperties.AutomationId » Value= »BirdseyeAppBarButton »/>
  18. <Setter Property= »AutomationProperties.Name » Value= »Birdseye »/>
  19. <Setter Property= »Content » Value= » »/>
  20. </Style>
  21. <Style x:Key= »MyLocationAppBarButtonStyle » TargetType= »Button » BasedOn= »{StaticResource AppBarButtonStyle}« >
  22. <Setter Property= »AutomationProperties.AutomationId » Value= »MyLocationAppBarButton »/>
  23. <Setter Property= »AutomationProperties.Name » Value= »My Location »/>
  24. <Setter Property= »Content » Value= » »/>
  25. </Style>

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

  1. <Page.BottomAppBar>
  2. <AppBar>
  3. <Grid>
  4. <StackPanel Orientation= »Horizontal »>
  5. <Button Click= »btnTraffic_Click » Style= »{StaticResource TrafficAppBarButtonStyle} » />
  6. <Button Click= »btnAerial_Click » Style= »{StaticResource AerialAppBarButtonStyle} » />
  7. <Button Click= »btnRoad_Click » Style= »{StaticResource RoadAppBarButtonStyle} » />
  8. <Button Click= »btnBirdseye_Click » Style= »{StaticResource BirdseyeAppBarButtonStyle} » />
  9. </StackPanel>
  10. <StackPanel Orientation= »Horizontal » HorizontalAlignment= »Right »>
  11. <Button Click= »btnMyLocation_Click » Style= »{StaticResource MyLocationAppBarButtonStyle} » />
  12. </StackPanel>
  13. </Grid>
  14. AppBar>
  15. Page.BottomAppBar>

 

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 :

  1. private void btnAerial_Click(object sender, RoutedEventArgs e)
  2. {
  3. myMaps.MapType = Bing.Maps.MapType.Aerial;
  4. }
  5. private void btnRoad_Click(object sender, RoutedEventArgs e)
  6. {
  7. myMaps.MapType = Bing.Maps.MapType.Road;
  8. }
  9. private void btnBirdseye_Click(object sender, RoutedEventArgs e)
  10. {
  11. myMaps.MapType = Bing.Maps.MapType.Birdseye;
  12. }

 

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

  1. private void btnTraffic_Click(object sender, RoutedEventArgs e)
  2. {
  3. myMaps.ShowTraffic = !myMaps.ShowTraffic;
  4. }

 

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 :

bingmaps7

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 :

  1. var geolocator = new Geolocator();
  2. if (geolocator.LocationStatus == PositionStatus.NotAvailable)
  3. {
  4.     MessageDialog dialog = new MessageDialog(« Location service not available »);
  5.     dialog.ShowAsync();
  6.     return;
  7. }

 

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

  1. Geoposition position = await geolocator.GetGeopositionAsync();

 

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 :

  1. Location location = new Bing.Maps.Location(position.Coordinate.Latitude, position.Coordinate.Longitude);

 

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 :

  1. Pushpin pushpin = new Pushpin() { Text = « ! » };
  2. MapLayer.SetPosition(pushpin, location);
  3. myMaps.Children.Add(pushpin);

 

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

  1. ToolTipService.SetToolTip(pushpin, « My location »);
  2. myMaps.SetView(location, 12);

 

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 :

  1. private async void btnMyLocation_Click(object sender, RoutedEventArgs e)
  2. {
  3.     Geoposition position = null;
  4.     try
  5.     {
  6.         var geolocator = new Geolocator();
  7.         if (geolocator.LocationStatus == PositionStatus.NotAvailable)
  8.         {
  9.             MessageDialog dialog = new MessageDialog(« Location service not available »);
  10.             dialog.ShowAsync();
  11.             return;
  12.         }
  13.         position = await geolocator.GetGeopositionAsync();
  14.     }
  15.     catch
  16.     {
  17.         MessageDialog dialog = new MessageDialog(« Unable to find your location »);
  18.         dialog.ShowAsync();
  19.         return;
  20.     }
  21.     if (position == null)
  22.         return;
  23.     Location location = new Bing.Maps.Location(position.Coordinate.Latitude, position.Coordinate.Longitude);
  24.     Pushpin pushpin = new Pushpin() { Text = « ! » };
  25.     MapLayer.SetPosition(pushpin, location);
  26.     myMaps.Children.Add(pushpin);
  27.     ToolTipService.SetToolTip(pushpin, « My location »);
  28.     myMaps.SetView(location, 12);
  29. }
  30. }

 

bingmaps8

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.

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s