Accueil > Silverlight, Silverlight 3 > [SL3] : Prise en main de Bing Maps Control

[SL3] : Prise en main de Bing Maps Control

Prérequis

Il vous faut télécharger la librairie Bing Maps Silverlight Control SDK sur le site Miscrosoft suivant :

http://www.microsoft.com/downloads/details.aspx?displaylang=en&FamilyID=beb29d27-6f0c-494f-b028-1e0e3187e830

image

puis installez là où vous souhaitez.

rendez-vous sur le site https://www.bingmapsportal.com/

Cliquez sur “Create account” afin de récupérer une clé vous permettant d’utiliser toutes les fonctionnalités offertes par le contrôle.

image

Saisissez vos informations personnelles dans les deux écrans successifs

image

Ainsi copiez la clé que vous obtiendrez.

Utilisation de la librarie

Créez un projet Silverlight 3 dans visual studio ou Blend 3 et incluez les librairies suivantes (que vous venez d’installer) à votre projet Silverlight

image

Ca y est vous êtes prêt ! Il ne reste plus qu’a utiliser le contrôle comme suit :

image

Pensez à inclure la clé que vous avez obtenu (voir un peu plus haut) afin de disposer de toutes les fonctionnalités.

Puis exécutez l’application Silverlight en pressant F5 par exemple, et vous obtenez une superbe carte interactive aux performances impressionnante!

image

Comment déplacer la carte dynamiquement ?

Nous allons ajouter trois boutons permettant de faire un “saut” entre trois villes très éloignées géographiquement.

Nous ajoutons aussi deux indicateurs permettant d’afficher la latitude et longitude courante.


<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
			 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
			 xmlns:map="clr-namespace:Microsoft.Maps.MapControl;assembly=Microsoft.Maps.MapControl"
			 xmlns:mapNavigation="clr-namespace:Microsoft.Maps.MapControl.Navigation;assembly=Microsoft.Maps.MapControl"
			 x:Class="BingMaps.MainPage">
	<Grid x:Name="LayoutRoot"
		  Background="#FFD4D4D4">
		<Grid.RowDefinitions>
			<RowDefinition Height="Auto" />
			<RowDefinition Height="Auto" />
			<RowDefinition />
		</Grid.RowDefinitions>
		<StackPanel HorizontalAlignment="Left"
					VerticalAlignment="Top"
					Orientation="Horizontal">
			<TextBlock Text="Lat :"
					   TextWrapping="Wrap" />
			<TextBlock TextWrapping="Wrap"
					   Text="{Binding Center.Latitude, ElementName=mapControl, Mode=OneWay}"
					   Width="150" />
			<TextBlock Text="Lon :"
					   TextWrapping="Wrap"
					   Margin="20,0,0,0" />
			<TextBlock Text="{Binding Center.Longitude, ElementName=mapControl, Mode=OneWay}"
					   TextWrapping="Wrap"
					   Width="150" />
		</StackPanel>
		<StackPanel HorizontalAlignment="Left"
					Grid.Row="1"
					Orientation="Horizontal"
					Margin="0,3">
			<Button Content="New York City"
					Click="NYCClick" />
			<Button Content="Paris"
					Margin="10,0,0,0"
					Click="ParisClick" />
			<Button Width="75"
					Content="Auckland"
					Margin="10,0,0,0"
					Click="NZClick" />
		</StackPanel>
		<map:Map x:Name="mapControl"
				 CredentialsProvider="___votre___cle___ici___!"
				 Grid.Row="2"
				 CopyrightVisibility="Collapsed"
				 AnimationLevel="Full" />
	</Grid>
</UserControl>

Et voici le code Behind, rien de bien compliqué : il suffit de donner des coordonnées correctes au contrôle Map via la méthode SetView !
Une animation se chargeant de faire la transition avec la position courante 🙂


using System.Windows.Controls;
using Microsoft.Maps.MapControl;

namespace BingMaps
{
	public partial class MainPage : UserControl
	{
		public MainPage()
		{
			InitializeComponent();
		}

		private void NYCClick(object sender, System.Windows.RoutedEventArgs e)
		{
			ChangeMapLocation(new Location(40.7199, -74, 0030, 0.0), 10);
		}
		
		private void ParisClick(object sender, System.Windows.RoutedEventArgs e)
		{
			ChangeMapLocation(new Location(48.856667,2.350987,0.0), 10);
		}
		
		private void NZClick(object sender, System.Windows.RoutedEventArgs e)
		{
			ChangeMapLocation(new Location(-36.800488, 174.767002), 10);
		}

		private void ChangeMapLocation(Location newLocation, double zoomLevel)
		{
			mapControl.SetView(newLocation, zoomLevel);
		}
	}
}

Ainsi on obtient une présentation comme ci dessous :

image image image

 

Le résultat est tout simplement impressionnant, maintenant reste à comprendre pourquoi Microsoft ne l’utilise pas sur son site internet quand l’utilisateur dispose de Silverlight 3 !?

A bientôt pour une utilisation avancée du contrôle (ajout de POI, polygones, etc.)

Publicités
Catégories :Silverlight, Silverlight 3
  1. 9 juin 2011 à 16 h 40

    Je pensais pas que je pourrais un jour tomber sur votre blog.
    Bon jeudi
    !

  1. No trackbacks yet.

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 )

Photo Google+

Vous commentez à l'aide de votre compte Google+. 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 )

w

Connexion à %s

%d blogueurs aiment cette page :