В данном примере создается пользовательский макет элемента управления масштабом карты. Макет элемента управления строится на основе его данных, состояния и опций. Макет автоматически перестраивается при изменении значений полей, состояния или опций, которые используются в его текстовом шаблоне.
В ответ на действия пользователя (клик мышкой по кнопке) макет может генерировать специальные события, описанные в его интерфейсе. Элемент управления слушает эти события на макете и пытается изменить свое состояние, данные или опции. После того, как элемент управления осуществил изменения, макет перестраивается на основе обновленных данных.
Список событий, на которые реагирует ползунок маштаба, описан в интерфейсе IZoomControlLayout.
{% list tabs %}
- index.html
```html
Пользовательский макет элемента изменения масштаба
```
- zoom_layout.js
```js
ymaps.ready(init);
function init() {
var myMap = new ymaps.Map("map", {
center: [55.751574, 37.573856],
zoom: 9,
controls: [],
}),
// Создадим пользовательский макет ползунка масштаба.
ZoomLayout = ymaps.templateLayoutFactory.createClass(
"
" +
"
" +
"
" +
"
",
{
// Переопределяем методы макета, чтобы выполнять дополнительные действия
// при построении и очистке макета.
build: function () {
// Вызываем родительский метод build.
ZoomLayout.superclass.build.call(this);
// Привязываем функции-обработчики к контексту и сохраняем ссылки
// на них, чтобы потом отписаться от событий.
this.zoomInCallback = ymaps.util.bind(
this.zoomIn,
this
);
this.zoomOutCallback = ymaps.util.bind(
this.zoomOut,
this
);
// Начинаем слушать клики на кнопках макета.
$("#zoom-in").bind("click", this.zoomInCallback);
$("#zoom-out").bind("click", this.zoomOutCallback);
},
clear: function () {
// Снимаем обработчики кликов.
$("#zoom-in").unbind("click", this.zoomInCallback);
$("#zoom-out").unbind("click", this.zoomOutCallback);
// Вызываем родительский метод clear.
ZoomLayout.superclass.clear.call(this);
},
zoomIn: function () {
var map = this.getData().control.getMap();
map.setZoom(map.getZoom() + 1, {
checkZoomRange: true,
});
},
zoomOut: function () {
var map = this.getData().control.getMap();
map.setZoom(map.getZoom() - 1, {
checkZoomRange: true,
});
},
}
),
zoomControl = new ymaps.control.ZoomControl({
options: { layout: ZoomLayout },
});
myMap.controls.add(zoomControl);
}
```
{% endlist %}