Talk With Angel Garcia!

Talk With Angel Garcia!

a blog about software and beers

Maps and Location Tracking with Xamarin Forms

Hi folks, as part of the Xamarin Month initiative -by my friend Luis Matos– we are going to learn how to combine Geolocation plugin from Xamarin.Essentials and Maps Control to make a user’s location tracker in Xamarin Forms.

πŸ’ͺ Let’s do it!

Create a new project in Visual Studio (I’m using 2017 version), choose Cross-Platform -> Mobile App (Xamarin.Forms).

Choose Blank template, Android & iOS as platforms and .NET Standard as sharing strategy.

Xamarin.Forms uses the native map APIs on each platform, so first thing we need is install the NuGet “Xamarin.Forms.Maps” for use the Map control.

Make sure your Xamarin.Forms package version matches the Xamarin.Forms.Maps version.

Then we need to add the initialization code in each project, after the Xamarin.Forms.Forms.Init method call:

//For iOS, AppDelegate.cs file, in the FinishedLaunching method.
Xamarin.FormsMaps.Init();
//For Android, MainActivity.cs file, in the OnCreate method.
Xamarin.FormsMaps.Init(this, bundle);

The next step is the platform configurations, starting with the Android project, we need to generate an API Key in order to use the Google Maps API V2, follow the instructions in the Xamarin docs then go to Properties/AndroidManifest.xml and paste the key into the following tag attribute:

 <application android:label="LocateMe.Android">
<meta-data android:name="com.google.android.maps.v2.API_KEY" android:value="YOUR_KEY" />
</application>

Now, right-click in the Android project name, go to Properties> Android Manifest > Required Permissions and check the following permissions:

    • AccessCoarseLocation
    • AccessFineLocation
    • AccessLocationExtraCommands
    • AccessMockLocation
    • AccessNetworkState
    • AccessWifiState
    • Internet

On iOS we need to set the following keys in the info.plist (right click in the file > Open With > XML Editor):

 <key>NSLocationAlwaysUsageDescription</key>
<string>Can we use your location at all times?</string>
<key>NSLocationWhenInUseUsageDescription</key>
<string>Can we use your location when your app is being used?</string>
<key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
<string>Can we use your location at all times?</string>

To support iOS 11 and earlier, you can include all three keys: NSLocationWhenInUseUsageDescriptionNSLocationAlwaysAndWhenInUseUsageDescription, and NSLocationAlwaysUsageDescription.

Cool! now we can user the Map control in our common .NET Standard library project.

Go to the common project, open the MainPage.xaml to add the Map control by replacing with the following:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:LocateMe"
xmlns:maps="clr-namespace:Xamarin.Forms.Maps;assembly=Xamarin.Forms.Maps"
x:Class="LocateMe.MainPage">

<StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<maps:Map WidthRequest="320" HeightRequest="200"
x:Name="MyMap"
MapType="Street"
/>
</StackLayout>

</ContentPage>

πŸ’ͺNow we have the map running!

Map Screen

Location permission for Android above 6.0 with Xamarin.Forms.Maps If you set IsShowingUser property to true in the Map control, you should request the permission first to avoid a Security Exception.

In the next post (or maybe on this post in a later update) we are going to show and track the user’s location by using the Geolocation plugin from Xamarin.Essentials.

See the code on Github

4 Comments

    1. Angel Garcia

      Hi @Tarek, next week I will be posting the part two (where we are going to learn how to use the Geolocation Plugin from Xamarin Essentials).

      Thanks for the feedback!

      Reply

Leave a Reply to Tarek Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.