Show A Route On A Power Apps Map

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.

Matthew Devaney

Subscribe
Notify of
guest
19 Comments
Oldest
Newest
Inline Feedbacks
View all comments
Tony Pounder
9 months ago

Nice post. I’m just about to have a go with this control in a development – can this be used to plot a number of waypoints on a single route? Can we use different colours for the pages?

Tony Pounder
9 months ago

Thanks Matthew

Emilio Roqueta
Emilio Roqueta
9 months ago

Great post Matthew!

Dorinda Reyes
Dorinda Reyes
9 months ago

This post came along at the most perfect time! however I need us mileage not kilometers. How do I convert that?

Tobias Friedrich
Tobias Friedrich
8 months ago

Hello Matthew. Your Post helped me a lot but raised further questions, but I can’t find anything in the web regarding my “problem”.
Maybe you know the answer:

  1. I know that the Map Control can activate Truck-Routing, but I can’t enter specifics about length, width and weight about my trucks. Is it possible to enter those details too when it comes to Routing?
  2. Do you know if it is possible to activate the Route Range Selector for the Map Control?
Tobias Friedrich
Tobias Friedrich
8 months ago

Hey Matthew. Thx for your answer!

A Route Range Selector lets you drop a pin and define how far you want to travel for e.g. 15 minutes.
Maps will then show you a radius of how far you can travel with your car, truck, bicycle etc.
Here is a sample from Azure Maps: https://azuremapscodesamples.azurewebsites.net/Controls/Select%20shapes%20with%20selection%20control.html

Necdet Saritas
Necdet Saritas
8 months ago

I love it. Thanks, Matthew

James Bolton
8 months ago

Awesome post Matthew, this will make some of our app’s a lot simpler. Had no idea they included the Address Input option now

Kamesh
Kamesh
8 months ago

Great Article about Map and routing

Tim McGuire
7 months ago

Nice post, and thanks! I’d like to be able to output the map, with the route, as a static image. In my case, I want it as an image for receipt purposes.
Any ideas on how to do that?
I could see lots of reasons to be able to output the map, basically the current view, as an image…

B K
B K
6 months ago

This was very helpful! I do have a question about whether its possible to show route options or not. Bing Maps gives you the top 3 suggestedroutes and selects the shortest route (by time) by default. It would appear the Bing Maps connector GetRoutes() function also automatically defaults to the shortest route (by time). Is it possible somehow to display alternative routes in the app and allow users to select from those options (the date point I’m wanting to collect is distance between 2 points)? Or if that’s not possible, it is possible to adjust the auto-selected route generated by the GetRoutes() function to select the route based on shortest route by distance rather than time?

PeterTayo
PeterTayo
4 months ago

Wonderful Post
I have coordinates already stored in a table for different customers
I want the app to pop customer details as I approach the customer premise
Is that possible with this?