Привет, идея примера в том чтобы при построении лейаута подписаться на событие изменения зума карты и при его срабатывании пересчитывать размер метки.
Логику подписки на событие можно сделать где угодно, даже в отдельной функции. Вот пример с двумя разными лейаутами (метками):
var initChip = function (calculateSize, className) {
var map = this.getData().geoObject.getMap();
if (!this.inited) {
this.inited = true;
// Получим текущий уровень зума.
var zoom = map.getZoom();
// Подпишемся на событие изменения области просмотра карты.
map.events.add('boundschange', function () {
// Запустим перестраивание макета при изменении уровня зума.
var currentZoom = map.getZoom();
if (currentZoom != zoom) {
zoom = currentZoom;
this.rebuild();
}
}, this);
}
var options = this.getData().options,
// Получим размер метки в зависимости от уровня зума.
size = calculateSize(map.getZoom()),
element = this.getParentElement().getElementsByClassName(className)[0],
// По умолчанию при задании своего HTML макета фигура активной области не задается,
// и её нужно задать самостоятельно.
// Создадим фигуру активной области "Круг".
circleShape = {type: 'Circle', coordinates: [0, 0], radius: size / 2};
// Зададим высоту и ширину метки.
element.style.width = element.style.height = size + 'px';
// Зададим смещение.
element.style.marginLeft = element.style.marginTop = -size / 2 + 'px';
// Зададим фигуру активной области.
options.set('shape', circleShape);
}
var createChipsLayout = function (calculateSize) {
// Создадим макет метки.
var Chips = ymaps.templateLayoutFactory.createClass(
'<div class="placemark"></div>',
{
build: function () {
Chips.superclass.build.call(this);
initChip.call(this, calculateSize, 'placemark');
}
}
);
return Chips;
};
var createChipsLayout2 = function (calculateSize) {
// Создадим макет метки.
var Chips = ymaps.templateLayoutFactory.createClass(
'<div class="placemark-2"></div>',
{
build: function () {
Chips.superclass.build.call(this);
initChip.call(this, calculateSize, 'placemark-2');
}
}
);
return Chips;
};
ymaps.ready(function () {
var map = new ymaps.Map('map', {
center: [55.755249, 37.617437],
zoom: 4
});
map.geoObjects.add(new ymaps.Placemark([55.755249, 36.317437], {
balloonContent: 'Линейная зависимость размера метки от уровня зума',
hintContent: 'Линейная зависимость'
}, {
iconLayout: createChipsLayout(function (zoom) {
// Минимальный размер метки будет 8px, а максимальный мы ограничивать не будем.
// Размер метки будет расти с линейной зависимостью от уровня зума.
return 4 * zoom + 8;
})
}));
map.geoObjects.add(new ymaps.Placemark([55.755249, 37.617437], {
balloonContent: 'Квадратичная зависимость размера метки от уровня зума',
hintContent: 'Квадратичная зависимость'
}, {
iconLayout: createChipsLayout2(function (zoom) {
// Минимальный размер метки будет 8px, а максимальный 200px.
// Размер метки будет расти с квадратичной зависимостью от уровня зума.
return Math.min(Math.pow(zoom, 2) + 8, 200);
})
}));
});
https://jsfiddle.net/jxryjsh9/11/
В вашем случае я советую вам сделать параметры у лейаута с помощью которых вы будете настраивать его внешний вид и содержание, а логику подписки оставить как в первоначальном примере. Но можно пойти и путем выноса функции инициализации (который я описал выше) и созданием множества лейаутов.