How to Display Current GPS Location in OSM Maps Using Xamarin.Essentials
Tags: mobile, android, ios, xamarin
Published: 2021-02-26 04:11:30

---
title: How to Display Current GPS Location in OSM Maps Using Xamarin.Essentials
published: true
date: 2021-02-24 11:53:56 UTC
tags: mobile, android, ios, xamarin
canonical_url: https://www.syncfusion.com/blogs/post/how-to-display-current-gps-location-in-osm-maps-using-xamarin-essentials.aspx
cover_image: https://www.syncfusion.com/blogs/wp-content/uploads/2021/02/Display-Current-GPS-Location-in-OSM-Maps-Using-Xamarin.Essentials-672x372.png
---

The [Syncfusion Maps control for Xamarin](https://www.syncfusion.com/xamarin-ui-controls/xamarin-maps) has built-in support for external imagery services like [OpenStreetMap](https://www.openstreetmap.org/#map=4/19.30/82.45) (OSM) and [Bing Map](https://www.bing.com/maps)s to visualize satellite, aerial, street, and other map imagery tiles without using shapefiles. Apart from Bing Maps and OSM, you can also render maps from other map providers such as [Google Maps](https://www.google.com/maps/) and [TomTom](https://www.tomtom.com/).

Before getting into the details of this blog, you need to understand the following two useful features in [Xamarin.Essentials](https://docs.microsoft.com/en-us/xamarin/essentials/):

- [Geolocation](https://docs.microsoft.com/en-us/xamarin/essentials/geolocation?context=xamarin%2Fxamarin-forms&tabs=android): Acquires a device’s current geolocation coordinates (latitude and longitude).
- [Geocoding](https://docs.microsoft.com/en-us/xamarin/essentials/geocoding?context=xamarin%2Fxamarin-forms&tabs=android): Converts an address (user-readable) to positional coordinates and vice versa.

In this article, you will learn how to mark (pin) the current device’s [GPS](https://en.wikipedia.org/wiki/Global_Positioning_System) (Global Positioning System) location in the Maps control with OSM (you can use any map service provider, such as Bing, Google, and others) using the [geolocation](https://docs.microsoft.com/en-us/xamarin/essentials/geolocation?context=xamarin%2Fxamarin-forms&tabs=android) support, and how to display the detected location from the address using the [geocoding](https://docs.microsoft.com/en-us/xamarin/essentials/geocoding?context=xamarin%2Fxamarin-forms&tabs=android) support.

**Note:** To access the geolocation functionality in Xamarin.Essentials, please refer to this [link](https://docs.microsoft.com/en-us/xamarin/essentials/geolocation?context=xamarin%2Fxamarin-forms&tabs=android#get-started) to find platform-specific steps.

Let’s get started!

## Show device’s current GPS location in OSM

Follow these steps to display a device’s current GPS location in OSM using the Syncfusion Xamarin Maps control:

### Step 1: Initialize the Maps control

First, you need to create the Xamarin Maps ([SfMaps](https://www.syncfusion.com/xamarin-ui-controls/xamarin-maps)) control with an OSM imagery layer. [OSM](https://www.openstreetmap.org/#map=4/19.30/82.45) is a world map built by a community of mappers that is free to use under an open license.

The Maps control uses the imagery layer to display tile images from the OSM service. To use OSM, you need to add an imagery layer in the Maps’s **Layers** collection and set the **LayerType** as **OSM** as shown in the following code.

```html
<maps:SfMaps>
            <maps:SfMaps.Layers>
                <maps:ImageryLayer x:Name="imageryLayer" LayerType="OSM" ></maps:ImageryLayer>
            </maps:SfMaps.Layers>
 </maps:SfMaps>
```

**Note: ** Refer to this documentation [link](https://help.syncfusion.com/xamarin/maps/getting-started) to get started with the Xamarin Maps control.

### Step 2: Get current geolocation

The current location of a geographic coordinate point can be obtained from the geolocation APIs, which will ask the user for permission when necessary.

The **GetLastKnownLocationAsync** method is used to get the last known location of the device. It works faster than fetching an entire set of location data, but it lacks accuracy and may return null if there is no cached location.

Refer to the following code.

```csharp
var location = await Geolocation.GetLastKnownLocationAsync();
```

If the last known location is null, then call the **GetLocationAsync** method to query the device’s current geographic coordinates. It is recommended to pass in a full **GeolocationRequest** with location [accuracy](https://docs.microsoft.com/en-us/xamarin/essentials/geolocation?context=xamarin%2Fxamarin-forms&tabs=android#geolocation-accuracy) to avoid a time delay in fetching the location.

Refer to the following code.

```csharp
private async void GetCurrentGeolocation()
{
    try
    {
        var location = await Geolocation.GetLastKnownLocationAsync();
        if (location == null)
        {
            var request = new GeolocationRequest(GeolocationAccuracy.Medium, TimeSpan.FromSeconds(10));
            location = await Geolocation.GetLocationAsync(request);
            if (location != null)
            {
                geoLocation = location;
            }
        }
        else
        {
            geoLocation = location;
        }
    }
    catch (Exception ex)
    {
        // Unable to get location
    }        
}
```

### Step 3: Set the marker pin in location

After fetching the current device GPS location, you need to add marker in the map at the acquired location. The **ImageryLayer** provides an option to place the marker inside the map using the [Markers](https://help.syncfusion.com/xamarin/maps/markers) collection property.

To pin the current location, create the [MapMarker](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfMaps.XForms.MapMarker.html) object by assigning the fetched location point to the [Latitude](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfMaps.XForms.MapMarker.html#Syncfusion_SfMaps_XForms_MapMarker_Latitude) and [Longitude](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfMaps.XForms.MapMarker.html#Syncfusion_SfMaps_XForms_MapMarker_Longitude) properties. Then, add the object to the Markers collection in the ImageryLayer instance as shown in the following code.

```csharp
if (location != null)
{
    MapMarker marker = new MapMarker();
    marker.Latitude = location.Latitude.ToString();
    marker.Longitude = location.Longitude.ToString();
    this.imageryLayer.Markers = new ObservableCollection<MapMarker> { marker };
}
```

You can customize the type of marker (pin) icon using the [MarkerIcon](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfMaps.XForms.MapMarkerSetting.html#Syncfusion_SfMaps_XForms_MapMarkerSetting_MarkerIcon) property or add a customized marker by using the [MarkerTemplate](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfMaps.XForms.MapLayer.html#Syncfusion_SfMaps_XForms_MapLayer_MarkerTemplate) property.

To show the current location at the center of the map, set that point to the [GeoCoordinates](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfMaps.XForms.ImageryLayer.html#Syncfusion_SfMaps_XForms_ImageryLayer_GeoCoordinates) property as shown in the following code.

```csharp
private void SetMarkerInLocation(Location location)
{
    if (location != null)
    {
        MapMarker marker = new MapMarker();
        marker.Latitude = location.Latitude.ToString();
        marker.Longitude = location.Longitude.ToString();
        this.imageryLayer.Markers = new ObservableCollection<MapMarker> { marker };

        this.imageryLayer.GeoCoordinates = new Point(location.Latitude, location.Longitude);
        this.imageryLayer.Radius = 50;
        this.imageryLayer.DistanceType = DistanceType.Mile;
    }
}
```

Refer to the following .gif image.  
 ![Show device’s current GPS location in OSM](https://www.syncfusion.com/blogs/wp-content/uploads/2021/02/Show-device%E2%80%99s-current-GPS-location-in-OSM.gif)

## Display the detected location from the address

Any address can be geocoded into latitude and longitude coordinates by using the geocoding APIs in Xamarin.Essentials. To do this, you need to pass the address (e.g., a Microsoft building address) to the geocoding **GetLocationsAsync** method as a string argument. Then, the method will asynchronously return a collection of geographic position objects that represent the address.

Refer to the following code.

```csharp
private async void GetLocationFromAddress()
{
    try
    {
        var address = "Microsoft Building 25 Redmond WA USA";
        var locations = await Geocoding.GetLocationsAsync(address);

        var location = locations?.FirstOrDefault();
        if (location != null)
        {
            geoLocation = location;
        }
    }
    catch (FeatureNotSupportedException fnsEx)
    {
        // Feature not supported on device
    }
}
```

After getting the location, set the map marker (pin) for that location in the map as explained in the [Set the marker pin](#step3-set-the-marker-pin-in-location) in location section.

Refer to the following .gif image.  
 ![Display the detected location from the address](https://www.syncfusion.com/blogs/wp-content/uploads/2021/02/Display-the-detected-location-from-the-address.gif)

## GitHub reference

You can download the complete sample code of this blog from this [GitHub location](https://github.com/SyncfusionExamples/Display-current-and-detected-GPS-location-on-Syncfusion-Maps).

## Conclusion

Thanks for reading! In this blog, we have learned how easy it is to display the current and detected GPS location in the [Syncfusion Xamarin Maps](https://www.syncfusion.com/xamarin-ui-controls/xamarin-maps) control using Xamarin.Essentials. So, try out the instructions provided in this blog and tell us about your experience in the comments section below. The Syncfusion Maps control is also available for the [Blazor](https://www.syncfusion.com/blazor-components/blazor-maps), ASP.NET ([Core](https://www.syncfusion.com/aspnet-core-ui-controls/maps), [MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls/maps), [Web Forms](https://www.syncfusion.com/jquery/aspnet-web-forms-ui-controls/maps)), [JavaScript](https://www.syncfusion.com/javascript-ui-controls/js-maps), [Angular](https://www.syncfusion.com/angular-ui-components/angular-maps), [React](https://www.syncfusion.com/react-ui-components/react-maps) , [Vue](https://www.syncfusion.com/vue-ui-components/vue-maps), [Flutter](https://www.syncfusion.com/flutter-widgets/flutter-maps), [UWP](https://www.syncfusion.com/uwp-ui-controls/map), [WinForms](https://www.syncfusion.com/winforms-ui-controls/map), and [WPF](https://www.syncfusion.com/wpf-ui-controls/map) platforms.

Check out the complete [user guide](https://help.syncfusion.com/xamarin/maps/mapsprovider) of our Maps control and see our map samples in this [GitHub location](https://github.com/syncfusion/xamarin-demos/tree/master/Forms/Maps). Additionally, you can check out our demo apps in [Google Play](https://play.google.com/store/apps/details?id=com.syncfusion.samplebrowser), [Microsoft Store](https://www.microsoft.com/en-us/p/syncfusion-essential-studio-for-xamarin/9nn069tldzf4), and [TestFlight](https://testflight.apple.com/join/y2ionTef).

If you have any questions about these controls, please let us know in the comments below. You can also contact us through our [support forums](https://www.syncfusion.com/forums), [Direct-Trac](https://www.syncfusion.com/support/directtrac/), or [feedback portal](https://www.syncfusion.com/feedback/xamarin-forms). We are always happy to assist you!