In this article we are going to see how to use the Map control to Mark your location in Windows Phone Application development. To get some basics about maps please refer to my previous article on How to use Maps in Windows Phone application. In this article we will see how to get the current location of the device and show a spot rectangle on the coordinates. To use some of the features of Maps, Location we need to activate the capability of the application which should be done in WMAppManifest.xml file and navigate to capabilities tab. Let us see the steps on how to achieve this task on getting the location and marking on the maps in our Windows Phone application development. Open Visual Studio 2012 IDE and create a new Windows Phone project with a valid project name as shown in the screen below. [more]
Clicking on OK will create the project and the solution with the list of default files and folders that are required to run the application. It will take some time to create these files based on your system configuration, so once everything is ready we can see the Visual Studio IDE with the project as shown in the screen below.
Let us add some control to trigger the event and get the current location to mark it on the Maps, we will add a button control and the maps control from the toolbox as shown in the code below.
XAML Code:
[code:c#]<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="F5debug How to Series" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="Mark Location" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<!–ContentPanel – place additional content here–>
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Button Content="Mark My Location" HorizontalAlignment="Left" Margin="30,10,0,0" VerticalAlignment="Top" RenderTransformOrigin="0.434,0.523" Width="416" Click="Button_Click"/>
<maps:Map x:Name="mymaps" HorizontalAlignment="Left" Margin="30,100,0,0" VerticalAlignment="Top" Height="497" Width="416"/>
</Grid>
[/code]Now in the button click event and the code behind add the below code which will get the current coordinates of the device using the Location services and show a rectangle symbol in the maps. We need to use the GeoCoorfinate class which helps to get the Location details basically the Latitude and Longitude of the current location which will be then assigned to the GeoCoordinate property of the MapOverlay layer which positions the Rectangle layer in the exact coordinate of the map to indicate the current location. We need to create a Maplayer to add the Mapoverlay property to show the layer over the map control.
Code C#:
[code:c#]using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Navigation;
using Microsoft.Phone.Controls;
using Microsoft.Phone.Shell;
using F5debugHowto74.Resources;
using System.Windows.Shapes;
using System.Windows.Media;
using Microsoft.Phone.Maps.Controls;
using Windows.Devices.Geolocation;
using System.Device.Location;
namespace F5debugHowto74
{
public static class CoordinateConverter
{
public static GeoCoordinate ConvertGeocoordinate(Geocoordinate geocoordinate)
{
return new GeoCoordinate
(
geocoordinate.Latitude,
geocoordinate.Longitude,
geocoordinate.Altitude ?? Double.NaN,
geocoordinate.Accuracy,
geocoordinate.AltitudeAccuracy ?? Double.NaN,
geocoordinate.Speed ?? Double.NaN,
geocoordinate.Heading ?? Double.NaN
);
}
}
public partial class MainPage : PhoneApplicationPage
{
// Constructor
public MainPage()
{
InitializeComponent();
}
private async void ShowMyLocationOnTheMap()
{
Geolocator myGeolocator = new Geolocator();
Geoposition myGeoposition = await myGeolocator.GetGeopositionAsync();
Geocoordinate myGeocoordinate = myGeoposition.Coordinate;
GeoCoordinate myGeoCoordinate = CoordinateConverter.ConvertGeocoordinate(myGeocoordinate);
this.mymaps.Center = myGeoCoordinate;
this.mymaps.ZoomLevel = 13;
Rectangle MyRectangle = new Rectangle();
MyRectangle.Fill = new SolidColorBrush(Colors.Black);
MyRectangle.Height = 20;
MyRectangle.Width = 20;
MyRectangle.Opacity = 50;
MapOverlay myLocationOverlay = new MapOverlay();
myLocationOverlay.Content = MyRectangle;
myLocationOverlay.PositionOrigin = new Point(0.5, 0.5);
myLocationOverlay.GeoCoordinate = myGeoCoordinate;
MapLayer myLocationLayer = new MapLayer();
myLocationLayer.Add(myLocationOverlay);
mymaps.Layers.Add(myLocationLayer);
}
private void Button_Click(object sender, RoutedEventArgs e)
{
ShowMyLocationOnTheMap();
}
}
}
Now we are done with the code, just run the application by pressing F5 directly from the keyboard or we can use the Build and execute the project option from the tool bar to run the application. Once the Build is successful we can see the Windows Phone emulator with the application and the expected outputs as shown in the screen below.
No Comments
Please help, there is only one error that's coming in the project…what namespace must be added for Layers?? or is there anything else ..kindly help out.
'Microsoft.Phone.Controls.Maps.Map' does not contain a definition for 'Layers' and no extension method 'Layers' accepting a first argument of type 'Microsoft.Phone.Controls.Maps.Map' could be found (are you missing a using directive or an assembly reference?