Over the next couple of weeks i plan to cover a number of mapping topics using Telerik’s RadMap control.  I have developed quite a passion for spatial data visualization, and have worked with many of the libraries currently available, and feel that our control brings a lot to the table. In this blog i want to show how easy it is to get started with RadMap, which will give newcomers a good starting foundation for the topics I will cover in future blogs.

Installation, and Project Setup

The first thing to do is to make sure you have installed RadControls for Silverlight.

Next create a new project in Visual Studio.  In the “Project Type” section, select “Telerik,” and then choose the Silverlight template of your choice (VB/C#)

Visual Studio will now ask if you would like to host the new Silverlight application in a web site; select the web project type you prefer.

If you are planning to use RIA services in this project, check off the “Enable RIA Services” in the options section.

After you set this up, the Telerik “Project Configuration Manager” will load.  To use the map, check Telerik.Windows.Controls.DataVisualization. ( checking this will also automatically check the Telerik.Windows.Controls option).  In the themes tab select the theme your Silverlight application will use.

Once you are all done with the Project Configuration Wizard, click Finish. At this point the Silverlight, and Web project will be created with the proper references.

On to the Code!

Expand the Silverlight project, open MainPage.xaml, and enter the text highlighted in yellow, or just replace all of the existing xaml.

<UserControl x:Class="RadControlsSilverlightApp1.MainPage"

 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 

 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

 xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.DataVisualization" 

 xmlns:telerikMapping="clr-namespace:Telerik.Windows.Controls.Map;assembly=Telerik.Windows.Controls.DataVisualization" 

 xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 

 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 

 mc:Ignorable="d" 

 d:DesignWidth="640" 

 d:DesignHeight="480">

 <Grid x:Name="LayoutRoot">

 <telerik:RadMap x:Name="RadMap1" ZoomLevel="7" >

 </telerik:RadMap> 

 </Grid>

</UserControl>

Once you have done this the application will work, however, no map will display because we haven’t configured a provider :)

Decision Time

At this point you will need to take some time and decide which map provider to use.  Out of the box the RadMap supports Bing Maps, and Open Street Maps. It is also possible to create a custom provider, which i will cover in detail on a later blog. For now I want to show the steps required to use OSM, and Bing.  The map provider can be set in code behind, or in xaml.  I show both options below, however, it is only necessary to set it in one place!

OSM Route

OSM is a bit easier to set up, and has the added benefit of being free!

Option 1: Set Provider in Code:

Open MainPage.xaml.cs, and add this namespace:

using Telerik.Windows.Controls.Map;

Then set the provider in the constructor:

public MainPage()

{

    InitializeComponent();

 this.RadMap1.Provider = new OpenStreetMapProvider(MapMode.Road, true);

}

Option 2: Set Provider in XAML:

Open MainPage.xaml and paste this code inside the layout grid:

<telerik:RadMap x:Name="RadMap1" ZoomLevel="7" >

 <telerik:RadMap.Provider>

 <telerikMapping:OpenStreetMapProvider/>

 </telerik:RadMap.Provider>

</telerik:RadMap> 

Now run your app and you will see Open Street Maps :)

Bing

Bing is a bit more involved because Bing maps has rate limits, and licensing.  To monitor usage rates, and requests, Bing maps requires that an API key. You can learn how to get a key by reading this MSDN article.  It is a pretty quick process. 

Once you have a key:

Option 1: Set Provider in Code:

Open MainPage.xaml.cs, and add this namespace:

using Telerik.Windows.Controls.Map;

Then set the provider in the constructor:

   1: public MainPage()

   2: {

   3:     InitializeComponent();

   4:  

   5: this.RadMap1.Provider = new BingMapProvider("ENTER YOUR MAP KEY HERE");

   6: }

Option 2: Set Provider in XAML:

Open MainPage.xaml and paste this code inside the layout grid:

<telerik:RadMap x:Name="RadMap1" ZoomLevel="7" >

 <telerik:RadMap.Provider>

 <telerikMapping:BingMapProvider ApplicationId="YOUR APPLICATION KEY"/>

 </telerik:RadMap.Provider>

</telerik:RadMap> 

Now you can run your application, and you will see Bing maps :)

Summing it up

Either route you take makes it easy to get maps displaying in your a Silverlight/WPF application!  I hope this blog has made it a little easier to get started with the RadMap.  This process will work exactly the same for the RadMap in WPF.  Next time we will look at how to plot some data points on the map. :)

Happy Mapping!