Bing Maps Silverlight control weather mash-up with yr.no - Part 1

So I have shown before in a previous post how to use the AJAX version of the Bing Maps control. Now I am going to show the new version of the map control that is in Silverlight. Microsoft have released the Bing Maps Silverlight Control SDK which you use to add map control to your website.

Now in comparison to the AJAX version, this new version is smooth. In fact its much easier to program with and you can do a lot of nice things with it. One of the biggest advantages is the fact that pushpins on the map can be anything that inherits from the UIElement class. This means you can have controls, user controls or images as pushpins. This functionality in itself extends the possibilities of customising the UI experience for your users. Additionally there is added benefit of the rich UI features of Silverlight that can allow to extend aspects of the map to your liking.

So how do you start all this great stuff.

1. Go to the download site and download and install the SDK
2. Surf to the Bing Maps Account portal and create a new account
3. Generate a new developer key
4. Open Visual Studio and get started!
   1. Note that for all this I am using Visual Studio 2010 and Silverlight 4. You can download the Silverlight 4 Tools for VS 2010 from here

So lets do that

First we are going to create a new Silverlight Application. If you get prompted download the Silverlight Developer runtime and install it.

Next choose the option to host the Silverlight application in an ASP.NET Web application. This just adds the boilerplate code for you to show your application in a web page.

Now you should have a nice simple application with your basic Silverlight application loaded and standard ASP.NET web application created.

You will need to add the Bing Map DLLs as references in your project. Right click on the references folder and browse to where you installed the SDK. If you chose the default installation path you will find it in your Program Files directory or (x86) directory on 64bit Windows in Bing Maps Silverlight Control. You will find the DLLs you need in the V1\Libraries directory. You will need both of them which are

• Microsoft.Maps.MapControl.Common
• Microsoft.Maps.MapControl

Once they are added we can use the Bing Maps Silverlight Control in our Silverlight application.

Add the namespace to your XAML code

xmlns:Maps="clr-namespace:Microsoft.Maps.MapControl;assembly=Microsoft.Maps.MapControl"

You can reference the maps by using the Maps prefix. Inside in the grid add a map control

<Grid x:Name="LayoutRoot" Background="White">
   <Maps:Map Name="bingMap" CredentialsProvider="Your key here"></Maps:Map>
</Grid>

 

You need to create a new key in the Bing Maps Account portal if you haven’t already done so and then copy it into the CredentialsProvider so that your map will work correctly otherwise you will see an invalid credentials warning on your map.

Your code should look like this

<UserControl x:Class="MashupMapApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:Maps="clr-namespace:Microsoft.Maps.MapControl;assembly=Microsoft.Maps.MapControl"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot" Background="White">
        <Maps:Map Name="bingMap" CredentialsProvider="your key"></Maps:Map>
    </Grid>
</UserControl>

Pressing F5 to debug should bring up the Silverlight map control in its test page.

In the next post, I will go through adding standard and custom pushpins to the map.