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

25 Comments
Oldest
Newest
Inline Feedbacks
View all comments
Tony Pounder
2 years 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
2 years ago

Thanks Matthew

Emilio Roqueta
Emilio Roqueta
2 years ago

Great post Matthew!

Dorinda Reyes
Dorinda Reyes
2 years 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
2 years 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
2 years 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
2 years ago

I love it. Thanks, Matthew

James Bolton
2 years 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
2 years ago

Great Article about Map and routing

Tim McGuire
2 years 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
2 years 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
2 years 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?

Divesh Gupta
Divesh Gupta
1 year ago

Hi,

I have a drop down with street addresses (complete address including city, state and zip). I want that when user selects an address, it goes as input to the address input field (destination). How can i do that?

Jordy van Veen
Jordy van Veen
1 year ago

Hi Matthew, amazing post! Maybe a bit of a stupid quesiton, but where am I able to find the RouteWaypoints_Longitude and RouteWaypoints_Latitude?

Mike
Mike
1 year ago

Matthew,

it appears that something may have changed that would cause this to maybe not work now? Is there any way you could help me? I am trying to calculate a distance in hours and pop that number into a calculator of mine. But after completing your first steps i can not get the route to show.

Antonie
Antonie
1 year ago

Exactly what I was looking for. I have a question on this. Lets for instance say I am looking to route to an object and that object has a name in a sql database. This object also has a latitude and longitude field, thus I want the destination location to match the lat and long field in the table and add that as my destination. Do you perhaps have any idea how you would go about doing that?

Ulrikke Akerbæk
11 months ago

Hi Matthew. Love the blog post – as always, it’s quality!

From what I can tell I should be able to create a shape in the map and collect only the points that are within the area of the shape. Do you have any more information or documentation on how to use the Area and Perimeter properties for this?

All the best,
Fangirl,
Ulrikke