---
metadata:
- name: generator
content: Diplodoc Platform v5.39.1
alternate:
- https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/zoom_layout.md
- https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/v2-1/examples/cases/zoom_layout.md
---
> **Documentation Index:** Fetch the complete configuration index at https://yandex.com.tr/dev/jsapi-v2-1/doc/en/llms.txt
# Custom layout for the zoom control
Open in CodeSandbox
This example creates a custom layout for the map zoom control.
The layout of the control is based on its data, status, and options.
The layout is automatically rebuilt when changes are made to the values of fields, states, or options that are used in its text template.
In response to a user action (a mouse click on the button), the layout can generate special events that are defined in its interface. The control listens to these events on the layout and tries to change its state, data, or options. After the control has implemented changes, the layout is rebuilt based on the updated data.
The events that the zoom slider responds to are listed in the IZoomControlLayout interface.
{% list tabs %}
- index.html
```html
Examples. Custom layout for the zoom control.
```
- zoom_layout.js
```js
ymaps.ready(init);
function init() {
var myMap = new ymaps.Map("map", {
center: [55.751574, 37.573856],
zoom: 9,
controls: [],
}),
// Creating a custom layout for the zoom slider.
ZoomLayout = ymaps.templateLayoutFactory.createClass(
"
" +
"
" +
"
" +
"
",
{
/**
* Redefining methods of the layout, in order to perform
* additional steps when building and clearing the layout.
*/
build: function () {
// Calling the "build" parent method.
ZoomLayout.superclass.build.call(this);
/**
* Binding handler functions to the context and storing references
* to them in order to unsubscribe from the event later.
*/
this.zoomInCallback = ymaps.util.bind(
this.zoomIn,
this
);
this.zoomOutCallback = ymaps.util.bind(
this.zoomOut,
this
);
// Beginning to listen for clicks on the layout buttons.
$("#zoom-in").bind("click", this.zoomInCallback);
$("#zoom-out").bind("click", this.zoomOutCallback);
},
clear: function () {
// Removing click handlers.
$("#zoom-in").unbind("click", this.zoomInCallback);
$("#zoom-out").unbind("click", this.zoomOutCallback);
// Calling the "clear" parent method.
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 %}