Tuesday, 14 September 2010

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

1

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.

10 comments:

DavidJ said...

Hi Niall,

I find this article/blogs of the mashup excellent. Cause I'm doing internship right now and I have to make a mash up and i think yours is a great example. But I have 1 problem though. I've managed to create a bingmap key made the 2 first classes. But when I reached your third blog I don't know how to carry out these 2 steps:
1)So firstly we will create a web blank web application and a new web service to it.

2)In my project I have created a common library that contains a business layer, data layer and some classes.
I'm new with VB studio 2010 so can't continue with my own mashup.
Could you please help.
I like to know how I can carry out the 2 steps above so i can continue. My email: davidjosepha44@hotmail.com.

regards,
David.

DavidJ said...

Hi Niall,

I find this article/blogs of the mashup excellent. Cause I'm doing internship right now and I have to make a mash up and i think yours is a great example. But I have 1 problem though. I've managed to create a bingmap key made the 2 first classes. But when I reached your third blog I don't know how to carry out these 2 steps:
1)So firstly we will create a web blank web application and a new web service to it.

2)In my project I have created a common library that contains a business layer, data layer and some classes.
I'm new with VB studio 2010 so can't continue with my own mashup.
Could you please help.
I like to know how I can carry out the 2 steps above so i can continue. My email: davidjosepha44@hotmail.com.

regards,
David.

Niall Merrigan said...

Hi

In VS 2010 you need to right click on the solution and click Add and then click New Project.

From there select the Web Templates and select ASP.NET Empty Web Application. Once you have named it and selected the location click OK.

Right click on the new project and click Add and then click New Item

Select Web Service and name it. That will cover the web service project.

It is similar for the Common library.

Right click on the Solution and click Add, click Add New Project. Select the Windows types and select Class Library. Name anse enter the location and click OK

I created some folders called Busines, Data, Entities, Feeds and Interfaces. I created classes in each of these folders as required. You can check from the 4th post in this series and download the code.

DavidJ said...

Hi Niall, I've managed to create teh webservice and the common library; thank you.

But when i write the web method

public ListGetAllWeather()
{
return WeatherInfoBl.GetAllWeatherInfo();
}

I can't seem to call the class common so I can get Entities and Business. I only get the class of the project. If you can help me with this I think the other part won't be a problem

Niall Merrigan said...

Add the Common project as a reference to the Web Services project.

DavidJ said...

Hi again Niall,

I have created the application. When I debug it shows me no error. I hit f5 to run it opens the map beautifully. But when I hit the search button it gives me an error:

G4cMashApp.WeatherDataService.GetAllWeatherResponse _result = ((G4cMashApp.WeatherDataService.GetAllWeatherResponse)(base.EndInvoke("GetAllWeather", _args, result)));


This error is in the reference class.

What can be the issue of this. It tells me to look to the inner exception. But can seem to find what the problem is.

DavidJ said...

I've compared your downloadable App with mine. And noticed that using system.runtime.serialization; is light grey. maybe is that the problem? i've resharper on my machine. But i think that maybe i did this step wrong:
If you have ReSharper you can use it to create the GetAllWeatherCompleted method stub

How was I supposed to do that.
Everything is the same as your app I've compared.
Sorry but like i said i suck at programming and new to vs2010.

Niall Merrigan said...

Where are you calling this from and what is the inner exception telling you. You need to access the web service from the XAML (Silverlight) project.

If you download the sample at the end you will see how the project is laid out

Niall Merrigan said...

Ok

Did you add the web service as a reference in the Silverlight project.

You will notice that the GetAllWeatherCompleted stub looks like

void GetAllWeatherCompleted(object sender, GetAllWeatherCompletedEventArgs e)
{
throw new NotImplementedException();
}

thats if you created it right.

Being honest, I would need to see your code. If you email me the whole solution (zipped) to niall.merrigan at certsandprogs.com I will take a look at it

DavidJ said...

Done. You should get mail with an address:
davidjosepha44@hotmail.com