This is an article from my old blog site, blog.konffaaja.com originally published January 5, 2019. Unfortunately, images were lost during the migration process.
There are a lot of real world applications where user location and map view of that location become handy. We have implemented to our customers i.e. fault reporting application for park maintenance, vehicle management application for vehicle maintenance company etc. In all these, telling where the incident happened is crucial. Luckily almost everyone has all the technology needed for this (smartphone) and PowerApps is able to access this information. In the following article I’ll show you how to access devices’ GPS-location, to save it and to plot it on a map with zoom controls.
The first thing is to get the GPS location. To collect this information, you’ll need basic PowerApps form. In my case I created a SharePoint list with location field (type single line of text) where this information is saved and created a PowerApp out of that. The next step is to request GPS location information from the device and fill it in the field. There is basically two different options; get the location automatically when the form is loading or adding a button for that. The best option is combination of these two. When the form is loaded the location is filled in, but user can always press a button to update it. In my example I used PowerApps default beacon icon.
Image missing
So I have the field and button in place, the next thing is to implement the logic. The idea is that we use a variable called coordinates for the location information and we use that as value for the location field. To automatically update the coordinates while the form is loading, add following action to the screen OnVisible action.
Set(coordinates, Substitute(Text(Location.Latitude),",",".") & "," & Substitute(Text(Location.Longitude),",","."))
Image missing
This will also parse the coordinates to commonly used Decimal Degree (DD) format. Let’s break it into smaller pieces:
- Location.Latitude / Location.Longitude requests latitude and longitude coordinates from the device. When you add these to your PowerApp, it will automatically start asking for permission to use device’s location.
- Text() converts location information to text
- Substitute(Text(Location.Latitude),”,”,”.”) replaces , with . There is a bug (I think) in PowerApps, with certain regional settings it also returns coordinates with comma.
- & “,” & is basic string concatenation
- Set(variable, value) is used for setting the actual value into coordinates variable.
You can also add this same formula into beacon icon OnSelect action. For some reason in my environment the icon did not work correctly when it was in the DataCard, so I placed it outside the form.
Now if you load the form it should look something like this.
Image missing
Pressing the beacon icon will update the information. If you copy and paste this location to i.e. Google Maps, it should show your device location quite accurately.
So the next thing would be to add a map control into the view screen so that we can plot the location. We’ll use Bing maps REST API for this purpose. We’ll also add zoom in and zoom out buttons to the map.
To show the map you’ll need a Bing Maps API key. You can get it from Bing maps Dev Center. The map control is actually an image control using a specially crafted address.
Image missing
"https://dev.virtualearth.net/REST/V1/Imagery/Map/Road/" & ItemsGallery.Selected.Location & "/" & ZoomLevel & "?mapSize=640,500&pp=" & ItemsGallery.Selected.Location & ";&key=YOUR_API_KEY"
Image missing
Let’s also break this into smaller pieces:
- ItemsGallery.Selected.Location points to the selected item in the gallery. ../Map/Road/Coordinates centers the map into correct location.
- ZoomLevel tells how close or far we want to zoom.
- mapSize tells what size image we want to retrieve (width, height).
- pp=coordinates tell the location of the pin.
- key=YOUR_API_KEY is your private API key to identify your application when calling the API.
ZoomLevel is a variable between 1 – 20 telling how close we want to zoom. Zoom level 1 contains the map of the whole globe and 20 is the most accurate level you can get. Place Set(ZoomLevel, 15) into screen OnVisible actions in order to set zoom to default when the screen is opened.
Zoom buttons are buttons having just “+” or “-” as text placed over the map. Plus -button OnSelect action is:
If(ZoomLevel<20,Set(ZoomLevel,(ZoomLevel+1)))
Minus-button OnSelect action is:
If(ZoomLevel>1,Set(ZoomLevel,(ZoomLevel-1)))
So basically the idea is to add one or subtract one from the ZoomLevel variable when these buttons are pressed. And as you probably realized we don’t want to zoom in or out too much because then the API won’t return any map.
So this is how to implement user location on map in PowerApps. One thing I’ve noticed is that for the first time users open the PowerApp and allow it to access device location, it doesn’t really work. In these situations close PowerApps and open it again.
Thanks for reading, I hope you’ll find this helpful while implementing your PowerApps with GPS based location or map controls.