How to Search the Telerik Map Control in Silverlight4

Introduction

This is the coolest thing I have ever done with the Telerik’s Silverlight map Control. The Control it’s so easy to use.  The Previous article I have written on the Map control of was based on co-ordinates, it is good when you want to display certain areas, but if you want people to search certain location, you will need to allow them to enter the location of the place. I had a look at one of the demos presented by Telerik and to my surprise it was very easy to do. I even search my home town.

Background

In this Article, I am going to show you how to create a Silverlight GIS application that will allow your user to search a certain location. The users will enter the name of the place and the map will focus on the place in an Aerial map view.

Using the code

We are going to use C# as our main Language for example code  

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

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="MapSearch.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="486" d:DesignWidth="780" xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation">
<Grid x:Name="LayoutRoot" Background="White" Height="486" Width="780">
<telerik:RadMap x:Name="RadMap1" ZoomLevel="7" Center="42.358431, -71.059773" Margin="0,61,12,12">
<telerik:InformationLayer Name="informationLayer">
<telerik:InformationLayer.ItemTemplate>
<DataTemplate>
<Border Background="#7FFFFFFF"
BorderThickness="1" 
Padding="2,2,2,2">
<ToolTipService.ToolTip>
<ToolTip Content="{Binding Path=Title}" />
</ToolTipService.ToolTip>
<telerik:MapLayer.HotSpot>
<telerik:HotSpot X="0.5" Y="0.5" />
</telerik:MapLayer.HotSpot>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="14" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Path Fill="Red">
<Path.Data>
<GeometryGroup>
<EllipseGeometry Center="7,7" RadiusX="3" RadiusY="3" />
<EllipseGeometry Center="7,7" RadiusX="7" RadiusY="7" />
</GeometryGroup>
</Path.Data>
</Path>
</Grid>
</Border>
</DataTemplate>
</telerik:InformationLayer.ItemTemplate>
</telerik:InformationLayer>
<telerik:InformationLayer Name="informationLayer2" />
</telerik:RadMap>
<TextBox Height="23" HorizontalAlignment="Right" Margin="0,14,327,0" Name="SearchCondition" VerticalAlignment="Top" Width="266" />
<TextBlock Height="19" HorizontalAlignment="Left" Margin="19,18,0,0" Name="lblSearch" Text="Enter your Search LocationL:" VerticalAlignment="Top" Width="152" />
<telerik:RadButton Content="Search" Height="22" HorizontalAlignment="Left" Margin="480,15,0,0" Name="btnSearch" VerticalAlignment="Top" Width="104" Click="btnSearch_Click" />
</Grid>
</UserControl>

Ok above here, I have my map control and I have one textbox. I have not used any co-ordinates , so if  you search with any place , the map will refresh and it will show you a new location. I have searched for my home town Mamelodi (Pretoria) in South Africa.

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.Browser;
using System.Windows.Data;
using Telerik.Windows.Controls;
using Telerik.Windows.Controls.Map;
using ItemsControl = Telerik.Windows.Controls.ItemsControl;
using Telerik.Windows.Examples.Map.Search;
 
namespace MapSearch
{
public partial class MainPage : UserControl
{
private string VEKey;
private MapItemsCollection itemCollection = new MapItemsCollection();
private BingSearchProvider searchProvider;
public MainPage()
{
InitializeComponent();
this.GetVEServiceKey();
this.informationLayer.DataMappings.Add(new DataMapping("Location", DataMember.Location));
Binding binding = new Binding();
binding.Source = this.itemCollection;
this.informationLayer.SetBinding(ItemsControl.ItemsSourceProperty, binding);
}
 
// Initialize Virtual Earth map provider.
private void SetProvider()
{
BingMapProvider provider = new BingMapProvider(MapMode.Aerial, true, this.VEKey);
this.RadMap1.Provider = provider;
// Init searh provider.
searchProvider = new BingSearchProvider()
{
ApplicationId = this.VEKey,
MapControl = this.RadMap1
};
searchProvider.SearchCompleted += new EventHandler<SearchCompletedEventArgs>(Provider_SearchCompleted);
}
 
private void GetVEServiceKey()
{
WebClient wc = new WebClient();
wc.DownloadStringCompleted += new DownloadStringCompletedEventHandler(wc_DownloadStringCompleted);
Uri keyURI = new Uri(HtmlPage.Document.DocumentUri, "AlTTXGRrAlAD_ANxWHkwshIVLoBLCryJjB5adacuGgcQSzd9UQZaow8hVLPIUNMV");
wc.DownloadStringAsync(keyURI);
}
 
void wc_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
{
this.VEKey = "AlTTXGRrAlAD_TestVLoBLCryJjB5adacuGTest9UQZTestUNMV";//e.Result;
this.SetProvider();
}
 
private void SearchHandler(object sender, RoutedEventArgs e)
{
}
 
private void Provider_SearchCompleted(object sender, SearchCompletedEventArgs args)
{
SearchResponse response = args.Response;
if (response.ResultSets[0].Results.Count > 0)
{
this.itemCollection.Clear();
foreach (SearchResultBase result in response.ResultSets[0].Results)
{
MyMapItem item = new MyMapItem()
{
Title = result.Name,
Location = result.LocationData.Locations[0]
};
this.itemCollection.Add(item);
}
}
if (response.ResultSets[0].SearchRegion != null)
{
// Set map viewport to the best view returned in the search result.
this.RadMap1.SetView(response.ResultSets[0].SearchRegion.GeocodeLocation.BestView);
// Show map shape around bounding area
if (response.ResultSets[0].SearchRegion.BoundingArea != null)
{
MapShape boundingArea = response.ResultSets[0].SearchRegion.BoundingArea;
boundingArea.Stroke = new SolidColorBrush(Colors.Red);
boundingArea.StrokeThickness = 1;
this.informationLayer2.Items.Add(boundingArea);
}
if (response.ResultSets[0].SearchRegion.GeocodeLocation.Address != null
&& response.ResultSets[0].SearchRegion.GeocodeLocation.Locations.Count > 0)
{
foreach (Location location in response.ResultSets[0].SearchRegion.GeocodeLocation.Locations)
{
MyMapItem item = new MyMapItem()
{
Title = response.ResultSets[0].SearchRegion.GeocodeLocation.Address.FormattedAddress,
Location = location
};
this.itemCollection.Add(item);
}
}
}
}
 
private void btnSearch_Click(object sender, RoutedEventArgs e)
{
string query = this.SearchCondition.Text;
if (!string.IsNullOrEmpty(query))
{
SearchRequest request = new SearchRequest()
{
Culture = new System.Globalization.CultureInfo("en-ZA"),
Query = query
};
this.searchProvider.SearchAsync(request);
}
}
}
}

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 came to my home town in a nice view.

Conclusion

Thank you for visiting Dotnetfunda

Vuyiswa Maseko