---
metadata:
  - name: generator
    content: Diplodoc Platform v5.39.1
alternate:
  - https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/control.RoutePanel.md
  - https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/control.RoutePanel.md
---
> **Documentation Index:** Fetch the complete configuration index at https://yandex.ru/dev/jsapi-v2-1/doc/en/llms.txt

# control.RoutePanel

Extends [IControl](https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IControl.md), [ICustomizable](https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/ICustomizable.md).

The Route Panel control. The key of the control in the storage [control.storage](https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/control.storage.md) — "routePanelControl".

[Constructor](#constructor-summary) | [Fields](#properties-summary) | [Events](#events-summary) | [Methods](#methods-summary)

## Constructor {#constructor-summary}

```javascript
control.RoutePanel([parameters])
```

**Parameters:**

#|
|| **Parameter** | **Default value** | **Description**  ||
|| [`parameters`](#param-parameters) | — | Type: Object

Control parameters. ||
|| [`parameters.options`](#param-parameters.options) | — | Type: Object

Control options. Use prefix 'routePanel' to configure underlying [IRoutePanel](https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IRoutePanel.md) options. 'routePanelAdjustMapMargin' option is set to true by default. ||
|| [`parameters.options.autofocus`](#param-parameters.options.autofocus) | true | Type: Boolean

Whether panel must automatically gain focus after it was added to map. ||
|| [`parameters.options.float`](#param-parameters.options.float) | "left" | Type: String

The side to which you want to align the control. Can take three values: "left", "right" or "none". If set to "left" or "right", the controls are arranged one by one, starting from the left or right edge of the map, respectively. If set to "none", the controls are positioned according to the values of the left, right, bottom and top options, relative to the boundaries of the map. See also the description of the position option. ||
|| [`parameters.options.floatIndex`](#param-parameters.options.floatIndex) | 0 | Type: Number

The priority of the control positioning. The element with highest priority is positioned closer to the map boundary that is specified in the float property. Does not work with float = "none". ||
|| [`parameters.options.maxWidth`](#param-parameters.options.maxWidth) | '210px' | Type: String

Specifies CSS width of popup. Width is restricted by 176px below and 400px above. ||
|| [`parameters.options.position`](#param-parameters.options.position) | — | Type: Object

Object describing the position of a control. ||
|| [`parameters.options.position.bottom`](#param-parameters.options.position.bottom) | — | Type: Number\|String

Position relative to the bottom edge of the map. ||
|| [`parameters.options.position.left`](#param-parameters.options.position.left) | — | Type: Number\|String

Position relative to the left edge of the map. ||
|| [`parameters.options.position.right`](#param-parameters.options.position.right) | — | Type: Number\|String

Position relative to the right edge of the map. ||
|| [`parameters.options.position.top`](#param-parameters.options.position.top) | — | Type: Number\|String

Position relative to the top edge of the map. ||
|| [`parameters.options.showHeader`](#param-parameters.options.showHeader) | false | Type: Boolean

Whether to show header. ||
|| [`parameters.options.title`](#param-parameters.options.title) | 'Routes' | Type: String

Title to show at the top of the panel. Visible only if showHeader option is true. ||
|| [`parameters.options.visible`](#param-parameters.options.visible) | true | Type: Boolean

Indicates if the control is displayed. ||
|| [`parameters.state`](#param-parameters.state) | — | Type: Object

Object describing the state of a control. ||
|#


**Examples:**

**1.**

```javascript
// Example 1.
// Adding a route panel control to the map.
myMap.controls.add('routePanelControl')
```

**2.**

```javascript
// Example 2.
// Creating 300px-wide route panel with header with filled starting point.
myMap.controls.add('routePanelControl', {
    maxWidth: 300,
});
var routePanel = myMap.controls.get('routePanelControl').routePanel;
routePanel.options.set('adjustMapMargin', true);
routePanel.state.set({
    fromEnabled: false,
    from: "moscow",
    to: "saint petersburg",
    type: "auto"
});
```

## Fields {#properties-summary}

#|
|| **Name** | **Type** | **Description** ||
|| [events](https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IEventEmitter.md#events) | [IEventManager](https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IEventManager.md)| Event manager.

Inherited from [IEventEmitter](https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IEventEmitter.md#events). ||
|| [options](https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IControl.md#options) | [IOptionManager](https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IOptionManager.md)| Options manager.

Inherited from [IControl](https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IControl.md#options). ||
|| [routePanel](https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/control.RoutePanel.md#routePanel) | [IRoutePanel](https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IRoutePanel.md)| Route panel. ||
|#

## Events {#events-summary}

#|
|| **Name** | **Description** ||
|| [optionschange](https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/ICustomizable.md#event-optionschange)| Change to the object options.

Inherited from [ICustomizable](https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/ICustomizable.md#event-optionschange). ||
|| [parentchange](https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IChild.md#event-parentchange)| The parent object reference changed.

Data fields:

- oldParent - Old parent.
- newParent - New parent.

Inherited from [IChild](https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IChild.md#event-parentchange). ||
|#

## Methods {#methods-summary}

#|
|| **Name** | **Returns** | **Description** ||
|| [getParent](https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IControl.md#getParent)() | [IControlParent](https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IControlParent.md)\|null
| Returns link to the parent object, or null if the parent element was not set.

Inherited from [IControl](https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IControl.md#getParent). ||
|| [setParent](https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IControl.md#setParent)([parent](https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IControl.md#setParent-param-parent)) | [IChildOnMap](https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IChildOnMap.md)
| Sets the parent object. If the null value is passed, the manager element will only be deleted from the current parent object.

Inherited from [IControl](https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IControl.md#setParent). ||
|#

## Fields details {#field_detail}

### routePanel {#routePanel}

```javascript
{IRoutePanel} routePanel
```

Route panel.