Lost? Need direction? – Add an interactive map component in Power Apps

Looking for directions, lost in the way, add the Interactive Map component in Power App!

The interactive map component was released last year, and it is so good to see the level of functionalities achieved. I have posted the official docs at the end. In my R&D, I have found the interactive map useful, easy to configure and use; especially with the level of details it provides. Depending upon the need, you can save the data in your Dataverse (aka CDS) or any other source of your choice.

PS – While doing R&D for this blog, the only constant song running my mind was Maps by Maroon5, listen it here

Pre-requisites – Before we go and add the Map component in our Power app, let’s do the pre-requisite steps.

Navigate to Power Platform admin center – https://admin.powerplatform.microsoft.com/ and turn on the Geospatial services

Note – You need to have admin rights to be able to turn this on or reach out to your global admin.

Once you have turned this on, you can see two controls –

  1. Address input
  2. Map

So now there are ways we can use the interactive map component –

  1. Either input the address in the Address Input control
  2. Or, Show the existing address on the map

I am quickly adding an Address Input control on the screen & updating its OnAddressSelect property.

Multiple properties that are available to use, but I am only making use of a few to save them to my collection variable

Collect(

    varAddress,

    {

        country: AddressInput2.Country,

        lat: AddressInput2.SelectedLatitude,

        long: AddressInput2.SelectedLongitude,

        address: AddressInput2.FreeformAddress

    }

)

Next, I want to quickly check my collection data, so to cross-check you can either use a Data Table or HTML text control and verify

Setup Data Table –

Insert data table from the Insert tab & update its Items property with collection variable name

Next, choose the fields you want to verify/show from the collection. I added everything & it like below –

Setup HTML Text –

“Latitude:” & AddressInput2.SelectedLatitude & “<br>

 Longitude:” & AddressInput2.SelectedLongitude & “<br>

 Country:” & AddressInput2.Country & “<br>

 Address:” & AddressInput2.FreeformAddress & “<br>”

PS -If you don’t know HTML, you can learn it from w3schools

Note – Only the variables defined in collection, would be used and saved unless its explicitly stored in Dataverse / SP. In this blog, I am not saving the collection variable.

Let’s finally put the interactive map component to the canvas app & update the items of Map with collection variable

Add the fields you want to see on the pin when you search for the address

I also update the info card to the “On hover” property, so you take your mouse on the pin in the map, it will give you all the data of fields added above.

The next thing I did was update the ItemsLatitude, ItemsLongitudes, and ItemsAddresses properties

These accept string data types & the names displayed are as per my collection, so thex naming convention will be different for you.

Now it’s testing time, the minute you start typing, it will show you a relevant address, accept one & see how it works.

As soon as I take the mouse over the pin it presents me details.

I hope this works for you too at this stage!

Preview features –

Enable shape drawing & Enable shape deleting and label editing are both turned off by default.

These can be another way of Address input & then you can play with them

Let me now take another screen & add a new map. To the items property of the map set the collection variable.

We have already enabled the preview features in this map. Let’s draw shape & see what details we have

Get details of the shape by adding some labels & updating it’s text property to below

GeoJSON – Map1.SelectedShape.GeoJSON

Id – Map1.SelectedShape.Id

Permieter – Map1.SelectedShape.Perimeter

Area – Map1.SelectedShape.Area

Label – Map1.SelectedShape.Label

After setting these parameters, it will give you a good view like above, no doubt GeoJSON has more details and we can store it and make use of data.

Read the official blog here & Microsoft Docs site here

Hope this helps!
Keep reading, keep enjoying, keep exploring!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s