> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/flow/tutorials/components/map/plan-a-route.md).

# Plan a Route from the Map

Let a field rep pick tomorrow's accounts on an Avonni Map in a screen flow, optimize the stop order, calculate the route and start navigation.

A field rep in San Francisco has five accounts to visit tomorrow. In a screen flow, she clicks them on the map, lets the route panel put them in the best driving order, checks the arrival time at each stop, then opens the first one in Google Maps or Waze. The first steps set up the map, the rest follow what the rep does on the screen.

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FeJjW6nTqx26tDhsrknsy%2Fmaptuto-plan-a-route-result.png?alt=media" alt="A San Francisco map with five numbered stops joined by a driving route. The Route panel on the right lists the five accounts in visiting order, with an arrival time from the second stop on, under the day&#x27;s departure, arrival and total duration."><figcaption><p>Five visits, optimized and calculated, with an arrival time at each stop after the first.</p></figcaption></figure>

## Before you start

* Routing is enabled for the org, once, by an administrator: see [Enable Map Routing](/flow/flow-components/map/enable-map-routing.md). Until then, the **Route** group of the Map shows a notice instead of its settings.
* A screen flow with an **Avonni Map** that shows your Accounts, with **Type** set to **Leaflet** (routing does not exist on Google Maps). See [Map](/flow/flow-components/map.md) for the data source.
* Arrival times at each stop need Mapbox as the routing provider. With OpenRouteService the route is drawn and timed leg by leg, without departure or arrival times.

## Steps

{% stepper %}
{% step %}

### Map the fields the route panel shows

In the **Properties** tab, open **Data Mappings**:

* **Title**: **Account Name**. It names each stop in the route panel and in the exported file.
* **Location**: **Latitude** to Billing Latitude, **Longitude** to Billing Longitude, and **City** to Billing City. The city appears under each stop.
  {% endstep %}

{% step %}

### Turn on the route panel

Open the **Route** group:

1. Turn on **Show Route Panel**. A **Route** button appears on the map, and each marker popup gets an **Add Stop** button.
2. Turn on **Opened by Default**, so clicks on markers add stops as soon as the screen opens.
3. Leave **Position** on **Right**. Turn on **Display Overlaid on the Map** if the screen is narrow.

Leave **Disable Multi-Stop Selection** off, so the rep keeps the rectangle and lasso tools that add several stops at once.
{% endstep %}

{% step %}

### Save the flow and run it

Save, then run the flow. The next steps happen on the screen, as the rep.
{% endstep %}

{% step %}

### Pick the stops

Click the five accounts on the map, or click **Add Multiple Stops** and draw a rectangle or a lasso around them. Each stop takes a number on the map and a row in the panel, up to 25 stops.

Under **Starting point**, search for an account on the map or choose **My position**.
{% endstep %}

{% step %}

### Optimize the order and set the day

1. Click **Optimize**: the stops are reordered for the shortest driving time. The starting point, or the first stop when there is none, stays first.
2. Open **Settings** to set the day: **Visit duration (minutes)**, **Lunch start** and **Lunch end**, **End of day**, and with Mapbox a **Timing** such as **Leave at** 8:00 a.m. tomorrow. The same panel can avoid ferries, highways or tolls.
3. Drag a stop to move it by hand. **Undo**, **Redo** and **Clear** sit at the top of the panel.
   {% endstep %}

{% step %}

### Calculate the route

Click **Calculate route**. The map draws the driving route, and the panel shows the departure, the arrival and the total time of the day, visits and lunch included. A stop reached after **End of day** turns orange.

To take the plan along, click the download button beside **Calculate route**: it saves the route as a CSV file with a Google Maps and a Waze link for each stop.
{% endstep %}

{% step %}

### Open navigation

Open the menu of the first stop and choose **Google Maps** or **Waze**. Navigation starts with that stop as the destination. Each stop opens one at a time, from its own menu.

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FfTIZ1D2IBPsxkiAf1Rzy%2Fmaptuto-plan-a-route-stop-menu.png?alt=media" alt="The Route panel of a calculated route with the menu of the first stop open on three actions: Remove, Google Maps and Waze." width="320"><figcaption><p>Each stop opens in Google Maps or Waze from its own menu.</p></figcaption></figure>
{% endstep %}
{% endstepper %}

The [Map](/flow/flow-components/map.md) reference holds every route setting, the CSV columns, and how **Optimize** chooses the order on each provider.

## Troubleshooting

<details>

<summary>The Route group shows a notice instead of its settings</summary>

Routing is not enabled yet. An administrator enables it once from the **Settings** tab of the **Avonni** app (App Launcher): see [Enable Map Routing](/flow/flow-components/map/enable-map-routing.md).

</details>

<details>

<summary>There is no Route button on the map</summary>

Check that **Type** is **Leaflet** and that **Show Route Panel** is on.

</details>

<details>

<summary>The stops are joined by straight lines after Calculate route</summary>

The routing provider could not be reached or its quota is spent. The panel says which. The stop order is still valid.

</details>

<details>

<summary>No Timing setting and no arrival times</summary>

OpenRouteService is the active provider. It has no traffic model, so it offers no departure time. Switch to Mapbox in the routing settings if the rep needs arrival times.

</details>

## Related tutorials

* [Add Search and Filters to a Map](/flow/tutorials/components/map/add-search-and-filters.md): narrow the map to the right accounts before picking stops.
* [Interactive Map Filtering](/flow/tutorials/projects/interactive-map-filtering.md): count the accounts and revenue in the area the rep is looking at.
* [Drag a Pin to Update a Location](/flow/tutorials/components/map/drag-a-pin-to-update-a-location.md): fix a misplaced account before routing to it.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.avonnicomponents.com/flow/tutorials/components/map/plan-a-route.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.