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.
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.
<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">
Step 7 : Now
add the following references:
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
Changing the view to Road mode
On Finding the address.
Changing the view mode to aerial mode of the Bing Map
Hope this article makes you feel interesting to work with Windows Phone 7.