Show A Route On A Power Apps Map

Imported reference from Matthew Devaney's blog for learning purposes. Original: https://www.matthewdevaney.com/show-a-route-on-a-power-apps-map/. Author: Matthew Devaney.

Show A Route On A Power Apps Map Posted by - Matthew Devaney on - November 7, 2021 32 Comments

When Power Apps interactive maps launched at the start of this year it was a huge improvement over Bing’s static maps . However, a key feature was missing – the ability to draw a route between two points on a map. Now we have it! Power Apps maps have reached their full-potential and can now show a route, include multiple waypoints, optimize a route between those waypoints and much more.

In this article I will show you how to draw a route on a Power Apps map. Table of Contents Introduction: The Route Finder App Create A Map Control

Use Address Input Controls To Capture Starting Location & Destination

Draw A Route On The Map Between Two Points

Display The Estimated Travel Time For A Route

Show The Distance Between Starting Point & Destination Introduction: The Route Finder App

The Route Finder App is used by delivery drivers at a courier company to get directions. Drivers input a starting and point and a destination then the map displays the shortest route between both points. Create A Map Control

In Power Apps Studio create a new tablet app from blank then insert a label with a blue fill on the left-side of the screen to act as a menu. Make another label with the text “Route Finder” and place it at the top of the menu.

Then click on the media dropdown and select the Map control.

Position the map so it fills all of the remaining whitespace

Use Address Input Controls To Capture Starting Location & Destination

A delivery driver inputs a starting point and a destination then a route appears on the map. Calculating the route requires the latitude & longitude of the starting point and destination. The simplest way to get this is by using the Address Input control.

Place an address input control to capture the starting point inside the menu and insert a new home icon beside it.

Use this code in the HintText property of the address input to describe its purpose. "Choose Starting Point" Code language: JSON / JSON with Comments ( json )

We also need another address input to capture the destination. Position a new address input underneath the previous one and put a waypoint icon beside it.

Write this code in the HintText property of the 2nd address input to describe its purpose. "Choose Destination" Code language: JSON / JSON with Comments ( json )

Draw A Route On The Map Between Two Points

A line must be displayed on the map to show the best route between the starting point and destination once both address inputs are filled-in.

Select the map control and change the Enable Routing property to true. This setting tells the map whether it should attempt to draw a route line.

Use this code in the map’s RouteWaypoints_Items property to define the starting point and destination. Each waypoint must have a name, latitude and longitude. Table ( {

Name : add_StartLocation.UserInput, Latitude: add_StartLocation.SelectedLatitude, Longitude: add_StartLocation.SelectedLongitude }, {

Name : add_EndLocation.UserInput, Latitude: add_EndLocation.SelectedLatitude, Longitude: add_EndLocation.SelectedLongitude } ) Code language: CSS ( css )

Write this code in the RouteWaypoints_Latitude of the map… "Latitiude" Code language: JSON / JSON with Comments ( json )

and put this code in the RouteWaypoints_Longitude on the map. "Longitude" Code language: JSON / JSON with Comments ( json )

A route will now show on the map between the starting point and the destination.

Display The Estimated Travel Time For A Route

The Route Finder app shows delivery drivers an estimated travel time between two points on the map. Insert a clock icon into the menu and then place a label beside it.

Use this code in the Text property of the label to show the travel time in seconds. The travel time is automatically computed by the map when the route is created. map_Routes .RouteDirection .TravelTimeInSeconds Code language: CSS ( css )

Travel-time can be shown in a more user-friendly manner if we convert seconds to hours and minutes.

Re-write the code in the Text property of the label to format travel-time into hours and minutes. With ( { varTravelTime : Time ( 0 ,

0 , map_Routes.RouteDirection.TravelTimeInSeconds ) }, With ( {

varHours : Hour (varTravelTime), varMinutes: Mod ( Minute(varTravelTime), 60 ) }, Coalesce ( Concatenate ( If ( varHours <> 0, Text ( varHours , "0" ) & " hr " ), If ( varMinutes <> 0, Text (

varMinutes , "0" ) & " min " ) ), "0 hr " ) ) ) Code language: CSS ( css )

Show The Distance Between Starting Point & Destination

Delivery drivers also want to see the distance of the route in the Route Finder app. Insert a cars icon into the menu and then place a label beside it.

Put this code in the Text property of the label to display the route length in meters. map_Routes .RouteDirection .LengthInMeters Code language: CSS ( css )

Meters is not a standard unit-of-measure for distance when driving. Instead, we want to show kilometers.

Re-write the code in the Text property of the label to convert meters to kilometers and apply number formatting. With( {

varLengthMeters : map_Routes.RouteDirection.LengthInMeters }, If( varLengthMeters> 1000000 , Text(varLengthMeters/ 1000 , "#,##0" )& " km" , varLengthMeters> 0 , Text(varLengthMeters/ 1000 , "#,##0.0" )& " km" , Text(varLengthMeters, "0" )& " m" ) ) Code language: JavaScript ( javascript )

We are now finished building the Route Finder app! Did You Enjoy This Article? 😺

Subscribe to get new Copilot Studio articles sent to your inbox each week for FREE Enter your email address Sign Me Up Questions?

If you have any questions or feedback about Show A Route On A Power Apps Map please leave a message in the comments section below. You can post using your email address and are not required to create an account to join the discussion. Address Input Control Map Control Matthew Devaney M365 Copilot Power Apps

How To Create Copilot Custom UI Widgets In Power Apps