How to hide other routes on the map when hovering over one of the routes?

Question

JavaScript

Hello, I am adding many routes to the routes collection and then to the map
routes_collection.add(route);
myMap.geoObjects.add(routes_collection);
Please tell me how to make it so that when hovering over one of the routes (or one of the route points), the others are hidden, for example, they become opacity: 0.
Thank you.

Answer 1

Routes can have mouseenter and mouseleave events. Routes also have a visible option. So everything is simple - we hook event handlers to the routes, in which we switch visible:

const routes = new ymaps.GeoObjectCollection();
map.geoObjects.add(routes);

routesData.forEach(n => ymaps.route(n).then(route => {
  route.events.add('mouseenter', onMouseEnter.bind(route));
  route.events.add('mouseleave', onMouseLeave);
  routes.add(route);
}));

function onMouseEnter() {
  routes.each(n => n.options.set('visible', n === this));
}

function onMouseLeave() {
  routes.each(n => n.options.set('visible', true));
}