Telerik RadMap in SilverLight 5


Introduction

 

Today, in this article let's play around with another interesting concept of Telerik RadControls.

 

Question: What is RadMap?

 

In simple terms "It enables location of geographical information with a rich UI and many features enabled".

 

I think we are now good to go to implement this wonderful concept.
 

Step 1: The complete code of App.xaml.cs looks 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;namespace RadMapApplication
{
    public partial class App : Application
    {
        public static string Key = "";
        public App(){this.Startup += this.Application_Startup;
            this.Exit += this.Application_Exit;
            this.UnhandledException += this.Application_UnhandledException;
            InitializeComponent();
        }
        private void Application_Startup(object sender, StartupEventArgs e)
        {
            this.RootVisual = new MainPage();
        }
        private void Application_Exit(object sender, EventArgs e){}
        private void Application_UnhandledException(object sender,
            ApplicationUnhandledExceptionEventArgs e)
        {
            // If the app is running outside of the debugger then report the exception using
            // the browser's exception mechanism. On IE this will display it a yellow alert
            // icon in the status bar and Firefox will display a script error.if (!System.Diagnostics.Debugger.IsAttached){
            // NOTE: This will allow the application to continue running after an exception has been thrown
            // but not handled.
            // For production applications this error handling should be replaced with something that will
            // report the error to the website and stop the application.e.Handled = true;
            Deployment.Current.Dispatcher.BeginInvoke(delegate
            {
                ReportErrorToDOM(e);
            }
            );
        }
    }
    private void ReportErrorToDOM(ApplicationUnhandledExceptionEventArgs e)
{
    try
{
    string errorMsg = e.ExceptionObject.Message + e.ExceptionObject.StackTrace;
    errorMsg = errorMsg.Replace('"', '\'').Replace("\r\n", @"\n");
    System.Windows.Browser.HtmlPage.Window.Eval("throw new Error(\"Unhandled Error in Silverlight Application " + errorMsg + "\");");
}
    catch (Exception){}
}
}
}
 

Step 2: The complete code of MainPage.xaml looks like this:


<UserControl x:Class="RadMapApplication.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"xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"mc:Ignorable="d"
 d
:DesignWidth="624" d:DesignHeight="480" Loaded="UserControl_Loaded">
    <Grid x:Name="LayoutRoot">
        <telerik:RadMap x:Name="radMap1"></telerik:RadMap>
    </Grid>
</
UserControl>

Step 3: The complete code of MainPage.xaml.cs looks 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 Telerik.Windows.Controls.Map;
using Telerik.Windows.Controls; 
 
namespace RadMapApplication
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
        }

        void UserControl_Loaded(object sender, RoutedEventArgs e)
        {
            OpenStreetMapProvider objMap = new OpenStreetMapProvider();
            radMap1.Provider = objMap; 
        }
    }
}

Step 4: The output of the application looks like this:


 

Output1.png
 

Step 5: The output of the Hyderabad, India location search application looks like this:

Output2.png

I hope this article is useful for you.