| Ricky's profileRicky's Bing Maps BlogBlogSkyDrive |  Tools  Help |
|
|
11/10/2009 Migrating from Bing Maps Silverlight CTP to Production versionWith the official release of the Bing Maps Silverlight control there has been some changes from the CTP version. This article will address the required changes needed to migrate from the CTP version to the production version. The first change is that the control now requires Silverlight 3. So if you are still using Silverlight 2 you will have to upgrade. You can get the required files to upgrade to Silverlight 3 here: http://silverlight.net/getstarted/ With the production version being released you are now required to authenticate the map. In the CTP version Microsoft took care of the authentication. The Silverlight control does not use tokens like the AJAX control; you can now use an application key. This removes the need to retrieve a client token when you load your map which means faster loading times. To get a key you first need an account. You can get an account here: https://www.bingmapsportal.com. After creating an account you can sign in using your Windows Live ID. Once signed in you can create up to 5 keys by clicking on the Create or view keys on the left side panel. To create a new key, enter the name of your application and the URL which corresponds to the website where the key will be used. Then click the Create key button. Once the key is created you can copy it and use it in your code. There are two ways to add this application id to your code. The first is to set the ApplicationId property of an ApplicationIdCredentialsProvider object and then use this object to set the CredentialsProvider property of the MapBase object. Alternatively you can add the application key to the XAML like so:
You will need to update your Virtual Earth map control assembly reference. The new assemblies have been renamed as well. You will need to replace Microsoft.VirtualEarth.MapControl.dll with both Microsoft.Maps.MapControl.dll and Microsoft.Maps.MapControl.Common.dll. With the change in assemblies the namespaces have also changed. Here is a mapping of the new namespaces:
The following classes and properties have been removed or modified:
8/1/2009 VE Silverlight Control – Pushpins, Infoboxes, and Best Map ViewThe Virtual Earth/Bing Silverlight control CTP release was announced at MIX09. Since this control is still in CTP there are a lot of desired functionalities that have not made it in yet. Currently polygon and polyline shapes are built into the control but pushpins are not. This was by design as it is pretty easy to create your own user control on the map to be used as a pushpin. Not all of the functionalities that are in the AJAX control made have been added to the CTP control. In particular the ability to get the best map view for an array of points, or a common infobox class. This article will show how to create a basic pushpin, create an infobox and how to implement the best map view functionality that I put together here: http://rbrundritt.spaces.live.com/blog/cns!E7DBA9A4BFD458C5!943.entry
Basic Pushpin To create a basic pushpin we will add in the more common properties of the pushpin object that’s in the AJAX control such as, title, description, and LatLong. We will also have properties to specify the pushpin image source, a reference to the map, and an offset that will be used to offset the position of the infobox from the center of the pushpin. to get started we will create our pushpin xaml. A MouseLeftButtonDown event will be added to the pushpin. This event will be used to display the infobox.
For the Pushpin class we will have to create the properties that we want the user to be able to set. The following is used to define the properties of the pushpin class.
The PinClicked methoded that gets fired when a user clicks on a pushpin is used to populate the infobox information. There are several ways for the infobox to be created. To reduce the number of user control instances that are created a single infobox can be used and it’s contents updated depending on which pushpin you clicked on. This will make a significant performance difference when there are a lot of pushpins on the map. The PinClicked method will set the infobox title and discription properties and will make it visible. The infobox Position, PositionMethod, and PositionOffset properties will also be set. The PinClicked method looks like this:
Now that we have our Pushpin UserControl made we can now have to create a method to add these pushpins to the map. In the Page.xaml.cs file we can add the following method to add a pushpin to the map:
For simplicity one icon is used for all pushpins. This can be easily modified so that you can use a different icon for each pushpin. Also, I’ve hard coded in an offset value of 15. This value is used to offset the position of the infobox a certain number of pixels away from the center of the pin. Now that we have a way to add our pushpins to the map the following can be used to add your pushpins:
Note that you will need to add a MapLayer to the Page.xaml file like so:
Infobox control Adding an infobox to the map is similar to adding a pushpin to the map. However, simply displaying an infobox on the map is not enough, ideally we will have logic that will know what direction to display the infobox relative to the pushpin and where it is on the map. The infobox should be displayed towards the middle of the map so that there will be less of a chance of the infobox being displayed off the page. Also, as mentioned above having one infobox and updating it’s properties is will lead to better performance than creating a separate infobox user control for each pushpin. Additionally we will want to add the infobox to a map layer that is above the pushpin layer so that the infobox will be displayed above the pushpins. To get start the following xaml will be added to the map:
This xaml that is used to create the infobox description area is set up so that if the content causes the infobox to grow to it’s max height of 200 pixels a verticle scrollbar appears. The infobox has an close button that calls a method called CloseInfobox when clicked. This method collapses the infobox so that it is no longer displayed. Here is the code for the CloseInfobox method.
We now need to create the tools needed to retrieve the infobox position method, and position offset properties. These properties are dependant on where the pushpin is on the viewable map when the user clicked it. To determine the position method we first want to figure out which quadrant of the map the pushpin is in so that we can display the infobox in the opposite direction. The following methods can be used to determine the position method that should be used:
To calculate the infobox offset we also need to know which quadrant of the map the pushpin falls in so that the offset will be away from that quadrant. The following method can be used to determine the infobox offset:
The pushpin user control will now be able to use these methods to position the infobox on the map. Note that these methods require the map to have a width and height property. Best Map view I have written a couple methods over the years that calculate the best map view for an array of coordinates. The most recent one creates a MapViewSpecification that can be used with the Silverlight control (http://rbrundritt.spaces.live.com/blog/cns!E7DBA9A4BFD458C5!943.entry). Using this method is pretty straight forward. The following is an example of how to use this method to position the map accordingly:
Conclusion Using the techniques described in this article you should be able to easily create pushpins with infoboxes and also be able to determine the best MapViewSpecification for those pushpins. Source code that uses these methods can be found here: http://cid-e7dba9a4bfd458c5.skydrive.live.com/self.aspx/VE%20Sample%20code/VESilverlightMap%7C_PushpinsInfobox.zip This sample code also has a MiniMap that Earthware describes how to make in his blog here: http://www.earthware.co.uk/blog/index.php/2009/03/virtual-earth-silverlight-minimap-tutorial/ |
|
|
