Geocoding With the Search Charm

In this blog post we are going to create a simple mapping application that allows the user to search for locations using the Search charm. To do this, there are three main tasks that have to be done:

Create a basic mapping app

Integrate with the Search Charm

Add geocoding logic to the Search Charm

By making use of the Search charm, users can search within your app from anywhere in their system. The full source code in C# and VB for this blog post is available in the Visual Studio Galleries here.

Creating a Basic Mapping App

Before diving into adding logic for tying into the Search charm, let’s start off with creating a basic mapping application which will be used to display the results on.

Add a reference to the Bing Maps SDK. To do this, right click on the References folder and press Add Reference. Select Windows -> Extensions select Bing Maps for C#, C++ and Visual Basic. If you do not see this option, ensure that you have installed the Bing Maps SDK for Windows Store apps. While you are here, also add a reference to the Microsoft Visual C++ Runtime Package as this is required by the Bing Maps SDK when developing using C# or Visual Basic.

You may notice that there is a little yellow indicator on the references that you just added. The reason for this is that when using the C++ runtime package you have to set the Active solution platform in Visual Studio to one of the following options: ARM, x86 or x64. To do this, right click on the Solution folder and select Properties. Then go to Configuration Properties -> Configuration. Find your project and under the Platform column set the target platform. For this blog post, I’m going to select x86. Press Ok and the yellow indicator should disappear from our references.

Now add a map to our application. To do this open the MainPage.xaml file. You will first need to add the Bing Maps SDK as a namespace at the top of the file. After you do this you can add a Map object to the Grid control and add your Bing Maps key to the credentials properties of the map. Give the map a name of MyMap.

OnSearchActivated event handler is added to the App.xaml.cs file. This allows your application to respond to search queries, even when your app isn't on the screen.

A number of helper files are added under the Common folder.

For this sample you don’t need the SearchCharmResults1.xaml. So delete this file from the project.

Open the App.xaml.cs file and locate the OnSearchActivated event handler. Near the end of this event handler, find the following line of code:

frame.Navigate(typeof(SearchCharmResults1), args.QueryText);

Replace the SearchCharmResults1 value with MainPage. This will cause the main application to start when performing a search against it, even if the app isn’t loaded.

Open the MainPage.xaml.cs file. In here you will want to get a reference to the search charm panel and attach a QuerySubmitted event when the user navigates to the app. You will also want to remove this event handler when the user navigates away from the app. This file should look like this:

At this point we have two of the three main tasks completed. The next step is to integrate in the geocoding logic by using the Bing Maps REST services.

First we add the JSON data contracts for the Bing Maps REST services to your project. To do this, right click on your project and select Add -> New Item. Create a class called BingMapsRESTServices.cs. Open the file and delete the contents.

Copy the C# JSON data contracts for the Bing Maps REST services from the MSDN documentation. Paste in the JSON data contracts into the BingMapsRESTServices.cs

In the MainPage.xaml.cs file add the following helper method for handing requests to the Bing Maps REST services.

Next the logic for creating the geocoding request can be added to the searchPane_QuerySubmitted event handler. Once a request has been made, you can loop through the results and add them as pushpins on the map. Update the searchPane_QuerySubmitted event handler such that it looks like this:

foreach (BingMapsRESTService.Common.JSON.Location l in r.ResourceSets[0].Resources) {//Get the location of each result Bing.Maps.Location location = new Bing.Maps.Location(l.Point.Coordinates[0], l.Point.Coordinates[1]);

At this point the application is complete. The final step is to run and test the application. Press the Debug button to launch the application. Open up the Search charm from the right side panel and perform a search. Below is a screenshot of a search from London: