Настройка опций элементов управления

API позволяет настраивать поведение и внешний вид элементов управления. Например, можно изменить размер элементов или задать их позицию на карте.

Получение доступа к элементам управления

Элементы управления размещаются в коллекции, ссылка на которую доступна через поле map.controls.

Получить доступ к нужному элементу управления можно через метод map.controls.get(). В качестве аргумента методу нужно передать ключ нужного элемента, либо ссылку на экземпляр соответствующего класса. Пример:

// Создадим карту с элементом 'Пробки'.
        var myMap = new ymaps.Map('map', {
        zoom: 12,
        center: [59.93772, 30.313622],
        controls: ['trafficControl']
        }), 
        // Получим ссылку на добавленный элемент управления.
        trafficControlObj = myMap.controls.get('trafficControl');
        
        // Выведем в консоль информацию о текущем состоянии элемента.
        console.log(trafficControlObj.state.get('size'));

Как настроить опции элементов управления

Настройки элементов управления называются опциями. Настроить опции для элементов управления можно несколькими способами:

Доступные опции приведены в описании классов соответствующих элементов.

Способ 1. Настройка опций через конструктор элемента

// Создадим экземпляр кнопки "Геолокация" и зададим ей позицию.
// Подробнее о позиционировании элементов.
var geolocationControl = new ymaps.control.GeolocationControl({
        options: {
            float: 'right'
        }
    }),
    // Добавим элемент на карту.
    myMap = new ymaps.Map('map', {
        zoom: 12,
        center: [55.76, 37.64],
        controls: [geolocationControl]
    });

Способ 2. Настройка опций через конструктор карты

Чтобы задать опции через конструктор карты, к названиям опций следует добавить префикс в виде ключа того элемента, для которого задается опция. Например, '_geolocationControl_Size'.

// Создадим карту с элементами «Геолокация» и «Ползунок Масштаба».
var myMap = new ymaps.Map('map', {
        zoom: 12,
        center: [55.76, 37.64],
        controls: ['geolocationControl', 'zoomControl']
    }, {
        // Зададим опции для элементов управления.
        geolocationControlFloat: 'right',
        zoomControlSize: 'large'
    });

Примечание

Если одну и ту же опцию задать и в конструкторе карты, и в конструкторе элемента управления, будет использоваться значение, заданное в конструкторе элемента управления.

Способ 3. Настройка опций через метод map.controls.add()

// Добавим на карту поисковую строку.
myMap.controls.add('searchControl', {
    // Расположим поисковую строку справа.
    float: 'right',
    // Включим возможность искать организации.
    provider: 'yandex#search'
});

Способ 4. Настройка опций через метод control.options.set()

// Создадим карту с элементом 'Пробки'.
var myMap = new ymaps.Map('map', {
        zoom: 10,
        center: [59.93772, 30.313622],
        controls: ['trafficControl']
    }), 
    // Получим ссылку на добавленный элемент управления.
    trafficControlObj = myMap.controls.get('trafficControl');

// Зафиксируем размер элемента, чтобы он не менял свой вид
// при изменении размеров карты. Подробнее про адаптивность.
trafficControlObj.options.set('size', 'small');

Настройка позиции элементов управления

Позицию элементов управления можно задать с помощью следующих опций:

Опция

Тип

Описание

float

String

Сторона, по которой нужно выравнивать элемент управления (см. Пример 1). Доступные значения:

  • 'right' – элемент будет расположен по правой стороне;
  • 'left' – элемент будет расположен по левой стороне;
  • 'none' – для элемента будет задано произвольное расположение (параметр position).

Внимание

Опцию float можно настроить только для тех элементов, которые по умолчанию располагаются в верхней части карты («Геолокация», «Поиск по карте», «Пробки» и др.). Для элементов «Ползунок масштаба» и «Линейка» нельзя установить автоматическую привязку к стороне, то есть для них опция float всегда должна принимать значение 'none'.

При задании опции float элементы управления будут выстраиваться так, чтобы не перекрывать друг друга. Порядок, в котором будут следовать элементы, определяется в опции floatIndex.

floatIndex

Number

Приоритет расположения элемента управления (см. Пример 2). Элемент с максимальным приоритетом находится ближе к указанному в параметре float краю карты. Опция не работает при float='none'.

position

Object

Смещение элемента относительно краев карты (см. Пример 3). Может содержать поля top, bottom, left и right. Опция position работает только при float='none'.

Ниже рассмотрены примеры.

// Пример 1.
// Привяжем элементы «Пробки» и «Геолокация»
// к левому углу.
myMap.controls.add('trafficControl', {
    float: 'left'
});
myMap.controls.add('geolocationControl', {
    float: 'left'
});

// Привяжем кнопку маршрутов к правому углу.
myMap.controls.add('routeButtonControl', {
        float: 'right'
});

// Обратите внимание, что для элементов 
// «Ползунок масштаба» и «Линейка» опция
// float не работает (она должна всегда
// принимать значение 'none').
// Позицию этих элементов можно настроить
// только через параметр `position`.
// см. Пример 3.
myMap.controls.add('rulerControl', {
    // Опция будет проигнорирована.
    float: 'left'
});
myMap.controls.add('zoomControl', {
    float: 'right'
});


// Пример 2. 
// Зададим свой порядок следования элементов.
myMap.controls.add('routeButtonControl', {
    float: 'left',
    // «Панель маршрута» будет первой слева.
    floatIndex: '400'
});
myMap.controls.add('typeSelector', {
    float: 'left',
    // Переключатель слоев карты – второй слева.
    floatIndex: '300'
});
myMap.controls.add('trafficControl', {
    float: 'left',
    // Элемент «Пробки» будет третьим слева.
    floatIndex: '200'
});
myMap.controls.add('geolocationControl', {
    float: 'left',
    // Кнопка геолокации будет самой дальней
    // от левого угла.
    floatIndex: '100'
});


// Пример 3. 
// Зададим произвольное расположение элементов.
myMap.controls.add('trafficControl', {
    float: 'none',
    position: {
        top: '10px',
        left: '45px'
    }
});
 
myMap.controls.add('rulerControl', {
    float: 'none',
    position: {
        bottom: '40px',
        left: '15px'
    }
});

myMap.controls.add('zoomControl', {
    size: 'small',
    float: 'none',
    position: {
        bottom: '50px',
        right: '30px'
    }
});

Предыдущая
Адаптивность элементов управления
Следующая
Маршрутизация