Search
Submit & Win
Submit and win
Cash Prizes !
Winners

Win Prizes

Social Presence
Twitter Twitter LinkedIn YouTube Google

Like us on Facebook
Advertisements
Top Articles Author
Sat, 20-Dec-2014 Authors
All Time Authors
Sourav.Kayal
39750
SheoNarayan
38550
Niladri.biswas
33350

Latest members | More ...


(Statistics delayed by 5 minutes)
Ads
 Article

How to use Telerik’s Map Control in Silverlight 4

Vuyiswamb
Posted by under Silverlight category on for Beginner level | Points: 250 | Views : 15689 red flag
If you found plagiarised (copied) or inappropriate content,
please let us know the original source along with your correct email id (to communicate) for further action.
Rating: 4.5 out of 5
2 vote(s)
A friend of mine, who is doing working on a GIS project, asked me, if I could get him a cool control that will show maps based on the Coordinates at ease without worrying about other map problems that GIS developers come across every day. So this triggered me to write something nice with the Map control from Telerik.

 Download source code for How to use Telerik’s Map Control in Silverlight 4


Introduction

A friend of mine, who is doing working on a GIS project, asked me, if I could get him a cool control that will show maps based on the Coordinates at ease without worrying about other map problems that GIS developers come across every day.   So this triggered me to write something nice with the Map control from Telerik.

Background

Telerik have a Map control that can allow you to navigate the world at ease by only passing the coordinates. The example that I am going to use uses Bing Maps. They are not updated regularly like Google Map or TomTom maps, but they will get you started.  This map control is even available for asp.net developers, so basically it does the same, you can even bind the control with data that is coming from the database.

Using the code

We are going to use C# as our main Language for example code and you can use any SQl database provider.

Tools you need

I have made a table of tools you need to follow this example.

Obviously you need to have Silverlight installed on your machine, and you need visual studio 2010, because this version of Map Controls is for .net 4.

1)    First if you are not registered at Telerik, register here

2)    You need to create an Account with Bing, if you have a Windows Live account , you will automatically log in, you will not need to create a new one. So you will use this https://www.bingmapsportal.com and after you have logged in , you must create a key, this key is the one we will use in the map. You will be asked for a website, just add anything, and a strange key will be created , hold on to it, we will use it later in the code.

Tools you need

Name of Tool

Version of .Net

Where to get it

RadControls for Silverlight

 

.NET 4

http://www.telerik.com/download.aspx

.NET Developer runtime

.NET 4

http://www.silverlight.net/getstarted/silverlight-4/

Installation

First, if you have Visual Studio opened, close it and run the setup of the Telerik Silverlight Controls, please notes that, this will not only install the map control, but it will install other controls also, that we might need in the future articles on the cool stuff using Telerik controls. When done, we can start up your visual studio, and you will not need to add them manual as we used to do in the previous versions of the controls.

Start

Silverlight controls , not only Telerik, will need you to add namespaces before you use them , if this is your first Silverlight example, the namespaces are a bit different from the one , you have been using in asp.net, or C# or other .NET Languages. So to make things simple for yourself. Go to your toolbar and hopefully, it will look like this


Choose the Map control, drag it and drop it on your Silverlight page, and you will notice, that namespaces are added automatically and the references are added also. So this means you don’t need to update your Xaml on the namespaces. That is why I hate to use some third party controls, because some examples on their site or some controls don’t add namespaces automatically for you, you have to spend a lot of thing hacking the controls so that the compiler don’t complain. Now let’s make it more interesting as Telerik Demo does, this is very simple. Go to your Xaml (MainPage.xaml)and make sure it looks like this; you can decide to copy and paste.

<UserControl x:Class="SilverlightApplication1.MainPage"

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

    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="452" d:DesignWidth="872" xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation">

 

    <Grid x:Name="LayoutRoot" Background="White" Height="452" Width="872">

        <telerik:RadMap Height="428" HorizontalAlignment="Left" ZoomLevel="7" Margin="12,12,0,0" Name="radMap1" VerticalAlignment="Top" Width="688" />

        <StackPanel HorizontalAlignment="Left" Margin="706,0,0,326" Name="stackPanel1" Width="166" >

            <TextBlock Text="Select Provider:" />

            <ListBox x:Name="ProviderBox"

                         SelectionChanged="ProviderBox_SelectionChanged"

                         Margin="0,2" Height="97" Width="152">

                <ListBoxItem Content="BingMapProvider"/>

                <ListBoxItem Content="OpenStreetMapProvider"/>

            </ListBox>

 

        </StackPanel>

        <StackPanel Height="156" HorizontalAlignment="Left" Margin="706,132,0,0" Name="stackPanel2" VerticalAlignment="Top" Width="159">

            <TextBlock Text="Select Location:" />

            <ListBox x:Name="LocationBox"

                         DisplayMemberPath="Description"

                         SelectionChanged="LocationBox_SelectionChanged"

                         Margin="0,2" Height="119" Width="139">

                <telerik:Location Description="Pretoria, South Africa"  Latitude="-25.714876" Longitude="28.325076" />

                <telerik:Location Description="Munich, Germany" Latitude="48.139126" Longitude="11.580186" />

                <telerik:Location Description="Boston, Massachusetts" Latitude="42.358431" Longitude="-71.059773" />

                <telerik:Location Description="Houston, Texas" Latitude="29.763284" Longitude="-95.363272" />

            </ListBox>

 

        </StackPanel>

 

    </Grid>

</UserControl>

OK above here, I have my map control and I have some Listboxes, and when clicked the map changes. I have hard-coded the co-ordinates of some places like Pretoria South Africa (Home) and other places.

And the Server side will look like this

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

using System.Windows.Threading;

using Telerik.Windows.Controls.Map;

using System.Windows.Browser;

using System.Configuration;

namespace SilverlightApplication1

{

    public partial class MainPage : UserControl

    {

        DispatcherTimer zoomOutTimer = new DispatcherTimer();

        DispatcherTimer zoomInTimer = new DispatcherTimer();

        DispatcherTimer moveTimer = new DispatcherTimer();

 

        private bool providerChanged = false;

        private string VEKey = "AlTtestetest_ANxWHtestetestCryJjB5adactestetestUNMV";

        private const int minZoomLevel = 3;

        private const int maxZoomLevel = 8;

 

        public MainPage()

        {

            InitializeComponent();

 

            this.GetVEServiceKey();

            LocationBox.SelectedIndex = 0;

            ProviderBox.SelectedIndex = 0;

            radMap1.Center = (Location)LocationBox.SelectedItem;

            zoomOutTimer.Interval = TimeSpan.FromMilliseconds(150);

            zoomInTimer.Interval = TimeSpan.FromMilliseconds(150);

            moveTimer.Interval = TimeSpan.FromMilliseconds(800);

            zoomInTimer.Tick += new EventHandler(zoomInTimer_Tick);

            zoomOutTimer.Tick += new EventHandler(zoomOutTimer_Tick);

            moveTimer.Tick += new EventHandler(moveTimer_Tick);

 

        }

        private void GetVEServiceKey()

        {

            WebClient wc = new WebClient();

            wc.DownloadStringCompleted += new DownloadStringCompletedEventHandler(wc_DownloadStringCompleted);

        }

 

        void wc_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)

        {

            this.SetProvider();

        }

 

        void moveTimer_Tick(object sender, EventArgs e)

        {

            this.moveTimer.Stop();

            this.ZoomIn();

        }

 

        void zoomInTimer_Tick(object sender, EventArgs e)

        {

            if (this.radMap1.ZoomLevel < maxZoomLevel)

                this.radMap1.ZoomLevel++;

            else

                this.zoomInTimer.Stop();

        }

 

        void zoomOutTimer_Tick(object sender, EventArgs e)

        {

            if (this.radMap1.ZoomLevel > minZoomLevel)

                this.radMap1.ZoomLevel--;

            else

            {

                this.zoomOutTimer.Stop();

                this.ZoomOutFinished();

            }

        }

 

        void ZoomOutFinished()

        {

            radMap1.Center = (Location)LocationBox.SelectedItem;

            this.SetProvider();

            this.moveTimer.Start();

        }

 

        private void SetProvider()

        {

            if (providerChanged)

            {

                string providerName = (ProviderBox.SelectedItem as ListBoxItem).Content.ToString();

 

                MapMode providerMode = MapMode.Road;

                bool isLabelVisible = true;

                if (radMap1.Provider != null)

                {

                    providerMode = radMap1.Provider.Mode;

                    isLabelVisible = radMap1.Provider.IsLabelVisible;

                }

 

                MapProviderBase provider;

 

                switch (providerName)

                {

                    case "OpenStreetMapProvider":

                        provider = new OpenStreetMapProvider(providerMode, isLabelVisible);

                        break;

                    default:

                        {

                            if (string.IsNullOrEmpty(this.VEKey))

                                return;

 

                            provider = new BingMapProvider(providerMode, isLabelVisible, this.VEKey);

                            break;

                        }

                }

 

                this.radMap1.Provider = provider;

 

                this.providerChanged = false;

            }

        }

 

        private void ZoomOut()

        {

            if (this.zoomOutTimer.IsEnabled || this.zoomInTimer.IsEnabled)

                return;

 

            this.zoomOutTimer.Start();

        }

 

        private void ZoomIn()

        {

            if (this.zoomOutTimer.IsEnabled || this.zoomInTimer.IsEnabled)

                return;

 

            this.zoomInTimer.Start();

        }

 

        private void LocationBox_SelectionChanged(object sender, SelectionChangedEventArgs e)

        {

            this.ZoomOut();

            this.ZoomIn();

        }

 

        private void ProviderBox_SelectionChanged(object sender, SelectionChangedEventArgs e)

        {

            this.providerChanged = true;

            this.ZoomOut();

        }

    }

}

Ok I know it’s too much for a start. But don’t worry too much about these functions. What they do, they help you to zoom in and out of the Map. When the Listbox is selected a selected place will make the map to zoom to that location. You can use your own location; you use Google maps to get your co-ordinates. Now there is an important part of the map that I want to explain.

private string VEKey = "AlTtestetest_ANxWHtestetestCryJjB5adactestetestUNMV";

When we started, I said keep the key that you have generated in the Bing site. Now I have messed up mine so that no one can you use it. Now just replace this string with your and when done build your application as you normally do and run your application and you will see this


As you can see it defaults to my home town. Maybe on yours it will default to your own town. Now these are satellite images. So normally it will just come with some raw images like this

By using this built in view controller, you can change the views of the map

 

Now, us Extend this, let’s say I have a company and my company have 3 branches in South Africa in the Same Province, what I will do , I will need to do the Hot-spots. So to do this normally in GIS, you will need to have another Layer that is not easy for a newbie to add, but with this RadControl(Telerik), its easy , now this is what I am going to add in my xaml

<telerik:InformationLayer>

    <Ellipse x:Name="Ellipse2" telerik:MapLayer.Location="-26.286275, 27.847819"

                    Width="20" Height="20" Stroke="Red" StrokeThickness="3">

        <telerik:MapLayer.HotSpot>

            <telerik:HotSpot />

        </telerik:MapLayer.HotSpot>

    </Ellipse>

</telerik:InformationLayer>

So you can add as many hot-spots are you want, but just change the Latitude and Longitude (Co-ordinates) to the locations you want your new hot-spots to be. Now your xaml if I add my hot-spots, I will look like this

<UserControl x:Class="SilverlightApplication1.MainPage"

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

    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="452" d:DesignWidth="872" xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation">

 

    <Grid x:Name="LayoutRoot" Background="White" Height="452" Width="872">

        <telerik:RadMap Height="428" HorizontalAlignment="Left" ZoomLevel="7" Margin="12,12,0,0" Name="radMap1" VerticalAlignment="Top" Width="688">

 <telerik:InformationLayer>

       <Ellipse x:Name="Ellipse"

                   telerik:MapLayer.Location="-25.714876, 28.325076"

                   Width="20"

                   Height="20"

                   Stroke="Red"

                   StrokeThickness="3">

           <telerik:MapLayer.HotSpot>

               <telerik:HotSpot />

           </telerik:MapLayer.HotSpot>

       </Ellipse>

   </telerik:InformationLayer>

            <telerik:InformationLayer>

                <Ellipse x:Name="Ellipse2"

                   telerik:MapLayer.Location="-26.286275, 27.847819"

                   Width="20"

                   Height="20"

                   Stroke="Red"

                   StrokeThickness="3">

                    <telerik:MapLayer.HotSpot>

                        <telerik:HotSpot />

                    </telerik:MapLayer.HotSpot>

                </Ellipse>

            </telerik:InformationLayer>

        </telerik:RadMap>

        <StackPanel HorizontalAlignment="Left" Margin="706,0,0,326" Name="stackPanel1" Width="166" >

            <TextBlock Text="Select Provider:" />

            <ListBox x:Name="ProviderBox"

                         SelectionChanged="ProviderBox_SelectionChanged"

                         Margin="0,2" Height="97" Width="152">

                <ListBoxItem Content="BingMapProvider"/>

                <ListBoxItem Content="OpenStreetMapProvider"/>

            </ListBox>

        </StackPanel>

        <StackPanel Height="156" HorizontalAlignment="Left" Margin="706,132,0,0" Name="stackPanel2" VerticalAlignment="Top" Width="159">

            <TextBlock Text="Select Location:" />

            <ListBox x:Name="LocationBox"

                         DisplayMemberPath="Description"

                         SelectionChanged="LocationBox_SelectionChanged"

                         Margin="0,2" Height="119" Width="139">

                <telerik:Location Description="Pretoria, South Africa"  Latitude="-25.714876" Longitude="28.325076" />

                <telerik:Location Description="Munich, Germany" Latitude="48.139126" Longitude="11.580186" />

                <telerik:Location Description="Boston, Massachusetts" Latitude="42.358431" Longitude="-71.059773" />

                <telerik:Location Description="Houston, Texas" Latitude="29.763284" Longitude="-95.363272" />

            </ListBox>

 

        </StackPanel

    </Grid>

</UserControl>

And you don’t need to change anything on your server side code. And your map will look something like this when changed to Aerial view.


Conclusion

This is how easy you can add a map control in your website.

Thank you for visiting Dotnetfunda

Vuyiswa Maseko

Page copy protected against web site content infringement by Copyscape
About the Author

Vuyiswamb

Full Name: Vuyiswa Maseko
Member Level: NotApplicable
Member Status: Member,MVP,Administrator
Member Since: 7/6/2008 11:50:44 PM
Country: South Africa
Thank you for posting at Dotnetfunda [Administrator]
http://www.Dotnetfunda.com

Vuyiswa Junius Maseko is a Functional Head(Property Valuations) for City of Tshwane Municipality in South Africa, Gauteng and a moderator at www.DotnetFunda. Vuyiswa has been developing for 14 years now. his major strength are C# 1.1,2.0,3.0,3.5,4.0,4.5 and vb.net and sql and his interest were in asp.net, c#, Silverlight,wpf,wcf, wwf and now his interests are in Kinect. He has been using .net since the beta version of it. Vuyiswa believes that Kinect is the next generation of computing. . Thanks to people like Chris Maunder (codeproject), Colin Angus Mackay (codeproject), Dave Kreskowiak (Codeproject), Sheo Narayan (.Netfunda),Rajesh Kumar(Dell) They have made vuyiswa what he is today. Occupation: Functional Head Company: City of Tshwane Location: South Africa
Login to vote for this post.
Share this to:

Bookmark It

Comments or Responses

Posted by: Naimishforu on: 2/10/2011 | Points: 25

Hi, It's really an awesome article. Can you please also provide downloadable source code!!

Thanks

Posted by: Vuyiswamb on: 2/10/2011 | Points: 25

Good Day Naimishforu

I will post the Example Project in 15 min. please note that i have removed the dlls in the bin directory as they are large, meaning the project is 8 megs when not zipped and when zipped its 3 megs , so because of the Upload Rules i had to decrease the size. But after you have installed your Telerik Controls on your side, they will be there.

Thank you for Posting at Dotnetfunda

Vuyiswa

Posted by: Karthikanbarasan on: 2/10/2011 | Points: 25

Excellect Article!!! Is that control is licensed to use?

Posted by: Vuyiswamb on: 2/10/2011 | Points: 25

You need to buy the Control from Telerik. So it will give you 50 controls for silverlight including the map Control

Posted by: Sutotpal on: 2/11/2011 | Points: 25

really great article..


Posted by: Vuyiswamb on: 2/11/2011 | Points: 25

Thank you :)

Posted by: Karthikanbarasan on: 2/14/2011 | Points: 25

How much is the license cost ?

Posted by: Vuyiswamb on: 2/14/2011 | Points: 25

its

http://www.telerik.com/purchase/individual/silverlight.aspx

With Support :$999

Without Support: $799(You can still get support from their Forum and from us(dotnetfunda)



Posted by: Naimishforu on: 2/14/2011 | Points: 25

wow, that's really nice.

Thank you much :)

Posted by: Vuyiswamb on: 2/14/2011 | Points: 25

you are welcome :)


Login to post response

Comment using Facebook(Author doesn't get notification)