Show A Route On A Power Apps Map

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"

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"

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
    }
)

Write this code in the RouteWaypoints_Latitude of the map…

"Latitiude"

and put this code in the RouteWaypoints_Longitude on the map.

"Longitude"

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

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"
        )
    )
)

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

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"
    )
)

We are now finished building the Route Finder app!

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.