×
Namespaces

Variants
Actions

Plotting current position on the Map control in Windows Phone 7

From Nokia Developer Wiki
Jump to: navigation, search

This article demonstrates how to zoom to a user's position on a Sliverlight Map Control based on location information from the GeoCoordinateWatcher class.

Tip.pngTip: For Windows Phone 8 Microsoft recommend developers switch to the new Windows Phone 8 Map Control which is now part of the SDK and uses the on-board HERE maps rather than use the control mentioned in this article.

SignpostIcon HereMaps 99.png
SignpostIcon XAML 40.png
WP Metro Icon WP8.png
SignpostIcon WP7 70px.png
Article Metadata
Code ExampleTested with
Devices(s): Nokia Lumia 820, Lumia 920
Compatibility
Platform(s): Windows Phone 8.0/ 7.1
Windows Phone 8
Windows Phone 7.5
Article
Keywords: Map Controls/GeoCoordinateWatcher
Created: somnathbanik (14 Oct 2011)
Last edited: hamishwillee (01 Jul 2013)

Contents

Introduction

This example app creates a Map. When a user clicks on the my location menu, the app fetches the current location of the device and put the latitude and longitude in the Map in zoom view. The current location is retrieved using the GeoCoordinateWatcher class (from the System.Device.Location namespace).

Current Location

Implementation

First create a project with Windows Phone Application Template.


Create map (MainPage.xaml)

Once the project is created, drag and drop a new Map control onto the page from the Visual Studio 2010 Toolbox. This will generate the Map Control code in the XAML file.

<my:Map Height="408" HorizontalAlignment="Left" Margin="6,20,0,0" Name="map1" VerticalAlignment="Top" Width="444" Mode="AerialWithLabels" CredentialsProvider="{StaticResource BingMapsAPIKey}" >
</my:Map>

To use the map you need to get a Bing maps key, which can be obtained from http://www.bingmapsportal.com/. You can replace the {StaticResource BingMapsAPIKey} with your key (as shown below):

<my:Map Height="408" HorizontalAlignment="Left" Margin="6,20,0,0" Name="map1" VerticalAlignment="Top" Width="444" Mode="AerialWithLabels" CredentialsProvider="Anqep9VR0k6VxcmRp4qJ_AYWglilkC3B4c2QgZAgZTBS-bCr2GOI7iOopDGd-PXa" >
</my:Map>

Alternatively you can declare the BingMapsAPIKey static resource in your App.xaml file - note that this is recommended if you're planning on using the key anywhere else in the app.

<Application.Resources>
<my:ApplicationIdCredentialsProvider ApplicationId="Anqep9VR0k6VxcmRp4qJ_AYWglilkC3B4c2QgZAgZTBS-bCr2GOI7iOopDGd-PXa" x:Key="BingMapsAPIKey"></my:ApplicationIdCredentialsProvider>
</Application.Resources>

Get co-ordinates and zoom

Now we add the Menu with the name My Location. When user clicks on the menu it calls ApplicationBarMenuItem_Click(), which in turn has the code to get the location.

private void ApplicationBarMenuItem_Click(object sender, EventArgs e)
{
GeoCoordinateWatcher gcw;
gcw = new GeoCoordinateWatcher(GeoPositionAccuracy.High);
gcw.MovementThreshold = 20;
gcw.StatusChanged += new EventHandler<GeoPositionStatusChangedEventArgs>(gcw_StatusChanged);
gcw.PositionChanged += new EventHandler<GeoPositionChangedEventArgs<GeoCoordinate>>(gcw_PositionChanged);
gcw.Start();
map1.Center = new GeoCoordinate(gcw.Position.Location.Latitude, gcw.Position.Location.Longitude);
if (gcw != null) gcw.Stop();
map1.ZoomLevel = 17;
map1.ZoomBarVisibility = Visibility.Visible;
map1.ScaleVisibility = Visibility.Visible;
}

We create an instance of GeoCoordinateWatcher and set the accuracy to High and threshold value to 20 which is approx 20 meters around. Event GeoPositionStatusChangedEventArgs gets the updated Status and GeoPositionChangedEventArgs event gets the location data associated with the event, like the latitude and longitude. Start() method enables PositionChanged events and allows access to the Position property. Once we get this data we put the value in the map and display the location in map’s center position. And finally Stops the GeoCoordinateWatcher from providing location data and events with Stop() method. We also set the zoom level property of the map.

Testing

This application has only been tested on emulator. The articles below discuss how to test maps on the emulator:

Source Code

The full source code of the example is available here: File:MapControls.zip

This page was last modified on 1 July 2013, at 05:04.
388 page views in the last 30 days.