Клуб API Карт

Тянущиеся метки со своими стилями

kirilloid
11 июня 2013, 11:28

Мне нужно сделать тянущиеся под контент метки со своим background-image.
Конечно, есть множество вариантов. Например:

var sheet = [].filter.call(document.styleSheets, function(sheet) {
    return sheet.cssRules[0].
selectorText === ".ymaps-map";
})[0];
[].filter.call(sheet.cssRules, function(rule) {
    return rule.selectorText === ".ymaps-b-placemark_theme_green .ymaps-b-placemark__sprite";
})[0].style.backgroundImage = "/path/to/my/grid9image.png";

Но это что-то извращённое, к тому же я ограничен существующими preset-ами, а мне надо создать 20 разных видов.
Можно хакать «статически» in-place для каждой конкертной метки, но это тоже не лучший вариант.
Пробовал утаскивать свойство constructor из существующго layout для метки созданной по preset-у — не работает.
Читать исходный код в минифицированном виде (из-за имён переменных) малополезно.
В документации сказано, что есть интерфейс ILaouyt, но что в нём должно быть и как реализовывать, не сказано.
Буду рад за любые наводки (включая нормальные исходники).

* поддержка старых браузеров не нужна, так что достаточно HTML структуры на одном элементе — тянучку сделаю через svg / 
pseudo-after / border-radius multiple backgrounds / border-image.

3 комментария
Подписаться на комментарии к посту
код в непожатом виде будет при подключении АПИ с параметром &mode=debug
Прочитайте документацию на класс TemplateLayoutFactory

Спасибо за ссылки, хотя это не совсем то. templateLayoutFactory позволяет изменить iconContentLayout, т.е. лэйаут содержимого иконки. А мне нужно что-то типа своего iconLayout, которое создаёт всю эту структуру из ymaps-тегов.
* хотя это позволило понять, как сделать решение с подхачиванием стилей прям на месте, дописать в конструкторе
node = this.getElement() ;
while (!node.classList.contains("ymaps-b-placemark")) node = node.parentNode;
[].forEach.call(node.querySelectorAll(".ymaps-b-placemark__sprite"), function (el) {
el.style.backgroundImage = "url('/path/to/my/grid9-image.png')";
}) ;
Почитаю-ка я нормальный неминицифированный код.

Если глянуть повнимательнее здесь, то можно найти и iconLayout