Plotting Multiple Map Points in PowerApps

In this blog, I’m going to show you how to plot multiple points on a map in PowerApps using Bing Maps.  I’ll be using a SharePoint list as my data source for the map locations, however, you can use whatever data source you want.

SharePoint Structure

The first step is to create a custom list in SharePoint called “Office Locations” with the following fields:

• Title – Single Line of Text Field to hold Office Location Name
• Address – Multi Line of Text Field to hold entire address – address, city, state, zip
• Latitude – Single Line of Text Field
• Longitude – Single Line of Text Field
• Phone # – Single Line of Text Field

Get a Bing Maps API Key

Before you can put a Bing Map in your PowerApp you’ll need to get a Free Bing Maps API Key.  It’s easy to get signed up and get your key.  Here’s a link that walks you through how to get a key: https://docs.microsoft.com/en-us/bingmaps/getting-started/bing-maps-dev-center-help/getting-a-bing-maps-key 

Building the PowerApp

Now that you have your Bing Maps Key, it’s time to create the PowerApp.  Create a Blank Tablet Canvas App and add the SharePoint list you just created as a Data Source.  Next, insert a Gallery Control and Connect it to your SharePoint Office Lists Data Source.  In this example, I’ve included the Office Location Name and Address in the Gallery as seen below:

Now that we have our datasource, we need to create a String object that has all of the long/lat values from our locations that we can pass into our Bing Map.  To do this, we will use an UpdateContext formula in the OnStart of our App.  Here’s the formula for that:

UpdateContext({plotPoints: Concat('Name of Your Data Source', "&pp=" & Latitude & "," & Longitude & ";" &"26"&";" & Title)})

That formula is creating a variable called plotPoints which concatenates all of the lat/long values from your data source into the format that Bing Maps is expecting.  Now it’s time to hook up our locations to the map.

To display the map you’ll need to insert an Image Control to the right of your Gallery.  Set the Image Property of your control to the following:

"https://dev.virtualearth.net/REST/v1/Imagery/Map/Road?mapSize=550,550"&plotPoints&"&key=Your API Key Here"

Optional Functionality

At this point you will have a landing page which lists out all the office locations in a gallery to the left and plots them out on a map to the right as you can see below:

You can extend the functionality by making the Gallery items clickable so that when you select an item from the gallery, it goes to a landing page for that selected item with a map of the specific location and a link for directions like you see in the screenshot below:

If you want to build this out, create a new screen and insert a Form Control which is bound to that same SharePoint Office Locations list.  Set the Item Property of the Form Control to the Selected Item in your Locations Gallery. 

Next, Insert an image control to the right and set it’s image property to the following:

"https://dev.virtualearth.net/REST/v1/Imagery/Map/AerialWithLabels/"&NameOfYourGalleryHere.Selected.Address&"?mapSize=500,400&key=Your API Key"

That’s all that is needed to show multiple plot points.  If you’re interested in learning how to leverage Bing Maps inside your Modern SharePoint lists, be sure to check out my blog post on Displaying Bing Maps in SharePoint With Column Formatting.

A Different Approach

PowerApps recently released an experimental feature called Components.  Components enable you to create usable controls to add to your apps. I have created components for both the multiple plot point and single plot point maps which you can download on my Github: https://github.com/aprildunnam/PowerApps

To enable these Components features, click on the App Settings for your specific PowerApp, go to Advanced Settings and Toggle the Components option on:

Once you have the components functionality enabled, you can import a component by clicking the Components option and Import.  Locate to where you have the MSAPP file download and add it.  It will now show up under Components so you can add them to your app.