In one of my earlier posts
Convert IP Addresss To Geo Location, I discussed how you can query a web service or database to get
geo-location of that internet service provider. Now what do you do with that geo-location or spatial information. For one of
the current Data Visualization projects I am working on, I had to show these locations on the map as well. The
application is a Silverlight application so obvious choice was to find a control or component that I could
drop in silverlight. And you pretty much have the answer, Use Bing Map Silverlight Control.
In this post I am going to discuss some of the following topics.
- How to use Bing Silverlight Map Control?
- How to add push pins to bing map?
- How to add legends or some text to Silverlight Bing Map?
- How to add regular silverlight controls on Bing Map control?
The documentation for Bing Map Silverlight control is still maturing and lacks lot of details. So most of the
discussion in this post is based on personal experience and conversations I had through news groups and forums.
Set up development enviroment
Before you can start developing your silverlight application using Bing Map Silverlight control, you will need to
do following things.
- Create a developer account at Bing portal
- As part of registration process, you will also be required to a credential key that is
used with each request that you send to Bing web service to access data.
- Download Bing Map Control SDK
and install on your development machine.
Create Project and lets roll
Microsoft has provided a good walk through on
Creating a Basic Application Using the Silverlight Map Control. I will strongly recomment going through
it if its first time for you in Bing Map development.
Adding PushPin to Bing Map
Now that you have a vanilla implementation of map showing in your application. Next I want to add indicztors
on the map to show location of internet service providers for which I have geo corodinates. There are
few ways you can do. The most basic thing that you need to keep in mind is that Bing Map control is like any
other silverlight control and can act as a container for other silverlight control. That means that I can just draw
any shapes or objects at given corodinates. Well, you got it. Bing Map SDK provides some of these
indicator controls out of the box. And one of them is PushPin. So what you need to do is
crate instances of PushPin objects, set their longitude and latitude and add them as children of
map control. Following code snippet shows how I added a collection of PushPin objects to
my map control.
foreach(var loc in locations)
{
var pp = new Pushpin()
{Location = new Location(loc.Latitude, loc.Longitude)};
UserLocationsMap.Children.Add(pp);
}
Adding DataGrid to Bing Map
Next task I had to do was to provide some summary of the data on the map itself. More precisely, I wanted to
show how many service provides from each country I have in my database. For demo purposes I just
needed to show name and count. I decided to add a DataGrid to map to show this data. Later
on I am going to handle click events in this grid to have some interaction with the map as well. Since
I already knew where I wanted to place the grid and what columns needed to be shown, I could just
add this through XAML file itself. Following XAML snippet from the application shows how I have
added a text block and data grid to Bing Map control as children.
<m:Map CredentialsProvider="xxxxxxxxxx" Name="UserLocationsMap">
<m:Map.Children>
<o:ShadowText x:Name="MapTitleText" ForegroundTop="Black" ForegroundBottom="Orange"
Text="ISP Locations" FontFamily="Verdana" FontSize="24"
HorizontalAlignment="Left" Margin="20,75,50,10"/>
<StackPanel x:Name="CountryListPanel" Margin="20,250,50,10" Orientation="Vertical">
<data:DataGrid x:Name="CountryCountGrid" Width="150" Height="250"
AutoGenerateColumns="False" HorizontalAlignment="Left">
<data:DataGrid.Columns>
<data:DataGridTextColumn Header="Country" Width="SizeToHeader" Binding="{Binding Name}" />
<data:DataGridTextColumn Header="Count" Width="SizeToHeader" Binding="{Binding Count}" />
</data:DataGrid.Columns>
</data:DataGrid>
</StackPanel>
</m:Map.Children>
</m:Map>
Postioning on Map control
This is something you will have to play very close attention to. There is a difference between how
controls or objects placed on map control. You must have noticed that when I added PushPin
to map, I used longitude and latitude to position them on the
map. But when I added DataGrid and ShadowText controls, I used Margin
to control the placement. Most of the indiccator or layer objects that are provided in Bing Map SDK use
gro-location values (longitude and latitude) to place object. But when you add regular
silverlight controls on map, then you will control the position using Margin relative to origin of map control.
