Route Optimization in Power Apps w/ Bing Maps

Will Cauthen

Microsoft Power Apps is an incredibly powerful and flexible business tool. In this write up, we will be reviewing the Map feature of Power Apps, specifically the route optimization side of it. We will go through building a demo app, step by step.

For our use case, we will optimize the inspection route for daily electrical inspections in Delaware County. There are dozens of other use cases for improving efficiency and saving time for service based businesses in Power Apps, however we will start with this one.

Bing Maps Connector

To get started, we first need to get a Bing Maps API key so we can utilize the BingMaps connector in our Power App. You can go here to sign up for a free account. The first 125,000 API calls are free. One you have a key, add the connector in your power app and enter your key.

Page Setup

In our Power app, set the OnVisible of the main screen to:

 Set(showroute, false); Set(showmap, false)

Create three buttons. Load Sample Data, Show Route Details, Maximize Map. For properties, set the following:

Show Route Details:

OnSelect: Set(showroute, !showroute)
Text: If(showroute = false, "Show Route Details", "Hide Route Details")

Maximize Map:

OnSelect: Set(showmap, !showmap)
Text: If(showmap = false, "Maximize Map", "Minimize Map")

Create a blank gallery and set the template size to 40.. We will use this for our sample data. For gallery placement, button placement, and map placement, refer to the image at the top.

Sample Data

For our demo app, we first need to create some sample data. Reference the demo layout at the top of this post. Add the below ClearCollect to the ‘Load Sample Data’ button’s OnSelect property.

Now, we need to get the latitudes and longitudes for the addresses so we can plot them on our map. Add this in the button’s OnSelect, after the sample data. An easy way to do this is to just create another collection from our sample data collection, utilizing AddColumns and the BingMaps connector.

You could use ForAll, Patch w/ a Lookup however that would be more applicable to update several records in a database table outside of the local app.

Configure the Map

Add a Map to the Power App. To start, update the map properties to the following:

DefaultZoomLevel: 10
ShowRoutePins: true
RouteWaypoints_Items: col__addresses
RouteWayPointsLabels: "Permit"
RouteWaypointsLatitudes: "Latitude"
RouteWaypointsLongitudes: "Longitude"
RouteWaypointsAddresses: "Address"
// if maximize map is selected, enlarge the map
X: If(showmap = true, 25, 708)
Width: If(showmap = true, 1325, 627)

Now we can visualize our addresses, route optimized. It’s important to understand that the route will always start with the first record of the collection and the last record. Anything in between will be set in the the most optimal order. In this use case, the inspector will start their journey at the county building and end at the county office. What if we had a use case where it was more optimal to start or end the journey at the employee’s home?

Routing Information

Add a Data table and update the following properties:

Items: Map1.RouteDirection.RouteLegs
Visible: showroute

Add the following data fields: Index, StartAddress, StartLabel, EndAddress, EndLabel, LengthInMeters, TravelTimeInSeconds. The column names can be updated in the FieldDisplayName property of each column.

Now we can see our route data. Let’s do a few tweaks.

Set Start Address to:

 LookUp(col_addresses, Permit = ThisItem.StartLabel,Address) 

Set End Address to:

LookUp(col_addresses, Permit = ThisItem.EndLabel,Address) 

Set Distance to:

RoundUp(ThisItem.LengthInMeters/1609.34,2) & " miles" 

Set Travel Time to:

RoundUp(ThisItem.TravelTimeInSeconds/60,0) & " minutes"

Set the FieldDisplayName of Distance to:

 //this converts meters to miles 
RoundUp(ThisItem.LengthInMeters/1609.34,2) & " miles"

Set the FieldDisplayName of Travel Time to:

// this gathers the total minutes and converts it to hours and minutes format
"Travel Time (" & RoundDown(RoundUp(Sum(Map1.RouteDirection.RouteLegs ,TravelTimeInSeconds)/60,0)/60,0) & "hrs " & (((RoundUp(Sum( Map1.RouteDirection.RouteLegs,TravelTimeInSeconds)/60,0)/60) - RoundDown(RoundUp(Sum(Map1.RouteDirection.RouteLegs,TravelTimeInSeconds)/60,0)/60,0))*60) & " mins)"

Ending Thoughts

That’s our demo app. The use cases are endless with the Maps feature, especially for service based businesses. A few ideas include:

  • Visualize service appointments
  • Define Sales Territories & Lead assignment based on location
  • Build a route by selecting or removing addresses
  • Group service jobs by employee or team
  • Optimize deliveries by time or miles
  • Visualize lead sources
  • Visualize contracts/services sold
  • Calculate delivery fees in a quote

If you have any questions, drop a comment or contact me here. Thanks for reading! Don’t hesitate to reach out – I’m here to help turn your project ideas into a reality and guide you through the app-building process.

Subscribe
Notify of
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Guid Cannopi
1 year ago

This is great. Very good article!