Using Power Apps Location Services – (Part 1)

Introduction

I recently developed an Inventory app for a client. The whole app (built in Power Apps), is quite a big app, so I have decided to break this blog up into 3 parts.

1. Using location services (This blog)
2. Using the Barcode Scanner to scan items
3. Storing Scanned Items

Scenario

The scenario for this app was that is was going to be used by reps to do an Inventory at nearby factories, i.e. There are several factories in a certain geographical location and reps (using their phones GPS) can see which location is nearest to them.

Using Location Services in Power Apps

1. Drag the Image Control onto your Power App and assign the following code to the Image Property, as below. (You will have to get your own API Key. I used the following link :
   https://developers.google.com/maps/documentation/places/web-service/get-api-key

"http://maps.googleapis.com/maps/api/staticmap?center=" & LocationTable.Selected.Customer_Latitude& "," & LocationTable.Selected.Customer_Longitude & "&zoom=17&size=700x900&key=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx&markers=color:red%7Clabel:A%7C"& LocationTable.Selected.Customer_Latitude & "," & LocationTable.Selected.Customer_Longitude

As you can see, you have to specify a Latitude and Longitude (and the api key) in order to get the Map to work.

The reason I have developed it like this is because the app should allow a rep to select which location they wish to go to. So there will be a list of locations, and the rep and choose which one he or she wants.

Adding Locations

1. I create a new page on my app called ‘Config’ which is not visible to the end user. The location should be filled in prior to the reps accessing the app.
   Its a very basic page which can you customize to your needs as you wish. For the purposes of this blog, i am using Microsoft Office as factories.

This page simply allows you to Add an Location and then store that location inside of a Collection. The Longitude and Latitude is from Google Maps.

To add the address to the Collection, the Add Location has the following code on the OnSelect Property,

Collect(Locations, 
{
    Customer_Title: txtCustomerName.Text,
    Customer_Address: txtAddress.Text,
    Customer_Latitude: txtLatitude_1.Text,
    Customer_Longitude: txtLongitude_1.Text
}
)

The value entered is then saved to the Collection, e.g. below

You add as many locations as you want to the Collection and then display the collection directly below the map, as below (You will have to go into Data Sources, Add Data and choose the Data Collection you want to add) – You will have to ensure that your Data Table is called LocationTable as the api key above references it.

The aim here is to add several Locations, then the rep can select each location and the map should change accordingly,

Conclusion

This blog was part 1 / 3 where we added location services to the app, so a rep can select a nearby factory. Watch out Part 2 of the app will be using the phone camera to scan barcodes.