M
M
Makito2013-08-07 13:42:24
JavaScript
Makito, 2013-08-07 13:42:24

How to influence the content styles inside the custom marker Yandex maps?

It is required to place numbers (1,2,3...) in custom markers on the map. It seems not a problem - we take the iconContent property and stuff the number there, but we still need to fasten the styles for the font inside the marker. Good - we change it through css (which I think is not good, because I think there is some way to hang your css class on a custom marker).
It looks as it should, but - when you hover the mouse cursor, the marker should change its appearance: the background color changes and, accordingly, the font color should change. I hang the mouseenter and mouseleave events on the marker using api, replacing the marker image, while changing the color of the numbers inside the marker through styles.
The next problem is:
Markers are attached to the list of links with addresses, which is displayed next to the map, when hovering over the link, the corresponding marker on the map should react. I programmatically call events on the marker, and then a problem arises - the marker changes the icon, but the styles for the text inside the label are not applied, since they are written in css.
Is it possible to influence the style of the content inside the marker by assigning a css class to the marker when mouse events are triggered on it?

Answer the question

In order to leave comments, you need to log in

1 answer(s)
M
Makito, 2013-08-07
@Makito

In general, dug up the answer. Since such customization is in progress, it is better to use the layout factory from the templateLayoutFactory templates.
Through this constructor, we set the content output template for the label

var commonContent = ymaps.templateLayoutFactory.createClass('<div class="icn_content">$[properties.iconContent]</div>');

and for the hover situation, modify the template a bit by adding a class to the hover wrapper
var hoverContent = ymaps.templateLayoutFactory.createClass('<div class="icn_content hover">$[properties.iconContent]</div>');

then we apply these templates to the styling of our custom markers, through the iconContentLayout property.
We get the desired result - we can style the content inside the marker as we like, and when the events are called programmatically, the styles on the markers are processed correctly.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question