На проекте используется Яндекс-карта с множеством собственных иконок меток. Эти иконки создаются в виде html-разметки и, в зависимости от ряда условий, к разметке добавляется модификатор (в виде дополнительного класса к html-элементу), который немного изменяет внешний вид иконки.
Все параметры записываются в properties и потом достаются оттуда в build функции шаблона иконки. Мне такой подход с модификаторами очень нравится, т.к. он позволяет ограничиться всего двумя шаблонами, а не несколькими десятками и сводит дублирование кода к минимуму.
Вот примерно так это выглядит:
let placemark = factory.createClass(`
<div class="map-placemark-container">
<div class="map-placemark-small" data-placemark-id="$[properties.objectId]">
<i class="icon-small icon-categories icon-categories-$[properties.categoryId]"></i>
</div>
</div>
`, {
build: function() {
placemark.superclass.build.call(this);
let properties = this.getData().properties,
element = this.getElement().querySelector('.map-placemark-small');
if(properties.get('categoryColor')) {
element.style.backgroundColor = `#${properties.get('categoryColor')}`;
}
if(properties.get('objectStatus')) {
let status = properties.get('objectStatus');
element.classList
.add('map-placemark-small_status', `map-placemark-small_status-${status}`);
}
И все в таком духе. Хочется добавить еще один модификатор, который будет присваиваться тем объектам, на который наведен курсор мыши (и убираться, когда мышь уйдет с объекта). Я уже написал обработчик события mouseenter, и класс объекту присваивается, но сама иконка не перерисовывается.
Поэтому возникают несколько вопросов:
- Возможно ли поменять иконку при наведении в рамках текущего решения? Например, инициировать перерисовку иконки с новыми properties внутри обработчика mouseenter? Если нет, то каким образом грамотнее реализовать смену иконки при наведении? Добавлять выделенную иконку в особую коллекцию? Создать новый шаблон специально для таких элементов и присваивать его iconLayout при наведении?
- Какой подход к оформлению множества разноплановых иконок является наиболее правильным с точки зрения архитектуры карт?
Спасибо!
UPD: вот пример того, как можно решить описанную проблему. Представленный код просто чудовищен (к тому же мне пришлось продублировать полностью макет иконки в новый макет my#hovered-template, так что чудовищен вдвойне), я уверен, что можно сделать это более элегантным способом. Код ниже -- функции-обработчики, искусственно вызывающие перерисовку макета для иконки, когда на нее наведена мышь, и восстанавливающие прошлый макет и активную область иконки, когда мышь уходит с объекта.
placemark.events.add('mouseenter', (e) => {
let placemark = e.get('target');
placemark.properties.set('isHovered', true);
placemark.properties.set('lastShape', placemark.options.get('iconShape'));
placemark.properties.set('lastTemplate', placemark.options.get('iconLayout'));
placemark.options.set('iconLayout', 'my#hovered-placemark');
placemark.options.set('iconShape', {
type: 'Rectangle',
coordinates: [[-25, -25], [25, 25]]
});
});
placemark.events.add('mouseleave', (e) => {
let placemark = e.get('target');
placemark.options.set('iconLayout', placemark.properties.get('lastTemplate'));
placemark.options.set('iconShape', placemark.properties.get('lastShape'));
placemark.properties.unset(['lastShape', 'lastTemplate', 'isHovered']);
});