Customized Pushpin With BingMap in Windows Phone 7

// 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.