Tutorial Address Checker

You might also like

Download as pdf or txt
Download as pdf or txt
You are on page 1of 7

How to create an address checker in Silverlight 4

Requirements
Microsoft Visual Studio 2010 Silverlight Tools Bing Maps Silverlight Control

Getting started
First of all we will download the Bing Maps Silverlight Control. Download it from this website: http://www.microsoft.com/downloads/details.aspx?displaylang=en&FamilyID=beb29d27-6f0c-494fb028-1e0e3187e830 Ones youve downloaded this file, just run the installer. Make sure you remember where youve installed it. To use this control we need a key. This key can be purchased in the Bing map account center. https://www.bingmapsportal.com/

Steven De Waele

How to create a addresschecker in Silverlight 4


New users: Click the Create button to create a new user account.

31/07/2010

Now you have to login with your live ID. Ones youve done that you will be on your own account page. On the left side you see a navigation menu. Under Map APIs you see Create or view keys. When you click this you see the following screen.

Just fill this in and click Create Key. Below this form there will appear a table with the application name and at the right a long key above the application URL. You will need this in the source code.

Steven De Waele

Page 2

How to create a addresschecker in Silverlight 4


Create the project

31/07/2010

Now its time for the real job. Open Visual Studio 2010 and create a new Silverlight 4 project. This can be done by clicking File-> New Project. Choice the Silverlight Application and click OK.

Steven De Waele

Page 3

How to create a addresschecker in Silverlight 4

31/07/2010

First we will add the references. To have Bing maps in your application you need assemblies from the Bing maps Silverlight control you installed before. Right-click on References and browse to the folder where installed them on the tab Browse. In the Bing Maps Silverlight Control folder you have to navigate to V1 and then to Libraries. There you see 2 files, select bot hand click OK

Now we can add the map to our Silverlight page. So open the Xaml of your Silverlight page. Standard there is a page created by Visual Studio named MainPage. Switch to xaml view and add the following namespace to the page.
xmlns:m="clr-namespace:Microsoft.Maps.MapControl;assembly=Microsoft.Maps.MapControl"

And add following control to the Grid


<m:Map x:Name="myMap" CredentialsProvider="Your key" Mode="AerialWithLabels" ></m:Map>

Insert in the CredentialsProvider your key that you have purchased from the account center. You dont need to copy the mode this just specifies the mode of the map. You can choice this freely.

Steven De Waele

Page 4

How to create a addresschecker in Silverlight 4

31/07/2010

In this tutorial we want to give a parameter address to the webpage. With will be visualized by the Silverlight map. So first we will add the web service that will resolve our address to a combination of longitude, latitude and zoom level. Right-Click on the project in the Solution explorer and click on Add Service Reference and paste following URL in the address field and click Go. http://dev.virtualearth.net/webservices/v1/geocodeservice/geocodeservice.svc/mex

Change the name to GeocodeService and click OK.

Steven De Waele

Page 5

How to create a addresschecker in Silverlight 4

31/07/2010

Now we can code the application. So go to the code view of your mainpage. This can simply be done by right-click the page in the Solution Explorer and click on View Code. Paste following code in the file. This code will give the address to the web service added before and the web service will give the latitude, longitude and the best view point of the address. At the end we give those variables to the map control.
private void Geocode(string strAddress) { // Create the service variable and set the callback method using the GeocodeCompleted property. GeocodeService.GeocodeServiceClient geocodeService = new GeocodeService.GeocodeServiceClient("BasicHttpBinding_IGeocodeService"); geocodeService.GeocodeCompleted += new EventHandler<GeocodeService.GeocodeCompletedEventArgs>(geocodeService_GeocodeCompleted ); // Set the credentials and the geocode query, which could be an address or location. GeocodeService.GeocodeRequest geocodeRequest = new GeocodeService.GeocodeRequest(); geocodeRequest.Credentials = new Credentials(); geocodeRequest.Credentials.ApplicationId = ((ApplicationIdCredentialsProvider)myMap.CredentialsProvider).ApplicationId; geocodeRequest.Query = strAddress; // Make the asynchronous Geocode request, using the waypoint index as // the user state to track this request and allow it to be identified when the response is returned. geocodeService.GeocodeAsync(geocodeRequest); } private void geocodeService_GeocodeCompleted(object sender, GeocodeService.GeocodeCompletedEventArgs e) { // Retrieve the user state of this response (the waypoint index) to identify which geocode request // it corresponds to. int waypointIndex = System.Convert.ToInt32(e.UserState); // Retrieve the GeocodeResult for this response and store it in the variable result, using // the waypoint index to position it in the array. GeocodeResult result = e.Result.Results[0]; //Setting the map to view the address myMap.Center = result.Locations[0]; myMap.SetView(result.Locations[0],18); }

Steven De Waele

Page 6

How to create a addresschecker in Silverlight 4

31/07/2010

To use this code you can simply add following line to the constructor of the page.
Geocode("address");

Or you can use following code with will search in the querystring of asp to variable address and give this to our method.
IDictionary<string, string> qString = HtmlPage.Document.QueryString; foreach (KeyValuePair<string, string> kvp in qString) { string k = kvp.Key; string v = kvp.Value; if (k == "Adress") Geocode(v); } Now you can use this application in an IFrame to create an address checker in Microsoft Dynamics Crm for example. Just give the address to the IFrame as variable Address in the querystring. NOTE: You have the best result if you pass following address format Street number,<postal code> City, Country. Example: wetstraat 16, 1234 Paris,France

Steven De Waele

Page 7

You might also like