)
We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to show the current GPS location in Xamarin.Forms maps (SfMaps)

Platform: Xamarin.Forms |
Control: SfMaps |
Published Date: April 9, 2020 |
Last Revised Date: April 9, 2020

 

Description

This article explains how to show the current GPS location using the Syncfusion Xamarin.Forms maps.

Solution

To show the current GPS location, you can get the current location of device by using the Geolocation.GetLastKnownLocationAsync() method of Xamarin.Essentials and add the marker pin on maps using the current location values.

The following steps demonstrate how to add the marker on current geolocation:

Step 1: Initialize the SfMaps control and add Imagery layer with OSM type to the layer collection of the control.

<maps:SfMaps x:Name="sfmap">
    <maps:SfMaps.Layers>
        <maps:ImageryLayer LayerType="OSM"
                           x:Name="layer"> 
        </maps:ImageryLayer>
    </maps:SfMaps.Layers>
</maps:SfMaps>

 

Step 2: Create a custom marker by extending the MapMarker with Image property to show pin image as marker and define the MarkerTemplate to show pin marker on Xamairn.Forms Map.

…
<maps:ImageryLayer.MarkerTemplate>
   <DataTemplate>
      <Image x:Name="markerImage"
             HorizontalOptions="Center"
             Source="{Binding Image}"
             VerticalOptions="Center"
             HeightRequest="15"
             WidthRequest="15" />
   </DataTemplate>
</maps:ImageryLayer.MarkerTemplate>
…

 

…
public class CustomMarker : MapMarker
{
    public ImageSource Image { get; set; }
    public CustomMarker()
    {
        Image = ImageSource.FromResource("MarkerOnGPSLocation.pin.png");
    }
}
…

 

Step 3: Get the current location from Xamarin.Essentials’s Geolocation.GetLaskKnownLocationAsync() API and add the marker to Markers collection of Imagery layer with obtained latitude and longitude values.

…
public MainPage()
{
    InitializeComponent();
    this.AddMarkerInCurrentLocation();
}
 
private async void AddMarkerInCurrentLocation()
{
    try
    {
        var location = await Geolocation.GetLastKnownLocationAsync();
        if (location != null)
        {
            CustomMarker marker = new CustomMarker();
            marker.Latitude = location.Latitude.ToString();
            marker.Longitude = location.Longitude.ToString();
            this.layer.Markers = new ObservableCollection<MapMarker> { marker };
        }
    }
    catch (Exception ex)
    {
        // Handle not supported on device exception
        await Application.Current.MainPage.DisplayAlert("Alert", ex.Message, "Ok");
    }
}
…

 

Step 4: To display the map with specific distance around current location by specifying the Radius with DistanceType properties of imagery layer.

…
this.layer.GeoCoordinates = new Point(location.Latitude, location.Longitude);
this.layer.Radius = 5;
this.layer.DistanceType = DistanceType.KiloMeter;
…

 

Output

Map showing current GPS location

 

You can find the complete sample in this link.

2X faster development

The ultimate Xamarin UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon