Customized Pushpin With BingMap in Windows Phone 7

Adam Mcartney
12y
21.4k
0
0

Article

Working with Windows Phone is a great experience and the best part is that you can work with real world things and can experiment with it for example playing with maps and geographical structures. One of the best parts is locating a point or address in the map and then pinpoint this location, regardless of whether you zoom it or not, the pinned point called pushpin will show you the most precise point. Isn't it interesting?? So in this article you'll learn how to locate a point in the Bing Map and then adding a customized pushpin to this locatioin.

Follow the steps below.

Step 1 : First of all you need to have the Windows Phone 7.1 SDK installed in your system.

Step 2 : Then open Visual Studio

Select new project
Select your preferred language
Select the Silverlight for Windows Phone application on the left pane and Windows Phone application in right pane.
Name the project

Step 3 : Now you land up in a screen showing the Windows Phone application and XAML coding into different partition. Now you may change the look of your application as you wish.

design view.gif

Step 4 : Now drag and drop the map control from the toolbox into the phone application.

Add a textbox and in the properties change the name of this textbox as "txtbx". This text box holds the value of the start place.
Add a button name it as "Change view". This is to change the mode of view of the map.
Add another button and name it as "Find" to find the address on the Bing Map.

Step 5 : Now before we start the coding ahead you need to get the credentials for using the Bing map in Windows Phone application. To know how to get the credentials see this article . If you don't get the credentials then an irritating white strip keeps appearing over the map urging to get the credential for using the map control.

Step 6 : When you have the Bing map key, move to the XAML part and find the following:

<My:Map Name="map1"
   Width="425" Height="513"
   Margin="0,0,19,25"
   CopyrightVisibility="Collapsed"

LogoVisibility="Collapsed"
VerticalAlignment="Bottom" HorizontalAlignment="Right" >

In this line add the following parameters to make the map work better.

CredentialsProvider="type the bing map key you got here" LogoVisibility="Collapsed"

Then the complete code becomes.

Go to Solution Explorer

Right click on references--> add reference

Also add a service reference--> Right click on reference

Add service reference

In the address bar type- http://dev.virtualearth.net/webservices/v1/geocodeservice/geocodeservice.svc/mex. This is to use the geocode related clases in the application.

Name this service reference as "BingMapGeoCodeService".

Step 8 : Add the following namespaces to the project

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 Microsoft.Phone.Controls;
using findlocation.Binggeocode;
using System.Collections.ObjectModel;
using Microsoft.Phone.Controls.Maps;
using System.Windows.Media.Imaging;

Step 9 : Now here we start with the main coding of our project. First of all globally declare a geocode service client object for Bing Map.

GeocodeServiceClient gsc;
public MainPage()
{
InitializeComponent();

Step 10 : Now intantiating the geocode service. For this write this code in the constructor of the page load metod.

public MainPage()
{
InitializeComponent();

    // instantiate Bing Map GeocodeService

map1.LogoVisibility = Visibility.Collapsed;
map1.CopyrightVisibility = Visibility.Collapsed;
map1.Mode = new AerialMode();
gsc= new GeocodeServiceClient();
gsc.GeocodeCompleted += (s, e) =>
{
   // sorting the confidence in ascending order
  var geoResult = (from r in e.Result.Results
  orderby (int)r.Confidence ascending
  select r).FirstOrDefault();
  if (geoResult != null)
{
this.findocation(geoResult.Locations[0].Latitude,
geoResult.Locations[0].Longitude,
15,
  true);
}
};
}

To catch any exception define a private contructor like this below the original constructor.

private void InitializeComponent()
{
throw new NotImplementedException();
}

Step 11 : Now in order to locate the address on the map we define a method named findlocation() to find the location of the address in the map. Also we add the Pushpin her in this method and the customize it. In this method some terms like "pin", "map1" etc will be unknown to you for these terms add at the XAML code below the method. Also in this method I have used the image of the pushpin which is saved in the solution explorer-->images folder--> named as pin4.jpe

private void findocation(double latitude, double longitude, double zoomLevel, bool showLocator)
{
  // adding pushpin
Microsoft.Phone.Controls.Maps.Platform.Location location = new Microsoft.Phone.Controls.Maps.Platform.Location();
location.Latitude = latitude;
location.Longitude = longitude;
map1.SetView(location, zoomLevel);
pin.Location = location;
//changing pushpin image
  ImageBrush ib = new ImageBrush();
ib.ImageSource = new BitmapImage(new Uri(@"Images\pin4.jpe", UriKind.Relative));
pin.Background = ib;
elps.Fill = ib;
  if (showLocator)
{

pin.Visibility = Visibility.Visible;
}
else
{
pin.Visibility = Visibility.Collapsed;
}
}

XAML code

<My:Map Name="map1"
   Width="425" Height="513"
   Margin="0,0,19,25"
   CopyrightVisibility="Collapsed"
   LogoVisibility="Collapsed"
   VerticalAlignment="Bottom" HorizontalAlignment="Right"
CredentialsProvider="type the bing map key you got here" LogoVisibility="Collapsed">
   <My:Pushpin Name="elps"
   Background="Transparent" >
<My:Pushpin.Content>
  <Ellipse Width="20" Height="40"
  Name="pin" />
</My:Pushpin.Content>
   </My:Pushpin>
</My:Map>

Step 12 : Now add a button in the map and name it as "Find". on the button click write the following code.

private void btnPlot_Click(object sender, RoutedEventArgs e)
{
BingMapGeoCodeService.GeocodeRequest request = new BingMapGeoCodeService.GeocodeRequest();
   //permits high confidence result.
request.Options = new GeocodeOptions()
{
Filters = new ObservableCollection<FilterBase>
{
  new ConfidenceFilter()
{
MinimumConfidence = Confidence.High
}
}
};
request.Credentials = new Credentials()
{
ApplicationId = "Here you have to enter your Bing Map credential id"
};
request.Query = txtbx.Text;
   // locating geocordinates
gsc.GeocodeAsync(request);
}
}
}

Step 13 : Add another button named as "view" having the content "Change view" to change the view of the map from Aerial to Road mode. On the click event of this button write the following code.

private void view_Click(object sender, RoutedEventArgs e)
{
if (map1.Mode is RoadMode)
{
map1.Mode = new AerialMode(true);
}

else
{
map1.Mode = new RoadMode();
}
}
Step 14 : Now to add custom zoom in and zoom out functionality add two buttons one for zoom in and other for zoom out. For zoom in button's double click write the code below.

private void button1_Click(object sender, RoutedEventArgs e)
{
double zoom;
zoom = map1.ZoomLevel;
map1.ZoomLevel = ++zoom;
}

And for the Zoom out button's double click write the code below.

private void button2_Click(object sender, RoutedEventArgs e)
{
double zoom;
zoom = map1.ZoomLevel;
map1.ZoomLevel = --zoom;
}

Step 15 : Now run the project and see the Output