Exploring Map Tracking UI in Xamarin Forms

The basics when developing a map tracking UI is showing the driver route and car position on the map. The car should move according to its current position in the route.

In this article, will show you how to achieve just that by using Xamarin Forms and Google Maps. The result will look like this:

Let’s code

1-Install the Xamarin.Forms.GoogleMaps package in all your projects

It’s an amazing NuGet package for using Google Maps in Xamarin Forms by amay077. It has many interesting features such as:

• Polygons
• Lines
• Circles
• Etc.

You can find the repository here.

2-Adding Google Maps configurations

Do the following steps:

• On iOS, Info.plist file add the location permissions
• Create the GoogleMaps ApiKey here
• Enable Google Maps Direction API here
• Add the ApiKey your project
• Initialize the Xamarin Forms Google Maps library in Android and iOS
• Add the following permissions in your Android project:AccessFineLocation, AccessLocationExtraCommands,AccessMockLocation, AccessNetworkState,AccessWifiState, Internet

I won’t cover much about this but there’s a great article in the docs of how to configure google maps, check here. Also, check out the library instructions here.

3-Get the route by using google maps directions API

Google maps directions API basically allows you to get a route based in two location points (origin and destination). Also, you can specify the route mode (transit, driving, walking or cycling). You can check the full API documentation here.

Let’s define an interface to consume this API service.

As you can see in the code above we are going to pass as parameters the origin position (latitude, longitude) and the destination position (latitude, longitude). The method returns a GoogleDirection object. (Copy code here).

Now will implement the IGoogleMapsApiService to consume the Google Maps Directions API.

4-Create a ViewModel to call the GoogleMapsApiService

In the ViewModel, we will create a method to call the GoogleMapsApiService. When getting a response from the service we need a way to notify our map to render the route and pins, for that we will create a CalculateRouteCommand property to be executed when we get the response.

Also in this method will simulate location updates by starting a timer that runs every 5 seconds to change the current position. To notify the map about this new position we will create the property UpdatePositionCommand to be executed every time the timer runs.

Note: The API returns an encoded polyline so to decode it we used an extension method, copy here.

5-Create the XAML page

In our page, we will add the map and two new properties to bind the CalculateRouteCommand, UpdatePositionCommand (We will create those two bindable properties in the code behind, which will show on next step).

6- Create new bindable properties on the Page and handle route and pin UI rendering

As I mentioned before in the code behind we will create two new command type bindable properties that will be executed from the view model.

CalculateCommand Will render the polyline based on the route returned by the Google Maps Direction API. Also will center the map to the first position, add the car pin and destination pin.

UpdateCommand When executed will center the map and move the car pin to the new current position, finally will remove the part of the line the represents the previous position.

You can check the full source code here.

Happy Tracking! 🙂