Менеджер для расчета оптимальных отступов от краев контейнера карты.
У каждой карты есть собственный менеджер отступов.
Чтобы добавить область над картой в менеджер, используйте метод addArea.
Метод addArea возвращает объект (аксессор), представляющий занятую прямоугольную область. Аксессор позволяет изменить либо удалить область из менеджера объектов.
Область описывается в виде объекта, который содержит информацию о смещении от краев карты и размер этой области.
В качестве единиц измерения возможно использовать пиксели (px), проценты (%). Проценты вычисляются относительно размеров
контейнера с картой.
Элементы управления поддерживают опцию adjustMapMargin, которая принимет булево значение. Когда значение true, элемент управления регистрирует свои размеры в менеджере отступов карты.
multiRouter.MultiRoute, Clusterer поддерживают опцию useMapMargin, которая позволяет учитывать отступы карты.
Эту опцию поддерживает ряд методов карты, например setBounds, panTo, setCenter.
{% list tabs %}
- index.html
```html
Менеджер отступов
```
- margin_manager.js
```js
ymaps.ready(["util.dom.className"], function () {
var balloonPosition = [55.83866, 37.712326], // Позиция балуна.
Layout = ymaps.templateLayoutFactory.createClass(
[
"Центровать ",
'',
'',
].join(""),
{
build: function () {
Layout.superclass.build.call(this, arguments);
var container = this.getElement();
container.addEventListener("click", function (event) {
var target = event.target;
if (target.tagName.toLowerCase() == "button") {
map.panTo(balloonPosition, {
useMapMargin:
target.className.match(/with-margin/i),
});
}
});
},
}
),
map = new ymaps.Map(
"map",
{
center: [55.85, 37.7124],
zoom: 11,
controls: [],
},
{
balloonContentLayout: Layout,
balloonAutoPan: false,
balloonPanelMaxMapArea: 0,
balloonCloseButton: false,
}
);
// Для элементов на странице указываем область, занимаемую над картой (положение и размер).
// Поддерживаются значения в пикселях (px) и процентах (%).
// Если единица измерения не указана, то считается, что значение в пикселях.
var mapAreas = [
// Панель слева.
{
top: 0,
left: 0,
width: "80px",
height: "100%", // Проценты рассчитываются относительно размеров контейнера с картой.
},
// Блок в правом углу.
{
top: 10,
right: 10,
width: "40%",
height: "40%",
},
];
// Добавляем каждый блок в менеджер отступов.
mapAreas.forEach(function (area) {
// Метод `addArea` менеджера отступов возвращает объект (аксессор), который предоставляет доступ к прямоугольной области в менеджере отступов.
var accessor = map.margin.addArea(area);
// Если у аксессора вызвать метод `remove`, то область будет удалена из менеджера отступов.
// Пример: accessor.remove()
visualizeArea(accessor);
});
map.balloon.open(balloonPosition);
// Контролы поддерживают опцию adjustMapMargin.
// Когда значение true, контрол автоматически добавляет свои размеры в менеджер отступов.
var toggleAreaBtn = new ymaps.control.Button({
data: {
content: "Показать занятые области",
title: "Показать все занятые области из менеджера отступов",
},
options: {
// adjustMapMargin: true,
// Максимальная ширина кнопки.
maxWidth: 300,
},
});
// По клику на карте отображаются все области, добавленные
// в менеджер отступов.
toggleAreaBtn.events.add(["select", "deselect"], function (event) {
var container = document.getElementsByClassName("area-holder")[0],
mode = event.originalEvent.type == "select" ? "remove" : "add";
if (container) {
ymaps.util.dom.className[mode](container, "is-hidden");
}
});
map.controls.add(toggleAreaBtn);
var toggleMarginBtn = new ymaps.control.Button({
data: {
content: "Показать отступы",
title: "Показать отступы карты",
},
options: {
// Разрешаем контролу автоматически добавить свои размеры в менеджер отступов.
// Чтобы элемент управления зарегистрировал себя в менеджере отступов, раскомментируйте строку.
// adjustMapMargin: true,
maxWidth: 200,
},
});
toggleMarginBtn.events.add(["select", "deselect"], function (event) {
var container = document.getElementsByClassName("map-bounds")[0],
mode = event.originalEvent.type == "select" ? "remove" : "add";
if (container) {
ymaps.util.dom.className[mode](container, "is-hidden");
}
});
map.controls.add(toggleMarginBtn);
// Показываем отступы карты.
function updateMapMargins() {
var margin = map.margin.getMargin();
document.getElementsByClassName("map-bounds")[0].style.borderWidth =
margin.join("px ") + "px";
}
updateMapMargins();
map.events.add("marginchange", updateMapMargins);
});
```
- visualizeArea.js
```js
/**
* @fileOverview
* Вспомогательные функции для примера.
*
*/
(function () {
var container;
/**
* Визуальное представление занятой области.
* Добавляем в DOM дерево элемент, представляющий занятую область.
* @param {Object} accessor Экземпляр map.margin.Accessor
*/
window.visualizeArea = function visualizeArea(accessor) {
if (!container) {
container = document.createElement("div");
container.className = "area-holder is-hidden";
document.body.appendChild(container);
}
var markElement = document.createElement("div");
markElement.className = "rect";
// Запрашиваем описание прямоугольной области у асессора и на его основе задаем стили DOM-элемента.
updateElementStyles(markElement, accessor.getArea());
container.appendChild(markElement);
var eventsGroup = accessor.events.group();
eventsGroup.add("change", function () {
updateElementStyles(markElement, accessor.getArea());
});
accessor.events.once("remove", function () {
eventsGroup.removeAll();
container.removeChild(markElement);
markElement = null;
});
};
function updateElementStyles(element, area) {
element.style.cssText = "";
for (var key in area) {
if (area.hasOwnProperty(key)) {
var value = String(area[key]);
if (!isNaN(Number(value[value.length - 1]))) {
value += "px";
}
element.style[key] = value;
}
}
}
})();
```
{% endlist %}