[WP7] Trouver son chemin avec Bing Map

Suite à mon article précédent sur le geocoding : https://onefor4.wordpress.com/2011/01/02/geocoding-en-silverlight-avec-bing-map/ nous allons maintenant voir comment relier des points sur la carte et ensuite comment suivre une route.

Mise en place du module

Ouvrons notre projet WP7 et ajoutons notre carte à notre fichier xaml :

<Microsoft_Phone_Controls_Maps:Map CredentialsProvider= »{Binding MyCredential, ElementName=phoneApplicationPage} » x:Name= »MyMap » Mode= »Road » Center= »{Binding CenterCoord, ElementName=phoneApplicationPage} » ZoomLevel= »10″  >
<Microsoft_Phone_Controls_Maps:MapLayer>
<Microsoft_Phone_Controls_Maps:MapPolyline x:Name= »routeLine » Stroke= »Black » StrokeThickness= »6″ Locations= »{Binding Points, ElementName=phoneApplicationPage} » />
</Microsoft_Phone_Controls_Maps:MapLayer>
</Microsoft_Phone_Controls_Maps:Map>

On remarquera quelques bindings :

– MyCredential : Votre “API Key” que vous avez normalement généré dans l’article précédent

– CenterCoord : Objet GeoCoordinate qui représente les coordonnées sur lesquelles vous souhaitez centrer votre carte.

– Points : objet LocationsCollection, comme son nom l’indique c’est une collection d’objets GeoCoordinate ou Location. Ce sont tous les points par lesquels passera notre ligne.

Ensuite on modifie la propriété MapLayer. C’est celle là qui nous permettra de modifier ensuite notre fond de carte. Ici nous ajoutons un objet MapPolyline nous permettant de tracer justement des lignes. Des lignes qui passeront par des points (Captain Obvious spotted !).
On paramètre notre MapPolyline en lui donnant une couleur “Stroke” et une épaisseur “StrokeThickness”.

Notre code-behind ressemblera à ça :

public Credentials MyCredential { get; private set; }
public GeoCoordinate CenterCoord { get; private set; }
public MainPage()
{
MyCredential = new Credentials(){ApplicationId = « VOTRECLEF »};
CenterCoord = new GeoCoordinate(42.00, 1.337);
Points = new LocationCollection();
InitializeComponent();
}

Traçons notre premier trait

MapPolyline trace donc des traits en passant par les points représentés par des coordonnées stockées dans sa collection Locations.
Créons donc une méthode AddLocation().

private void AddLocations()
{
Points.Add(new GeoCoordinate(42.00, 1.337));
Points.Add(new GeoCoordinate(42.600, 1.42));
}

On appelle notre méthode et nous pouvons voir notre premier trait tracé au nord de l’Espagne (oui l’exemple est totalement abstrait).

Maintenant que l’on voit l’idée, il serait intéressant de pouvoir récupérer une liste de points correspondant à un trajet réel entre deux ou plusieurs lieux !

Récupérons les coordonnées de notre route

Ajoutons une référence de service vers :
http://dev.virtualearth.net/webservices/v1/routeservice/routeservice.svc?wsdl
Créons ensuite nos méthodes qui calculeront et afficheront le trajet entre nos points.

private void CalculateRoute(IEnumerable<GeoCoordinate> Lieux)
{
var routeRequest = new RouteRequest();
routeRequest.Credentials = MyCredential;
routeRequest.Waypoints = new ObservableCollection<Waypoint>();
foreach (GeoCoordinate geoCoordinate in Lieux)
routeRequest.Waypoints.Add(new Waypoint(){Location = geoCoordinate});
var routeService = new RouteServiceClient(« BasicHttpBinding_IRouteService »);
routeService.CalculateRouteCompleted += new EventHandler<CalculateRouteCompletedEventArgs>(routeService_CalculateRouteCompleted);
routeRequest.Options = new RouteOptions();
routeRequest.Options.Mode = TravelMode.Driving;
routeRequest.UserProfile = new UserProfile() { DistanceUnit = DistanceUnit.Kilometer };
routeService.CalculateRouteAsync(routeRequest);
}

Lieux est donc une collection de GeoCoordinate, le LocationsCollection vu précédemment est parfaitement le type de valeur attendu. Vous pouvez donc tester avec notre objet Points.
Rien de compliqué dans cette première méthode. On créé notre requête, on y ajoute notre credential et nos Waypoints (littéralement “points de passages” Clignement d'œil).
On s’abonne à l’évènement levé lorsque les données seront récupérés, on verra la méthode plus bas.
routeRequest.Options.Mode nous permet de choisir grâce à l’énumération TravelMode entre un trajet en véhicule ou à pied.
Et avec l’UserProfile on peut choisir les unités de distances. La doc vous en apprendra plus !
Nous avons là la requête basique, voyons maintenant comment traiter ses valeurs de retours.

void routeService_CalculateRouteCompleted(object sender, CalculateRouteCompletedEventArgs e)
{
Points.Clear();
var P_Start = new Pushpin();
var P_End = new Pushpin();

P_Start.Location = e.Result.Result.Legs.First().ActualStart;
P_End.Location = e.Result.Result.Legs.Last().ActualEnd;

foreach (RouteLeg leg in e.Result.Result.Legs)
foreach (ItineraryItem itineraryItem in leg.Itinerary)
Points.Add(itineraryItem.Location);
MyMap.Children.Add(P_Start);
MyMap.Children.Add(P_End);
}

La partie la plus intéressante dans le résultat de notre requête est la collection “Legs”. Elle contient des objets Leg qui sont des portions de routes. En effet, un trajet passe par différents points, donc du coup un trajet est un ensemble de petits segments passant par ces points : les legs.

On fait un Clear() sur notre collection de Points histoire de mettre à jour notre trajet.
Je créé ensuite des Pushpins, ces petites flèches sur la carte qui nous permettront de savoir où démarre et finis le trajet.
Je les positionne en utilisant leur propriété Location et en récupérant le premier point du premier leg de ma collection pour le départ et bien sûr le dernier point du dernier leg pour l’arrivée.
Ensuite je parcours la collection pour ajouter à ma liste de points les coordonnées de chaque segment.

On n’oublie pas d’ajouter les push pins à la carte et voilà vous avez votre trajet !
En couplant ça à la géolocalisation et au geocoding de nombreuses possibilités s’offrent à vous !

Par JC VASSELON

2 réponses à “[WP7] Trouver son chemin avec Bing Map

  1. Merci pour petit cour. Serait-il possible de mettre à l’avenir les sources ?

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