---
metadata:
  - name: generator
    content: Diplodoc Platform v5.39.1
alternate:
  - https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/dg/concepts/router/routePanel.md
  - https://yandex.com/dev/jsapi-v2-1/doc/ru/v2-1/dg/concepts/router/routePanel.md
---
> **Documentation Index:** Fetch the complete configuration index at https://yandex.com/dev/jsapi-v2-1/doc/en/llms.txt

# Routing panel

[Overview](#about)

[Adding the panel to a map](#add-panel)

[Configuring the routing panel](#routepanel-settings)

[Getting information about a created route](#get-route-info)

[Solving typical tasks](#faq)


## Overview {#about}

The routing panel is an interface control for users to set routes on the map. The panel can be used to enter the start and ending points of the route, choose the type of route, or remove the route from the map.

If the start and ending points are moved, the route is reset automatically.

{% include notitle [patner-code](../../_includes/router/multiRouter/partner-code-eeace3e7937c.md#map1) %}

Several optimal routes are built for the specified points. The fastest route is selected as the active route and shown in purple. Alternative routes are gray. All routes account for traffic.

The routing panel doesn't support intermediary points — routes can only have two points. If you need to build a route with three or more points, use the [multiRouter.MultiRoute](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/dg/concepts/router/multiRouter.md) class.

{% note alert %}

Routing requests are [fee-based](https://yandex.com/maps-api/products/js-api#tariffs).

{% endnote %}

## Adding the panel to a map {#add-panel}

The routing panel is implemented by the [control.RoutePanel](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/control.RoutePanel.md) class and accessible via the 'routePanelControl' key. You can add the panel to a map by using the `controls` field when creating a map:

```javascript
var myMap = new ymaps.Map('map', {
    center: [55.75, 37.57],
    zoom: 9,
    controls: ['routePanelControl']
});
  
/*
// The second way to add the panel to a map.
// Note: don't forget to delete 'routePanelControl'
// from the map's controls option.
var routePanelControl = new ymaps.control.RoutePanel();
myMap.controls.add(routePanelControl); 
*/
```

{% cut "View the complete example code" %}


```javascript
<meta charset="utf-8">

<div id="map" style="width:450px;height:300px"></div>

  
```


{% endcut %}

{% include notitle [patner-code](../../_includes/router/multiRouter/partner-code-eeace3e7937c.md#map2) %}

You can use the API to collapse the panel on the map. To do this, use the [control.RouteButton](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/control.RouteButton.md) control that is accessible via the 'routeButtonControl' key:

```javascript
var myMap = new ymaps.Map('map', {
    center: [55.75, 37.57],
    zoom: 9,
    controls: ['routeButtonControl']
});
  
/*
// The second way to add a routing button to a map.
// Note: don't forget to delete 'routeButtonControl'
// from the map's controls option.
var routeButtonControl = new ymaps.control.RouteButton();
myMap.controls.add(routeButtonControl); 
*/
```

{% cut "View the complete example code" %}


```javascript
<meta charset="utf-8">

<div id="map" style="width:450px;height:300px"></div>

  
```


{% endcut %}

{% include notitle [patner-code](../../_includes/router/multiRouter/partner-code-eeace3e7937c.md#map3) %}

## Configuring the routing panel {#routepanel-settings}

You can configure various settings for the routing panel. For example, you can set route points, select a routing type, or set the size of the panel on the map. Specific examples below show how to configure panel settings:

[Setting route points](#how-to-set-points)

[Selecting the routing type](#how-to-set-type)

[Building a route that can be used to order a taxi](#how-to-use-taxi)

[Setting the panel size and position](#how-to-set-position)

[Customizing the appearance of the route](#how-to-set-route-view)


For ways to accomplish other common tasks, see the section [Solving typical tasks](#faq).

## Setting route points {#how-to-set-points}

Use the `from`and `to` fields to set route points:

```javascript
var myMap = new ymaps.Map('map', {
    center: [55.753994, 37.622093],
    zoom: 9,
    controls: ['routePanelControl']
});

// Get a reference to the routing panel.
var control = myMap.controls.get('routePanelControl');

// Set states for the routing panel.
control.routePanel.state.set({
    // Address of the starting point.
    from: '16 Lva Tolstogo, Moscow',
    // Address of the ending point.
    to: 'Cheryomushki metro station, Moscow'
});
```

{% cut "View the complete example code" %}



```html
<meta charset="utf-8">

<div id="map" style="width:450px;height:300px"></div>


```


{% endcut %}

{% note alert %}

For points that are set as a string, requests will be sent to the Geocoder. Each point is counted as a separate request. In addition, enabling the [reverseGeocoding](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IMultiRouteParams.md#reverseGeocoding) option will also create extra requests to the Geocoder. Remember that geocoding requests are [fee-based](https://yandex.com/maps-api/products/js-api#tariffs).

{% endnote %}


Open the interactive example in the sandbox: [Route from a point on the map](https://tech.yandex.com/maps/jsbox/2.1/route_panel_control).

## Selecting the routing type {#how-to-set-type}

The routing type is set in the `type` field:

```javascript
// Get a reference to the panel.
var control = myMap.controls.get('routePanelControl');
    
control.routePanel.state.set({
    // For a list of all settings, see the <u />.
    // The default routing type
    type: "pedestrian", // walking
});

control.routePanel.options.set({
    // Routing types that will be available
    // for users to select.
    // In the example, you can build a driving
    // route for ordering a taxi and a walking route.
    types: {
        "pedestrian": true,
        "taxi": true
    }
}); 
```

{% cut "View the complete example code" %}


```html
<meta charset="utf-8">

<div id="map" style="width:450px;height:300px"></div>


```


{% endcut %}

## Building a route that can be used to order a taxi {#how-to-use-taxi}

The routing panel allows building routes for ordering a taxi. The map shows the driving directions and information about the trip using data from «Yandex Go» (duration and approximate cost). When the user clicks the **Order taxi** button, a [Yandex Go](https://taxi.yandex.ru/#index) page opens with the specified route.

{% include notitle [patner-code](../../_includes/router/multiRouter/partner-code-eeace3e7937c.md#map4) %}

To set a route with a taxi button, specify the «taxi» routing type:

```javascript
// Get a reference to the panel.
var control = myMap.controls.get('routePanelControl');

control.routePanel.options.set({
    // Routing types to show on the panel.
    // Users can switch between these types.
    types: {
       auto: true,
       pedestrian: true,
       // Add the «taxi» icon
       // to the panel.
       taxi: true
    }
});

control.routePanel.state.set({
    // Use the route with the taxi button
    // by default.
    type: "taxi",
    from: '16 Lva Tolstogo, Moscow',
    to: 'Cheryomushki metro station'
});
```

{% cut "View the complete example code" %}


```html
<meta charset="utf-8">

<div id="map" style="width:450px;height:300px"></div>

  
```


{% endcut %}

You can try out an [interactive example](https://tech.yandex.ru/maps/jsbox/2.1/multiroute_taxi) in the sandbox.

## Setting the panel size and position {#how-to-set-position}

You can set the routing panel size and where to place it on the map (for example, you can pin it to the upper-right corner of the map). Settings are listed in the [reference guide](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/control.RoutePanel.md#param-parameters.options).

Note that you can also customize the behavior of the panel, such as whether it will automatically get the focus when added to the map (the [autofocus](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/control.RoutePanel.md#param-parameters.options.autofocus) option).

The position and behavior settings for the panel are configured in the [options](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/control.RoutePanel.md#properties-summary) field:

```javascript
// Get a reference to the control.
var control = myMap.controls.get('routePanelControl');

control.options.set({
    // For the full list of options, see the <u>reference guide</u>.   
    maxWidth: '180px',
    float: 'right'
});

/*
// Alternative method for configure panel settings: 
// via the control.RoutePanel constructor when creating the panel. 
var routePanelControl = new ymaps.control.RoutePanel({
    options: {
        maxWidth: '180px', 
        float: 'right'
    }
});

// Add the panel to the map.
// Note: don't forget to delete 'routePanelControl'
// from the map's controls option.
myMap.controls.add(routePanelControl);
*/
```

{% cut "View the complete example code" %}


```html
<meta charset="utf-8">

<div id="map" style="width:450px;height:300px"></div>


```


{% endcut %}

For solutions to other common problems, see the [FAQ](#faq) section.

## Customizing the appearance of the route {#how-to-set-route-view}

You can use the API to change the appearance of a route. For example, you can set the color, width, or type of route paths, and set custom icons for placemarks.

Use the [multiRouter.MultiRoute](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/multiRouter.MultiRoute.md) object to change the route's appearance. First [get a reference](#get-route-info) to this object and then [set the appearance](#how-to-set-view) using the `set()` method.

## Getting information about a created route {#get-route-info}

Information about created routes is stored in a [multiroute](*multiroute). To get a reference to this object, use the [getRouteAsync()](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IRoutePanel.md#getRouteAsync) method:

```javascript
// Get a reference to the panel.
var control = myMap.controls.get('routePanelControl');
  
// Get a multiroute.
var multiRoutePromise = control.routePanel.getRouteAsync();
```

The `getRouteAsync()` method returns a `Promise` that is resolved by the [multiRouter.MultiRoute](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/multiRouter.MultiRoute.md) object or dismissed with an error message. The multiroute will contain references to the created routes.

The following example shows how to get information about an active route: length, travel time, and information about closed sections of road:

```javascript
multiRoutePromise.then(function(multiRoute) {
    // Subscribe to the multiroute update event.
    multiRoute.model.events.add('requestsuccess', function() {
        // Get a reference to the active route.
        var activeRoute = multiRoute.getActiveRoute();
        // When the panel is added to the map, it
        // creates a route with an initially empty geometry. 
        // When the user selects the start and ending points,
        // the route is recalculated with a non-empty geometry.
        // In order to avoid errors, we must add a check
        // to make sure that the route is not empty.
        if (activeRoute) {
            // Output information about the active route.
            console.log("Distance: " + activeRoute.properties.get("distance").text);
            console.log("Travel time: " + activeRoute.properties.get("duration").text);
        }
    });
}, function (err) {
  console.log(err); 
});  
```

You can also use the [multiRouter.MultiRoute](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/multiRouter.MultiRoute.md) object to change the appearance of the route (for example, change the line color or width):

```javascript
multiRoute.options.set({
    // Color of the starting point placemark.
    wayPointStartIconFillColor: "#B3B3B3",
    // Color of the ending point placemark.
    wayPointFinishIconFillColor: "blue",     
    // Appearance of lines (for all routes).
    // To set the appearance of lines in the active route,
    // use the 'routeActive' prefix.
    routeStrokeColor: "00FF00"
});   
```

{% cut "View the complete example code" %}


```html
<meta charset="utf-8">

<div id="map" style="width:450px;height:300px"></div>

  
```


{% endcut %}

To see how to get route segments and waypoints, go to [Working with routes programmatically](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/dg/concepts/router/multiRouter.md).

> ## Solving typical tasks
> 
> {% cut "How do I set a route for three or more points?" %}
> 
> The routing panel allows you to set routes with **only two points**. To build more complex routes, use the [multiRouter.MultiRoute](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/dg/concepts/router/multiRouter.md) class.
> 
> {% endcut %}
> 
> {% cut "How can I set a route from a user's location?" %}
> 
> To determine the user's location, use the [geolocation.get()](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/dg/concepts/geolocation.md) method. The method works asynchronously. It returns a `Promise` object, which is resolved by the [GeoObjectCollection](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/GeoObjectCollection.md) collection. The collection contains the coordinates and address of the user's current location.
> 
> ```javascript
> var myMap = new ymaps.Map('map', {
>     center: [55.751574, 37.573856],
>     zoom: 9,
>     controls: ['routePanelControl']
> });
> // Get a reference to the routing panel.
> var control = myMap.controls.get('routePanelControl');
>     
> // Detect the user's location.
> var location = ymaps.geolocation.get();
> // The geolocation.get() method returns a Promise, which
> // is resolved by <u />.
> // A reference to this collection is available in the res.geoObjects field.
> location.then(function (res) {
>     // Get the address of the user's location.
>     var userTextLocation = res.geoObjects.get(0).properties.get('text');
>     control.routePanel.state.set({
>         // Set the user's location as the starting point 
>         // of the route.
>         from: userTextLocation,
>         // Address of the ending point.
>         to: '16 Lva Tolstogo Moscow'
>     });
> });
> ```
> 
> {% endcut %}
> 
> {% cut "How can I hide labels on route markers?" %}
> 
> To hide labels, disable the [reverseGeocoding](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IMultiRouteParams.md#reverseGeocoding) option. However, if you programmatically set route points, they **must be set using coordinates**.
> 
> The `reverseGeocoding` option is a flag that allows the API to perform reverse geocoding. This means that for points that are set using coordinates, the API sends requests to the Geocoder to determine their address from the coordinates. The received address is automatically displayed in labels as well as in the text field in the panel.
> 
> If you disable the `reverseGeocoding` option, reverse geocoding will not be used and labels will be hidden.
> 
> ```javascript
> var myMap = new ymaps.Map('map', {
>     center: [55.751574, 37.573856],
>     zoom: 9,
>     controls: ['routePanelControl']
> });
> 
> // Get a reference to the
> // routing panel.
> var control = myMap.controls.get('routePanelControl');
> 
> control.routePanel.options.set({
>     reverseGeocoding: false
> });
> 
> control.routePanel.state.set({
>     from: [55.734470, 37.58000],
>     to: [55.734336, 37.51218]
> });
> ```
> 
> 
> ![](../../_images/no-caption.png)
> 
> {% endcut %}
> 
> {% cut "How do I set my own icon for route markers?" %}
> 
> Example:
> 
> ```javascript
> var myMap = new ymaps.Map('map', {
>     center: [55.751574, 37.573856],
>     zoom: 9,
>     controls: ['routePanelControl']
> });
> // Get a reference to the route panel.
> var control = myMap.controls.get('routePanelControl');
> 
> // Get a multiroute.
> var multiRoutePromise = control.routePanel.getRouteAsync();
> 
> multiRoutePromise.then(function(multiRoute) {
>   // Change the route appearance.
>   // All options are listed in the <u>reference guide</u>.
>   multiRoute.options.set({
>     // Set a custom image
>     // for the ending point.
>     wayPointFinishIconLayout: "default#image",
>     wayPointFinishIconImageHref: "images/sokolniki.png",
>     wayPointFinishIconImageSize: [30, 30],
>     wayPointFinishIconImageOffset: [-15, -15],
>   });    
> }, function (err) {
>   console.log(err); 
> });
> ```
> 
> 
> ![](../../_images/custom-view.png)
> 
> {% endcut %}
> 
> {% cut "How do I set a custom route balloon layout?" %}
> 
> See the [example](https://tech.yandex.com/maps/jsbox/2.1/multiroute_custom_balloon_layout).
> 
> {% endcut %}
> 
> {% cut "How can I disable the ability for users to set and change route points?" %}
> 
> To prevent users from changing the route points on the map, set the `toEnabled` and `fromEnabled` options to `false`:
> 
> ```javascript
> var myMap = new ymaps.Map('map', {
>     center: [55.751574, 37.573856],
>     zoom: 9,
>     controls: ['routePanelControl']
> });
> 
> // Get a reference to the routing panel.
> var control = myMap.controls.get('routePanelControl');
> 
> // Set the states for the routing panel.
> control.routePanel.state.set({
>     // Flag that prevents users from changing
>     // the address of the starting point in the text box.
>     fromEnabled: false,
>     // Flag that prevents users from changing
>     // the address of the ending point in the text box.
>     toEnabled: false,
>     from: 'Tushinskaya ulitsa',
>     to: '16 Lva Tolstogo Moscow'
>     });
> });
> ```
> 
> {% endcut %}
> 
> {% cut "I need to calculate the cost of delivery based on a route. How can I do this?" %}
> 
> Take a look at the interactive example in the sandbox: [Calculating delivery costs](https://tech.yandex.com/maps/jsbox/2.1/deliveryCalculator).
> 
> {% endcut %}
> 
> {% cut "How do I disable auto focus on the panel?" %}
> 
> To disable auto focus on the panel, use the [autofocus](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/control.RoutePanel.md#param-parameters.options.autofocus) option:
> 
> ```javascript
> var myMap = new ymaps.Map('map', {
>     center: [55.751574, 37.573856],
>     zoom: 9,
>     controls: ['routePanelControl']
> });
> 
> var control = myMap.controls.get('routePanelControl');
> 
> control.options.set({
>     autofocus: false
> });
> ```
> 
> ![](../../_images/small-line.png)
>
>
> {% endcut %}
> 
> {% cut "How can I set a route that accounts for traffic?" %}
> 
> The routing panel sets routes with traffic allowances by default. You can't disable traffic allowances at this time.
> 
> {% endcut %}
> 
> {% cut "How do I programmatically reverse the route points?" %}
> 
> Use the `switchPoints()` method to reverse the route points.
> 
> ```javascript
> var control = myMap.controls.get ('routePanelControl');
> // Set the route points.
> control.routePanel.state.set({
>     from: 'Tushinskaya ulitsa',
>     to: '16 Lva Tolstogo Moscow',});// Reverse the points.control.routePanel.switchPoints();
> ```
> 
> You can try out an [interactive example](https://tech.yandex.com/maps/jsbox/2.1/route_panel_control) in the sandbox.
> 
> {% endcut %}
> 
> {% cut "How can I hide the button that reverses the starting and ending points of the route?" %}
> 
> To hide the button, set the `allowSwitch` option to `false`:
> 
> ```javascript
> var myMap = new ymaps.Map('map', {
>     center: [55.753994, 37.622093],
>     zoom: 9,
>     controls: ['routePanelControl']
> });
> 
> // Get a reference to the routing panel.
> var control = myMap.controls.get('routePanelControl');
>   
> control.routePanel.options.set({
>     // All the options are listed in the <u />.
>     allowSwitch: false 
> }); 
> ```
> 
> {% endcut %}
> 
> {% cut "How do I set the panel title?" %}
> 
> ```javascript
> var myMap = new ymaps.Map('map', {
>     center: [55.753994, 37.622093],
>     zoom: 9,
>     controls: ['routePanelControl']
> });
> 
> // Get a reference to the routing panel.
> var control = myMap.controls.get('routePanelControl');
>     
> control.options.set({
>     // All the options are listed in the <u>reference guide</u>.
>     // Set the panel title.
>     title: 'Panel title',
>     // Enable displaying the title.
>     showHeader: true
> });  
> ```
> 
> Take a look at [example](https://tech.yandex.com/maps/jsbox/2.1/multiroute_taxi) in the sandbox.
>
> {% endcut %}

[*multiroute]: _Multiroute_ — A basic object for working with routing. It contains information about created routes: the geometry, pixel data, travel time, and so on. The multiroute processes this data and creates a view to display the routes on the map.