PowerAutomate – Transforming Lat/Long to an Address

Welcome to -33.796141, 151.178358! Wait, that doesn’t look right.

Hey everyone! Welcome to another tutorial from myself and the team at NextStep Creations. Today we’re using PowerAutomate to convert a latitude and longitude value to a readable address. In a previous blog we looked at Google Maps in PowerApps.

In this, we cover the ability to use a devices GPS coordinates to provide a location. But, if you were ever to display these, or print them or send them to a report (see Creating a HTML Report), they would come out as just a string of numbers, which isn’t ideal.

See Google Maps might know what to do with those numbers, but we don’t. So I’m going to show you how to convert those into something a bit more “human”.

Step 1 – Set up your Flow (PowerAutomate)

Make sure you have a Google Maps Developer account. See the Google Maps in PowerApps tutorial for info on how to do this. 

For this section, we’ll need to get an API Key for the Geocoding segment. Here’s a tutorial on how to do this: Get Geocoding API Key

We’re going to be working with PowerAutomate (Microsoft Flow) and PowerApps today.  Create a new flow, and name it “convertAddress”, Add the PowerApps trigger, and then a HTTP step after that:

PowerAutomate Setup

Perfect! Set the Method to “GET” and set the URI to the following code:

https://maps.googleapis.com/maps/api/geocode/json?latlng=@{triggerBody()[‘HTTP_URI’]}&key=YOUR API KEY HERE

Make sure to replace the key value with your API Key. You should now have a HTTP step that looks like this:

PowerAutomate - Transforming Lat/Long to an Address 1

Sweet! Let’s move on. In this next section, I’ve done a lot of the heavy lifting for you. In another blog post we’ll talk about how to correctly set up a Parse JSON step, but for now, here’s one I prepared earlier.

Add a Parse JSON step, and set the “Content” to the Body of the HTTP step previous.
In the schema, click this link and copy all of the text. Your Parse JSON step should look like so:

PowerAutomate - Transforming Lat/Long to an Address 2

Lets create a variable to store the address in. Add an Initialize Variable step, name it formattedAddress, set the type to String and the value to:

body(‘Parse_JSON’)?[‘results’][0][‘formatted_address’]
More on the above in the blog we’re writing about JSON. 
Now add a “Respond to a PowerApp or flow step, and set the output variable to the formattedAddress variable we made:
PowerAutomate - Transforming Lat/Long to an Address 3
 
Brilliant! Time to go to PowerApps.

Step 2 – Create PowerApps & tag the Flow

Alright, nice and easy. Create a new PowerApp, and add a button. We’re going to create a proof of concept app, to show that your latitude and longitude can be successfully converted to an address.

You can expand on this if you wish by adding the Google Maps ability like we’ve shown: Google Maps in PowerApps

Here’s my app layout:

PowerAutomate - Transforming Lat/Long to an Address 4

To get the text label to show my location, I’ve set the text property as follows:

“My location: ” & Location.Latitude & “, ” & Location.Longitude

This is using the in-built Location functionality in PowerApps.
Read more about that function here: Acceleration, App, Compass, Connection, and Location signals in Power Apps

Alright, let’s add some functionality! Add the flow to the button:

PowerAutomate - Transforming Lat/Long to an Address 5

In the OnSelect of the button, set a variable to the response value we defined (formatteddAddress) to a variable using the below code:

Set(convertedAddress, convertAddress.Run(Location.Latitude & “,” & Location.Longitude).formattedaddress)

PowerAutomate - Transforming Lat/Long to an Address 6

So, we’re just passing the latitude and longitude of the device, separated by a comma.

Now, set the bottom text label (“My address: “) to the following:

“My address:

” & convertedAddress

This will add a few blank lines, and then when you click the button will display your address.

Give it a try! You should see a result like so (I’ve blanked out some of my address for security reasons):

PowerAutomate - Transforming Lat/Long to an Address 7

And that’s it! Congratulations, you’ve got yourself an actual address.

Happy PowerApps developing, until next time.

 

Google Maps in PowerApps – Fast & Efficient

Come one come all, to an undisclosed location on the Internet!

Oh wait, we have Google Maps now…..here’s the address. Hey everyone, Jacob here again. Today we’re going to be discussing using the Google Maps API inside of your PowerApps to give easy to use, easy to visualize locations, either by using the physical device’s latitude and longitude, or by manually typing in a street address. First off, here’s a little teaser of what you can expect to make at the end of this….

PowerApps Demo Final PowerApps Demo Final

As you can see, we have a fully functioning location setup! We can either use a manually entered address (first photo), or use the devices inbuilt GPS functionality to figure out the coordinates of the user!

Step 1 – Design the PowerApps Layout

Let’s get started. Fairly simple PowerApp layout, I’ve added notes on this image to make it easier to understand:

Google Maps in PowerApps - Fast & Efficient 8

Okay! Nice and easy so far. You’ll see that in that photo I mentioned I’d elaborate on the latitude/longitude text label, so here goes:

  • This label is set up to show either the current Latitude and Longitude of your devices if the address input is blank.
  • If it isn’t blank, it will display whatever address has been manually entered.

To achieve this, set the Text property of the label to the following:

If(IsBlank(ti_addressEntry.Text), Location.Latitude & “, ” & Location.Longitude, ti_addressEntry.Text)

Step 2 – Getting the static map setup in Google

So this part requires a few moving parts. Let’s break it all down.

Getting a Google Maps Static API Key

To get images from Google we need to have a key. A key is tagged to a Google account, and verifies that it’s you making the request.

To get this, we need to sign up to a Google Developers account. You can use your existing Google/GMail account for this. Follow this link and click “Get Started” to sign into your account: Google Developer – Maps

Create your first project and agree to the terms:

Google Maps in PowerApps - Fast & Efficient 9

You’ll have to set up a billing account in the next stage. I won’t walk you through this section as it’s fairly straightforward.

You’ll need to get an API key next, Here is a great guide from Google on how to do so: Get an API Key

Okay! Once you’ve completed all that and got your Google Maps Static API Key, it’s back to PowerApps!

Step 3 – Configuring the image

What we’re going to do is use the Google Maps API to return us a static map image that we can display. There are a lot of parameters that you can pass to this API (full list here). The ones we care about are:

  • Zoom
  • Size
  • Markers
  • Key

We’ll get more in-depth as to what an API is in other blogs, so for now here’s the code:

“https://maps.googleapis.com/maps/api/staticmap?&zoom=” & slider_mapZoom.Value & “&size=” & img_map.Width & “x” & img_map.Height & “&markers=color:red%7Csize:mid%7C” & EncodeUrl(If(IsBlank(ti_addressEntry.Text), Location.Latitude & “,” & Location.Longitude, ti_addressEntry.Text))& “&key=YOUR API KEY HERE”

Woah! That’s a lot! Okay, let’s break it down, and show you what to do with it all.

Breaking down the code

https://maps.googleapis.com/maps/api/staticmap?&zoom=” & slider_mapZoom.Value 

This component is the API URL. The final section is the “Zoom” paremeter, which you can see is the value of the Slider we’ve put in PowerApps.

& “&size=” & img_map.Width & “x” & img_map.Height & “&markers=color:red%7Csize:mid%7C”

Woah that’s a lot of ampersands. We use these to concatenate strings togethter in PowerApps. This section of code defines the map height and width, based off the size of our image control in PowerApps. 
The end section of this defines the markers as red, and size of medium.

& EncodeUrl(If(IsBlank(ti_addressEntry.Text), Location.Latitude & “,” & Location.Longitude, ti_addressEntry.Text))& “&key=YOUR API KEY HERE”

Okay final section! This part will pass the location value to the API. You can see it checks to see whether the address entry text input is empty or not.

  • If it’s empty, pass the latitude and longitude of the devices GPS
  • If it isn’t empty, pass the address entered in the text input

Also, replace the section at the end with your API key (right where it says YOUR API KEY HERE). And you’re done!

Okay, throw all of that into the Image property of the media we added before, like so:

Google Maps in PowerApps - Fast & Efficient 10

Almost done!

Final thing, set the OnSelect property of the button to the following code:

Concurrent(Reset(ti_addressEntry), Reset(slider_mapZoom))

And that’s it! Test it out, and congratulations to you!

Google Maps in PowerApps - Fast & Efficient 11

Now, here’s another tutorial on how to convert that unsightly latitude and longitude to an actual address: PowerAutomate – Transforming Lat/Long to an Address

Catch you in the next blog, happy PowerApps Deving!