Floating FB popout byF5debug

101 How to on Windows Phone – How to #74 – How to Mark your location on the Map in Windows Phone Application


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:


<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}"/>

        <!--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"/>




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#:


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.Altitude ?? Double.NaN,
                geocoordinate.AltitudeAccuracy ?? Double.NaN,
                geocoordinate.Speed ?? Double.NaN,
                geocoordinate.Heading ?? Double.NaN

    public partial class MainPage : PhoneApplicationPage
        // Constructor
        public MainPage()

        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();

        private void Button_Click(object sender, RoutedEventArgs e)



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.


About Author: Karthikeyan Anbarasan, Microsoft MVP (Most Valuable Professional) in ASP.NET/IIS Architecture. He is the Founder and Chief Editor of the www.f5debug.net website and has authored books on Windows Phone and Business Intelligence(SSIS). He is also a Passionate Speaker and a Blogger on Microsoft Technologies.

You can Join Me On: Facebook, Twitter, Google Plus, LinkedIn

Add comment

  Country flag

  • Comment
  • Preview

Recent Posts

Random Posts

Most Viewed

URL Shortner

Create your own short urls!!!

Site Counter

free counters


This is a personal weblog. The opinions expressed here represent my own and not those of my employer. For accuracy and official reference refer to MSDN/ TechNet. I have documented my personal experience on this blog.

Protected by Copyscape Web Plagiarism Finder

Site Meter